/* Floemo design tokens and shell, taken from docs/mockups/index.html (v3.5). Every colour, radius,
   spacing and font size of the screens comes from the custom properties below: the light values are
   the mockup's, and the dark block redefines the same names for a viewer whose system asks for dark
   (the mockup itself is light only). Mobile first; desktop >= 900 px with the side rail (pinned or
   hidden as a dock, decision 0045). The shell has no header and no column (decision 0139): the content takes the whole
   width beside the rail, or of the phone, with 16 px inside it (12 px on a phone). */
:root{
  color-scheme: light dark;
  --fc-shop:#c2410c; --fc-session:#6d28d9; --fc-platform:#4b5563; /* faces (0103): dark enough for white in both themes */
  --badge:#d92d20;                      /* the count on the chat bubble (0104) */
  --brand:#1d6b5a; --brand-600:#155446; --brand-50:#e8f3ef; --brand-100:#cfe6dd;
  --brand-mono:#1d6b5a;                 /* monogram / logo disc: always dark enough for white on it */
  --on-brand:#ffffff;                   /* text and icons on a --brand ground */
  --ink:#1b1f23; --ink-2:#4b5563; --ink-3:#6b7280;
  --on-ink:#ffffff;                     /* text on an --ink ground (active tab, filter, tooltip) */
  --line:#e5e7eb; --line-2:#d1d5db;
  --bg:#ffffff;                         /* card, bar, field and button surface */
  --bg-2:#f6f7f8;                       /* page ground, rail, panel bodies */
  --bg-3:#eef0f2;                       /* chip and hover ground */
  --green:#1e7d46; --green-50:#e6f4ec; --green-line:#bfe3cc;
  --amber:#b45309; --amber-50:#fdf3e1; --amber-line:#f3dba8;
  --red:#b42318; --red-50:#fbe9e7; --red-line:#f2c2bb;
  --blue:#175cd3; --blue-50:#e6efff; --blue-line:#c7d9fb;
  --violet:#6d28d9; --violet-50:#efe9fb; --violet-line:#d9c8f7;
  --shadow-card:0 2px 10px rgba(0,0,0,.05);
  --shadow-rail:6px 0 24px rgba(0,0,0,.18);
  --shadow-pop:0 8px 24px rgba(0,0,0,.2);
  --knob:#ffffff; --knob-shadow:0 1px 2px rgba(0,0,0,.25);
  --logo-bg:#ffffff;                    /* a client's logo (0124): drawn for paper, on a paper ground in both themes */
  --scrim:rgba(17,20,26,.45);           /* the shade over the page behind the phone's side menu (0133) */
  --radius:14px; --radius-s:10px;
  --tab-h:64px;
  --top-h:0px;                          /* what stays fixed over the top of the page: nothing, or the phone's ☰ (0139) */
  /* The colours of a chart (decision 0107), which text never wears: four series (the dataviz method's reference slots,
     validated on these surfaces: worst adjacent CVD ΔE 9.1, normal 22.9; two sit under 3:1, so every chart has its table
     and its legend), the fold of the rest, and the four steps of a request (one teal ramp, monotone, light end 2.2:1). */
  --viz-1:#2a78d6; --viz-2:#eb6834; --viz-3:#1baf7a; --viz-4:#eda100; --viz-o:#9ca3af;
  --viz-f1:#60bfa4; --viz-f2:#3ea085; --viz-f3:#138168; --viz-f4:#00664f;
}
/* Dark: the same token names, so no rule below needs to know which theme is on. */
@media (prefers-color-scheme: dark){
  :root{
    --brand:#3fa98d; --brand-600:#55c0a3; --brand-50:#15322b; --brand-100:#1f4f43;
    --on-brand:#0b1a15;
    --ink:#e7eaee; --ink-2:#b4bcc6; --ink-3:#8b939e;
    --on-ink:#11141a;
    --line:#262b31; --line-2:#3a414a;
    --bg:#171a1e; --bg-2:#0f1216; --bg-3:#232830;
    --green:#57c98a; --green-50:#112c1e; --green-line:#20503a;
    --amber:#e0a33c; --amber-50:#2e2310; --amber-line:#59421a;
    --red:#f0837a; --red-50:#2f1917; --red-line:#5a2a26;
    --blue:#84aef8; --blue-50:#141f33; --blue-line:#2a3d63;
    --violet:#b394f7; --violet-50:#211a35; --violet-line:#3d3163;
    --shadow-card:0 2px 10px rgba(0,0,0,.5);
    --shadow-rail:6px 0 24px rgba(0,0,0,.6);
    --shadow-pop:0 8px 24px rgba(0,0,0,.6);
    --knob:#f2f4f7; --knob-shadow:0 1px 2px rgba(0,0,0,.5);
    --logo-bg:#f2f4f7;
    --scrim:rgba(0,0,0,.6);
    /* the same series stepped for the dark surface (worst adjacent CVD ΔE 8.4, normal 19.8, all over 3:1), and the ramp
       from dark to light (dark end 2.8:1) */
    --viz-1:#3987e5; --viz-2:#d95926; --viz-3:#199e70; --viz-4:#c98500; --viz-o:#6b7280;
    --viz-f1:#006f57; --viz-f2:#238a71; --viz-f3:#45a68b; --viz-f4:#67c6aa;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg-2);color:var(--ink);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100vh}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
:focus{outline:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
button,select,input,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:700;line-height:1.25}
h1{font-size:22px;letter-spacing:-0.2px}
h2{font-size:16px}
h3{font-size:14px}
p{margin:0 0 8px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.9em;overflow-wrap:anywhere}
.muted{color:var(--ink-3)}
.small{font-size:13px}
.one{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wrap{white-space:normal!important}
.hide-s{display:none}@media (min-width:600px){.hide-s{display:inline}}
.show-s{display:inline}@media (min-width:600px){.show-s{display:none}}
/* the same pair for what only fits on a wide screen (the long labels of the chat header) */
.hide-l{display:none}@media (min-width:1100px){.hide-l{display:inline}}
.show-l{display:inline}@media (min-width:1100px){.show-l{display:none}}
.skip{position:absolute;left:-9999px;top:8px;background:var(--brand);color:var(--on-brand);padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Shell: mobile first ---------- */
.app{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr)}
.sidebar{display:none}
.shell{display:flex;flex-direction:column;min-height:100vh;min-width:0}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;color:var(--brand);letter-spacing:-0.2px}
.brand:hover{text-decoration:none}
.brand .logo{width:28px;height:28px;border-radius:8px;background:var(--brand-mono);display:inline-flex;align-items:center;justify-content:center;flex:none}
.brand small{display:block;font-weight:500;font-size:11px;color:var(--ink-3);letter-spacing:0}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--brand-50);color:var(--brand);font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--brand-100);flex:none}
.avatar:hover{text-decoration:none}
main{flex:1;padding:14px 12px calc(var(--tab-h) + 20px)}
main:focus{outline:none}
.tabbar{position:fixed;left:0;right:0;bottom:0;height:var(--tab-h);background:var(--bg);border-top:1px solid var(--line);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;z-index:30;padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;color:var(--ink-3);min-height:44px;position:relative}
.tabbar a:hover{text-decoration:none}
.tabbar a.active{color:var(--brand);font-weight:700}
.tabbar svg{width:22px;height:22px}
/* The side menu (decision 0133). A role's bar of more items than fit at the foot of a phone is not drawn there: a menu
   button opens a drawer from the left, over the page, with every item of the bar, its icon and its name, the open one
   marked as in the rail. Below the computer's width the page has no bar at its foot, so whatever kept room for it (the
   foot of #main, the chat bubble) keeps none. The computer's rail is the same.
   With no header (decision 0139) the button stands alone, fixed at the top left of the screen on a card of its own, so it
   reads over whatever scrolls under it; the first line of each page leaves it its place (--top-h is what it covers), and
   a chat that takes the whole screen, with its own way back, hides it as it hid the header. */
.navbtn,.drawer-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--ink-2);cursor:pointer}
.navbtn{position:fixed;top:12px;left:12px;z-index:25;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-card)}
.navbtn:hover,.drawer-x:hover{background:var(--bg-3);color:var(--ink)}
.navbtn svg{width:24px;height:24px}
.drawer-x svg{width:22px;height:22px}
@media (max-width:899px){
  body.nav-drawer{--tab-h:0px;--top-h:56px}
  /* the first line of the page starts beside the button: a page's header, or the head of a list that fills the screen */
  body.nav-drawer main > .page-head:first-child,body.nav-drawer main > :first-child > .page-head:first-child{min-height:44px;padding-left:52px}
  /* in the narrower line the title keeps its room, and what stood at its right (a chip, a button) goes under it */
  body.nav-drawer main > .page-head:first-child > .grow,body.nav-drawer main > :first-child > .page-head:first-child > .grow{flex:1 1 200px}
  body.nav-drawer main > :first-child:not(.page-head):not(:has(> .page-head:first-child)):not(.rd):not(.sp){margin-top:50px}
  body.nav-drawer .rd-head,body.nav-drawer .sp-head{padding-left:62px}
}
.drawer{position:fixed;inset:0 auto 0 0;width:min(304px,calc(100vw - 56px));height:100%;max-width:none;max-height:none;margin:0;padding:0 12px calc(12px + env(safe-area-inset-bottom));border:0;border-right:1px solid var(--line);background:var(--bg);color:var(--ink);box-shadow:var(--shadow-rail);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;transform:translateX(-100%);transition:transform .2s ease,overlay .2s ease allow-discrete,display .2s ease allow-discrete}
.drawer:popover-open{display:flex;flex-direction:column;gap:2px;transform:none}
@starting-style{.drawer:popover-open{transform:translateX(-100%)}}
.drawer::backdrop{background:var(--scrim)}
.drawer-head{flex:none;display:flex;align-items:center;gap:8px;min-height:56px;margin:0 -6px 8px 0;padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--line)}
.drawer-head .brand{flex:1;min-width:0;padding-left:2px}
.drawer a{flex:none;display:flex;align-items:center;gap:14px;min-height:48px;padding:10px 12px;border-radius:10px;color:var(--ink-2);font-weight:500;overflow-wrap:anywhere}
.drawer a:hover{background:var(--bg-3);text-decoration:none}
.drawer a.active{background:var(--brand-50);color:var(--brand);font-weight:700}
.drawer a svg{flex:none;width:22px;height:22px}
.drawer a span{min-width:0}
@media (prefers-reduced-motion:reduce){.drawer{transition:none}}
@media (min-width:900px){.navbtn{display:none}.drawer:popover-open{display:none}}
/* A browser without popovers (before Chrome 114 or Safari 17) cannot open the drawer: it lists the items under the page. */
@supports not selector(:popover-open){
  .navbtn,.drawer-head{display:none}
  .drawer{position:static;display:flex;flex-direction:column;width:auto;height:auto;margin:0 12px 20px;padding:6px;transform:none;border:1px solid var(--line);border-radius:var(--radius);box-shadow:none}
  @media (min-width:900px){.drawer{display:none}}
}

@media (min-width:900px){
  .app{grid-template-columns:220px minmax(0,1fr);background:var(--bg)}
  .sidebar{display:flex;flex-direction:column;background:var(--bg-2);border-right:1px solid var(--line);padding:16px 12px}
  .sidebar .brand{padding:6px 10px 18px}
  .sidebar nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--ink-2);font-weight:500;min-height:44px}
  .sidebar nav a:hover{background:var(--bg-3);text-decoration:none}
  .sidebar nav a.active{background:var(--brand-50);color:var(--brand);font-weight:700}
  .sidebar nav svg{width:20px;height:20px}
  .sidebar .foot{font-size:12px;color:var(--ink-3);padding:10px}
  .tabbar{display:none}
  main{padding:16px 16px 24px}

  /* Fixed height, scroll per panel (decision 0046): the page never scrolls; the rail and #main do. */
  html,body{height:100vh;height:100dvh;min-height:0;overflow:hidden}
  .app{height:100vh;height:100dvh;min-height:0;overflow:hidden;position:relative}
  .shell{height:100%;min-height:0;overflow:hidden;grid-column:2;grid-row:1}
  .sidebar{position:static;height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;grid-column:1;grid-row:1}
  .sidebar nav{flex:none}
  .sidebar .rail-sp{flex:1;min-height:8px}
  main{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}

  /* Dock mode (decision 0045, as the macOS dock): hidden, nothing shows and the content takes the
     full width; the rail waits at translateX(-100%) and slides in OVER the content when the mouse
     reaches the left-edge strip (or focus enters it), hiding again after a short delay. */
  body.dock .app{grid-template-columns:0 minmax(0,1fr)}
  body.dock .sidebar{position:absolute;left:0;top:0;bottom:0;width:220px;z-index:40;box-shadow:none;transform:translateX(-100%);transition:transform .18s ease,box-shadow .18s ease}
  body.dock.rail-peek .sidebar,body.dock .sidebar:hover,body.dock .sidebar:focus-within{transform:translateX(0);box-shadow:var(--shadow-rail)}
  body.dock .rail-edge{display:block;position:absolute;left:0;top:0;bottom:0;width:12px;z-index:39}
  @media (prefers-reduced-motion:reduce){body.dock .sidebar{transition:none}}
}
.rail-edge{display:none}
.rail-btn{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:var(--ink-3);font-size:13px;font-weight:600;cursor:pointer;min-height:44px;text-align:left}
.rail-btn:hover{background:var(--bg-3);color:var(--ink-2)}
.rail-btn svg{width:20px;height:20px;flex:none}

/* ---------- Components (the mockup's) ---------- */
.page-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.page-head .grow{flex:1;min-width:0}
.page-head .sub{color:var(--ink-3);font-size:13px;margin-top:2px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* A «·» and the item after it wrap as one, so a separator never hangs at the end of a line (Bernat's screenshots, 2026-10-19). */
.page-head .sub .sep-i{display:inline-flex;gap:6px;align-items:center;min-width:0}
.page-head h1 .info{margin-left:8px;vertical-align:middle}
.back{display:inline-flex;align-items:center;gap:4px;color:var(--ink-2);font-size:14px;min-height:44px;padding-right:6px}
.back:hover{text-decoration:none;color:var(--brand)}
.back svg{width:20px;height:20px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px;min-width:0}
.card > h2{margin-bottom:10px;display:flex;align-items:center;gap:8px}
.count{font-size:12px;font-weight:700;background:var(--bg-3);color:var(--ink-2);border-radius:999px;padding:2px 8px}
.grid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:12px}
@media (min-width:600px){.grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}
.grid .card{margin:0;height:100%}
.card > .grid:last-child{margin-bottom:0}
.list{list-style:none;margin:0;padding:0}
.list li{border-top:1px solid var(--line)}
.list li:first-child{border-top:0}
.row{display:flex;gap:12px;align-items:center;min-height:52px;padding:10px 0;color:inherit}
.row.top{align-items:flex-start}
.row .body{flex:1;min-width:0}
.row .title{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .meta{font-size:13px;color:var(--ink-3);display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12px;color:var(--ink-3);max-width:42%;text-align:right}
.kv{display:grid;grid-template-columns:minmax(90px,max-content) 1fr;gap:6px 12px;margin:0;font-size:14px}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.sub-h{margin:10px 0 6px;font-size:14px}
.lead{font-size:17px;font-weight:600;margin:0 0 6px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid transparent;white-space:nowrap;line-height:18px;max-width:100%}
.chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.chip.gray{background:var(--bg-3);color:var(--ink-2);border-color:var(--line-2)}
.chip.blue{background:var(--blue-50);color:var(--blue);border-color:var(--blue-line)}
.chip.brand{background:var(--brand-50);color:var(--brand);border-color:var(--brand-100)}
.chip.green{background:var(--green-50);color:var(--green);border-color:var(--green-line)}
.chip.amber{background:var(--amber-50);color:var(--amber);border-color:var(--amber-line)}
.chip.red{background:var(--red-50);color:var(--red);border-color:var(--red-line)}
.chip.violet{background:var(--violet-50);color:var(--violet);border-color:var(--violet-line)}
.chip.outline{background:var(--bg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);font-weight:600;cursor:pointer;font-size:15px;color:var(--ink);text-decoration:none}
.btn:hover{background:var(--bg-2);text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn.primary:hover{background:var(--brand-600)}
.btn.sm{min-height:36px;padding:0 12px;font-size:14px}
.btn.xs{min-height:30px;padding:0 10px;font-size:13px;border-radius:8px}
.btn svg{width:16px;height:16px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;max-width:420px}
.field label{font-size:13px;font-weight:600;color:var(--ink-2)}
.field .hint{font-size:12px;color:var(--ink-3)}
.field select,.field input,input[type=date]{padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg);min-height:44px;width:100%;color:var(--ink)}
.notice{background:var(--amber-50);color:var(--amber);border-radius:10px;padding:10px 12px;font-size:14px;margin-bottom:12px}
/* A client's install hold (decision 0130): on the client card's head and in a request's facts; red when the file does not read. */
.installed.held{color:var(--amber)}
.installed.problem,.rq-hold.problem{color:var(--red)}
.notice.ok{background:var(--green-50);color:var(--green)}
.notice ul{margin:4px 0 0;padding-left:0}
.ok{color:var(--green)}
ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{padding:6px 0;border-top:1px solid var(--line)}
ul.plain li:first-child{border-top:0}
.tag{display:inline-block;background:var(--bg-3);border-radius:6px;padding:1px 7px;font-size:12px;color:var(--ink-2);margin-right:4px;font-weight:600;vertical-align:middle}
.empty{padding:12px;text-align:center;color:var(--ink-3);font-size:14px}
.empty.left{text-align:left;padding:4px 0 10px}
.grp{margin:14px 0 8px;font-size:12px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:8px}
.card > .grp:first-of-type,.card > h2 + .grp{margin-top:0}
.role{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding:10px 0;font-size:14px}
.role:first-of-type{border-top:0}
.role .b{flex:1;min-width:0}.role .b b{display:block}

/* monograms / logos: colour by class (the CSP forbids inline styles) */
.mg{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--c,var(--brand-mono));color:#fff;font-weight:800;font-size:18px;flex:none;letter-spacing:0}
/* .sq is also the shop's question card (below): the monogram keeps its own ground and box, whatever the card says */
.mg.sq{border-radius:11px;margin:0;padding:0;border:0;box-shadow:none;background:var(--c,var(--brand-mono))}
.mg.s{width:26px;height:26px;font-size:12px;border-radius:50%}.mg.s.sq{border-radius:7px}
.mg.l{width:56px;height:56px;font-size:26px}.mg.l.sq{border-radius:16px}
.mg svg{width:60%;height:60%}
.mg.self{--c:var(--brand-mono)}.mg.gray{--c:#4b5563}
.mg.c0{--c:#0e7490}.mg.c1{--c:#7c3aed}.mg.c2{--c:#b45309}.mg.c3{--c:#1e7d46}.mg.c4{--c:#b42318}.mg.c5{--c:#175cd3}.mg.c6{--c:#0f766e}.mg.c7{--c:#9d174d}

/* ⓘ per block: one plain sentence, opens on tap (app.js) */
.info{position:relative;display:inline-flex;margin-left:auto}
.ib{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg);color:var(--ink-3);font:700 12px/1 Georgia,serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ib:hover,.ib[aria-expanded="true"]{background:var(--brand-50);color:var(--brand);border-color:var(--brand-100)}
.ip{position:absolute;right:0;top:32px;z-index:15;width:min(280px,80vw);background:var(--ink);color:var(--on-ink);font-size:13px;font-weight:400;line-height:1.4;padding:10px 12px;border-radius:10px;box-shadow:var(--shadow-pop);text-transform:none;letter-spacing:0}
.ip::before{content:"";position:absolute;top:-6px;right:9px;border:6px solid transparent;border-top:0;border-bottom-color:var(--ink)}
.page-head h1 .info .ip{left:0;right:auto}.page-head h1 .info .ip::before{left:9px;right:auto}

/* folded sections */
details.fold{border-top:1px solid var(--line);margin-top:8px}
details.fold:first-of-type{border-top:0;margin-top:0}
details.fold > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:14px;color:var(--ink-2)}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(-45deg);margin:0 4px 0 2px;transition:transform .15s;flex:none}
details.fold[open] > summary::before{transform:rotate(45deg)}
details.fold > summary .grow{flex:1;min-width:0}
details.fold > .fb{padding:0 0 12px}
details.fold > summary .count{font-weight:500}
details.fold.mini{border-top:0;margin-top:2px}
details.fold.mini > summary{min-height:32px;font-size:13px;font-weight:500;color:var(--ink-3)}
details.fold.mini > .fb{padding:0 0 6px;font-size:13px}
details.fold.card{border:1px solid var(--line);margin-top:0}
details.fold.card > summary{min-height:36px}

/* tabs */
.tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;margin-bottom:8px;scrollbar-width:none;max-width:100%}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg);font-size:14px;font-weight:600;color:var(--ink-2)}
.tabs a:hover{text-decoration:none;background:var(--bg-2)}
.tabs a.active{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}

