/* Copied from Policy365 (FrogCover/wwwroot/css/base.css) on 14 October 2026: the brand's element rules and shared parts. Change it there, then copy it here again. */
/* ==========================================================================
   Policy365: the shared base. Loaded by the customer site and the broker app after
   tokens.css and before their own stylesheet. What is here is what makes the
   two behave the same even where they look different (see
   docs/design-consistency.md): the layer order, the element rules, the small
   set of variants, and the components both apps use.

   The layers, in order of who wins:
     tokens      — custom properties only (tokens.css declares none as rules,
                   so this layer is a placeholder for anything that does)
     elements    — rules on plain elements: button, input, [hidden], focus…
                   A bare <button> is already the right button.
     variants    — a handful of classes that pick a variant of an element:
                   .icon (the circle), .is-primary, .is-secondary, .is-danger,
                   .is-stacked, .is-compact, .mono, .label; and the shared
                   small parts (.check, .field, .note).
     components  — layout: where things sit. Each app's own stylesheet is this
                   layer. A component may position and size, and may switch a
                   variant on; it should not restate colour, font, radius or
                   hover for anything that has an element rule.
   A later layer wins over an earlier one whatever the selectors' specificity,
   so an element rule can't be beaten by accident — only on purpose, from the
   components layer, and that shows. !important runs the other way: an
   !important in an earlier layer beats everything, which is exactly what
   [hidden] needs.

   Type is rem, always (the tokens); spacing, tap targets and hairlines are px;
   breakpoints em.
   ========================================================================== */

@layer tokens, elements, variants, components;

