/* Referenssit app styles — on top of tim-ui.css (extracted from index.html, F1) */
  svg.ic.fill{fill:currentColor;stroke:none}
  .screen:not(#login){padding-top:calc(var(--header-h) + var(--safe-top))}
  .app[data-screen="login"] .app-header{display:none}
  /* edit screen shows the context title — hide the centered brand (kit canon) */
  @media(max-width:899px){ .app[data-screen="edit"] .brand{display:none} }
  .app[data-screen="edit"] .tim-apps-btn{display:none}
  #refChatFab{
    position:fixed;
    bottom:calc(var(--safe-bot) + 16px);
    right:18px;
    width:56px;height:56px;
    border-radius:50%;
    background:var(--primary);
    color:var(--on-primary,#fff);
    border:none;
    cursor:pointer;
    display:none;
    place-items:center;
    box-shadow:0 4px 16px rgba(0,0,0,.3);
    z-index:var(--z-fab);   /* below sheets/modals/toasts — must not cover dialog buttons */
  }
  .app[data-screen="gallery"] ~ #refChatFab,
  .app[data-screen="edit"] ~ #refChatFab{
    display:grid;
  }
  /* + fab only on the gallery; chat circle stacks above it there */
  .app:not([data-screen="gallery"]) ~ .fab{display:none}
  .app[data-screen="gallery"] ~ #refChatFab{bottom:calc(var(--safe-bot) + 80px)}

  #gallery .wrap,#edit .scroll>.wrap{max-width:700px}
  #chat .scroll{padding-bottom:calc(var(--bottom-h) + var(--safe-bot) + 86px)}

  /* GALLERY — content-forward */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .gcard{background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;
    transition:transform .2s var(--ease),box-shadow .2s;border:1px solid var(--line)}
  .gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-brand)}
  .gcard:active{transform:scale(.985)}
  .thumb{aspect-ratio:4/3;background:var(--surface-2);position:relative;overflow:hidden}
  .thumb.ph{display:grid;place-items:center;background:var(--ph-bg);color:var(--ph-fg)}
  .thumb.ph .ic{width:34px;height:34px;opacity:.85}
  .timg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
  .timg.loaded{opacity:1}
  /* skeleton + shimmer while loading */
  /* skeletons: kit .tim-skel provides card chrome + shimmer; app sets dims */
  .sk-thumb{aspect-ratio:4/3;background:var(--surface-2)}
  .sk-line{height:11px;border-radius:6px;margin:12px 12px 0}
  .sk-line.s2{width:55%;margin-bottom:14px}
  .badge{position:absolute;top:9px;left:9px;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;backdrop-filter:blur(4px)}
  .badge.ok{background:var(--okbg);color:var(--ok)} .badge.draft{background:var(--draftbg);color:var(--draft)}
  .badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
  .casebadge{display:inline-flex;align-items:center;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--primary) 18%,transparent);color:var(--primary-d);letter-spacing:.03em;backdrop-filter:blur(4px)}
  [data-theme="dark"] .casebadge{color:var(--primary)}
  .casebadge.cb-tr{position:absolute;top:9px;right:9px}
  .rbadges{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto}
  .vtag{position:absolute;bottom:9px;right:9px;display:inline-flex;align-items:center;gap:4px;background:rgba(14,16,20,.74);color:#fff;font-size:11px;padding:3px 8px 3px 6px;border-radius:7px;font-weight:600}
  .vtag .ic{width:12px;height:12px}
  .meta{padding:11px 13px 14px}
  .meta .t{font-family:var(--disp);font-weight:700;font-size:14.5px;line-height:1.22;margin-bottom:4px;color:var(--text)}
  .meta .s{color:var(--text-2);font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* at-a-glance completeness: counts line, quiet draft hints, "nostettu kärkeen" marker */
  .cmeta{color:var(--text-2);font-size:11px;font-weight:600;margin-top:3px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cmeta:empty{display:none}
  .hints{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
  .hints:empty{display:none}
  .hint{display:inline-flex;align-items:center;font-size:var(--fs-micro);font-weight:700;letter-spacing:.02em;color:var(--text-2);
    background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:2px 7px;white-space:nowrap}
  .featmark{display:inline-flex;align-items:center;vertical-align:-1px;margin-right:3px;color:var(--primary-d)}
  .featmark .ic{width:12px;height:12px;stroke-width:3.2}
  [data-theme="dark"] .featmark{color:var(--primary)}
  .feattag{position:absolute;bottom:9px;left:9px;display:grid;place-items:center;width:21px;height:21px;border-radius:var(--rb);
    background:var(--primary);color:var(--on-primary);box-shadow:0 2px 8px rgba(0,0,0,.28)}
  .feattag .ic{width:13px;height:13px;stroke-width:3.4}

  /* CHAT */
  #chat .scroll{display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
  #chat .scroll>*{max-width:700px;width:100%;margin-left:auto;margin-right:auto}
  .bubble{max-width:82%;padding:11px 15px;border-radius:17px;font-size:15px;line-height:1.45;white-space:pre-wrap}
  .me{align-self:flex-end;background:var(--primary);color:var(--on-primary);border-bottom-right-radius:5px;font-weight:500}
  .ai{align-self:flex-start;background:var(--surface);color:var(--text);border:1px solid var(--line);border-bottom-left-radius:5px;box-shadow:var(--shadow-sm)}
  .ai.success{background:var(--okbg);color:var(--ok);border-color:transparent;font-weight:600}
  .ai .link{color:var(--primary-d);font-weight:800;cursor:pointer;text-decoration:underline}
  [data-theme="dark"] .ai .link{color:var(--primary)}
  .typing{align-self:flex-start;color:var(--text-2);font-size:13px;padding:4px 10px}
  .photorow{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
  .photorow img,.photorow video{width:60px;height:60px;border-radius:9px;object-fit:cover}
  /* media editor (drag-reorderable) */
  .media{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:10px}
  .mitem{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);cursor:pointer;transition:box-shadow .18s ease}
  .mitem .mhandle{cursor:grab}
  .mitem img,.mitem video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
  .mbtn{position:absolute;width:25px;height:25px;border-radius:7px;border:0;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(2px)}
  .mbtn .ic{width:14px;height:14px;stroke-width:2.4}
  .mhandle{top:4px;left:4px;cursor:grab;touch-action:none} .mhandle:active{cursor:grabbing}
  .mhandle .ic{fill:currentColor;stroke:none;width:15px;height:15px}
  .mremove{top:4px;right:4px}
  .mrotate{bottom:4px;left:4px}
  .meye{bottom:4px;right:4px}
  .mitem.off img{opacity:.32;filter:grayscale(.6)}
  .mitem.off .meye{background:var(--primary);color:var(--on-primary)}
  .mitem .vbadge{position:absolute;top:4px;left:4px;background:rgba(0,0,0,.65);color:#fff;border-radius:5px;padding:1px 6px;font-size:9px;font-weight:800;letter-spacing:.04em}
  .mitem.cover{outline:2px solid var(--primary);outline-offset:-2px}
  .mitem.cover .cbadge{position:absolute;top:4px;left:50%;transform:translateX(-50%);background:var(--primary);color:var(--on-primary);border-radius:5px;padding:1px 7px;font-size:8.5px;font-weight:800;letter-spacing:.05em}
  .mitem.dragging{opacity:.97;transform:scale(1.07) rotate(-1.5deg);box-shadow:var(--shadow-brand);outline:2px solid var(--primary);outline-offset:-2px;z-index:10}
  .media.reordering .mitem:not(.dragging){opacity:.85}
  /* pending upload tile (REF3 c) — the same .mitem box as a finished tile, so the grid reflows
     once (on completion) instead of jumping when the placeholder is swapped out. */
  .mup{cursor:default}
  /* stays unpositioned like the <img> it stands in for, so the scrim below paints over it —
     absolute here would cover the scrim and leave the white label on bare --surface-2 */
  .mup .upfilm{width:100%;height:100%;display:grid;place-items:center;background:var(--surface-2);color:var(--text-2)}
  .mup .upfilm .ic{width:26px;height:26px}
  .mup::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(8,10,14,.08),rgba(8,10,14,.62))}
  .uppct{position:absolute;left:4px;right:4px;bottom:11px;text-align:center;color:#fff;font-size:10.5px;font-weight:800;
    letter-spacing:.03em;text-shadow:0 1px 3px rgba(0,0,0,.55);pointer-events:none}
  .upbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.26);overflow:hidden}
  .upbar i{display:block;width:0;height:100%;background:var(--primary);transition:width .18s var(--ease)}
  /* preparing / server-side storing: no byte count to show, so the bar breathes at full width */
  .mup.s-prep .upbar i,.mup.s-proc .upbar i{width:100%;animation:upind 1.2s ease-in-out infinite}
  @keyframes upind{0%,100%{opacity:.35}50%{opacity:1}}
  @media (prefers-reduced-motion:reduce){.mup.s-prep .upbar i,.mup.s-proc .upbar i{animation:none}}
  .mup.s-fail{border-color:color-mix(in srgb,var(--danger) 55%,var(--line))}
  .mup.s-fail::before{background:color-mix(in srgb,var(--danger) 32%,rgba(8,10,14,.42))}
  .mup.s-fail .upbar{display:none}
  .mup.s-fail .uppct{bottom:7px}
  /* the two recovery taps get a bigger target than the ordinary tile buttons: 30px of
     visible chrome, 40px of tappable area — the tile is 92px+, so the opposite corners
     still can't overlap. Inset 6px: the ::after must stay inside the tile's overflow
     clip, or the outermost pixels of the target are cut off. */
  .mup .mbtn{width:30px;height:30px}
  .mup .upretry{top:6px;left:6px}
  .mup .mremove{top:6px;right:6px}
  .mup .mbtn::after{content:"";position:absolute;inset:-5px;border-radius:9px}
  .upretry{top:4px;left:4px}
  .mhint{font-size:11px;color:var(--text-2);margin:8px 2px 0}
  .composer{position:fixed;left:0;right:0;bottom:calc(var(--bottom-h,60px) + var(--safe-bot));background:var(--surface);border-top:1px solid var(--line);z-index:7;
    padding:10px 12px}
  .app[data-screen="chat"] .composer{display:block} .composer{display:none}
  .composer .inner{display:flex;align-items:center;gap:8px;max-width:700px;width:100%;margin:0 auto}
  .composer input[type=text]{flex:1;border:1px solid var(--line-strong);border-radius:999px;padding:12px 16px;font-size:16px;outline:none;font-family:inherit;background:var(--input-bg);color:var(--text)}
  .composer input[type=text]:focus{border-color:var(--primary)}
  .send{background:var(--primary);color:var(--on-primary)}

  /* EDIT */
  #edit{background:var(--bg)}
  .carousel{aspect-ratio:16/9;background:var(--surface-2) center/cover;position:relative;display:grid;place-items:center;color:var(--text-2);border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
  .carousel .ic{width:38px;height:38px;opacity:.6}
  .addmedia{display:flex;gap:10px;margin:14px 0 4px}
  .addmedia button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px dashed var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent);color:var(--primary-d);border-radius:var(--rb);padding:13px;font-size:14px;font-weight:700;cursor:pointer}
  [data-theme="dark"] .addmedia button{color:var(--primary)}
  .addmedia .ic{width:18px;height:18px}
  .reflbl{font-size:11px;font-weight:800;color:var(--text-2);margin:13px 2px 5px;text-transform:uppercase;letter-spacing:.06em}
  .reflbl-row{display:flex;align-items:center;justify-content:space-between}
  .aibtn{display:inline-flex;align-items:center;gap:5px;background:color-mix(in srgb,var(--primary) 13%,transparent);color:var(--primary-d);border:0;border-radius:999px;padding:5px 10px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;cursor:pointer}
  [data-theme="dark"] .aibtn{color:var(--primary)}
  .aibtn .ic{width:13px;height:13px}
  .aibtn:disabled{opacity:.5}
  /* AI draft suggestion (REF3 b): quiet like .mhint but a real tap target. Only shown while the
     reference has photos and no otsikko/kuvaus yet, so it never competes with the form. */
  .draftsug{display:flex;width:100%;align-items:center;gap:11px;margin:12px 0 2px;padding:12px 13px;text-align:left;
    font-family:inherit;color:var(--text);cursor:pointer;border-radius:var(--rb);
    background:color-mix(in srgb,var(--primary) 7%,var(--surface));
    border:1px solid color-mix(in srgb,var(--primary) 34%,transparent);
    transition:background .15s ease,border-color .15s ease}
  .draftsug:hover{background:color-mix(in srgb,var(--primary) 12%,var(--surface));border-color:var(--primary)}
  .draftsug:disabled{cursor:default;opacity:.8}
  .ds-ic{flex:0 0 auto;width:18px;height:18px;color:var(--primary-d)}
  [data-theme="dark"] .ds-ic{color:var(--primary)}
  .ds-txt{flex:1;min-width:0}
  .ds-t{display:block;font-size:var(--fs-sm);font-weight:800;line-height:1.25}
  .ds-s{display:block;margin-top:2px;color:var(--text-2);font-size:var(--fs-2xs);font-weight:500;line-height:1.35}
  /* reuses the kit's @keyframes s (tim-ui.css .spin) — same rotation, inline size */
  .ds-spin{display:none;flex:0 0 auto;width:15px;height:15px;border-radius:50%;
    border:2px solid color-mix(in srgb,var(--primary) 26%,transparent);border-top-color:var(--primary);
    animation:s .8s linear infinite}
  .draftsug.busy .ds-spin{display:block}
  .draftsug.busy .ds-ic{display:none}
  @media (prefers-reduced-motion:reduce){.ds-spin{animation:none}}

  /* FILTER BAR (compact, single scrollable row) */
  /* text search above the chips — kit .search; full-width on mobile, capped on desktop */
  .gsearch{margin:0 0 10px}
  @media(min-width:700px){.gsearch{max-width:420px}}
  .viewbtn{flex:0 0 auto;background:var(--surface);border:1px solid var(--line);color:var(--text-2);border-radius:10px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer}
  .viewbtn:hover{border-color:var(--line-strong);color:var(--text)} .viewbtn .ic{width:17px;height:17px}

  /* LIST VIEW */
  .rthumb{width:58px;height:58px;border-radius:9px;background:var(--surface-2) center/cover;flex:0 0 auto;position:relative;overflow:hidden}
  .rthumb.ph{display:grid;place-items:center;background:var(--ph-bg);color:var(--ph-fg)} .rthumb.ph .ic{width:22px;height:22px;opacity:.85}
  .rthumb .rv{position:absolute;right:3px;bottom:3px;background:rgba(14,16,20,.74);color:#fff;border-radius:5px;width:18px;height:18px;display:grid;place-items:center} .rthumb .rv .ic{width:10px;height:10px}
  .refrow .badge{position:static;flex:0 0 auto}
  /* combobox (tappable suggestions + free text) */
  .combo-empty{padding:11px 13px;color:var(--text-2);font-size:13px}
  /* multiselect tags */
  .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}
  .tags:empty{display:none}
  .tag{display:inline-flex;align-items:center;gap:5px;background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary-d);border:1px solid color-mix(in srgb,var(--primary) 38%,transparent);border-radius:999px;padding:5px 6px 5px 11px;font-size:13px;font-weight:700}
  [data-theme="dark"] .tag{color:var(--primary)}
  .tag button{border:0;background:transparent;color:inherit;cursor:pointer;display:grid;place-items:center;width:18px;height:18px;opacity:.75}
  .tag .ic{width:12px;height:12px;stroke-width:2.6}
  /* lightbox */
  .lb{position:fixed;inset:0;background:rgba(8,10,14,.94);z-index:100;display:none;align-items:center;justify-content:center}
  .lb.open{display:flex}
  .lbimg{max-width:96vw;max-height:88vh;object-fit:contain;border-radius:6px;user-select:none}
  .lb-btn{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:50%;width:46px;height:46px;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px)}
  .lb-btn:active{background:rgba(255,255,255,.25)}
  .lb-btn .ic{width:24px;height:24px}
  .lb-close{top:calc(var(--safe-top) + 14px);right:16px}
  .lb-prev{left:12px;top:50%;transform:translateY(-50%)}
  .lb-next{right:12px;top:50%;transform:translateY(-50%)}
  .lb-count{position:absolute;bottom:calc(var(--safe-bot) + 64px);left:50%;transform:translateX(-50%);color:#fff;font-size:13px;font-weight:600;background:rgba(255,255,255,.12);padding:5px 12px;border-radius:999px;backdrop-filter:blur(4px)}
  .lb-alt{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--safe-bot) + 16px);width:min(92vw,560px);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:11px;padding:11px 14px;font-size:16px;outline:none;backdrop-filter:blur(6px)}
  .lb-alt::placeholder{color:rgba(255,255,255,.55)}
  /* case checkbox */
  .checkrow{display:flex;align-items:center;gap:11px;margin-top:14px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--rb);background:var(--surface);cursor:pointer}
  .checkrow input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
  .checkrow .box{width:24px;height:24px;border:2px solid var(--line-strong);border-radius:7px;display:grid;place-items:center;flex:0 0 auto;background:var(--input-bg);transition:.12s}
  .checkrow input:checked + .box{background:var(--primary);border-color:var(--primary)}
  .checkrow .box .ic{width:16px;height:16px;color:#fff;stroke:#fff;stroke-width:3.5;opacity:0;transition:.12s}
  .checkrow input:checked + .box .ic{opacity:1}
  .checkrow .ct{font-size:14px;font-weight:600;color:var(--text)}
  .checkrow .ct small{display:block;color:var(--text-2);font-weight:400;font-size:12px;margin-top:1px}
  /* website multiselect */
  .sitegrid{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
  .sitechip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--text-2);cursor:pointer;background:var(--surface);user-select:none}
  .sitechip.on{background:color-mix(in srgb,var(--primary) 14%,transparent);border-color:var(--primary);color:var(--primary-d)}
  [data-theme="dark"] .sitechip.on{color:var(--primary)}
  .sitechip .tick{width:13px;height:13px;opacity:0} .sitechip.on .tick{opacity:1}
  .editbar{position:relative;background:var(--surface);border-top:1px solid var(--line);padding:8px 14px calc(var(--safe-bot) + 8px)}
  .editbar .inner{display:flex;gap:9px;max-width:700px;width:100%;margin:0 auto}
  .ebtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:var(--rb);font-size:13px;font-weight:800;cursor:pointer;padding:10px}
  .ebtn:disabled{opacity:.6;cursor:default}
  .ebtn .ic{width:16px;height:16px}
  .editbar .del{flex:0 0 auto;background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger);padding:10px 13px}
  .editbar .save{flex:0 0 auto;background:var(--surface-2);color:var(--text);padding:10px 14px}
  /* Julkaise wears the primary pair, not --ok: dark --ok is a light mint and white on it is
     unreadable. Green stays where it already lives — the Tila segment and the badges. */
  .editbar .pub{flex:0 0 auto;background:var(--primary);color:var(--on-primary);text-transform:uppercase;letter-spacing:.04em;padding:10px 18px}
  .editbar .saveall{flex:1;background:var(--primary);color:var(--on-primary);text-transform:uppercase;letter-spacing:.04em}
  /* two bars, one markup: a draft autosaves → [Poista][save state][Julkaise];
     a published reference keeps the explicit [Poista][Tallenna]. */
  .editbar.pubmode .savestate,.editbar.pubmode .pub{display:none}
  .editbar.draftmode .saveall{display:none}
  /* the state text absorbs the slack, so the buttons never move as the label changes */
  .savestate{flex:1 1 auto;min-width:96px;display:flex;align-items:center;justify-content:center;gap:6px;
    font-size:var(--fs-2xs);font-weight:700;letter-spacing:.02em;color:var(--text-2);white-space:nowrap;overflow:hidden;user-select:none}
  .savestate .ss-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor;opacity:.5}
  .savestate .ic{flex:0 0 auto;width:13px;height:13px;stroke-width:3.4}
  .savestate.saving .ss-dot{animation:ss-pulse 1.1s ease-in-out infinite}
  .savestate.saved{color:var(--ok)}
  .savestate.error{color:var(--danger)}
  @keyframes ss-pulse{50%{opacity:.12}}
  @media (prefers-reduced-motion:reduce){.savestate.saving .ss-dot{animation:none}}
  /* status segmented control */
  .refseg{display:flex;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--rb);overflow:hidden}
  .refseg button{flex:1;border:0;background:transparent;padding:11px;font-size:14px;font-weight:800;color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px}
  .refseg button .dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.5}
  .refseg button.on .dot{opacity:1}
  .refseg button[data-s="draft"].on{background:var(--draftbg);color:var(--draft)}
  .refseg button[data-s="pub"].on{background:var(--ok);color:#fff}
  /* publish-time completeness checklist (kit .modal .box primitive) */
  .cl-lead{color:var(--text-2);font-size:var(--fs-sm);line-height:1.5;margin:6px 0 0;padding-right:30px}
  .checklist{list-style:none;margin:15px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
  .cl-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r);font-size:14px;font-weight:600;color:var(--text-2)}
  .cl-row.miss{background:var(--draftbg);color:var(--draft);font-weight:800}
  .cl-mark{flex:0 0 auto;width:18px;display:grid;place-items:center;font-weight:800;opacity:.85}
  .cl-row.ok .cl-mark{color:var(--ok);opacity:1}
  .cl-mark .ic{width:15px;height:15px;stroke-width:3.2}

  /* TUO KUITTAUKSESTA (työmaaraportti → referenssiluonnos) */
  @media(max-width:899px){ .app[data-screen="tuo"] .brand{display:none} }
  .app[data-screen="tuo"] .tim-apps-btn{display:none}
  #tuo .scroll>.wrap{max-width:700px}
  .tuocard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow-sm)}
  .tuonum{font-size:11px;font-weight:800;color:var(--text-2);letter-spacing:.06em;text-transform:uppercase}
  .tuosite{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--text);margin:2px 0 3px}
  .tuometa{color:var(--text-2);font-size:13px;font-weight:500}
  .tuobanner{display:flex;align-items:flex-start;gap:9px;background:var(--draftbg);color:var(--draft);border-radius:var(--rb);padding:12px 14px;font-size:var(--fs-sm);font-weight:600;margin-top:12px}
  .tuobanner .ic{width:17px;height:17px;flex:0 0 auto;margin-top:1px}
  .tuoactions{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:14px}
  /* thumbnail picker: reuses .media/.mitem tiles + a checkmark overlay when selected */
  .tuopick .selmark{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.85);color:#fff;display:grid;place-items:center;backdrop-filter:blur(2px)}
  .tuopick .selmark .ic{width:13px;height:13px;stroke-width:3.2;opacity:0}
  .tuopick.sel{outline:2.5px solid var(--primary);outline-offset:-2.5px}
  .tuopick.sel .selmark{background:var(--primary);border-color:var(--primary)}
  .tuopick.sel .selmark .ic{opacity:1}
  /* the kit .btn carries the look (fill, uppercase, disabled) — only the full-bleed
     layout is local */
  #tuoCreateBtn{width:100%;max-width:none;margin-top:18px}
  #tuoCreateBtn .ic{width:17px;height:17px}