/* phases with colour */
.ph-discovery{--pc:var(--violet);--pc-50:var(--violet-50)}.ph-design{--pc:var(--violet);--pc-50:var(--violet-50)}.ph-build{--pc:var(--blue);--pc-50:var(--blue-50)}.ph-trial{--pc:var(--amber);--pc-50:var(--amber-50)}.ph-live{--pc:var(--green);--pc-50:var(--green-50)}.ph-maintenance{--pc:var(--brand);--pc-50:var(--brand-50)}

/* minimal client card (the whole card is the link) with its modules inside, in one-line chips */
.ccard{display:block;color:inherit;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:14px;min-width:0;margin:0}
.ccard:hover{text-decoration:none;border-color:var(--line-2);box-shadow:var(--shadow-card)}
.ccard .top{display:flex;align-items:center;gap:10px;min-width:0}
.ccard .nm{font-weight:700;font-size:16px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.projs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-width:0}
.pj{display:inline-block;max-width:100%;padding:2px 9px;border-radius:999px;background:var(--bg-3);font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px;vertical-align:top}
.pj::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pc,var(--ink-3));margin-right:5px;vertical-align:1px}
.pj.more{background:transparent;border:1px dashed var(--line-2);color:var(--ink-3)}
.pj.more::before{display:none}
.ccard .now{font-size:14px;color:var(--ink-2);margin:8px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* module of the kickoff as the mockup's small project card */
.mod{padding:12px}
.mod-h{display:flex;align-items:center;gap:8px;min-width:0}
.mod-h b{flex:1;min-width:0;font-size:15px}
.mod .now{font-size:14px;color:var(--ink-2);margin:8px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Pendiente (development backlog): filter mini cards + items by kind */
.pfilters{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.pfilters::-webkit-scrollbar{display:none}
.pf{flex:none;min-width:66px;padding:6px 10px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);cursor:pointer;text-align:center;line-height:1.2;color:var(--ink-2);text-decoration:none}
.pf .n{display:block;font-size:16px;font-weight:800;color:var(--k,var(--ink))}
.pf .l{display:block;font-size:11px;font-weight:600}
.pf:hover{background:var(--bg-2);text-decoration:none}
.pf[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.pf[aria-pressed="true"] .n{color:var(--on-ink)}
.pend{display:flex;align-items:center;gap:8px;min-height:52px;padding:8px 0;border-top:1px solid var(--line)}
.pend-list > .pend:first-child,.fb > .pend:first-child{border-top:0}
.pend .ic{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--k-50);color:var(--k)}
.pend .ic svg{width:18px;height:18px}
.pend a.t{flex:1;min-width:0;font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}
.pend a.t:hover{text-decoration:none;color:var(--brand)}
.pend .t small{display:block;font-weight:500;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pend .acts{display:flex;gap:4px;flex:none;align-items:center}
.pend .acts form{display:contents}
.pend .acts button,.pend .acts .pact{min-height:30px;padding:0 8px;font-size:12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);cursor:pointer;color:var(--ink-2);display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.pend .acts button:hover,.pend .acts .pact:hover{background:var(--bg-2);text-decoration:none}
.pend .acts svg{width:14px;height:14px}
.pend .when{font-size:11px;font-weight:700;color:var(--k);flex:none;white-space:nowrap}
.pend.later .ic{opacity:.5}
/* A request in Pendiente is the row of the lists (decision 0103), with its own actions at the end. */
.pend[data-req]{gap:10px;min-height:68px}
.pend[data-req] a.t{display:flex;white-space:normal}
.pend[data-req] a.t:hover .gl-t{color:var(--brand)}
.pend[data-req] .gl-sec-w{font-weight:700;color:var(--ink-2)}
.pend.later[data-req] .gl-av{opacity:.6}
.pend:not([data-req]) .t small .gl-l{display:inline;font-size:inherit;color:inherit}
.pend:not([data-req]) .t small .gl-l.bad{color:var(--red)}
@media (max-width:599px){.pend[data-req]{gap:8px}.pend[data-req] .gl-th,.pend[data-req] .gl-id{display:none}.pend[data-req] .gl-av,.pend[data-req] .gl-av > .mg,.pend[data-req] .gl-av > .fc.l{width:40px;height:40px;font-size:17px}}
.pend-sched{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:6px 0 10px 42px;font-size:13px}
.pend-sched label{font-weight:600;color:var(--ink-2)}
.pend-sched input[type=date]{width:auto;min-height:36px;padding:6px 10px}
.k-apply{--k:var(--amber);--k-50:var(--amber-50)}.k-create{--k:var(--brand);--k-50:var(--brand-50)}.k-answer{--k:var(--violet);--k-50:var(--violet-50)}.k-visit{--k:var(--blue);--k-50:var(--blue-50)}.k-notice{--k:var(--red);--k-50:var(--red-50)}

/* switches (Ajustes → Automatizaciones) */
.switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);cursor:pointer;user-select:none;min-height:44px;position:relative}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .knob{width:38px;height:22px;border-radius:999px;background:var(--line-2);position:relative;transition:background .15s;flex:none}
.switch .knob::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--knob);transition:left .15s;box-shadow:var(--knob-shadow)}
.switch input:checked + .knob{background:var(--brand)}
.switch input:checked + .knob::after{left:19px}
.switch input:focus-visible + .knob{outline:2px solid var(--brand);outline-offset:2px}
.auto-count{margin-bottom:4px}
.lang-form{margin-top:8px}

/* ---------- Auth pages (no rail) ---------- */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.auth .card{width:100%;max-width:420px;padding:28px 24px}
.auth .brand{margin-bottom:18px}
.auth h1{margin-bottom:6px}
.auth p{color:var(--ink-2)}
.auth .btn{width:100%;margin-top:14px}
.auth .devbox{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line-2)}

/* ---------- Bubbles (chat de Claude) ---------- */
.thread{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
/* ">" and not a plain descendant: the bubbles are the direct children, and a list INSIDE a message
   (the Markdown of decisión 0053) must not be painted as a bubble of its own. */
.thread > li{max-width:86%;padding:8px 12px;border-radius:14px;font-size:14px;background:var(--bg);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px;min-width:0;overflow-wrap:anywhere}
.thread > li.me{align-self:flex-end;background:var(--brand-50);border-color:var(--brand-100);border-bottom-left-radius:14px;border-bottom-right-radius:4px}
.thread > li.claude{background:var(--violet-50);border-color:var(--violet-line)}
/* The third speaker of a request's thread: the shop. A colour of its own, because the one thing this
   screen must never do is let their words be read as ours (migration 0025). */
.thread > li.shop{background:var(--bg-2);border-color:var(--line-2);border-left:3px solid var(--brand)}
.thread > li.sys{align-self:center;background:transparent;border:0;color:var(--ink-3);font-size:12px;text-align:center;max-width:100%;padding:2px 0;white-space:normal}
/* What a program outside the platform said, as it said it, after a grey line (the server's deploy runner, decision 0120). */
.thread > li.sys .sys-detail{display:block;font-size:11px;opacity:.85}
.thread .who{display:block;font-size:11px;color:var(--ink-3);margin-bottom:2px;white-space:normal}

/* Markdown inside a bubble: the subset internal/markdown renders (headings, lists, quotes, code). */
.md > :first-child{margin-top:0}
.md > :last-child{margin-bottom:0}
.md p{margin:0 0 6px}
.md h3,.md h4,.md h5,.md h6{margin:10px 0 4px;font-size:14px;line-height:1.3}
.md h3{font-size:15px}
.md ul,.md ol{margin:4px 0 6px;padding-left:22px}
.md li{margin:2px 0}
.md li > ul,.md li > ol{margin:2px 0}
.md a{text-decoration:underline}
.md code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.88em;background:var(--bg-3);border-radius:5px;padding:1px 4px}
.md pre{margin:6px 0;padding:8px 10px;background:var(--bg-3);border-radius:8px;overflow-x:auto}
.md pre code{background:transparent;padding:0;white-space:pre}
.md blockquote{margin:6px 0;padding:2px 0 2px 10px;border-left:3px solid var(--line-2);color:var(--ink-2)}
.md hr{border:0;border-top:1px solid var(--line-2);margin:8px 0}
.md table{display:block;overflow-x:auto}
/* the message that is still waiting for its answer says since when (decisión 0057) */
.thread .wait{display:block;font-size:11px;color:var(--ink-3);margin-top:4px;white-space:normal;font-style:italic}
/* what an answer cost, when the ledger knows it. A bubble it does not know about has no line at all:
   no zero, no dash, no "desconocido" (the rule internal/web/chat_usage.go already states). */
.thread .cost{display:block;font-size:11px;color:var(--ink-3);margin-top:4px;white-space:normal}

/* A technical decision, drawn where it was asked: wider than a bubble, because it is answered here. */
.thread > li.qcard{max-width:100%;align-self:stretch;background:var(--bg);border:1px solid var(--line-2);border-radius:12px}
.thread > li.qcard.open{border-color:var(--amber-line,var(--brand));background:var(--bg-2)}
.thread > li.qcard .qt{display:block;margin:2px 0 4px;font-size:14px}
.thread > li.qcard p{margin:0 0 6px;font-size:13px;color:var(--ink-2)}
.thread > li.qcard .qrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 6px}
.thread > li.qcard .qrow .hint{font-size:12px;color:var(--ink-3);min-width:0}
.thread > li.qcard .qnew{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.thread > li.qcard .qnew input[type=text]{flex:1;min-width:8rem}

/* ---------- Claude como chat (decisión 0039): lista + conversación ---------- */
.chat{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);overflow:hidden;min-height:calc(100vh - var(--top-h) - var(--tab-h) - 90px)}
.chat-list{display:flex;flex-direction:column;min-width:0;min-height:0}
.chat-conv{display:none;flex-direction:column;min-width:0;min-height:0}
.chat.has-conv .chat-list{display:none}
.chat.has-conv .chat-conv{display:flex}
.cv-top{display:flex;flex-direction:column;flex:1;min-height:0}
@media (max-width:899px){
  .chat.has-conv{min-height:0;height:calc(100vh - var(--top-h) - var(--tab-h) - 90px);height:calc(100dvh - var(--top-h) - var(--tab-h) - 90px)}
  .chat.has-conv .cv-foot{position:sticky;bottom:0}
}
@media (min-width:900px){
  body.page-chat main{display:flex;flex-direction:column;overflow:hidden}
  body.page-chat .page-head{flex:none}
  .chat{grid-template-columns:320px minmax(0,1fr);min-height:0;flex:1}
  .chat-list{display:flex;border-right:1px solid var(--line)}
  .chat-conv{display:flex}
  .chat.has-conv .chat-list{display:flex}
  .chat .back.m{display:none}
}
.cl-head{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line)}
.cl-head .tabs{margin:0;padding:0}
.cl-head .tabs a{min-height:34px;padding:0 10px;font-size:13px;gap:6px}
.cl-head .tabs .mg.s{width:20px;height:20px;font-size:10px}
.cl-items{flex:1;min-height:0;overflow-y:auto}
.conv{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line);color:inherit;min-height:64px}
.conv:first-child{border-top:0}
.conv:hover{text-decoration:none;background:var(--bg-2)}
.conv.active{background:var(--brand-50)}
.conv .b{flex:1;min-width:0}
.conv .t{display:flex;align-items:baseline;gap:8px}
.conv .t b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.conv .t time{font-size:11px;color:var(--ink-3);flex:none}
.conv .last{display:block;font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.conv .st{margin-top:4px;display:block}
.conv.arch{opacity:.6;filter:grayscale(1)}
.cl-sec{padding:10px 12px 4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);background:var(--bg-2);border-top:1px solid var(--line)}
.cl-foot{padding:8px 10px;border-top:1px solid var(--line);display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start}
.cl-foot .pollform{margin-left:auto}
/* The three buttons of the foot wrap on a phone instead of piling on top of each other: the fold may
   grow but never shrink below its own summary, and when it is open it takes the whole row for its form. */
.newconv{flex:1 1 auto;min-width:10rem}
.newconv[open]{flex-basis:100%}
.newconv > summary{list-style:none;cursor:pointer;width:auto}
.newconv > summary::-webkit-details-marker{display:none}
.newconv-form{padding:10px 0 0}
.newconv-form .field{max-width:none;margin-bottom:8px}
.cv-head{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.cv-head .b{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cv-head .b b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px;min-width:0}
.cv-head .acts{display:flex;gap:6px;flex:none;margin-left:auto;align-items:center;min-width:0}
.cv-head .acts .btn{white-space:nowrap}
.cv-head .acts .mono{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (max-width:899px){.cv-head .acts{flex-basis:100%;margin-left:0;justify-content:flex-end}}
.cv-body{flex:1;min-height:0;overflow-y:auto;padding:12px;background:var(--bg-2)}
.cv-top .notice{margin:8px 12px 0}
.notice.courier p{margin:0 0 6px}
.notice.courier p.small{font-size:12px;opacity:.85}
.notice.courier form{margin:0}
.cv-foot{padding:8px 12px;border-top:1px solid var(--line);background:var(--bg)}
.composer{display:flex;gap:8px;align-items:flex-end}
.composer textarea{min-height:44px;max-height:160px;flex:1;resize:none;padding:10px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg);color:var(--ink);line-height:1.4}
.composer .send,.composer .clip{width:44px;height:44px;border-radius:50%;padding:0;flex:none}
.composer .send svg,.composer .clip svg{width:18px;height:18px}
.hint1{font-size:12px;color:var(--ink-3);margin:6px 0 0}
.cv-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:14px;padding:20px;text-align:center;min-height:200px}

/* attachments: chips under the composer and inside the bubbles */
.atts{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0 0}
.att{display:flex;align-items:center;gap:8px;max-width:220px;padding:5px 6px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2);font-size:12px;min-width:0;color:inherit;white-space:normal}
.att:hover{text-decoration:none;background:var(--bg-3)}
.att .th{width:32px;height:32px;border-radius:7px;flex:none;background:var(--bg-3);color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.att .th img{width:100%;height:100%;object-fit:cover;display:block}
.att .th svg{width:16px;height:16px}
.att .b{min-width:0;flex:1}
.att .b b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att .b span{color:var(--ink-3)}
.att .x{width:24px;height:24px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg);color:var(--ink-3);cursor:pointer;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1;padding:0}
.att .x:hover{background:var(--bg-3);color:var(--ink)}
/* dragging a file anywhere over the box: the mockup's overlay */
[data-att-zone]{position:relative}
.dropzone{position:absolute;inset:0;z-index:12;display:none;align-items:center;justify-content:center;background:var(--brand-50);opacity:.96;border:2px dashed var(--brand);border-radius:12px;color:var(--brand);font-weight:700;font-size:15px;text-align:center;padding:16px}
[data-att-zone].dropping .dropzone{display:flex}
.cv-foot > .atts{padding:0 0 8px}
.thread .atts{padding:6px 0 0}
.thread .shots{display:grid;grid-template-columns:repeat(auto-fill,84px);gap:6px;margin-top:6px}
.thread .shots img{width:100%;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--line-2);display:block}
/* A session's screenshots of a change (migration 0027): large enough to judge a screen by, one under the other on a
   phone, each with the caption the session wrote; and a screenshot that could not be kept says so in a line of its own. */