/* ---------- elements ---------- */
@layer elements {
  *, *::before, *::after { box-sizing:border-box; }

  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

  /* every scrolling area takes the theme's colours instead of the browser's default scrollbar, so nothing looks like a
     different app in dark mode. scrollbar-color/-width inherit from html; the ::-webkit-scrollbar pseudo-elements
     don't, so * reaches every box at once. */
  /* the thumb is the control border colour seen through (the owner, 29 September 2026: solid, it was far too dark in
     the light theme), a little more solid under the pointer */
  html{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--control-border) 40%, transparent) transparent; }
  *::-webkit-scrollbar{ width:10px; height:10px; }
  *::-webkit-scrollbar-track{ background:transparent; }
  *::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--control-border) 40%, transparent); border-radius:var(--radius-full); }
  *::-webkit-scrollbar-button{ display:none; }
  @media (hover:hover){
    *::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--control-border) 70%, transparent); }
  }

  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:var(--font-body); font-size:var(--text-base); line-height:1.5;
  }

  /* one weight everywhere: hierarchy comes from size, not boldness. No default margins on text either — spacing is
     the container's job (a flex gap, a padding), never the browser's guess. */
  h1, h2, h3, h4, h5, h6, p{ margin:0; }
  h1, h2, h3, h4, h5, h6, strong, b, th{ font-weight:400; }
  a{ color:inherit; }

  :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  /* the hidden attribute always hides — an !important in the first layer, so no component's display:flex can beat it */
  [hidden]{ display:none !important; }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
  }

  /* ----- controls -----
     A control takes the page's font, never the browser's. A button is the secondary button by default: an outlined tile
     the height of a tap target, with the site's radius, that tints on rollover (mouse only — on a touchscreen :hover
     sticks after a tap, so the tap feedback is :active, which clears when the finger lifts) and dims by colour, not
     opacity, when disabled. .button gives the same to a link. Variants change the fill (.is-primary), the outline
     (.is-secondary, .is-danger) or the shape (.icon). */
  button, input, select, textarea{ font:inherit; color:inherit; margin:0; }
  button, .button{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-height:var(--target); padding:var(--cta-pad-y) var(--cta-pad-x);
    border:1px solid var(--control-border); border-radius:var(--radius-lg);
    background:var(--surface); color:var(--text);
    cursor:pointer; text-align:center; text-decoration:none;
    transition:background-color .15s, border-color .15s, color .15s;
  }
  @media (hover:hover){
    button:not(:disabled):hover, .button:hover{ background:color-mix(in srgb, var(--accent) 6%, var(--surface)); }
  }
  button:not(:disabled):active, .button:active{ background:color-mix(in srgb, var(--accent) 9%, var(--surface)); }
  button:disabled{ color:var(--text-muted); border-color:var(--border); cursor:not-allowed; }

  /* a text field: full width, a tap target tall, the control outline (3:1 against the surface), the small radius -
     a box to type in reads as a box, and sits apart from a button's rounder corners. 16px text stops iOS zooming
     the page when it's focused. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea{
    width:100%; min-height:var(--target); padding:var(--field-pad);
    background:var(--surface); color:var(--text);
    border:1px solid var(--control-border); border-radius:var(--radius-sm);
    font-size:1rem;
  }
  textarea{ resize:vertical; min-height:80px; }
  input:disabled, select:disabled, textarea:disabled{ background:var(--placeholder); cursor:not-allowed; }
}

/* ---------- variants ---------- */
@layer variants {
  /* hidden from sight, still read by screen readers (both names: the site says visually-hidden, the broker sr-only) */
  .visually-hidden, .sr-only{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
    overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap;
  }

  /* small tracked capitals: every small label, tab, nav row and breadcrumb is set this way (the class name is from when
     it was a mono face; the site has one face now) */
  .mono{ font-family:var(--font-body); text-transform:uppercase; letter-spacing:.05em; }
  /* a label: the recipe at the smallest size, muted. Inside a button it is the button's own text, one size up. */
  .label{ font-family:var(--font-body); font-size:var(--text-3xs); text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); }
  button .label, .button .label{ font-size:var(--text-sm); color:inherit; }

  /* ----- the circle: an icon button, or any small round mark (a chevron, a status light). Any button in a header bar
     is one without asking. Dimmed by colour, not opacity — colour is what an svg's stroke="currentColor" picks up. ----- */
  .icon, .app-header button, .bar button{
    --size:var(--target);
    width:var(--size); height:var(--size); min-height:0; padding:0; flex:none;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--control-border); border-radius:50%;
    background:none; color:color-mix(in srgb, var(--text) 80%, transparent);
    transition:color .15s, border-color .15s, background-color .15s;
  }
  .icon--sm{ --size:32px; }
  .icon--xs{ --size:28px; }
  @media (hover:hover){
    /* rollover: full strength, same colour — not green */
    :is(.icon, .app-header button, .bar button):is(button, a):not(:disabled):hover{ border-color:var(--text-muted); color:var(--text); background:none; }
  }
  /* tap: green, and only then */
  :is(.icon, .app-header button, .bar button):is(button, a):not(:disabled):active{ border-color:var(--accent); color:var(--accent); background:none; }
  :is(.icon, .app-header button, .bar button):disabled{ color:var(--text-muted); border-color:var(--border); }

  /* ----- fills and outlines ----- */
  .is-primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }
  @media (hover:hover){
    .is-primary:not(:disabled):hover{
      background:color-mix(in srgb, var(--accent) 85%, var(--text));
      border-color:color-mix(in srgb, var(--accent) 85%, var(--text));
      color:var(--accent-contrast);
    }
  }
  .is-primary:not(:disabled):active{
    background:color-mix(in srgb, var(--accent) 80%, var(--text));
    border-color:color-mix(in srgb, var(--accent) 80%, var(--text));
    color:var(--accent-contrast);
  }
  /* disabled: the fill fades toward the surface (colour, not opacity, like everything else) */
  .is-primary:disabled{
    background:color-mix(in srgb, var(--accent) 35%, var(--surface));
    border-color:color-mix(in srgb, var(--accent) 35%, var(--surface));
    color:var(--accent-contrast);
  }
  .is-secondary{ border-color:var(--accent); color:var(--accent); }
  /* disabled (the owner, 1 October 2026): no fill, and its text and outline at half strength, so a Back that can't be
     pressed reads as one. Colour mixed with transparent, not opacity, like every other disabled look here */
  .is-secondary:disabled{ background:none; border-color:color-mix(in srgb, var(--accent) 50%, transparent); color:color-mix(in srgb, var(--accent) 50%, transparent); }
  /* the one red control: a big decision (end, close, delete) — the outline stays, the mark goes red */
  .is-danger{ color:var(--danger); }

  /* two lines of label, one under the other, centred: the button's text, then small print at the base label size —
     full contrast on a filled button, muted on an outlined one */
  .is-stacked{ flex-direction:column; gap:2px; text-align:center; }
  .is-stacked .label + .label{ font-size:var(--text-3xs); }
  .is-secondary.is-stacked .label + .label{ color:var(--text-muted); }
  /* exactly a tap target tall, no vertical padding: a button in a conversation, beside pills of the same height */
  .is-compact{ height:var(--target); padding-block:0; }

  /* ----- form parts ----- */
  .field{ display:flex; flex-direction:column; gap:4px; }
  .field > label{ font-size:var(--text-sm); color:var(--text-muted); }

  /* check: a whole-row tick box — the label is the tap target. Two grid cells (the box, the wording), each centred
     against the other, so a single-line label centres on the box and a wrapped one centres on its own block. Drawn
     entirely in CSS, not left to the browser's native checkbox (mobile Safari renders that inconsistently): the element
     is still a real checkbox underneath — keyboard, screen readers and form submission all work as before, only the
     paint is custom. */
  .check{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; cursor:pointer; font-size:var(--text-sm); padding:10px; }
  @media (min-width:64em){
    .check{ font-size:inherit; }
  }
  /* the box is drawn by us (appearance none), sized in em so it follows the text; the tick is a clip-path shape filled
     with the accent, scaled in over 120ms (after Stephanie Eckles' pure-CSS checkbox, moderncss.dev, the owner's pick on
     30 September 2026) — no image, crisp at any zoom */
  .check input{
    appearance:none; -webkit-appearance:none;
    width:1.25em; height:1.25em; margin:0; flex:none;
    display:grid; place-content:center;
    border:1.5px solid var(--control-border); border-radius:var(--radius-sm);
    background:var(--surface); cursor:pointer;
  }
  .check input::before{
    content:""; width:0.75em; height:0.75em;
    clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform:scale(0); transition:transform 120ms ease-in-out;
    background:var(--state, var(--accent));
  }
  .check input:checked{ border-color:var(--state, var(--accent)); }
  .check input:checked::before{ transform:scale(1); }
  @media (prefers-reduced-motion:reduce){ .check input::before{ transition:none; } }
  /* focus on the box marks the whole row: :focus, not :focus-visible, on purpose — when a dialog opens, focus is
     placed by script, and browsers only draw a :focus-visible ring for that after a key press */
  .check:has(input:focus){ border-color:var(--state, var(--accent)); box-shadow:0 0 0 1px var(--state, var(--accent)); }
  .check input:focus{ outline:none; }

  /* ----- the info box: a small tinted aside with an "i" in a circle. The wireframes' info note; a line about a
     conversation itself (someone joined or left, nobody was free, it closed) is the same thing. ----- */
  .note{
    display:flex; align-items:flex-start; gap:8px;
    background:var(--placeholder); border-radius:var(--radius-md); padding:var(--field-pad);
    font-style:italic; font-size:var(--text-sm); line-height:1.4; color:var(--text);
  }
  .note::before{
    content:"i"; flex:none; width:16px; height:16px; margin-top:1px; border-radius:50%;
    border:1.5px solid var(--text-muted);
    display:flex; align-items:center; justify-content:center;
    font-style:normal; font-family:var(--font-body); font-size:var(--text-3xs);
  }
}