.thread .screens{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.thread .screens figure{margin:0}
.thread .screens img{max-width:100%;height:auto;border-radius:8px;border:1px solid var(--line-2);display:block}
.thread .screens figcaption{font-size:12px;color:var(--ink-3);margin-top:2px}
.thread .refused{display:block;font-size:12px;color:var(--amber,var(--ink-2));margin-top:4px;white-space:normal}

/* ---------- Before and after, screen by screen (decisions 0043 and 0087) ----------
   The same viewer on Bernat's thread and on the shop's page. Side by side by default, the label above each frame; the
   overlay is one frame with a slider (the after is revealed to the right of the line); the screens are stepped by the
   bar above the frames, which stays where the thumb left it whatever the height of the next screen. Mobile first: at the width of a phone a screen of landscape pictures (a till is a desktop web
   application) puts its before above its after instead of making each a thumbnail — the mockup of 0043 did the same —
   and nothing is ever wider than the bubble or the card it is in. Colours are tokens, so the dark theme needs nothing. */
.cmp{margin-top:8px;display:flex;flex-direction:column;gap:8px;min-width:0;container-type:inline-size}
.cmp:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:12px}
.cmp-modes{display:inline-flex;align-self:flex-start;max-width:100%;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:var(--bg)}
.cmp-modes button{min-height:44px;padding:0 14px;border:0;background:transparent;font-weight:600;font-size:14px;color:var(--ink-2);cursor:pointer}
.cmp-modes button + button{border-left:1px solid var(--line-2)}
.cmp-modes button[aria-pressed="true"]{background:var(--brand-50);color:var(--brand)}
.cmp-screen{display:flex;flex-direction:column;gap:6px;min-width:0}
.cmp-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:start}
.cmp-screen.single .cmp-side{grid-template-columns:minmax(0,1fr)}
@container (max-width:559px){.cmp-screen.wide .cmp-side{grid-template-columns:minmax(0,1fr)}}
.cmp-frame{margin:0;min-width:0}
.cmp-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin:0 0 4px 2px}
.cmp-frame.after .cmp-lbl{color:var(--brand)}
.cmp-frame a{display:block}
.cmp-frame img,.cmp-loose img{display:block;width:100%;height:auto;border:1px solid var(--line-2);border-radius:8px;background:var(--bg)}
.cmp-frame figcaption,.cmp-loose figcaption{font-size:12px;color:var(--ink-3);margin-top:2px}
.cmp-over{display:none;flex-direction:column;gap:4px;min-width:0}
.cmp[data-mode="overlay"] .cmp-screen:not(.single) .cmp-side{display:none}
.cmp[data-mode="overlay"] .cmp-over{display:flex}
.cmp-stack{position:relative;display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:var(--bg);touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.cmp-stack > img{grid-area:1/1;display:block;width:100%;height:auto;pointer-events:none}
.cmp-stack > .cmp-a{clip-path:inset(0 0 0 var(--pos,50%))}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:var(--brand);pointer-events:none}
.cmp-line::after{content:"";position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--brand);border:2px solid var(--on-brand);box-shadow:var(--knob-shadow)}
.cmp-mix{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink-3)}
.cmp-mix .after{color:var(--brand)}
.cmp-range{flex:1;min-width:0;height:44px;margin:0;accent-color:var(--brand);cursor:pointer}
.cmp-caps{margin:0;font-size:12px;color:var(--ink-3);display:flex;flex-direction:column;gap:2px}
.cmp-bar{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
.cmp-step{flex:none;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.cmp-step:disabled{opacity:.35;cursor:default}
.cmp-step svg{width:18px;height:18px}
.cmp-name{min-width:0;font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Without static/compare.js every screen is drawn one after another and there is nothing to switch or to step. */
html:not(.cmp-js) .cmp-modes,html:not(.cmp-js) .cmp-bar{display:none}
.cmp-js .cmp-screen:not(.on){display:none}
.cmp-loose{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.cmp-loose figure{margin:0}
/* A bubble that carries the viewer takes the thread's whole width: two frames in 86 % of a phone are two thumbnails. */
.thread > li.wide{max-width:100%;align-self:stretch}

/* ---------- Dialogs (the mockup's): Uso, Conversación and Historial ---------- */
dialog#dlg{border:0;border-radius:14px;padding:0;max-width:min(92vw,560px);width:100%;background:var(--bg);color:var(--ink);box-shadow:var(--shadow-pop)}
dialog#dlg::backdrop{background:rgba(17,24,39,.5)}
dialog#dlg .dlg{padding:18px}
dialog#dlg h2{margin-bottom:8px}
dialog#dlg p{font-size:14px;color:var(--ink-2)}
dialog#dlg .list{margin-top:8px}
dialog#dlg .field{max-width:none}
.dlg-sec{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.dlg-path{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.dlg-sec form{margin:0}
.actions{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.btn.danger{color:var(--red);border-color:var(--red-line);background:var(--red-50)}
.btn.danger:hover{background:var(--red-50);border-color:var(--red)}
/* the ⓘ next to a disabled action sits inline, not pushed to the far right */
.cv-head .acts .info,.dlg .info{margin-left:0}

/* Uso: three columns of numbers and the cumulative chart, both from real data */
table.uso{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0}
table.uso th,table.uso td{padding:6px 4px;text-align:right;border-top:1px solid var(--line);font-weight:400}
table.uso thead th{font-size:12px;color:var(--ink-3);font-weight:600}
table.uso td:first-child,table.uso th:first-child{text-align:left}
table.uso thead tr:first-child th{border-top:0}
table.uso tbody th{font-weight:600}
svg.chart{display:block;width:100%;height:auto;max-width:420px;margin:10px auto 4px}

/* ---------- Estadísticas: bars without inline styles (CSP) ---------- */
progress.tbar{display:block;width:100%;height:6px;border:0;border-radius:999px;background:var(--bg-3);margin-top:5px;overflow:hidden;appearance:none;-webkit-appearance:none}
progress.tbar::-webkit-progress-bar{background:var(--bg-3);border-radius:999px}
progress.tbar::-webkit-progress-value{background:var(--brand);border-radius:999px}
progress.tbar::-moz-progress-bar{background:var(--brand);border-radius:999px}
.big{font-size:28px;font-weight:800;line-height:1;letter-spacing:-1px}
.big small{font-size:14px;font-weight:600;color:var(--ink-3);letter-spacing:0;margin-left:6px}
.stat-row{display:flex;gap:12px;align-items:center;min-height:36px;padding:5px 0;border-top:1px solid var(--line)}
.stat-row:first-child{border-top:0}
.stat-row .body{flex:1;min-width:0}
.stat-row .title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.stat-row .meta{display:block;font-size:12px;color:var(--ink-3)}
.stat-row b{flex:none}
.period{display:flex;gap:6px;margin-bottom:12px}

/* ---------- The client questions page (/q): our domain, their language, our colours and nothing else.
   Mobile first and readable on a phone held in one hand, because that is where a code arrives. ---------- */
body.qpage{background:var(--bg-2)}
/* A code-gated page (the shop's door, a question round) has no rail and no #main to scroll in, so the
   desktop rule above that pins html and body to the viewport ("the page never scrolls", decision 0046)
   left everything below the fold unreachable: on the shop's own PC, 2026-09-24, Marta could not get
   past the form to her request and its answer. These pages scroll as pages. */
html:has(body.qpage),body.qpage{height:auto;min-height:100vh;overflow:visible}
/* Its #main keeps the desktop panel's overflow and overscroll-behavior:contain, which stops the wheel
   from reaching the page when the pointer is over the white card: only the grey around it scrolled
   (the shop's PC, 2026-09-24, 19:20). On these pages #main is not a panel. */
body.qpage main{height:auto;min-height:0;overflow:visible;overscroll-behavior:auto}
.qwrap{max-width:680px;margin:0 auto;padding:0 14px 40px;display:flex;flex-direction:column;min-height:100vh}
.qtop{display:flex;align-items:center;gap:8px;padding:18px 2px 10px;font-weight:800;font-size:16px;color:var(--brand);letter-spacing:-0.2px}
.qtop .logo{width:26px;height:26px;border-radius:8px;background:var(--brand);display:inline-flex;align-items:center;justify-content:center;flex:none}
.qwrap main{flex:1}
.qfoot{border-top:1px solid var(--line);margin-top:22px;padding-top:12px}
.qfoot p{margin:0;font-size:13px;color:var(--ink-3)}
/* the link to the privacy and legal notice (decision 0128): at the end of the line that says who reads what is written, and
   on the notice, to its other language */
.qfoot a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.qfoot-links a{display:inline-flex;align-items:center;min-height:32px}
/* «IA» beside the assistant's name on each of its replies (decision 0128 as amended on 2026-10-20): a word in the brand's
   pale blue, never hidden; in a bubble it is a button that, tapped, says the whole sentence right under the name (.ai-tip,
   static/shop.js) and, hovered, in its title; in the list's line it is the same word with the sentence for a screen reader.
   Nothing of it is stored. */
.ai-mark{display:inline-block;vertical-align:1px;margin:0;padding:0 5px;min-height:18px;border:1px solid var(--brand-100);border-radius:5px;
  background:var(--brand-50);color:var(--brand);font-size:10px;font-weight:700;line-height:16px;letter-spacing:.04em;text-transform:uppercase;cursor:default}
button.ai-mark{cursor:pointer;position:relative}
/* a finger needs more than the word: the tap target is 28px tall around it */
button.ai-mark::before{content:"";position:absolute;inset:-6px -4px}
button.ai-mark:hover,button.ai-mark[aria-expanded="true"]{background:var(--brand-100);color:var(--ink)}
button.ai-mark:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.ai-tip{display:block;font-size:12px;line-height:1.4;color:var(--ink-2);margin:0 0 6px}
.ai-tip[hidden]{display:none}
/* The sentence itself where the page's texts say it — the page's lead, the line under «Respon aquí», the error's and the
   questions' leads (Legal, 2026-10-21, on C(2026) 5054 paras. 38 and 142): text of its own in the body's ink, whatever
   the words around it wear, so it is never faint and never easy to miss; at least 4.5:1 on its ground in both themes
   (shop_ai_disclosure_test.go measures it in a headless Chrome). */
.ai-say{color:var(--ink)}
/* The privacy and legal notice (decision 0128): Legal's text, read as a page on a phone held in one hand. */
body.lpage main{padding:0 0 24px}
.legal{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px 6px;margin:6px 0 14px;line-height:1.55;overflow-wrap:anywhere}
.legal h1{font-size:24px;line-height:1.25;margin:0 0 14px}
.legal h2{font-size:18px;line-height:1.3;margin:24px 0 8px}
.legal h3,.legal h4,.legal h5,.legal h6{font-size:16px;margin:18px 0 6px}
.legal p,.legal ul,.legal ol{margin:0 0 12px;max-width:68ch}
.legal ul,.legal ol{padding-left:22px}
.legal code{font-size:.92em;background:var(--bg-2);border-radius:4px;padding:1px 4px}
.legal em{color:var(--ink-2)}
@media (min-width:600px){.legal{padding:28px 32px 14px}.legal h1{font-size:28px}}
.qtitle{font-size:24px;margin:6px 0 10px}
.qlead{color:var(--ink-2);margin:0 0 4px}
.qmeta{margin:0 0 10px}
.qgroup{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:22px 0 8px}
.qcard{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:0 0 14px}
.qcard h1{margin:0 0 8px}
.qcard fieldset{border:0;margin:0;padding:0;min-width:0}
.qbody{font-size:17px;font-weight:700;line-height:1.3;padding:0 0 10px;display:block}
.qopt-tag{font-size:13px;font-weight:500;color:var(--ink-3)}
.qopt{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--radius-s);margin:0 0 8px;cursor:pointer;background:var(--bg)}
.qopt:hover{background:var(--bg-2)}
.qopt input{margin:3px 0 0;flex:none;width:18px;height:18px;accent-color:var(--brand)}
.qopt .b{min-width:0}
.qopt .b b{display:block;font-weight:600}
.qopt .imp{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.qopt .chip{margin-top:6px}
.qopt.rec{border-color:var(--brand-100);background:var(--brand-50)}
.qopt:has(input:checked){border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.qfree{display:block;font-size:14px;color:var(--ink-2);margin:12px 0 6px}
.qcard textarea{width:100%;min-height:74px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--radius-s);background:var(--bg);color:var(--ink);line-height:1.4;resize:vertical}
/* The shop's requests form (decision 0074) writes in plain text boxes, not only in the textarea a
   question round uses; without this they render at the browser's default width, which on a phone is a
   box narrower than the words in it. */
.qcard input[type=text]{width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--radius-s);background:var(--bg);color:var(--ink);font:inherit;line-height:1.4}
.qcard input[type=file]{max-width:100%;font-size:14px;color:var(--ink-2)}
.qcard .hint{display:block;font-size:13px;color:var(--ink-3);margin:6px 0 0}
.qcard .notice{margin:0 0 12px}
.qcard .qx{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.qcard .qx p{margin:0 0 4px}
.qrow{display:flex;align-items:center;gap:10px;min-height:18px;margin:8px 0 0}
.qsave{font-size:13px;color:var(--ink-3)}
.qsave .ok{color:var(--green)}
.qsave .bad{color:var(--red)}
/* The line that says the answer on a card was saved by somebody else (decision 0068): discreet, and gone
   while empty, which is how a save leaves it once the person has written their own answer. */
.qby{margin:0 0 8px;font-size:13px;color:var(--ink-3)}
.qby:empty{display:none}
/* A finished code keeps its cards on the page, read-only. */
.qcard.ro .qopt{cursor:default}
.qcard.ro .qopt:hover{background:var(--bg)}
.qcard.ro .qopt.rec:hover{background:var(--brand-50)}
.qfin{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between}
.qfin p{margin:0;color:var(--ink-2)}
.qcard.done{border-color:var(--brand-100);background:var(--brand-50)}
.qform{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.qform label{font-size:14px;color:var(--ink-2)}
.qform input{padding:12px;border:1px solid var(--line-2);border-radius:var(--radius-s);background:var(--bg);font-size:18px;letter-spacing:.08em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.qform .btn{align-self:flex-start}
@media (min-width:600px){.qtitle{font-size:28px}.qcard{padding:20px}}
/* ---------- The shop's page (decisions 0086, 0087 and 0090) ----------
   Their requests as conversation cards. On a phone one column: the list — each request with its state and the newest
   thing on it, so the answer is read without opening anything — and, once one is opened, its conversation, with the box
   to answer in right under the last line and «Envia» next to it. On the shop's PC (a desktop monitor) the list beside the
   open conversation, as in a messaging app. Which one is open is the address's fragment (#REQ-5): plain links, the
   phone's back button returns to the list, and a wide screen opens the newest one still being worked when nothing is
   named (:has, with no script). Calm on purpose: the platform's own tokens, room between things, and nothing smaller
   than a thumb to press. Every colour a client may one day want as its own is one of the properties on .shop, so the
   appearance of decision 0089 is a set of values and not another stylesheet; every word is in the catalogue. */
body.spage{overflow-anchor:none} /* static/shop.js keeps the reader's place itself when a card is refreshed */
body.spage main{padding:0 0 24px}
.shop{--s-accent:var(--brand);--s-accent-50:var(--brand-50);--s-accent-100:var(--brand-100);--s-on-accent:var(--on-brand);
  --s-card:var(--bg);--s-mine:var(--brand-50);--s-mine-line:var(--brand-100);--s-ours:var(--bg-2);--s-ours-line:var(--line-2)}
.s-head{margin:6px 0 18px}
.s-client{margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.s-head .qtitle{margin:0 0 6px}
.s-head .qlead{max-width:62ch}
.s-layout{display:flex;flex-direction:column;gap:16px;min-width:0}
.s-side,.s-main{min-width:0}
.s-tabs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.s-tab{position:relative;display:flex;flex-direction:column;gap:6px;min-height:72px;padding:14px 40px 14px 16px;background:var(--s-card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);color:inherit}
.s-tab:hover{text-decoration:none;border-color:var(--line-2)}
.s-tab[aria-current="true"]{border-color:var(--s-accent);box-shadow:inset 0 0 0 1px var(--s-accent),var(--shadow-card)}
.s-tab-top{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;color:var(--ink-3)}
.s-tab-top time{margin-left:auto;flex:none}
.s-tab > svg{position:absolute;right:12px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--ink-3)}
.s-tab-last .s-dots{margin-right:8px;vertical-align:1px}
.s-tab-title{font-size:17px;line-height:1.3;overflow-wrap:anywhere}
.s-tab:not(.open) .s-tab-title{font-weight:600;color:var(--ink-2)}
.s-tab-last{font-size:15px;line-height:1.4;color:var(--ink-2);overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.s-tab-last b{color:var(--ink)}
/* the dot of a request that has something new nobody has looked at yet (static/shop.js) */
.s-tab.has-news::after{content:"";position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:50%;background:var(--s-accent);border:2px solid var(--s-card)}
/* «Demana una altra cosa» heads the list (decision 0112): above their newest request, not under the last of them */
.s-new{width:100%;min-height:52px;margin:0 0 12px;font-size:16px}
.s-new svg{width:18px;height:18px}
/* and beside it «Hi ha un error» (decision 0116), red with a warning triangle: the two share the row, a thumb each */
.s-acts{display:flex;gap:10px;margin:0 0 12px;min-width:0}
.s-acts .btn{flex:1 1 0;min-width:0;margin:0;white-space:normal;text-align:center;line-height:1.2}
.s-acts-first{margin:0 0 16px}
.s-acts-first .btn{flex:0 1 auto;padding:0 22px}
.s-err-go,.s-err-send{background:var(--red);border-color:var(--red);color:var(--bg);font-weight:700}
.s-err-go:hover,.s-err-send:hover{background:var(--red);border-color:var(--red);color:var(--bg);filter:brightness(1.1);text-decoration:none}
.s-err-go{min-height:52px;font-size:16px}
.s-err-go svg,.s-err-send svg{width:18px;height:18px;flex:none}
/* «Explica'ns l'error»: the ask's own card, its title in red, and «No, estic aturat» red once it is the answer */
.s-err-title{display:flex;align-items:center;gap:8px;color:var(--red)}
.s-err-title svg{width:22px;height:22px;flex:none}
.s-err-lead{margin:0 0 12px;color:var(--ink-2);max-width:62ch;line-height:1.45}
.s-err .qopt.s-err-stop:has(input:checked){border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);background:var(--red-50)}
.s-err .qopt.s-err-stop input{accent-color:var(--red)}
.s-err .qrow .btn{min-height:52px;padding:0 24px;font-size:16px;gap:8px}
/* the lines an error's card has under its name: the program found it, what to do meanwhile, and fixed — each in the colour
   of what it says, and an icon, so it is not told by its colour alone */
.serr{display:flex;flex-direction:column;gap:8px;margin:0 0 14px;min-width:0}
.serr-line{display:flex;align-items:flex-start;gap:10px;margin:0;padding:10px 12px;border-radius:var(--radius-s);font-size:15px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.serr-line svg{width:20px;height:20px;flex:none;margin-top:1px}
.serr-detected{background:var(--red-50);border:1px solid var(--red-line)}
.serr-detected svg{color:var(--red)}
.serr-meanwhile{background:var(--amber-50);border:1px solid var(--amber-line)}
.serr-meanwhile svg{color:var(--amber)}
.serr-fixed{background:var(--green-50);border:1px solid var(--green-line)}
.serr-fixed svg{color:var(--green)}
/* and under it the filter of decision 0113: «Totes» and «Per revisar (n)», pills a thumb can press in the colours of the
   page's own chips — «Per revisar» amber, like the state it filters by —, the one chosen filled, ringed and ticked, so it
   is not told by its colour alone */
.s-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.s-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--s-card);color:var(--ink-2);font-size:15px;font-weight:700;line-height:1.2;white-space:nowrap}
.s-chip:hover{text-decoration:none;border-color:var(--ink-3)}
.s-chip svg{display:none;width:16px;height:16px;flex:none}
.s-chip[aria-current="page"]{background:var(--bg-3);border-color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--ink-3);color:var(--ink)}
.s-chip[aria-current="page"] svg{display:block}
.s-chip.review{border-color:var(--amber-line);color:var(--amber)}
.s-chip.review:hover{border-color:var(--amber)}
.s-chip.review[aria-current="page"]{background:var(--amber-50);border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.s-chip[hidden],.s-filter-none[hidden]{display:none}
.s-filter-none{margin:0 0 12px;font-size:15px;color:var(--ink-2)}
/* while the list shows those alone, the other lines step aside; each line says by itself whether it is one (static/shop.js
   and the poll never decide it) */
.shop.only-review .s-tabs > li:not(:has(> .s-tab.review)){display:none}
/* the open conversation, or the form: only what the address names (or what the server opened) is drawn */
.s-main > .s-ask,.s-main > .s-conv{display:none;scroll-margin-top:12px}
.s-main > :target,.s-main > :has(:target),.s-main > .is-open,.shop.ask-open .s-main > .s-ask:not(.s-err),.shop.err-open .s-main > .s-err{display:block}
.s-ask-title{font-size:20px;margin:0 0 12px}
.s-ask fieldset{margin-top:16px}
.s-ask .qrow .btn{min-height:52px;padding:0 24px;font-size:16px}
@media (max-width:599px){.s-ask .qrow .btn{width:100%}}
.s-none{margin:4px 0 0;color:var(--ink-3)}
.s-conv{position:relative;background:var(--s-card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:16px 16px 0}
.s-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-8px 0 6px;color:var(--ink-2);font-weight:600;font-size:15px}
.s-back svg{width:20px;height:20px}
.s-back:hover{color:var(--s-accent);text-decoration:none}
.s-sent{margin:0 0 14px;font-size:15px}
.s-conv-head{margin:0 0 14px}
.s-conv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 6px;font-size:13px;color:var(--ink-3)}
.s-conv-title{font-size:20px;line-height:1.3;overflow-wrap:anywhere}
/* the conversation: their words on the right as on any phone, ours on the left */
.sthread{gap:12px;margin:0 0 12px}
.sthread > li{max-width:88%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.45}
.sthread > li.mine{align-self:flex-end;background:var(--s-mine);border-color:var(--s-mine-line);border-bottom-left-radius:16px;border-bottom-right-radius:4px}
.sthread > li.ours{background:var(--s-ours);border-color:var(--s-ours-line)}
.sthread .who{font-size:12px;margin-bottom:4px}
.sthread > li.fresh{box-shadow:0 0 0 3px var(--s-accent-100);border-color:var(--s-accent)}
.sthread .shots{display:grid;grid-template-columns:repeat(auto-fill,84px);gap:6px;margin-top:6px}
.sthread .shots img{width:100%;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--line-2);display:block}
.shand{margin:0 0 12px;font-size:15px;color:var(--ink-2)}
/* Decision 0130: approved or merged, and installed with the program's next version (the client's installs are held). */
.s-held{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;padding:10px 12px;border-radius:var(--radius-s);background:var(--blue-50);border:1px solid var(--blue-line);font-size:15px;line-height:1.45;color:var(--ink)}
.s-held svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--blue)}
.s-closed{margin:0 0 16px;font-size:14px;color:var(--ink-3)}
/* «Donar-la per tancada» (decision 0108): under a request that waits for them alone, what it does and the day it closes by
   itself, and the one button — quiet, an outline: it is not the thing the page asks them for */
.sdone{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 16px;padding:12px 14px;border:1px dashed var(--line-2);border-radius:var(--radius);background:var(--bg-2)}
.sdone-lead{flex:1 1 16rem;min-width:0;margin:0;font-size:15px;line-height:1.45;color:var(--ink-2)}
.sdone-go{min-height:48px;padding:0 18px;gap:8px;font-size:15px;font-weight:700;background:var(--bg);border-color:var(--s-accent);color:var(--s-accent)}
.sdone-go:hover{background:var(--s-accent-50)}
.sdone-go svg{width:18px;height:18px}
@media (max-width:599px){.sdone-go{flex:1 1 100%;justify-content:center}}
/* the session is on their latest words (requests.ShopWorking): one quiet line, three dots breathing, no sound */
.s-working{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:15px;color:var(--ink-2)}
.s-dots{display:inline-flex;gap:4px;flex:none}
.s-dots i{width:7px;height:7px;border-radius:50%;background:var(--s-accent);opacity:.25;animation:s-dot 1.4s ease-in-out infinite}
.s-dots i:nth-child(2){animation-delay:.2s}
.s-dots i:nth-child(3){animation-delay:.4s}
@keyframes s-dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.s-dots i{animation:none;opacity:.6}}
/* the preview of the change (decision 0087), under the conversation of its request and above where it stands (0112) */
.spreview{margin:0 0 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.spv-title{font-size:16px;margin:0}
.spreview .hint{margin:0}
/* the box to answer in: right under the last line, and — while the conversation is longer than the screen — held at the
   bottom of it, so «Respon aquí» and «Envia» are always in sight */
.sreply{position:sticky;bottom:0;z-index:2;display:flex;flex-direction:column;gap:8px;margin:0 -16px;padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:var(--s-card);border-top:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius)}
.s-reply-label{font-size:16px;font-weight:700;color:var(--ink)}
.sreply .notice{margin:0}
.s-compose{display:flex;gap:8px;align-items:flex-end}
.s-compose textarea{flex:1;min-width:0;min-height:52px;max-height:40vh;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg);color:var(--ink);line-height:1.4;resize:vertical}
.s-send{flex:none;min-height:52px;padding:0 18px;border-radius:12px;font-size:16px}
.s-send svg{width:18px;height:18px}
.srow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.srow input[type=text]{flex:1 1 8rem;min-width:0;width:auto;min-height:44px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--radius-s);background:var(--bg);color:var(--ink);line-height:1.4}
.sfile{position:relative;overflow:hidden}
.sfile input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.sreply .hint{margin:0;font-size:13px}
/* the line under the box: the hint, and after it the sentence that says an AI answers, which is not a hint (.ai-say) */
.s-reply-note{margin:0;font-size:13px}
.sfile{padding:0 14px}
/* the file a box will send, as a chip under it (static/shop.js): big enough to see, and a × a thumb can press */
.sfiles{padding:0}
.sfiles[hidden]{display:none}
.sfiles .att{max-width:100%;gap:10px;padding:6px 6px 6px 8px;font-size:14px;background:var(--s-ours,var(--bg-2))}
.sfiles .att .th{width:44px;height:44px;border-radius:8px}
.sfiles .att .th svg{width:22px;height:22px}
.sfiles .att .x{width:44px;height:44px;font-size:20px}
.s-ask .sfiles{margin:8px 0 4px}
/* the question of decision 0092: «Et sembla bé així?», the words for them, the pictures, and two answers a thumb reaches */
.sask{margin:0 0 16px;padding:14px 16px 16px;border:1px solid var(--s-accent-100);border-radius:var(--radius);background:var(--s-accent-50);display:flex;flex-direction:column;gap:10px;min-width:0}
.sask-title{font-size:18px;margin:0;color:var(--ink)}
.sask-sum{margin:0;font-size:16px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.sask-sum p{margin:0 0 8px}
.sask-sum p:last-child{margin:0}
.sask-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.sask-acts .btn{min-height:52px;padding:0 20px;font-size:16px;gap:8px}
.sask-acts .btn svg{width:18px;height:18px}
.sask .hint{margin:0;font-size:14px}
@media (max-width:599px){.sask-acts .btn{flex:1 1 100%;justify-content:center}}
.sask-done{display:flex;align-items:flex-start;gap:10px;margin:0 0 16px;padding:12px 14px;border-radius:var(--radius);background:var(--s-accent-50);border:1px solid var(--s-accent-100);font-size:15px;line-height:1.45}
.sask-done svg{width:20px;height:20px;flex:none;color:var(--s-accent);margin-top:2px}
.sask-by{display:block;font-size:13px;color:var(--ink-3)}
/* Floemo's questions to the shop (decision 0115): at the top of their page, above their requests, until they are answered —
   the one thing on the page that waits for them and is not one of their own asks. In the page's accent, like «Et sembla bé
   així?»; each option a button a thumb reaches, with what it implies inside it and Floemo's recommendation marked; who
   answers above them, already filled; the box for an answer of their own folded under them. Answered, a question folds
   into «Ja contestades» with the answer that counts, and «Canviar la resposta». */
.sq{margin:0 0 20px;padding:16px 16px 4px;border:1px solid var(--s-accent-100);border-left:4px solid var(--s-accent);border-radius:var(--radius);background:var(--s-accent-50);box-shadow:var(--shadow-card);min-width:0;scroll-margin-top:12px}
.sq.sq-none{display:none}
.sq-title{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:19px;line-height:1.3;color:var(--ink)}
.sq-ic{display:inline-flex;flex:none;color:var(--s-accent)}
.sq-ic svg{width:22px;height:22px}
.sq-n{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 8px;border-radius:999px;background:var(--s-accent);color:var(--s-on-accent);font-size:14px;font-weight:800}
.sq-lead{margin:0 0 12px;font-size:15px;line-height:1.45;color:var(--ink-2);max-width:62ch}
.sqcard{margin:0 0 12px;padding:14px 14px 10px;background:var(--s-card);border:1px solid var(--line);border-radius:var(--radius);min-width:0;scroll-margin-top:12px}
.sqcard.fresh{box-shadow:0 0 0 3px var(--s-accent-100);border-color:var(--s-accent)}
.sq-q{margin:0 0 6px;font-size:18px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.sq-body{margin:0 0 10px;font-size:15px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.sq-body p{margin:0 0 6px}
.sq-body p:last-child{margin:0}
.sqform{display:flex;flex-direction:column;gap:6px;margin:0;min-width:0}
.sqform .notice{margin:0 0 4px}
.sq-who{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.sq-who label{font-size:14px;font-weight:700;color:var(--ink-2)}
.sq-who input{flex:1 1 10rem;min-width:0;max-width:22rem;min-height:44px;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--radius-s);background:var(--bg);color:var(--ink)}
.sq .qreps{margin:6px 0 4px;gap:10px}
.sq .qrep{min-height:60px;padding:12px 16px;border-radius:14px;background:var(--bg);border-color:var(--line-2)}
.sq .qrep:hover{border-color:var(--s-accent);background:var(--s-accent-50)}
.sq .qrep.rec{border-color:var(--s-accent);box-shadow:inset 0 0 0 1px var(--s-accent)}
.sq .qrep.chosen{background:var(--s-accent-50)}
.sq .qr-t{font-size:16px}
.sq .qr-i{font-size:14px;line-height:1.4;color:var(--ink-2)}
.sq .qr-rec{background:var(--s-accent-50);color:var(--s-accent)}
.qr-now{padding:1px 8px;border-radius:999px;background:var(--s-accent);color:var(--s-on-accent);font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.sq .sq-other > summary{min-height:44px;display:flex;align-items:center;gap:8px;padding:6px 0;font-size:15px;font-weight:700;color:var(--s-accent);cursor:pointer;list-style:none}
.sq .sq-other > summary::-webkit-details-marker,.sq-change > summary::-webkit-details-marker{display:none}
.sq .sq-other > summary svg,.sq-change > summary svg{width:18px;height:18px;flex:none}
.sq-other textarea{width:100%;min-height:72px;margin:4px 0 6px;padding:10px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg);color:var(--ink);line-height:1.4;resize:vertical}
.sq-other .hint{display:block;margin:0 0 8px;font-size:13px}
.sq-send{min-height:48px;padding:0 18px;gap:8px;font-size:15px}
.sq-send svg{width:18px;height:18px}
.sq-until{margin:2px 0 0;font-size:13px}
.sq-latest{display:flex;align-items:flex-start;gap:10px;margin:0 0 8px;padding:10px 12px;border-radius:var(--radius-s);background:var(--s-accent-50);border:1px solid var(--s-accent-100);font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.sq-latest svg{width:20px;height:20px;flex:none;color:var(--s-accent);margin-top:2px}
.sq-thanks{display:block}
.sq-by{display:block;font-size:13px;color:var(--ink-3)}
.sq-change > summary{min-height:44px;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--s-accent);cursor:pointer;list-style:none}
.sq-change[open] > summary{margin-bottom:4px}
.sq-done{margin:4px 0 12px}
.sq-done > summary{min-height:44px;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ink-2);cursor:pointer;list-style:none}
.sq-done > summary::-webkit-details-marker{display:none}
.sq-done > summary svg{width:18px;height:18px;flex:none;color:var(--s-accent)}
/* nothing waits for them: the answered ones in one quiet line, and no frame */
.sq.sq-quiet{padding:0 4px;border:0;background:none;box-shadow:none;margin:0 0 8px}
.sq.sq-quiet .sq-done{margin:0}
.sq-done .sqcard{margin-top:8px}
@media (max-width:599px){.sq-send{width:100%;justify-content:center}}
@media (min-width:600px){.sq{padding:20px 22px 8px}.sqcard{padding:16px 18px 12px}}
@media (min-width:960px){.sq{margin-bottom:24px}.sqcard,.sq-lead{max-width:780px}}
/* Floemo's side: the section of the Preguntas tab — one fold per question, its title and the answer that counts on it */
.sqx-s{display:flex;flex-direction:column;gap:2px;min-width:0}
.sqx-t{font-weight:600;overflow-wrap:anywhere}
.sqx-last{font-size:13px;color:var(--ink-3);overflow-wrap:anywhere}
.sqx-body{margin:6px 0 8px;color:var(--ink-2)}
.sqx-body p{margin:0 0 6px}
.sqx-q .fb .plain{margin:6px 0 10px}
.sqx-h{margin:12px 0 6px;font-size:14px}
.sqx-counts .title{color:var(--ink)}
/* «Tens una resposta nova», and the line that says the page stopped updating itself: at the top of the screen, wherever
   they are, one under the other, until they are read */
.s-float{position:fixed;z-index:50;top:12px;left:12px;right:12px;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.s-float > *{pointer-events:auto}
.snew{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;min-height:48px;padding:0 20px;border:0;border-radius:999px;background:var(--s-accent,var(--brand));color:var(--s-on-accent,var(--on-brand));font-size:15px;font-weight:700;white-space:nowrap;box-shadow:var(--shadow-pop);cursor:pointer}
.snew span{overflow:hidden;text-overflow:ellipsis}
.snew svg{width:18px;height:18px;flex:none}
.snew[hidden],.snotice[hidden]{display:none}
.snotice{max-width:560px;margin:0;box-shadow:var(--shadow-pop)}
@media (max-width:959px){
  /* a conversation opened: it takes the page, and the list steps aside until they go back */
  .shop:has(.s-main > .s-conv:target,.s-main > .s-conv :target,.s-main > .s-conv.is-open) .s-side{display:none}
  .shop.ask-open .s-main,.shop.err-open .s-main{order:-1}
}
@media (min-width:600px){.sthread > li{max-width:80%}.s-conv{padding:20px 22px 0}.sreply{margin:0 -22px;padding:14px 22px 16px}}
@media (min-width:960px){
  body.spage .qwrap{max-width:1240px;padding:0 24px 40px}
  .s-head{margin:10px 0 22px}
  .s-layout{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:28px;align-items:start}
  .shop.none .s-layout{display:block}
  body.spage:has(.shop.none) .qwrap{max-width:780px}
  .s-side{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:auto;padding:4px}
  /* and stays at the top of the column while the list scrolls under it; the ring of the page's own ground keeps a card
     going under it from showing round its edges */
  .s-acts{position:sticky;top:0;z-index:1;background:var(--bg-2);box-shadow:0 0 0 4px var(--bg-2)}
  .s-main:not(:has(:target,.is-open)) > .s-default{display:block}
  .shop.ask-open .s-main:not(:has(:target)) > .s-default,.shop.err-open .s-main:not(:has(:target)) > .s-default{display:none}
  /* while the list shows only those «Per revisar» (decision 0113), the first of them is the one opened beside it; with none,
     the usual one stays, beside the line that says there are none */
  .shop.only-review .s-main:has(> .s-default-review):not(:has(:target,.is-open)) > .s-default:not(.s-default-review){display:none}
  .shop.only-review .s-main:not(:has(:target,.is-open)) > .s-default-review{display:block}
  .shop.only-review.ask-open .s-main:not(:has(:target)) > .s-default-review,.shop.only-review.err-open .s-main:not(:has(:target)) > .s-default-review{display:none}
  .s-back{display:none}
  .sthread > li{max-width:76%}
  .s-conv{padding:24px 28px 0}
  .sreply{margin:0 -28px;padding:16px 28px 18px}
}
/* The card of a question in the format of a real round: its short name, the ⓘ and the ❓ folded (the
   public page has no app.js, so they are <details> and not the tooltip of the internal screens), the
   mark of a question that blocks us, and what choosing an option implies, which appears when it is
   chosen and not before (it is an answer to "and what happens if I pick this one?"). */
.qname{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 6px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.qname .chip{text-transform:none;letter-spacing:0}
.qx{margin:0 0 8px;font-size:14px}
.qx>summary{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--ink-2);padding:4px 0;list-style:none}
.qx>summary::-webkit-details-marker{display:none}
.qx>summary .mk{flex:none;width:20px;height:20px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.qx[open]>summary{font-weight:600}
.qx>p{margin:2px 0 8px 28px;color:var(--ink-2);line-height:1.45}
.qopt .imp{display:none}
.qopt:has(input:checked) .imp{display:block}
@supports not (selector(:has(*))){.qopt .imp{display:block}}
/* The photos of an answer: the paper the client would otherwise have sent by WhatsApp. */
.qfiles{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.qfl{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
.qfl li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-s);padding:6px 10px;font-size:14px}
.qfl .nm{min-width:0;overflow-wrap:anywhere}
.qfl .sz{color:var(--ink-3);font-size:13px}
.qfl form{margin-left:auto}
.qadd{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.qadd .qfree{margin:0;width:100%}
.qadd input[type=file]{min-width:0;max-width:100%;font-size:14px}
.qadd .hint{width:100%;font-size:13px;color:var(--ink-3)}

/* ---------- Preguntas tab of a client (Floemo's side) ---------- */
/* The answer a request is decided with (decision 0074): the box Bernat writes in is the width of the
   card, because what goes in it is what the client reads and he has to see it whole. */
.reqbox{display:block;font-size:14px;color:var(--ink-2);margin:0 0 6px}
/* Where a shop's proposal stands with the shop (decision 0092): one line under the title, what waiting means in the
   decision's card, and on the proposal's bubble the words the shop reads next to the pictures. */
.yesline{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.yesline .chip{white-space:normal;text-align:left;line-height:1.35;height:auto;padding-top:3px;padding-bottom:3px}
.yeswait{margin:0 0 10px;font-size:14px;color:var(--ink-2);line-height:1.45}
.yeswait b{color:var(--ink)}
/* Who a request waits for (decision 0096): the line at the top of the request screen, in the colour of whoever has the
   next move — his in the brand colour, something gone wrong in red, the shop in amber, the session in blue, the platform
   in grey. The lists file the same answer in sections marked with the same colours (decision 0098, below). On a
   proposal's bubble, whether the shop said yes to it. */
.waitline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--line-2);border-left-width:5px;border-radius:var(--radius-s);background:var(--bg)}
.waitline .wl-b{flex:1 1 280px;min-width:0}
.waitline .wl-who{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.waitline .wl-line{margin:0;font-size:17px;font-weight:700;line-height:1.35;color:var(--ink)}
.waitline .wl-when{font-weight:400;font-size:14px;color:var(--ink-2);white-space:nowrap}
.waitline .wl-help,.waitline .wl-beside,.waitline .wl-why{margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--ink-2)}
.waitline .wl-why{color:var(--ink)}
.waitline .wl-beside{color:var(--ink)}
.waitline .wl-acts{display:flex;flex-wrap:wrap;gap:8px}
.waitline.you{border-color:var(--brand-100);border-left-color:var(--brand);background:var(--brand-50)}
.waitline.you .wl-who{color:var(--brand)}
.waitline.problem{border-color:var(--red-line);border-left-color:var(--red);background:var(--red-50)}
.waitline.problem .wl-who{color:var(--red)}
.waitline.shop{border-color:var(--amber-line);border-left-color:var(--amber);background:var(--amber-50)}
.waitline.shop .wl-who{color:var(--amber)}
.waitline.session{border-color:var(--blue-line);border-left-color:var(--blue);background:var(--blue-50)}
.waitline.session .wl-who{color:var(--blue)}
.waitline.platform,.waitline.closed{border-left-color:var(--ink-3);background:var(--bg-3)}
.waitline.done{border-color:var(--green-line);border-left-color:var(--green);background:var(--green-50)}
.waitline.done .wl-who{color:var(--green)}
.yesmark{display:inline-block;margin:8px 0 0;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:18px;border:1px solid transparent}
.yesmark.green{background:var(--green-50);color:var(--green);border-color:var(--green-line)}
.yesmark.amber{background:var(--amber-50);color:var(--amber);border-color:var(--amber-line)}
.yesmark.gray{background:var(--bg-3);color:var(--ink-2);border-color:var(--line-2)}
@media (max-width:599px){.waitline{padding:10px 12px}.waitline .wl-line{font-size:16px}.waitline .wl-acts{width:100%}.waitline .wl-acts .btn{flex:1 1 auto;justify-content:center}}
/* Faces (decision 0103): who said or did something, as the round picture a messaging app puts next to it — somebody at the
   shop by their initial, the session by its mark, a person of Floemo by their initial, the platform by Floemo's logo. The
   grounds are fixed colours dark enough for white on them in both themes, like the monograms'. */
.fc{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;flex:none;background:var(--fc-platform);color:#fff;font-weight:800;font-size:14px;line-height:1;letter-spacing:0;user-select:none;-webkit-user-select:none}
.fc svg{width:58%;height:58%}
.fc.s{width:20px;height:20px;font-size:10px}
.fc.l{width:44px;height:44px;font-size:19px}
.fc-shop{background:var(--fc-shop)}
.fc-session{background:var(--fc-session)}
.fc-person{background:var(--brand-mono)}
.fc-platform{background:var(--fc-platform)}

/* The lists of requests at a glance (decisions 0098 and 0103): one section per who has the next move, its title marked with
   the colour of the line at the top of a request, and every request a chat of a messaging app — the client's avatar with
   the face of who acted last in its corner, the title with the moment on its right, the line of what happened last behind
   the icon of its state, the badge of what waits for him, the «after» picture of its proposal — the whole row a link to the
   request. Closed requests fold at the end. In Pendiente a request's row is drawn the same way. */
.gl-sec{margin:18px 0 0}
.gl-sec:first-of-type{margin-top:6px}
.gl-h{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:13px;font-weight:700;color:var(--ink-2)}
.gl-h::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink-3);flex:none}
.gl-h.you::before{background:var(--brand)}
.gl-h.shop::before{background:var(--amber)}
.gl-h.session::before{background:var(--blue)}
.gl-h .count{font-weight:600}
details.fold.gl-sec{border-top:0;margin-top:18px}
details.fold.gl-sec > summary{min-height:36px}
.gl-list{list-style:none;margin:0;padding:0}
.gl-list li{border-top:1px solid var(--line)}
.gl-list li:first-child{border-top:0}
.gl{display:flex;align-items:center;gap:12px;min-height:70px;padding:10px 8px;margin:0 -8px;border-radius:var(--radius-s);color:inherit}
.gl:hover{background:var(--bg-2);text-decoration:none}
.gl-av{position:relative;flex:none;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center}
.gl-av > .mg{width:48px;height:48px;font-size:20px}
.gl-av > .mg.sq{border-radius:14px}
.gl-av > .fc.l{width:48px;height:48px;font-size:20px}
.gl-fc{position:absolute;right:-4px;bottom:-4px;display:inline-flex;border-radius:50%;box-shadow:0 0 0 2px var(--bg)}
.gl-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.gl-r{display:flex;align-items:center;gap:8px;min-width:0}
.gl-t{flex:1;min-width:0;font-weight:600;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl.his .gl-t{font-weight:700}
.gl-id{font-size:12px;font-weight:600;color:var(--ink-3);margin-right:2px;letter-spacing:.01em}
.gl-w{flex:none;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.gl.his .gl-w{color:var(--brand);font-weight:700}
.gl-l{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-3)}
.gl-i{flex:none;display:inline-flex;width:17px;height:17px;color:var(--ink-3)}
.gl-i svg{width:17px;height:17px}
.gl-lt{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-l.you .gl-i{color:var(--brand)}
.gl-l.shop .gl-i{color:var(--amber)}
.gl-l.session .gl-i{color:var(--blue)}
.gl-l.done .gl-i{color:var(--green)}
.gl-l.bad,.gl-l.bad .gl-i{color:var(--red)}
.gl.his .gl-l{color:var(--ink-2)}
.gl-m{flex:none;padding:1px 9px;border-radius:999px;font-size:12px;font-weight:700;line-height:18px;white-space:nowrap;background:var(--bg-3);color:var(--ink-2);border:1px solid var(--line-2)}
.gl-m.red{background:var(--red-50);color:var(--red);border-color:var(--red-line)}
.gl-m.amber{background:var(--amber-50);color:var(--amber);border-color:var(--amber-line)}
.gl-m.you{background:var(--brand-50);color:var(--brand);border-color:var(--brand-100)}
.gl-m.blue{background:var(--blue-50);color:var(--blue);border-color:var(--blue-line)}
.gl-n{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--brand);color:var(--on-brand);font-size:12px;font-weight:800;line-height:1}
.gl-th{flex:none;width:48px;height:48px;border-radius:10px;overflow:hidden;border:1px solid var(--line-2);background:var(--bg-3)}
.gl-th img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
@media (max-width:599px){.gl{gap:10px}.gl-t{font-size:14.5px}.gl-l{font-size:13.5px}.gl-w{font-size:12px}.gl-th{width:44px;height:44px}.gl-id{display:none}}
/* Bernat's Claude plan (decision 0097): the strip of Home and /solicitudes, one meter per window whose fill says how close
   it is to the limit (the brand colour, amber from 70 %, red from 90 %) over a track of the same colour's lightest step,
   and the figure always written next to it; and, on a cost line, the estimate of what an answer spends of it. */
.planstrip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:0 0 14px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg);font-size:14px;color:var(--ink-2)}
.card .planstrip{margin:10px 0 12px;background:var(--bg-2)}
.planstrip .ps-name{font-weight:700;color:var(--ink)}
.planstrip .ps-win{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.planstrip .ps-win b{color:var(--ink)}
.planstrip .ps-when,.planstrip .ps-read{font-size:13px;color:var(--ink-3)}
.planstrip .ps-problem{flex-basis:100%;font-size:13px;color:var(--amber)}
progress.pbar{display:inline-block;width:72px;height:8px;border:0;border-radius:999px;overflow:hidden;appearance:none;-webkit-appearance:none;background:var(--brand-50)}
progress.pbar::-webkit-progress-bar{background:var(--brand-50);border-radius:999px}
progress.pbar::-webkit-progress-value{background:var(--brand);border-radius:999px}
progress.pbar::-moz-progress-bar{background:var(--brand);border-radius:999px}
progress.pbar.warn,progress.pbar.warn::-webkit-progress-bar{background:var(--amber-50)}
progress.pbar.warn::-webkit-progress-value{background:var(--amber)}
progress.pbar.warn::-moz-progress-bar{background:var(--amber)}
progress.pbar.crit,progress.pbar.crit::-webkit-progress-bar{background:var(--red-50)}
progress.pbar.crit::-webkit-progress-value{background:var(--red)}
progress.pbar.crit::-moz-progress-bar{background:var(--red)}
progress.pbar.old,progress.pbar.old::-webkit-progress-bar{background:var(--bg-2)}
progress.pbar.old::-webkit-progress-value{background:var(--ink-3)}
progress.pbar.old::-moz-progress-bar{background:var(--ink-3)}
.cost .plan,#session-cost .plan{color:var(--ink-2);font-weight:600;cursor:help}
@media (max-width:599px){.planstrip{gap:6px 12px}.planstrip .ps-name{flex-basis:100%}.planstrip .ps-win{display:grid;grid-template-columns:56px 72px auto;align-items:center;gap:2px 8px;flex-basis:100%;white-space:normal}.planstrip .ps-when{grid-column:2/-1}}
.waive{margin:12px 0 0}
.shopreads{margin:8px 0 0;padding:8px 10px;border-left:3px solid var(--brand-100);background:var(--bg-2);border-radius:0 8px 8px 0}
.shopreads .who{display:block;font-size:12px;color:var(--ink-3);margin-bottom:2px}
.reqans textarea{width:100%;min-height:120px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--radius-s);background:var(--bg);color:var(--ink);line-height:1.4;resize:vertical}
.reqans .qrow{flex-wrap:wrap;margin-top:10px}
.reqans .hint{font-size:13px;color:var(--ink-3)}
.qnew{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 10px;align-items:center;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.qnew label{font-size:13px;color:var(--ink-2)}
.qnew input,.qnew select{padding:8px 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg);min-width:0;width:100%}
.qnew input[type=number]{width:100px;justify-self:start}
.qnew .btn{grid-column:1/-1;justify-self:start}
.qnew .hint{grid-column:1/-1;font-size:12px;color:var(--ink-3)}
@media (max-width:599px){.qnew{grid-template-columns:minmax(0,1fr)}.qnew label{margin-bottom:-4px}}
.qclose{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.qclose .hint{font-size:12px;color:var(--ink-3)}
.fresh{margin:12px 0 0;padding:12px;border:1px solid var(--brand-100);border-radius:var(--radius-s);background:var(--brand-50)}
.fresh p{margin:0 0 6px}
.codebox{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.codebox code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:20px;font-weight:700;letter-spacing:.06em;color:var(--brand-600);user-select:all}
/* ---------- The chat bubble (decision 0104) ----------
   One round button in the corner of every page of Floemo's side, above the tab bar on a phone, with the count of what waits
   for him on it; it opens the chat in a panel over the page — the whole screen on a phone, a panel over the corner on a
   desktop — drawn in a frame. The button never covers what somebody is typing into: while a field has the keyboard on a
   phone it steps aside, and every page leaves room under its last line for it.
   Its own box takes no cell of the shell's grid: everything it shows is fixed to the screen, and as a grid item of its own
   it was a second row that left a blank band under a page shorter than a computer's screen (Bernat's screenshots,
   2026-10-19). Absolute, it is out of the grid's flow, and it makes no stacking context the button and the panel would
   be shut inside. */
.cb{position:absolute}
.cb-fab{position:fixed;right:16px;bottom:calc(var(--tab-h) + 14px + env(safe-area-inset-bottom));z-index:45;width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-pop);text-decoration:none}
.cb-fab:hover{background:var(--brand-600);text-decoration:none}
.cb-fab svg{width:26px;height:26px}
.cb-i,.cb-x{display:inline-flex}
.cb-x,.cb.open .cb-i{display:none}
.cb.open .cb-x{display:inline-flex}
.cb-badge{position:absolute;top:-3px;right:-3px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--badge);color:#fff;font-size:12px;font-weight:800;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg-2)}
.cb-badge:empty{display:none}
.cb-panel{position:fixed;inset:0;z-index:60;display:flex;background:var(--bg)}
.cb-panel[hidden]{display:none}
.cb-frame{flex:1;display:block;width:100%;height:100%;border:0;background:var(--bg)}
body:has(.cb) main{padding-bottom:calc(var(--tab-h) + 88px)}
@media (max-width:599px){html.cb-open,html.cb-open body{overflow:hidden}}
@media (min-width:600px) and (max-width:899px){
  body.page-chat .cb-panel{bottom:calc(var(--tab-h) + 156px);height:min(680px,calc(100vh - var(--tab-h) - 184px));height:min(680px,calc(100dvh - var(--tab-h) - 184px))}
}
@media (min-width:600px){
  .cb-panel{inset:auto;right:20px;bottom:calc(var(--tab-h) + 82px);width:400px;height:min(680px,calc(100vh - var(--tab-h) - 110px));height:min(680px,calc(100dvh - var(--tab-h) - 110px));border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-pop)}
}
@media (max-width:899px){body:has(main textarea:focus,main input[type=text]:focus) .cb-fab{display:none}}
/* Over the chat of Claude, whose box stays at the foot of the screen, the bubble stands above the box. */
body.page-chat .cb-fab{bottom:calc(var(--tab-h) + 88px + env(safe-area-inset-bottom))}
@media (min-width:900px){
  .cb-fab{right:24px;bottom:24px}
  body.page-chat .cb-fab{bottom:96px}
  body.page-chat .cb-panel{bottom:164px;height:min(700px,calc(100vh - 190px));height:min(700px,calc(100dvh - 190px))}
  .cb-panel{right:24px;bottom:92px;height:min(700px,calc(100vh - 120px));height:min(700px,calc(100dvh - 120px))}
  body:has(.cb) main{padding-bottom:96px}
}
@media print{.cb{display:none}}

/* A page drawn inside the panel (embed_layout.html): no shell, the panel's own ground, and the page head fixed at the top. */
body.embed{background:var(--bg)}
body.embed main{padding:0 0 env(safe-area-inset-bottom)}
body.embed > main > .notice{margin:10px 10px 0}

/* The chat's first screen: its head in the brand's colour, his open requests as the rows of the lists, the box at the foot. */
.askchange{display:flex;flex-direction:column;min-width:0}
.askchange.in-panel{min-height:100vh;min-height:100dvh}
.ac-head{display:flex;align-items:center;gap:12px;padding:16px 14px 14px;background:var(--brand);color:var(--on-brand)}
.ac-head .grow{flex:1;min-width:0}
.ac-head h1{margin:0;font-size:18px;color:inherit}
.ac-lead{margin:2px 0 0;font-size:13px;line-height:1.35;color:inherit;opacity:.92}
.ac-logo{flex:none;width:40px;height:40px;border-radius:12px;background:var(--brand-mono);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.ac-logo svg{width:22px;height:22px}
.ac-head .btn.ic{flex:none;background:transparent;color:inherit;border-color:currentColor;opacity:.9}
.ac-body{flex:1;padding:6px 14px 10px}
.ac-h{display:flex;align-items:center;gap:6px;margin:10px 0 2px;font-size:13px;font-weight:700;color:var(--ink-2)}
.ac-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 16px 20px;text-align:center;color:var(--ink-3);font-size:14px}
.ac-empty p{margin:0;max-width:260px}
.ac-empty-ic{width:60px;height:60px;border-radius:50%;background:var(--brand-50);color:var(--brand);display:inline-flex;align-items:center;justify-content:center}
.ac-empty-ic svg{width:28px;height:28px}
.ac-compose{position:sticky;bottom:0;display:flex;flex-direction:column;gap:6px;margin:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg)}
.ac-compose .notice{margin:0}
.ac-compose .composer .clip{border-radius:50%}
.ac-compose textarea{font-size:16px}
.ac-compose .hint1{margin:0}
.ac-compose .sfiles{padding:0}
.ac-compose .sfiles[hidden]{display:none}
.ac-where{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;color:var(--ink-3);min-width:0}
.ac-where[hidden]{display:none}
.ac-where svg{width:14px;height:14px;flex:none}
.ac-where span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.askchange-page{max-width:640px;padding:0;overflow:hidden}
.askchange-page .ac-compose{position:static}

/* ---------- A request as a chat (decision 0103) ---------- */
.btn.ic{width:36px;min-height:36px;padding:0}
.btn.ic svg{width:18px;height:18px}
.btn.quiet{background:var(--bg);color:var(--ink-2);border:1px solid var(--line-2)}
.btn.quiet:hover{background:var(--bg-2);color:var(--ink)}
.rq-id{font-size:12.5px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
/* The banner of who it waits for carries the icon its row has in the lists. */
.waitline .wl-ic{flex:none;align-self:flex-start;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--bg);color:var(--ink-3);border:1px solid var(--line)}
.waitline .wl-ic svg{width:19px;height:19px}
.waitline.you .wl-ic{color:var(--brand);border-color:var(--brand-100)}
.waitline.problem .wl-ic{color:var(--red);border-color:var(--red-line)}
.waitline.shop .wl-ic{color:var(--amber);border-color:var(--amber-line)}
.waitline.session .wl-ic{color:var(--blue);border-color:var(--blue-line)}
.waitline.done .wl-ic{color:var(--green);border-color:var(--green-line)}
.waitline .wl-b{flex:1 1 220px}
@media (max-width:599px){.waitline{flex-wrap:wrap}.waitline .wl-b{flex:1 1 0;min-width:0}}
/* The bubbles: the face of who wrote it on the left, never on his own; the name over the first bubble of a run. */
.thread.rq{gap:6px}
.thread.rq > li.rb{display:flex;align-items:flex-start;gap:8px;max-width:92%;margin:6px 0 0;padding:0;background:transparent;border:0;border-radius:0}
.thread.rq > li.rb.cont{margin-top:0}
.thread.rq > li.rb.me{align-self:flex-end}
.thread.rq > li.rb.wide{max-width:100%;align-self:stretch}
.rb-av{flex:none;width:32px;min-height:1px}
.rb-b{flex:0 1 auto;min-width:0;padding:8px 12px 6px;border:1px solid var(--line);border-radius:16px;border-top-left-radius:4px;background:var(--bg);font-size:14.5px;overflow-wrap:anywhere}
.rb.wide .rb-b{flex:1}
.rb.cont .rb-b{border-top-left-radius:16px}
.rb.me .rb-b{background:var(--brand-50);border-color:var(--brand-100);border-top-left-radius:16px;border-top-right-radius:4px}
.rb.me.cont .rb-b{border-top-right-radius:16px}
.rb.claude .rb-b{background:var(--violet-50);border-color:var(--violet-line)}
.rb.shop .rb-b{border-color:var(--line-2)}
.rb .who{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 3px;font-size:12.5px;color:var(--ink-3)}
.rb .who b{font-weight:700}
.rb.shop .who b{color:var(--amber)}
.rb.claude .who b{color:var(--violet)}
.rb.me .who b{color:var(--brand)}
.rb-meta{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:4px 10px;margin-top:4px;font-size:11px;color:var(--ink-3)}
.rb-meta time{flex:none;margin-left:auto}
.thread.rq .rb-meta .cost,.thread.rq .rb-meta .wait{display:inline;margin:0}
/* The proposal at the head, as a card: its words, its pictures before and after, whether the shop said yes, and a pointer to
   the bar in the foot where its one action is (decision 0106). */
.rb.pcard .rb-b{padding:12px 14px 8px;border:1px solid var(--violet-line);border-radius:18px;border-top-left-radius:4px;background:var(--bg);box-shadow:var(--shadow-card)}
.pc-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:var(--violet-50);color:var(--violet);border:1px solid var(--violet-line);font-weight:800;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.pc-tag svg{width:13px;height:13px}
.rb.pcard .cmp{margin-top:10px}
.rb.pcard .cmp-frame img{max-height:340px;object-fit:contain;object-position:top center}
.rb.pcard .yesmark{margin-top:10px}
/* A technical decision, with its options as the quick replies of a messaging app. */
.thread.rq > li.qcard{margin-top:8px;padding:12px 14px;border-radius:18px}
.thread.rq > li.qcard .who{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:12px;color:var(--ink-3)}
.qk{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:var(--amber)}
.qk svg{width:15px;height:15px}
.qreps{display:flex;flex-direction:column;gap:8px;margin:10px 0 6px}
.qreps form{margin:0}
.qrep{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;min-height:52px;padding:10px 14px;border:1px solid var(--line-2);border-radius:14px;background:var(--bg);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.qrep:hover{border-color:var(--brand);background:var(--brand-50)}
.qrep.rec{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.qr-t{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:15px}
.qr-rec{padding:1px 8px;border-radius:999px;background:var(--brand-50);color:var(--brand);font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.qr-i{font-size:13px;line-height:1.35;color:var(--ink-3)}
.qother > summary{cursor:pointer;padding:6px 2px;font-size:13px;font-weight:600;color:var(--ink-2)}
.qother .qnew{margin-top:4px}
.qdone{display:flex;align-items:flex-start;gap:6px;color:var(--green);font-size:13px}
.qdone svg{flex:none;width:16px;height:16px;margin-top:1px}
/* The steps of the machine: grey pills, a run of them folded into its last one. */
.thread.rq > li.sys{padding:3px 12px;border-radius:999px;background:var(--bg-3);max-width:92%}
.thread.rq > li.steps{align-self:center;max-width:92%;padding:0;background:transparent;border:0;text-align:center;font-size:12px;color:var(--ink-3)}
.thread.rq > li.steps details > summary{list-style:none;cursor:pointer}
.thread.rq > li.steps details > summary::-webkit-details-marker{display:none}
.steps-n{display:inline-block;padding:1px 10px;border-radius:999px;border:1px dashed var(--line-2);background:var(--bg);font-weight:700;font-size:11.5px;color:var(--ink-2)}
.steps-l{list-style:none;margin:6px 0 2px;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.steps-l > li.sys{padding:3px 12px;border-radius:999px;background:var(--bg-3)}

/* ---------- A request is its chat (decision 0106) ----------
   Wherever it is drawn — its own page, the chat bubble's panel, the Support role's chats — the chat fills what it is
   given: the header and the foot stay, the conversation is the one area that scrolls, and the page itself never scrolls. On
   a phone its own page is the whole screen, with no menu button and no tab bar, as a chat of a messaging app is; the bubble
   steps aside there, because the page is that chat already and the bubble would sit on its send button. */
:root{--rq-bar-h:60px}
.rq-chat{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;background:var(--bg)}
body.page-req main{display:flex;flex-direction:column;padding:0;overflow:hidden;min-height:0}
html:has(body.page-req.embed),body.page-req.embed{height:100vh;height:100dvh;min-height:0;overflow:hidden}
body.page-req.embed main{height:100vh;height:100dvh}
@media (max-width:899px){
  html:has(body.page-req),body.page-req{height:100vh;height:100dvh;min-height:0;overflow:hidden}
  body.page-req .app,body.page-req .shell{height:100vh;height:100dvh;min-height:0;overflow:hidden}
  body.page-req .navbtn,body.page-req .tabbar{display:none}
  body.page-req main{flex:1}
}
body.page-req .cb{display:none}
/* the header: the way back, who and where it stands (tapping it opens the information), and «⋯» */
.rq-bar{flex:none;display:flex;align-items:center;gap:6px;height:var(--rq-bar-h);padding:0 8px 0 4px;border-bottom:1px solid var(--line);background:var(--bg)}
.rq-back{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:44px;color:var(--ink-2);border-radius:10px}
.rq-back:hover{background:var(--bg-2);text-decoration:none}
.rq-back svg{width:22px;height:22px}
html.sp-wide .rq-back{display:none}
.rq-info{flex:1;min-width:0}
.rq-info > summary{list-style:none;cursor:pointer}
.rq-info > summary::-webkit-details-marker{display:none}
.rq-who{display:flex;align-items:center;gap:10px;min-width:0;padding:4px 6px;border-radius:12px}
.rq-who:hover{background:var(--bg-2)}
.rq-who > .mg{width:40px;height:40px;font-size:17px}
.rq-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rq-title{font-size:15.5px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rq-status{display:flex;align-items:center;gap:5px;min-width:0;font-size:12.5px;line-height:1.3;color:var(--ink-3)}
.rq-st-ic{flex:none;display:inline-flex;width:15px;height:15px}
.rq-st-ic svg{width:15px;height:15px}
.rq-st-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rq-status.you{color:var(--brand);font-weight:700}
.rq-status.problem{color:var(--red);font-weight:700}
.rq-status.shop{color:var(--amber)}
.rq-status.session{color:var(--blue)}
.rq-status.asker,.rq-status.done{color:var(--green)}
.rq-panel-acts{flex:none;display:inline-flex;gap:6px}
html.in-sp .rq-panel-acts{display:none}
/* the information, as a messaging app's contact information: over the conversation, under the header; a panel on the right
   on a wide screen */
.rq-panel{position:absolute;left:0;right:0;top:var(--rq-bar-h);bottom:0;z-index:25;display:flex;flex-direction:column;background:var(--bg);border-top:1px solid var(--line)}
.rq-panel-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.rq-panel-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 14px calc(18px + env(safe-area-inset-bottom))}
.rq-id-card{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;margin:4px 0 16px}
.rq-id-card h1{font-size:19px;line-height:1.3;overflow-wrap:anywhere}
.rq-chips{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:0}
.rq-panel .waitline{margin:0 0 14px}
.rq-panel .cv-top{flex:none;margin:0 -14px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rq-panel .cv-top .thread-note,.rq-panel .cv-top .thread-act{margin:8px 12px}
.rq-panel .cv-top .thread-note{font-size:12px;color:var(--ink-3)}
.rq-panel .cv-head .acts .count{margin-left:4px}
.rq-facts{margin:0 0 10px}
@media (min-width:700px){.rq-panel{left:auto;width:min(420px,100%);border-left:1px solid var(--line);box-shadow:var(--shadow-pop)}}
/* «⋯»: what can be done that is not an answer, each with its reason */
.rq-menu{flex:none}
.rq-menu > summary{list-style:none}
.rq-menu > summary::-webkit-details-marker{display:none}
.rq-menu[open] > summary{background:var(--bg-3)}
.rq-pop{position:absolute;right:8px;top:calc(var(--rq-bar-h) - 2px);z-index:30;width:min(380px,calc(100% - 16px));max-height:calc(100% - var(--rq-bar-h) - 12px);overflow-y:auto;padding:6px;border:1px solid var(--line-2);border-radius:14px;background:var(--bg);box-shadow:var(--shadow-pop)}
.rq-pop-note{margin:4px 10px 8px;font-size:12.5px;line-height:1.4;color:var(--ink-3)}
.rq-do{border-top:1px solid var(--line)}
.rq-pop-note + .rq-do,.rq-do:first-child{border-top:0}
.rq-do > summary .info{margin-left:auto}
.rq-do > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:46px;padding:0 10px;border-radius:10px;font-weight:600;font-size:14.5px;color:var(--ink)}
.rq-do > summary::-webkit-details-marker{display:none}
.rq-do > summary:hover{background:var(--bg-2)}
.rq-do > summary svg{width:18px;height:18px;color:var(--ink-3);flex:none}
.rq-do form{display:grid;gap:8px;padding:4px 10px 12px}
.rq-do form label{font-size:13px;font-weight:600;color:var(--ink-2)}
.rq-do input[type=text],.rq-do textarea{width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg);color:var(--ink);font-size:16px}
.rq-do .hint{font-size:12px;color:var(--ink-3)}
/* the conversation, the one area that scrolls */
.rq-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 12px 16px;background:var(--bg-2)}
/* the foot: what a tap came to, the approval when it is his, and the composer */
.rq-foot{flex:none;display:flex;flex-direction:column;gap:6px;max-height:60%;overflow-y:auto;padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg)}
.rq-foot .composer textarea{font-size:16px}
.rq-foot .hint1{margin:0}
.rq-note{margin:0}
.rq-note[hidden]{display:none}
.rq-closed{margin:4px 0;font-size:13px;color:var(--ink-3);text-align:center}
/* The approval, one tap, always in view (Bernat, 2026-09-30 01:07): above the composer, never in the conversation. */
.rq-act{display:none}
.rq-act.on{display:block;padding:10px 12px;border:1px solid var(--brand-100);border-radius:14px;background:var(--brand-50)}
.rq-act.on.waive{border-color:var(--line-2);background:var(--bg-2)}
.rq-act form{margin:0;display:grid;gap:4px 12px;align-items:center}
.act-go{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"what btn" "win btn"}
.act-go:has(.act-alert){grid-template-areas:"alert alert" "what btn" "win btn"}
.act-go .act-alert{grid-area:alert}
.act-go .act-what{grid-area:what}
.act-go .act-btn{grid-area:btn}
.act-go .act-window{grid-area:win}
.act-what{margin:0;font-size:13px;line-height:1.35;color:var(--ink-2)}
.act-btn{min-height:48px;padding:0 18px;border-radius:12px;font-size:16px;font-weight:700;white-space:nowrap}
.act-btn svg{width:18px;height:18px}
.act-window{margin:0;font-size:11.5px;line-height:1.35;color:var(--ink-3)}
.act-waive{grid-template-columns:minmax(0,1fr)}
.act-notice{display:flex;align-items:center;gap:6px;margin:0;font-size:13.5px;font-weight:700}
.act-notice svg{width:16px;height:16px;flex:none}
.act-notice.amber{color:var(--amber)}
.act-notice.gray{color:var(--ink-2)}
.act-why{display:flex;gap:8px;align-items:center;min-width:0}
.act-why input{flex:1;min-width:0;min-height:44px;padding:8px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg);color:var(--ink);font-size:16px}
/* a proposal that asks for attention says its «Importante» over the button, in red; approving it is still one tap */
.act-alert{display:flex;align-items:flex-start;gap:6px;margin:0 0 2px;padding:6px 10px;border-radius:10px;border:1px solid var(--red-line);background:var(--red-50);color:var(--red);font-size:13.5px;font-weight:700;line-height:1.35}
.act-alert svg{flex:none;width:16px;height:16px;margin-top:1px}
.act-alert .md{min-width:0;max-height:6.8em;overflow-y:auto}
@media (max-width:599px){
  .act-go,.act-go:has(.act-alert){grid-template-columns:minmax(0,1fr);grid-template-areas:"alert" "what" "btn" "win"}
  .act-go:not(:has(.act-alert)){grid-template-areas:"what" "btn" "win"}
  .act-btn{width:100%}
  .act-why{flex-wrap:wrap}.act-why input{flex:1 1 100%}.act-why .act-btn{width:100%}
}
/* the proposal's card points at the bar, where its one button is */
.pc-point{display:inline-flex;align-items:center;gap:4px;margin-top:10px;padding:4px 10px;border-radius:999px;background:var(--brand-50);color:var(--brand);border:1px solid var(--brand-100);font-size:12.5px;font-weight:700}
.pc-point.waive{background:var(--bg-2);color:var(--ink-2);border-color:var(--line-2)}
.pc-point:hover{text-decoration:none;filter:brightness(.97)}
.pc-point svg{width:14px;height:14px}
.rq-act.flash,.rb.flash .rb-b,.qcard.flash{animation:rq-flash 1.2s ease}
@keyframes rq-flash{0%{box-shadow:0 0 0 0 var(--brand)}30%{box-shadow:0 0 0 4px var(--brand-100)}100%{box-shadow:none}}
@media (prefers-reduced-motion:reduce){.rq-act.flash,.rb.flash .rb-b,.qcard.flash{animation:none}}
/* The one text a proposal that waits for his approval opens on (Bernat, 2026-09-30 01:18): the change, the process,
   «Importante» in a box that reads on its own — red when the proposal asks for attention —, and whether he has anything to
   decide; the chat folded under it, one tap away. */
.rq-sum{max-width:720px;margin:2px auto 12px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:var(--bg);box-shadow:var(--shadow-card)}
.rq-sum[hidden]{display:none}
.rq-sum-tag{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 12px;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--violet)}
.rq-sum-tag .chip{text-transform:none;letter-spacing:0}
.rq-sum h2{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:13px;font-weight:800;color:var(--ink-2)}
.rq-sum h2 svg{width:16px;height:16px;flex:none}
.rq-sum .md{font-size:15px;line-height:1.5}
.rq-sum-part{margin:0 0 14px}
.rq-sum-imp{margin:0 0 14px;padding:10px 12px;border:1px solid var(--amber-line);border-radius:12px;background:var(--amber-50)}
.rq-sum-imp h2{color:var(--amber)}
.rq-sum-imp.nothing{border-color:var(--line);background:var(--bg-2)}
.rq-sum-imp.nothing h2{color:var(--ink-2)}
.rq-sum-imp.nothing p{margin:0;color:var(--ink-3);font-size:15px}
.rq-sum.attention{border-color:var(--red-line)}
.rq-sum.attention .rq-sum-imp{border-color:var(--red-line);background:var(--red-50)}
.rq-sum.attention .rq-sum-imp h2,.rq-sum.attention .rq-sum-imp .md{color:var(--red)}
.rq-sum-clamp{position:relative;max-height:10.5em;overflow:hidden}
.rq-sum-clamp::after{content:"";position:absolute;left:0;right:0;top:7.5em;height:3em;background:linear-gradient(rgba(255,255,255,0),var(--bg))}
.rq-sum-more{display:inline-block;margin-top:6px;font-size:13.5px;font-weight:700}
.rq-sum-dec{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding-top:12px;border-top:1px solid var(--line)}
.rq-sum-dec h2{flex:1 1 100%;margin:0}
.rq-sum-dec > p,.rq-sum-q{flex:1 1 220px;min-width:0;margin:0;font-size:15px;line-height:1.45}
.rq-sum-q p{margin:0}
.rq-sum-q .rq-sum-stops{margin-top:2px;font-size:13px;color:var(--ink-3)}
.rq-sum-dec.yes p b{color:var(--brand)}
.rq-conv{margin:0}
.rq-conv > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;max-width:720px;min-height:44px;margin:0 auto 12px;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg);font-size:14px;font-weight:700;color:var(--ink-2)}
.rq-conv > summary::-webkit-details-marker{display:none}
.rq-conv > summary:hover{background:var(--bg-3)}
.rq-conv > summary svg{width:16px;height:16px;transition:transform .15s ease}
.rq-conv[open] > summary svg{transform:rotate(180deg)}
.rq-conv-open{display:none}
.rq-conv[open] .rq-conv-open{display:inline}
.rq-conv[open] .rq-conv-shut{display:none}
.rq-conv-n{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--bg-3);color:var(--ink-2);font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.rq-conv.alone > summary,.rq-body:has(> .rq-sum[hidden]):has(> .rq-err[hidden]) > .rq-conv > summary{display:none}
/* An error's three parts (decision 0116): the one text's card, with what makes it urgent in red at its top */
.rq-err{max-width:720px;margin:2px auto 12px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:var(--bg);box-shadow:var(--shadow-card)}
.rq-err[hidden]{display:none}
.rq-err.urgent{border-color:var(--red-line)}
.rq-err .rq-sum-tag{color:var(--red)}
.rq-err h2,.rq-err h3{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:13px;font-weight:800;color:var(--ink-2)}
.rq-err h2 svg,.rq-err h3 svg{width:16px;height:16px;flex:none}
.rq-err .md,.rq-err p{font-size:15px;line-height:1.5}
.rq-err p{margin:0 0 4px}
.rq-err .small{font-size:13px}
.rq-err .rq-err-urgent{display:flex;align-items:flex-start;gap:8px;margin:0 0 10px;padding:8px 12px;border-radius:12px;background:var(--red-50);border:1px solid var(--red-line);color:var(--red);font-weight:700}
.rq-err-urgent svg{width:18px;height:18px;flex:none;margin-top:3px}
.rq-err .rq-err-route,.rq-err .rq-err-code{overflow-wrap:anywhere;font-size:14px}
.rq-err-code{padding:8px 10px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line)}
.rq-err .rq-sum-imp.red{border-color:var(--red-line);background:var(--red-50)}
.rq-err .rq-sum-imp.red h3,.rq-err .rq-sum-imp.red .md{color:var(--red)}
.rq-err .rq-sum-imp{flex:1 1 100%}
.rq-err .rq-sum-dec > .md{flex:1 1 100%}
.rq-err-fixed{display:flex;align-items:flex-start;gap:8px;flex:1 1 100%;color:var(--green);font-weight:700}
.rq-err-fixed svg{width:18px;height:18px;flex:none;margin-top:3px}
/* «Urgent», at the top of Home (decision 0116): every error that is urgent now, each a link to its request */
.urgent-block{border-color:var(--red-line);background:var(--red-50)}
.urgent-block h2{display:flex;align-items:center;gap:8px;color:var(--red)}
.urgent-block h2 svg{width:20px;height:20px;flex:none}
.urgent-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.urgent-list a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--red-line);border-radius:12px;background:var(--bg);color:var(--ink)}
.urgent-list a:hover{text-decoration:none;border-color:var(--red)}
.urgent-list b{font-size:15px}
.urgent-why{color:var(--red);font-weight:700;font-size:14px}
.urgent-what{color:var(--ink-2);font-size:14px;overflow-wrap:anywhere}
.urgent-decide{font-size:14px}
@media (prefers-reduced-motion:reduce){.rq-conv > summary svg{transition:none}}
/* a text said twice, once: the repeat is one grey line in its place that opens */
.thread.rq > li.steps.rep{align-self:stretch;max-width:100%}
.rep-l{margin:6px 0 2px;text-align:left}

/* ---------- The Support role's requests as WhatsApp Web (decision 0106) ----------
   His projects, and one project's chats: the list and the open chat side by side on a wide screen, one at a time on a
   phone. The view fills the screen and never scrolls as a page: the list scrolls on its own, the chat inside its frame. */
.sp-projects{padding:4px 14px}
.sp-proj .sp-cl{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 16px;text-align:center;color:var(--ink-3);font-size:14px}
.sp-empty p{margin:0;max-width:300px}
.sp-empty-ic,.sp-pick-ic{width:56px;height:56px;border-radius:50%;background:var(--brand-50);color:var(--brand);display:inline-flex;align-items:center;justify-content:center}
.sp-empty-ic svg,.sp-pick-ic svg{width:26px;height:26px}
body.page-sp main{display:flex;padding:0;overflow:hidden;min-height:0}
body.page-sp .cb{display:none}
.sp{flex:1;display:flex;min-width:0;min-height:0;background:var(--bg)}
.sp-list{display:flex;flex-direction:column;min-width:0;min-height:0;width:100%}
.sp-head{flex:none;display:flex;align-items:center;gap:10px;height:var(--rq-bar-h);padding:0 12px 0 4px;border-bottom:1px solid var(--line)}
.sp-head .back{flex:none;justify-content:center;width:40px;padding:0}
.sp-head .back svg{width:22px;height:22px}
.sp-head .grow{flex:1;min-width:0}
.sp-head h1{font-size:16.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-sub{margin:1px 0 0;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-listed{flex:1;min-height:0;display:flex;flex-direction:column}
/* the four menus fit the list's width: the count of each is its number, and «Te tocan»'s — when it is not zero — the badge */
.sp-menus{flex:none;display:flex;gap:4px;overflow-x:auto;padding:8px 10px;border-bottom:1px solid var(--line);scrollbar-width:none}
.sp-menus::-webkit-scrollbar{display:none}
.sp-menus a{flex:none;display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:0 9px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg);font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.sp-menus a:hover{text-decoration:none;background:var(--bg-2)}
.sp-menus a.active{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.sp-menus .count{padding:0;border-radius:0;background:transparent;font-size:12px;font-weight:800;color:var(--ink-3)}
.sp-menus a.active .count{color:var(--on-ink);opacity:.8}
.sp-menus .count.his{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--badge);color:#fff;opacity:1;display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.sp-items{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 12px}
.sp-rows li.current .gl{background:var(--brand-50)}
.sp-chat{display:none;flex:1;min-width:0;min-height:0;position:relative;background:var(--bg-2)}
.sp-frame{display:block;flex:1;width:100%;height:100%;border:0;background:var(--bg)}
.sp-frame[hidden]{display:none}
.sp-pick{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;color:var(--ink-3)}
.sp-pick[hidden]{display:none}
.sp-pick p{margin:0;max-width:320px}
.sp-pick-t{font-size:17px;font-weight:700;color:var(--ink-2)}
@media (min-width:900px){
  .sp-list{width:340px;flex:none;border-right:1px solid var(--line)}
  .sp-chat{display:flex}
}
@media (min-width:1100px){
  .sp-list{width:400px}
}
@media (max-width:899px){
  html:has(body.page-sp),body.page-sp{height:100vh;height:100dvh;min-height:0;overflow:hidden}
  body.page-sp .app,body.page-sp .shell{height:100vh;height:100dvh;min-height:0;overflow:hidden}
  body.page-sp main{flex:1;padding:0 0 calc(var(--tab-h) + env(safe-area-inset-bottom))}
  body.page-sp.sp-open .navbtn,body.page-sp.sp-open .tabbar{display:none}
  body.page-sp.sp-open main{padding:0}
  .sp.chat-open .sp-list{display:none}
  .sp.chat-open .sp-chat{display:flex}
}

/* ---------- The CRM (decision 0124): the list, a client's card, its activity, its contacts and their forms ----------
   Phone first, with the pieces of the lists of Solicitudes (.gl rows) and the platform's cards; colours only from the
   tokens above, so dark mode is the same rules. */
.mg.img{background:var(--logo-bg);border:1px solid var(--line);overflow:hidden;padding:3px}
.mg.img img{width:100%;height:100%;object-fit:contain;display:block}
.gl-av > .mg.img{padding:4px}
.row .chev{color:var(--ink-3);flex:none;display:inline-flex}
.row .chev svg{width:18px;height:18px}
.crm-group .crm-gh{display:flex;align-items:center;gap:8px}
.crm-group .crm-gh::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--brand);flex:none}
.crm-group.prospects .crm-gh::before{background:var(--amber)}
.crm-group.lost .crm-gh::before{background:var(--ink-3)}
.crm-when.soon,.crm-when.today{color:var(--amber);font-weight:700}
.crm-when.past{color:var(--red);font-weight:700}
.crm-row .gl-l .gl-lt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-warn{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--amber)}
.crm-warn svg{width:15px;height:15px;flex:none}
.crm-done{margin-bottom:12px}
.crm-due{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.crm-due p{margin:0;display:flex;gap:6px;align-items:flex-start}
.crm-due svg{width:18px;height:18px;flex:none}
.crm-due.past{background:var(--red-50);color:var(--red)}
.crm-reduced{margin:0 0 12px}
.card > h2 .crm-edit{margin-left:auto}
.card > h2 .info + .crm-edit{margin-left:6px}
.crm-edit svg{width:14px;height:14px}
.crm-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 12px}
@media (min-width:600px){.crm-dates{grid-template-columns:repeat(4,minmax(0,1fr))}}
.crm-date{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-s);padding:8px 10px;min-width:0}
.crm-date dt{font-size:12px;color:var(--ink-3);font-weight:600;line-height:1.3}
.crm-date dd{margin:2px 0 0;font-size:15px;font-weight:700;overflow-wrap:anywhere}
.crm-date.empty dd{color:var(--ink-3);font-weight:500}
.crm-k{display:block;font-size:12px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.crm-uses,.crm-next,.crm-reason,.crm-origin{margin:0 0 12px}
.crm-uses{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crm-uses .crm-k{width:100%;margin-bottom:0}
.crm-prog{white-space:normal}
.crm-reason p{margin:0}
.crm-timeline{list-style:none;margin:0;padding:0;position:relative}
.crm-timeline::before{content:"";position:absolute;left:17px;top:6px;bottom:6px;width:2px;background:var(--line)}
.crm-act{position:relative;display:flex;gap:12px;padding:6px 0 14px}
.crm-act-ic{position:relative;z-index:1;flex:none;width:36px;height:36px;border-radius:50%;background:var(--brand-50);color:var(--brand);border:2px solid var(--bg);display:inline-flex;align-items:center;justify-content:center}
.crm-act-ic svg{width:18px;height:18px}
.crm-act-b{flex:1;min-width:0}
.crm-act-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:30px}
.crm-act-when,.crm-act-len{font-size:13px;color:var(--ink-3)}
.crm-act-edit{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;color:var(--ink-3)}
.crm-act-edit:hover{background:var(--bg-2);color:var(--brand)}
.crm-act-edit svg{width:17px;height:17px}
.crm-act-who{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 4px;font-size:13px;color:var(--ink-2)}
.crm-act-who svg{width:14px;height:14px;color:var(--ink-3)}
.crm-act-said{margin:0 0 6px;white-space:pre-wrap;overflow-wrap:anywhere}
.crm-act-agreed{background:var(--green-50);border:1px solid var(--green-line);border-radius:var(--radius-s);padding:8px 10px;margin:0 0 6px}
.crm-act-agreed b{display:block;font-size:12px;color:var(--green);text-transform:uppercase;letter-spacing:.04em}
.crm-act-agreed p{margin:2px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.crm-act-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.crm-act-tags .chip{white-space:normal}
.crm-act-tags svg{width:13px;height:13px}
.crm-act-files{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
/* A person's file is named by its day, the client's identifier, what it is of and its kind (A4): the whole name is read, on two lines if need be. */
.crm-act-files .att .b b,.crm-files-card .att .b b{white-space:normal;overflow-wrap:anywhere}
.crm-thumb{display:block;width:72px;height:72px;border-radius:10px;overflow:hidden;border:1px solid var(--line-2);background:var(--bg-3)}
.crm-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.crm-rec{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px;max-width:100%;padding:6px 10px;border:1px dashed var(--line-2);border-radius:10px;font-size:13px;color:var(--ink-2);background:var(--bg)}
.crm-rec svg{width:15px;height:15px;color:var(--ink-3);flex:none}
.crm-rec-m{font-size:12px;color:var(--ink-3)}
.crm-rec.pending{border-color:var(--amber-line);background:var(--amber-50)}
.crm-rec.pending .crm-rec-m{color:var(--amber)}
.crm-rec.not_to_store{opacity:.8}
.crm-add{width:100%}
@media (min-width:600px){.crm-add{width:auto}}
.crm-contact .avatar{width:40px;height:40px}
.crm-contact .meta svg{width:13px;height:13px;vertical-align:-2px}
.crm-form .field{max-width:none}
.crm-form .field textarea{width:100%;min-height:88px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--radius-s);background:var(--bg);color:var(--ink);line-height:1.4;resize:vertical;font-size:16px}
.crm-form .field input,.crm-form .field select{font-size:16px}
.crm-form .field input[type=file]{padding:8px 0;border:0;min-height:0;font-size:14px;color:var(--ink-2);background:transparent}
.crm-row2{display:grid;grid-template-columns:1fr;gap:0 12px}
@media (min-width:600px){.crm-row2{grid-template-columns:1fr 1fr}}
.crm-choice{border:0;margin:0 0 12px;padding:0;min-width:0;display:flex;flex-wrap:wrap;gap:6px}
.crm-choice legend{font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px;padding:0}
.crm-pill{position:relative;display:inline-flex}
.crm-pill input{position:absolute;opacity:0;width:1px;height:1px}
.crm-pill span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg);font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer}
.crm-pill input:checked + span{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.crm-pill input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}
.crm-confirm{display:flex;align-items:flex-start;gap:10px;margin:4px 0 12px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.crm-confirm input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--brand)}
.crm-gate{display:flex;gap:8px;align-items:flex-start}
.crm-gate svg{width:18px;height:18px;flex:none;margin-top:1px}
.crm-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.crm-actions .btn{flex:1 1 140px}
@media (min-width:600px){.crm-actions .btn{flex:0 0 auto}}
.crm-danger{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.crm-danger .btn{color:var(--red);border-color:var(--red-line)}
.crm-inline{display:inline-block;margin-top:8px}
.crm-logo-form{display:flex;flex-direction:column;align-items:flex-start}
.crm-record-add{padding:4px 14px}
.crm-reduce ul{margin:0 0 10px}
.crm-reduce p{margin:0 0 10px}


/* The card's quiet link to the client's folder in Floemo's Drive (2026-10-19). */
.crm-drive{margin:8px 0 0}
.crm-drive a{display:inline-flex;align-items:center;gap:6px}
.crm-drive svg{width:16px;height:16px;flex:none}
/* Where an agreement's signed copy is, when the platform does not hold it: its icon the size of a contact's (2026-10-19). */
.crm-held svg{width:13px;height:13px;vertical-align:-2px}

/* ---------- Servicios (decision 0105) ----------
   The hq's service ledger as the chats of the lists (0103): a coloured initial, the name, what it is, and on the right what
   it costs today with the mark of where that figure comes from. The emphasis comes from that mark and from the money
   moment, never from how big a number is: amber is «to verify» or a range, and nothing on this screen is ever red. */
.sv-sum{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.sv-sum a{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg);font-size:13px;font-weight:600;color:var(--ink-2)}
.sv-sum a:hover{text-decoration:none;background:var(--bg-2)}
.sv-sum a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none}
.sv-sum a b{color:var(--ink);font-weight:800}
.sv-sum a.look::before,.gl-h.look::before{background:var(--amber)}
.sv-sum a.soon::before,.gl-h.soon::before{background:var(--brand)}
.sv-sum a.later::before,.gl-h.later::before{background:var(--ink-3)}
.sv-sum a.quiet::before,.gl-h.quiet::before{background:var(--green)}
.sv-hint{margin:-2px 0 4px;font-size:12.5px;line-height:1.35;color:var(--ink-3)}
.sv-list{list-style:none;margin:0;padding:0}
.sv-list > li{border-top:1px solid var(--line)}
.sv-list > li:first-child{border-top:0}
.sv-list > li:target > details > .sv-s{box-shadow:inset 3px 0 0 var(--brand)}
details.sv > summary{list-style:none;cursor:pointer}
details.sv > summary::-webkit-details-marker{display:none}
.sv-s{display:flex;align-items:center;gap:12px;min-height:70px;padding:10px 8px;margin:0 -8px;border-radius:var(--radius-s)}
.sv-s:hover,details.sv[open] > .sv-s{background:var(--bg-2)}
.sv-av.mg{width:48px;height:48px;font-size:20px}
.sv-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.sv-r{display:flex;align-items:center;gap:8px;min-width:0}
.sv-n{flex:1;min-width:0;font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-n.wrap{white-space:normal;overflow:visible;font-size:14.5px;line-height:1.3}
.sv-d{font-weight:500;font-size:12.5px;color:var(--ink-3)}
.sv-c{flex:none;display:flex;align-items:center;gap:6px;max-width:48%;min-width:0}
.sv-cl{display:flex;flex-direction:column;align-items:flex-end;min-width:0;text-align:right;font-size:14px;font-weight:700;line-height:1.25;color:var(--ink)}
.sv-cl span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.sv-w{flex:1;min-width:0;font-size:13.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-st{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.35;color:var(--ink-3)}
/* The marks: a green check read at the source, a grey page written in a repo, an amber question to verify, an amber
   range, a grey dashed ring for no source; beside a ceiling, the words too. */
.sv-mk{flex:none;display:inline-flex;align-items:center;gap:3px}
.sv-m{flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}
.sv-m svg{width:17px;height:17px}
.sv-m.ok{color:var(--green)}
.sv-m.repo,.sv-m.none{color:var(--ink-3)}
.sv-m.amber{color:var(--amber)}
.sv-p{flex:none;display:inline-flex;align-items:center;margin-left:3px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:700;line-height:19px;white-space:nowrap;border:1px solid var(--line-2);color:var(--ink-3)}
.sv-p.tv,.sv-p.rg{background:var(--amber-50);color:var(--amber);border-color:var(--amber-line)}
/* One tap opens the rest of the row. */
.sv-x{padding:6px 0 16px 60px}
.sv-what{margin:0 0 8px;font-size:14px;color:var(--ink-2)}
.sv-kv{display:grid;grid-template-columns:1fr;margin:0;font-size:14px}
.sv-kv dt{margin-top:10px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.sv-kv dt:first-child{margin-top:0}
.sv-kv dd{margin:2px 0 0;min-width:0;color:var(--ink);overflow-wrap:anywhere}
.sv-kv code{font-size:.9em}
.sv-evs{list-style:none;margin:5px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.sv-evs li{display:flex;align-items:flex-start;gap:6px;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.sv-evs li b{font-weight:700}
.sv-ei{flex:none;display:inline-flex;width:15px;height:15px;margin-top:1px}
.sv-ei svg{width:15px;height:15px}
.sv-evs li.checked .sv-ei{color:var(--green)}
.sv-evs li.repo .sv-ei{color:var(--ink-3)}
.sv-evs li.to_verify .sv-ei::before,.sv-evs li.range .sv-ei::before,.sv-evs li.none .sv-ei::before{content:"";width:9px;height:9px;margin:3px;border-radius:50%;background:var(--amber)}
.sv-evs li.none .sv-ei::before{background:transparent;border:1.5px dashed var(--ink-3);width:8px;height:8px}
.sv-evs li.to_verify b,.sv-evs li.range b{color:var(--amber)}
.sv-read{margin:5px 0 0;font-size:12.5px;line-height:1.4;color:var(--ink-3)}
.sv-why{margin-top:14px;padding:10px 12px;border-radius:10px;background:var(--bg-3);font-size:13.5px;line-height:1.4}
.sv-why.look{background:var(--amber-50)}
.sv-why.soon{background:var(--brand-50)}
.sv-why b{display:block;margin-bottom:2px}
.sv-why.look b{color:var(--amber)}
.sv-why.soon b{color:var(--brand)}
.sv-why ul{list-style:none;margin:0;padding:0}
.sv-why li{padding:1px 0}
.sv-names{margin:10px 0 0;font-size:13px;color:var(--ink-3)}
.sv-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.sv-legend > span{display:inline-flex;align-items:center;gap:5px}
/* Ceilings and what is not verified yet: the same rows, with no avatar. */
.sv-ceil .sv-s,.sv-item .sv-s{min-height:56px;align-items:flex-start}
.sv-ceil .sv-x,.sv-item .sv-x{padding-left:0}
.sv-item .sv-x{padding-left:22px}
.sv-dot{flex:none;width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--amber)}
.sv-item.closed .sv-dot{background:transparent;border:1.5px solid var(--ink-3)}
.sv-item.closed .sv-n{color:var(--ink-3);font-weight:600}
.sv-item.closed .sv-st{opacity:.8}
progress.sv-bar{display:block;width:100%;height:8px;margin:2px 0;border:0;border-radius:999px;overflow:hidden;appearance:none;-webkit-appearance:none;background:var(--bg-3)}
progress.sv-bar::-webkit-progress-bar{background:var(--bg-3);border-radius:999px}
progress.sv-bar::-webkit-progress-value{background:var(--brand);border-radius:999px}
progress.sv-bar::-moz-progress-bar{background:var(--brand);border-radius:999px}
.sv-side > .card{min-width:0}
@media (max-width:599px){
  .sv-s{gap:10px}
  .sv-av.mg{width:42px;height:42px;font-size:18px}
  .sv-x{padding-left:0}
  .sv-n{font-size:14.5px}
  .sv-d{display:none}
  .sv-w{font-size:13px}
  .sv-cl{font-size:13.5px}
}
@media (min-width:600px){
  .sv-kv{grid-template-columns:minmax(150px,max-content) 1fr;gap:8px 16px}
  .sv-kv dt{margin-top:0;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none}
  .sv-kv dd{margin:0}
}
@media (min-width:1100px){
  .sv-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px;align-items:start}
  .sv-grid > .card,.sv-side > .card{margin:0}
  .sv-side{display:flex;flex-direction:column;gap:12px}
  .sv-side .sv-kv{grid-template-columns:1fr;gap:0}
  .sv-side .sv-kv dt{margin-top:10px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
  .sv-side .sv-kv dt:first-child{margin-top:0}
  .sv-side .sv-kv dd{margin:2px 0 0}
}
/* The door to Servicios at the top of Ajustes. */
.entry{display:flex;align-items:center;gap:12px;min-height:60px;padding:4px 0 12px;margin-bottom:4px;border-bottom:1px solid var(--line);color:inherit}
.entry:hover{text-decoration:none}
.entry:hover b{color:var(--brand)}
.entry .ic{flex:none;width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--brand-50);color:var(--brand)}
.entry .ic svg{width:20px;height:20px}
.entry .b{flex:1;min-width:0}
.entry .b b{display:block;font-size:15px}
.entry .b span{display:block;font-size:13px;color:var(--ink-3)}
.entry > svg{flex:none;width:18px;height:18px;color:var(--ink-3)}
/* Gastos, the second tab of Servicios (decision 0126): what was really charged. The two months at the top are tiles —
   this month in the brand's ground, last month plain —, each charge is a row of the ledger's kind with the day on the
   left and the amount on the right, a refund in green with its plus, an amount the screen cannot read in amber words.
   Nothing here is red: a charge is a fact, not an alarm. */
.gx-months{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 12px}
.gx-month{min-width:0;display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.gx-month.this{background:var(--brand-50);border-color:var(--brand-100)}
.gx-mt{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.gx-month.this .gx-mt{color:var(--brand)}
.gx-mn{font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-mv{margin-top:4px;font-size:26px;font-weight:700;line-height:1.1;letter-spacing:-.4px;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.gx-mv.neg{color:var(--green)}
.gx-md{font-size:12.5px;color:var(--ink-3)}
.gx-mu{margin-top:6px}
.gx-mu .gl-m{white-space:normal;line-height:1.3;padding:3px 9px}
.gx-s{align-items:flex-start}
.gx-when{flex:none;width:52px;display:flex;flex-direction:column;align-items:flex-start;padding-top:2px;line-height:1.2}
.gx-when b{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.gx-when small{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.gx-soon .gx-when{width:84px}
.gx-soon .gx-when b{font-size:12.5px;white-space:normal;overflow-wrap:anywhere}
.gx-amt{flex:none;max-width:48%;text-align:right;font-size:15px;font-weight:700;line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.gx-amt.refund{color:var(--green)}
.gx-amt.unread{color:var(--amber);font-weight:600}
.gx-st{font-size:13.5px;line-height:1.35;color:var(--ink-2);overflow-wrap:anywhere}
.gx-tv{color:var(--amber)}
.gl-m.green{background:var(--green-50);color:var(--green);border-color:var(--green-line)}
.gx-x{padding-left:64px}
.gx-soon .gx-x{padding-left:96px}
@media (max-width:599px){
  .gx-months{gap:6px}
  .gx-month{padding:10px 12px}
  .gx-mv{font-size:22px}
  .gx-x,.gx-soon .gx-x{padding-left:0}
  .gx-when{width:46px}
  .gx-when b{font-size:13px}
  .gx-soon .gx-when{width:78px}
}
@media (min-width:700px){
  .gx-months{grid-template-columns:repeat(2,minmax(0,320px))}
}

/* ---------- The Uso tab of a client (decision 0107): how their people use their page and their program ---------- */
.u-periods{margin-bottom:4px}
.u-range{margin:0 0 12px}
.usage .u-sub{margin:-4px 0 10px}
.u-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:4px 0 16px}
.u-tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:700px){.u-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.u-tile{min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg-2)}
.u-tl{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-tv{display:block;margin-top:2px;font-size:24px;font-weight:700;line-height:1.15;letter-spacing:-.3px}
.u-fig{margin:0 0 12px;min-width:0}
.u-cap{margin:0 0 8px;font-size:14px;font-weight:600}
.u-chart{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px}
.u-y{display:flex;flex-direction:column;justify-content:space-between;height:120px;font-size:11px;line-height:1;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
.u-y span:first-child{margin-top:-2px}
.u-y span:last-child{margin-bottom:-2px}
.u-plot{display:block;width:100%;height:120px;overflow:visible}
.u-x{grid-column:2;display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.u-grid{stroke:var(--line);stroke-width:1}
.u-base{stroke:var(--line-2);stroke-width:1}
.u-hit{fill:transparent}
.u-col:hover .u-hit{fill:var(--bg-3)}
.u-col path.viz-1{fill:var(--viz-1)} .u-col path.viz-2{fill:var(--viz-2)} .u-col path.viz-3{fill:var(--viz-3)} .u-col path.viz-4{fill:var(--viz-4)}
.u-col path.viz-o{fill:var(--viz-o)} .u-col path.viz-b{fill:var(--brand)}
.u-legend{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;margin:10px 0 0;padding:0;font-size:13px;color:var(--ink-2)}
.u-legend li{display:inline-flex;align-items:center;gap:6px}
.u-sw{display:inline-block;flex:none;width:10px;height:10px;border-radius:3px;background:var(--brand)}
.u-sw.viz-1{background:var(--viz-1)} .u-sw.viz-2{background:var(--viz-2)} .u-sw.viz-3{background:var(--viz-3)} .u-sw.viz-4{background:var(--viz-4)} .u-sw.viz-o{background:var(--viz-o)}
.u-table{margin:0 0 8px}
.u-scroll{overflow-x:auto}
.u-table table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.u-table th,.u-table td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.u-table th:first-child{text-align:left}
.u-table thead th{font-weight:600;color:var(--ink-3)}
.u-h{display:flex;align-items:center;gap:6px;margin:18px 0 8px;font-size:14px}
.u-list{display:flex;flex-direction:column;gap:12px;margin:0 0 4px}
.u-row{min-width:0}
.u-rb{display:flex;align-items:baseline;gap:8px;min-width:0}
.u-rb .u-sw{align-self:center}
.u-rl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.u-rv{flex:none;font-size:14px;font-variant-numeric:tabular-nums}
.u-rm{display:block;margin-top:3px;font-size:12px;color:var(--ink-3)}
progress.u-bar{display:block;width:100%;height:6px;margin-top:5px;border:0;border-radius:999px;background:var(--bg-3);overflow:hidden;appearance:none;-webkit-appearance:none}
progress.u-bar::-webkit-progress-bar{background:var(--bg-3);border-radius:999px}
progress.u-bar::-webkit-progress-value{background:var(--brand);border-radius:999px}
progress.u-bar::-moz-progress-bar{background:var(--brand);border-radius:999px}
progress.u-bar.viz-1::-webkit-progress-value{background:var(--viz-1)} progress.u-bar.viz-1::-moz-progress-bar{background:var(--viz-1)}
progress.u-bar.viz-2::-webkit-progress-value{background:var(--viz-2)} progress.u-bar.viz-2::-moz-progress-bar{background:var(--viz-2)}
progress.u-bar.viz-3::-webkit-progress-value{background:var(--viz-3)} progress.u-bar.viz-3::-moz-progress-bar{background:var(--viz-3)}
progress.u-bar.viz-4::-webkit-progress-value{background:var(--viz-4)} progress.u-bar.viz-4::-moz-progress-bar{background:var(--viz-4)}
progress.u-bar.viz-o::-webkit-progress-value{background:var(--viz-o)} progress.u-bar.viz-o::-moz-progress-bar{background:var(--viz-o)}
.u-funnel progress.u-bar{height:10px}
progress.u-bar.viz-f1::-webkit-progress-value{background:var(--viz-f1)} progress.u-bar.viz-f1::-moz-progress-bar{background:var(--viz-f1)}
progress.u-bar.viz-f2::-webkit-progress-value{background:var(--viz-f2)} progress.u-bar.viz-f2::-moz-progress-bar{background:var(--viz-f2)}
progress.u-bar.viz-f3::-webkit-progress-value{background:var(--viz-f3)} progress.u-bar.viz-f3::-moz-progress-bar{background:var(--viz-f3)}
progress.u-bar.viz-f4::-webkit-progress-value{background:var(--viz-f4)} progress.u-bar.viz-f4::-moz-progress-bar{background:var(--viz-f4)}
.u-funnel .u-sw{display:none}
.u-aside{display:grid;grid-template-columns:1fr;gap:6px 16px;margin:12px 0 0;font-size:13px}
@media (min-width:600px){.u-aside{grid-template-columns:repeat(2,minmax(0,1fr))}}
.u-aside > div{display:flex;justify-content:space-between;gap:8px;padding-top:6px;border-top:1px solid var(--line)}
.u-aside dt{color:var(--ink-2)}
.u-aside dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.u-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 24px}
@media (min-width:900px){.u-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.u-foot p{margin:0 0 6px}
.u-switch{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.u-switch .hint{flex-basis:100%;font-size:12px;color:var(--ink-3)}

/* «Para aprobar» (decision 0110): what needs his attention is said first, in full and loud —
   amber, never an error red —; what has no risk says what it changes and carries its one-tap «Aprobar». */
.apx-door{padding-bottom:4px}
.apx-door .entry{border-bottom:0;margin-bottom:0;padding-bottom:4px}
.apx-entry.hot .ic{background:var(--amber-50);color:var(--amber)}
.apx-n{flex:none;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--amber);color:var(--bg);font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.apx-sec > h2 svg{width:18px;height:18px;flex:none}
.apx-sec.hot > h2{color:var(--amber)}
.apx-sec.calm > h2{color:var(--green)}
.apx-sec.hot{border-color:var(--amber-line)}
.apx-list{list-style:none;margin:0;padding:0}
.apx-row{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.apx-row:first-child{border-top:0;padding-top:4px}
.apx-a{flex:1;min-width:0;display:flex;gap:10px;color:inherit}
.apx-a:hover{text-decoration:none}
.apx-a:hover .apx-t{color:var(--brand)}
.apx-av{flex:none}
.apx-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.apx-t{font-weight:700;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.apx-l{font-size:14.5px;line-height:1.4;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.apx-l.warn{color:var(--amber);font-weight:600}
.apx-id{font-size:12px;font-weight:600;color:var(--ink-3);margin-right:2px;letter-spacing:.01em}
.apx-sec.calm .apx-l{color:var(--ink-2)}
.apx-sec .apx-l.strong{font-weight:600;color:var(--ink)}
.apx-m{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px}
.apx-m .chip{white-space:normal}
.apx-merge{font-weight:600}
.apx-merge.ok{color:var(--green)}
.apx-merge.warn{color:var(--amber)}
.apx-merge.muted{color:var(--ink-3)}
.apx-go{flex:none;align-self:center;margin:0}
@media (max-width:599px){.apx-row{flex-wrap:wrap}.apx-go{flex-basis:100%;display:flex;justify-content:flex-end}.apx-go .btn{min-height:40px}}
/* The alerts on a phone, in Ajustes (decision 0110). */
.push-on{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.push-on .btn svg{width:18px;height:18px}
.push-on .hint,.push-test .hint{font-size:13px;color:var(--ink-3)}
.push-list{list-style:none;margin:6px 0;padding:0}
.push-dev{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.push-dev .b{flex:1;min-width:0}
.push-dev .b b{display:block;font-size:14.5px}
.push-dev.off{opacity:.65}
.push-test{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 0}

/* ---------- Grants (decision 0129) ----------
   The hq's opportunities as cards in five groups: what each gives and what it is worth to Floemo, its chips under it, and
   in «When we meet the conditions» its gates as boxes that tick themselves from Floemo's facts. At the top what waits for
   Bernat now and the next dates as leaves of a calendar. One markup for both widths: a column on a phone; the two top
   cards side by side and the opened card as label and answer from 900 px. Every colour is a token. */
.gr-sum a.now::before,.gr-h.now::before{background:var(--brand)}
.gr-sum a.open::before,.gr-h.open::before{background:var(--blue)}
.gr-sum a.ready::before,.gr-h.ready::before{background:var(--violet)}
.gr-sum a.applied::before,.gr-h.applied::before{background:var(--green)}
.gr-sum a.discarded::before,.gr-h.discarded::before{background:var(--ink-3)}
.gr-h.apart::before{background:var(--amber)}
.gr-sum a.zero{opacity:.6}
.gr-top{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.gr-sec > .gl-h{font-size:15px;margin-bottom:2px}
.gr-sec > .sv-hint{margin:0 0 6px}
.gr-list,.gr-lines,.gr-cal,.gr-exp,.gr-factl{list-style:none;margin:0;padding:0}
.gr-list > li,.gr-lines > li,.gr-cal > li,.gr-exp > li,.gr-factl > li{border-top:1px solid var(--line)}
.gr-list > li:first-child,.gr-lines > li:first-child,.gr-cal > li:first-child,.gr-exp > li:first-child,.gr-factl > li:first-child{border-top:0}
.gr-list > li:target > details > .gr-s{box-shadow:inset 3px 0 0 var(--brand)}
/* A card a link jumps to lands 8 px under what stays over the top of the page: the phone's ☰, or nothing (0139). */
.gr-sec,.gr-list > li,.gr-top h2,#gr-facts{scroll-margin-top:calc(var(--top-h) + 8px)}
.gr-fold > summary{color:var(--brand)}
/* A card's summary: the name with what it is worth, what it gives, its chips, and the boxes of a waiting row. */
details.gr > summary{list-style:none;cursor:pointer}
details.gr > summary::-webkit-details-marker{display:none}
.gr-s{display:flex;flex-direction:column;gap:6px;padding:12px 8px;margin:0 -8px;border-radius:var(--radius-s)}
.gr-s:hover,details.gr[open] > .gr-s{background:var(--bg-2)}
.gr-r1{display:flex;align-items:flex-start;gap:8px;min-width:0}
.gr-n{flex:1;min-width:0;font-weight:700;font-size:15px;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.gr-v{flex:none;padding:1px 9px;border-radius:999px;font-size:12px;font-weight:700;line-height:18px;white-space:nowrap;border:1px solid var(--line-2);background:var(--bg-3);color:var(--ink-2)}
.gr-v.high{background:var(--green-50);color:var(--green);border-color:var(--green-line)}
.gr-v.medium{background:var(--blue-50);color:var(--blue);border-color:var(--blue-line)}
.gr-v.none{background:var(--bg);color:var(--ink-3)}
.gr-v.odd{background:var(--amber-50);color:var(--amber);border-color:var(--amber-line)}
.gr-gv{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.4;color:var(--ink-2);overflow-wrap:anywhere}
details.gr[open] .gr-gv{display:none}
.gr-cs{display:flex;flex-wrap:wrap;gap:5px}
.gr-cs .chip{white-space:normal;font-size:11.5px}
/* The boxes: ticked green, empty, a question for a fact nobody recorded, the requirement as written when it cannot be
   weighed. */
.gr-up{display:flex;flex-direction:column;gap:5px;margin-top:2px;padding:8px 10px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line)}
details.gr[open] > .gr-s .gr-up,.gr-up.in{background:var(--bg)}
.gr-up.in{margin:0 0 8px}
.gr-gsum{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.gr-gates{display:flex;flex-direction:column;gap:6px}
/* position:relative keeps each box's words for a screen reader (.sr, absolutely placed) inside #main: placed against
   .app instead, they made .app scroll on a computer when a link jumped down the page. */
.gr-gate{position:relative;display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.35;color:var(--ink)}
.gr-gate.met .gr-gl{color:var(--ink-2)}
.gr-box{flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-top:1px;border-radius:5px;border:2px solid var(--line-2);background:var(--bg);font-size:12px;font-weight:800;line-height:1;color:var(--ink-3)}
.gr-box svg{width:13px;height:13px;stroke-width:3}
.gr-box.met{background:var(--green);border-color:var(--green);color:var(--bg)}
.gr-box.missing{border-color:var(--ink-3)}
.gr-box.unknown{border-color:var(--amber);color:var(--amber);background:var(--amber-50)}
.gr-box.broken{border-style:dashed;border-color:var(--amber);color:var(--amber)}
.gr-gl{min-width:0;overflow-wrap:anywhere}
.gr-gl code{font-size:.92em}
.gr-gn{display:block;font-size:12px;color:var(--ink-3)}
.gr-gate.unknown .gr-gn,.gr-gate.broken .gr-gn{color:var(--amber)}
/* One tap opens the answers: a column of labels and answers on a phone, side by side from 900 px. */
.gr-x{padding:4px 0 16px}
.gr-kv{margin:0;font-size:14px;line-height:1.45}
.gr-kv dt{margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.gr-kv dt:first-child{margin-top:0}
.gr-kv dd{margin:3px 0 0;min-width:0;color:var(--ink);overflow-wrap:anywhere}
.gr-kv dd p{margin:0 0 6px}
.gr-kv dd p:last-child{margin-bottom:0}
.gr-kv dd .chip{vertical-align:1px}
.gr-kvs{display:flex;flex-direction:column;gap:5px}
.gr-kvl b{font-weight:700;color:var(--ink-2)}
.gr-kvl b::after{content:":"}
.gr-why{color:var(--ink-2)}
.gr-rec{font-weight:600}
.gr-dec b{color:var(--violet)}
.gr-cf,.gr-apps,.gr-src{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.gr-app-s{display:block;font-size:13px;color:var(--ink-2)}
.gr-src li{display:flex;align-items:flex-start;gap:8px}
.gr-tag{flex:none;margin-top:1px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:700;line-height:18px;white-space:nowrap;border:1px solid var(--line-2);background:var(--bg-3);color:var(--ink-2)}
.gr-tag.O{background:var(--green-50);color:var(--green);border-color:var(--green-line)}
.gr-tag.P{background:var(--blue-50);color:var(--blue);border-color:var(--blue-line)}
.gr-tag.M,.gr-tag.odd{background:var(--amber-50);color:var(--amber);border-color:var(--amber-line)}
.gr-sb{min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.gr-sb q{font-style:italic;color:var(--ink)}
.gr-sm{font-size:12.5px;color:var(--ink-3);overflow-wrap:anywhere}
/* The top: what waits for him, and the next dates as leaves of a calendar. */
.gr-line,.gr-date{display:flex;flex-direction:column;gap:3px;padding:10px 0;color:inherit}
.gr-line:hover,.gr-date:hover{text-decoration:none}
.gr-line:hover .gr-n,.gr-date:hover .gr-n{color:var(--brand)}
.gr-ll{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.4;color:var(--ink-3)}
.gr-lines li.ok .gr-ll{color:var(--green)}
.gr-date{flex-direction:row;align-items:flex-start;gap:12px}
.gr-leaf{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:50px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg-2);line-height:1}
.gr-leaf b{font-size:19px;font-weight:800;color:var(--ink)}
.gr-leaf span{margin-top:3px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.gr-leaf.you{background:var(--brand-50);border-color:var(--brand-100)}
.gr-leaf.you b,.gr-leaf.you span{color:var(--brand)}
.gr-db{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.gr-db .gr-n{font-size:14.5px}
.gr-dn{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.4;color:var(--ink-3)}
.gr-cal.past .gr-leaf{opacity:.6}
.gr-cal.past .gr-n{color:var(--ink-2);font-weight:600}
.gr-exp li{display:flex;flex-direction:column;gap:2px;padding:8px 0;font-size:13.5px}
.gr-exp li a{font-weight:700}
.gr-exp li span{color:var(--ink-3);font-size:13px;line-height:1.4}
.gr-dates details.fold.mini,.notice details.fold.mini{border-top:1px solid var(--line);margin-top:4px}
.notice details.gr-more > summary{color:var(--amber)}
.notice details.gr-more{border-top-color:var(--amber-line)}
/* The facts the boxes read. */
.gr-factl li{position:relative;display:flex;align-items:flex-start;gap:10px;padding:8px 0}
.gr-fb{min-width:0;display:flex;flex-direction:column;gap:2px}
.gr-fl{font-size:14px;color:var(--ink)}
.gr-fm{font-size:12.5px;color:var(--ink-3);overflow-wrap:anywhere}
.gr-facts > summary{padding:0 2px}
.gr-foot{margin:6px 2px 0;font-size:12.5px;line-height:1.4;color:var(--ink-3)}
@media (min-width:900px){
  .gr-top{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:12px;align-items:start}
  .gr-kv{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:18px}
  .gr-kv dt{margin-top:0;padding-top:12px;border-top:1px solid var(--line)}
  .gr-kv dd{margin:0;padding-top:12px;border-top:1px solid var(--line)}
  .gr-kv dt:first-of-type,.gr-kv dt:first-of-type + dd{border-top:0;padding-top:2px}
  .gr-x{padding:4px 8px 18px}
  .gr-gates{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px 16px}
}