/* ---------- components both apps use ---------- */
@layer components {
  /* accordion: rows with a title left and a circled chevron right, one open at a time (or none). The panel is a one-row
     grid whose row goes from 0fr to 1fr, so it opens to exactly its content's height with no measuring; the inner box
     (min-height 0, overflow hidden) is what lets it shrink to nothing, and padding lives on the body inside it, or the
     panel could never close fully. A closed panel is visibility:hidden once the animation ends, so nothing in it can be
     tabbed to. The script toggles is-open on the item and aria-expanded on the header. */
  .accordion__item{ flex:none; border-bottom:1px solid var(--border); }
  .accordion__title{ margin:0; }
  .accordion__header{
    width:100%; min-height:3rem; padding:0 var(--blockpad);
    display:flex; align-items:center; justify-content:flex-start; gap:8px;
    background:none; border:0; border-radius:0; border-bottom:1px solid transparent; color:var(--text); text-align:left;
    font-family:var(--font-body); font-size:var(--text-sm); text-transform:uppercase; letter-spacing:.05em;
  }
  /* the open row keeps the rollover look for as long as it's open, and gets a rule under its header */
  .accordion__header[aria-expanded="true"]{
    border-bottom-color:var(--border);
    background:color-mix(in srgb, var(--accent) 10%, var(--surface));
  }
  @media (hover:hover){
    .accordion__header:hover{ background:color-mix(in srgb, var(--accent) 10%, var(--surface)); }
  }
  .accordion__header:active{ background:color-mix(in srgb, var(--accent) 10%, var(--surface)); }
  /* the ring goes inside the row: the list scrolls, so a ring outside the first row's top edge was being clipped */
  .accordion__header:focus-visible{ outline-offset:-3px; }
  .accordion__label{ flex:1 1 auto; }
  /* the chevron sits in a small circle (.icon .icon--sm in the markup); the arrow itself is drawn with borders — down
     closed, up open — and the circle takes the button's rollover, since it isn't a button itself */
  .accordion__chevron::after{
    content:""; width:7px; height:7px; margin-top:-3px;
    border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:rotate(45deg); transition:transform .25s ease, margin .25s ease;
  }
  .accordion__header[aria-expanded="true"] .accordion__chevron{ border-color:var(--text-muted); color:var(--text); }
  .accordion__header[aria-expanded="true"] .accordion__chevron::after{ transform:rotate(225deg); margin-top:3px; }
  @media (hover:hover){
    .accordion__header:hover .accordion__chevron{ border-color:var(--text-muted); color:var(--text); }
  }
  .accordion__header:active .accordion__chevron{ border-color:var(--accent); color:var(--accent); }
  .accordion__panel{
    display:grid; grid-template-rows:0fr; visibility:hidden;
    transition:grid-template-rows .25s ease, visibility 0s .25s;
  }
  /* visibility:inherit, not visible: an explicit "visible" would override a closed drawer's visibility:hidden, leaving
     the panel's fields focusable off-screen */
  .accordion__item.is-open > .accordion__panel{ grid-template-rows:1fr; visibility:inherit; transition-delay:0s; }
  .accordion__inner{ min-height:0; overflow:hidden; }
  .accordion__body{ padding:var(--blockpad); display:flex; flex-direction:column; gap:var(--blockpad); }
  .accordion__body p{ color:var(--text-muted); }
}