/* "ששי מוצא" - tokens and components from docs/design_handoff_sassi_library.
   The five accent shades are the family palette in sassi/shared/README.md and must stay identical
   across the assistants; only the default differs (links: amber, its icon's colour).
   Dark only, RTL, mobile first. Cards carry no border and no shadow: separation is by background
   tone. Shadows belong only to floating layers. */

:root {
  --bg:#0f1311; --card:#181e1b; --hover:#232b26;
  --line:#1f2723; --border:#2a332e;
  --txt:#edf2ee; --body:#c3ccc6;
  /* Family token names (sassi/shared/DESIGN.md). --dim is the secondary tone there, which is what
     ghost buttons and icon buttons use; --meta is this app's older name for the same value and is
     kept as an alias so existing rules need no rewrite. */
  --dim:#8fa098; --meta:var(--dim);
  --sunk:#0f1311; --sunken:var(--sunk);
  --ink:#0f1311;      /* text on an accent fill, always dark */
  /* Radii, per shared/DESIGN.md. --r-pill was missing, which left parts of the family date
     picker unstyled - a shared component brings its own token requirements. */
  --r-card:20px; --r-modal:22px; --r-input:12px; --r-pill:999px; --r-thumb:14px; --r-tile:12px;
  --nav-h:76px;
  --fab-top:132px; /* the floating button's top edge from the viewport bottom: nav (14 + 56) + 8 gap + 54; the body's bottom padding clears it (owner 2026-09-10) */
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171; --far:#c4b5fd;
  --ac:#22a8f0; --ac2:#0f7ad8; --acText:#7dd3fc;
  --acSoft:rgba(34,168,240,.15); --acSoft2:rgba(34,168,240,.25); --acGlow:rgba(34,168,240,.35);
}
[data-accent="teal"]   { --ac:#2dd4bf; --ac2:#0d9488; --acText:#5eead4; --acSoft:rgba(45,212,191,.15); --acSoft2:rgba(45,212,191,.25); --acGlow:rgba(45,212,191,.35); }
[data-accent="purple"] { --ac:#a78bfa; --ac2:#7c3aed; --acText:#c4b5fd; --acSoft:rgba(167,139,250,.15); --acSoft2:rgba(167,139,250,.25); --acGlow:rgba(167,139,250,.35); }
[data-accent="rose"]   { --ac:#fb7185; --ac2:#e11d48; --acText:#fda4af; --acSoft:rgba(251,113,133,.15); --acSoft2:rgba(251,113,133,.25); --acGlow:rgba(251,113,133,.35); }
[data-accent="amber"]  { --ac:#f59e0b; --ac2:#c2410c; --acText:#fcd34d; --acSoft:rgba(245,158,11,.15); --acSoft2:rgba(245,158,11,.25); --acGlow:rgba(245,158,11,.35); }

* { box-sizing:border-box; }
html { color-scheme:dark; }
body {
  margin:0; background:var(--bg); color:var(--txt);
  font-family:Heebo,system-ui,sans-serif; font-size:14px; line-height:1.55;
  -webkit-text-size-adjust:100%;
}
a { color:inherit; text-decoration:none; }
.num, [dir=ltr] { direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; }   /* the family token: a number or a Latin run inside a Hebrew sentence never joins a neutral separator (owner 2026-09-11) */
.muted { color:var(--meta); font-weight:300; }
.small { font-size:12.5px; } .tiny { font-size:11.5px; } .center { text-align:center; }
.bad { color:var(--bad); } .ok { color:var(--ok); }
.inline { display:inline; } .right { margin-inline-start:auto; }
[hidden] { display:none !important; }

/* header - tasks' rules verbatim (owner 2026-09-03): the same column as the content (860px), the
   whole app name at the brand weight, the user's name quiet beside it. */
.hdr { position:sticky; top:0; z-index:30; background:rgba(15,19,17,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.hdr-in { max-width:860px; margin:0 auto; padding:.55rem 1rem; display:flex; align-items:center; gap:.7rem; }
.brand { display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:19px; color:var(--txt); }
.brand img { width:30px; height:30px; border-radius:8px; flex:none; }
.brand .who { font-weight:400; font-size:13px; color:var(--dim); }
@media (max-width:700px) { .hdr .who { display:none; } }   /* tasks: on a phone the user's name goes, the app name never wraps */
.brand { white-space:nowrap; }
.hdr-actions { margin-inline-start:auto; display:flex; gap:6px; }
.ic {
  width:34px; height:34px; border-radius:999px; border:0; background:transparent; color:var(--dim);
  display:grid; place-items:center; font-size:15px; cursor:pointer;
}
@media (hover:hover) { .ic:hover { background:#1c231f; } } .ic.on { background:var(--acSoft); color:var(--ac); }

/* one clearance for the FAB, on the content container only (tasks 553dbdb: a body padding AND a main padding stacked).
   Our cards are laid out with gap (no trailing margin), so the whole ~18px between the last row and the FAB's top is here. */
.wrap { max-width:860px; margin:0 auto; padding:14px 16px calc(var(--fab-top) + 18px); display:flex; flex-direction:column; gap:14px; }
.section-label { color:var(--meta); font-size:13px; font-weight:300; margin:4px 0 -6px; }
/* The home's per-kind headings (owner 2026-09-02): the accent, larger and bold - a heading, not a
   caption; the "נשמר אחרון" tail stays quiet beside it. */
.kind-head { margin:6px 0 -4px; font-size:17px; font-weight:700; color:var(--ac); display:flex; align-items:center; gap:8px; }
.page-head { margin:2px 0 8px; }   /* the tab's title, first in <main> (owner 2026-09-10) */
.kind-count { margin:6px 0 -4px; font-size:12.5px; font-weight:300; color:var(--meta); }
.kind-head i { font-size:15px; }
.kind-head span { font-size:12.5px; font-weight:300; color:var(--meta); }
/* An icon must never take .muted: it sets font-weight 300, and "Font Awesome 6 Free" resolves that to
   its REGULAR face, which lacks most glyphs - the duplicate-tags card showed a tofu box. Colour only. */
.dupsep { color:var(--meta); margin:0 6px; }

/* cards, rows */
.card { background:var(--card); border-radius:20px; padding:20px; display:flex; flex-direction:column; gap:12px; }
.card h2 { margin:0; font-size:16px; font-weight:600; display:flex; align-items:center; gap:8px; }
.card h2 i { color:var(--ac); }
.card h3 { margin:0; font-size:15px; font-weight:600; }
.card.list { padding:6px 20px; }
.trow, .mini { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.trow:last-child, .mini:last-child { border-bottom:0; }
.trow .label, .mini .label { font-size:14.5px; font-weight:500; }

.row { background:var(--card); border-radius:20px; padding:14px; display:flex; gap:13px; align-items:flex-start; }
.row.dense { border-radius:14px; padding:10px 14px; }
.row.is-dead .label { color:var(--meta); }
.row .thumb {
  flex:0 0 auto; width:88px; height:66px; border-radius:12px; background:var(--hover);
  display:grid; place-items:center; overflow:hidden; position:relative; color:var(--meta); font-size:22px;
}
.row.dense .thumb { width:38px; height:38px; font-size:15px; border-radius:10px; }
.row .thumb img { width:100%; height:100%; object-fit:cover; }
.row .thumb .kind { position:absolute; inset:auto 6px 6px auto; font-size:11px; color:#fff; text-shadow:0 1px 3px #000; }
.row .thumb .shot { position:absolute; inset:auto auto 4px 4px; font-size:9px; background:rgba(15,19,17,.85); border-radius:6px; padding:1px 4px; }
.row .body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.row .label { font-size:14.5px; font-weight:500; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.row .note { margin:0; font-size:12.5px; font-weight:300; color:var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:11.5px; color:var(--meta); }
.pulse { color:var(--acText); animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.55} 50%{opacity:1} }

.chip { display:inline-flex; align-items:center; gap:5px; background:var(--hover); color:var(--body);
  border:0; border-radius:999px; padding:4px 10px; font-size:11.5px; font-family:inherit; cursor:pointer; }
.chip.on { background:var(--acSoft); color:var(--acText); }
/* a chosen chip looks the same whether it is a link or a button (family rule from food, 2026-09-18) */
.chips a.chip.on, .chips button.on, .chips button.chip.on { background:var(--ac); color:var(--ink); font-weight:600; }
@media (hover:hover) { .chips a.chip.on:hover, .chips button.on:hover { background:var(--ac); color:var(--ink); } }
/* A tag inside a result row is metadata about the link, not a second heading. In the accent, a step
   smaller and lighter than the label, so the eye reads the title first and the tags as a group. */
.row .meta .chip { background:var(--acSoft); color:var(--acText); font-size:11px; font-weight:400;
  padding:3px 9px; }
.resline { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sorts, .nrow { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* forms */
.fld { width:100%; background:var(--sunken); border:0; border-radius:var(--r-input); padding:12px 14px;
  color:var(--txt); font-family:inherit; font-size:14.5px; }
.fld:focus { outline:2px solid var(--ac); outline-offset:-1px; }
.fld::placeholder { color:var(--dim); opacity:.75; }   /* clearly a hint, never mistaken for text */
.fld.big { font-size:15.5px; border-radius:14px; }
.fld.sm { width:auto; padding:6px 10px; font-size:12.5px; }
.fld.num { width:74px; display:inline-block; text-align:center; }
.fld.code { text-align:center; font-size:22px; letter-spacing:8px; font-variant-numeric:tabular-nums; }
.lbl { font-size:14.5px; font-weight:600; margin-top:4px; }
.inline-fields { display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--body); font-weight:300; }

/* The base element rule, as in tasks. The family CSS files style bare <button> elements - the
   date picker's day grid and chips among them - and assume this foundation exists. */
input, select, textarea, button { font-family:inherit; font-size:14px; color:var(--txt); }
/* From tasks. datepicker.css styles .dtf select for width, padding and alignment only and takes
   the fill, the radius and the arrow from the app's base rule - which this app never had, since
   it styles its own fields by class (.fld). The hour and minute boxes were therefore native
   dropdowns sitting next to designed fields. Selects are the only bare form elements here (they
   come from the shared dt_fields), so the rule reaches nothing else. */
select, textarea { background:var(--sunk); border:0; border-radius:var(--r-input); padding:.6rem .8rem; max-width:100%; }
select { appearance:none; -webkit-appearance:none; padding-inline-end:2rem;
         background:var(--sunk) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238fa098' stroke-width='2'/></svg>") no-repeat left .8rem center; }
/* The hourglass over the page while a POST is in flight (window.sassiBusy). */
button { cursor:pointer; border:0; border-radius:var(--r-input); background:var(--hover); color:var(--txt);
  padding:9px 14px; font-size:14.5px; font-weight:500; transition:background .15s, color .15s; }
@media (hover:hover) { button:hover { background:#2a332e; } .fab:hover { background:var(--ac); filter:brightness(1.08); } }

/* Family button spec (sassi/shared/README.md, owner decision 2026-08-29). Flat, one shape, one
   size; only the colour role changes. This supersedes the Claude Design handoff, which specified a
   gradient primary CTA - the note is in the shared README so the gradient is not restored later by
   someone reading the handoff. */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0;
  border-radius:var(--r-input); padding:9px 14px; font-family:inherit; font-size:14.5px;
  font-weight:500; background:var(--hover); color:var(--txt); cursor:pointer; }
@media (hover:hover) { .btn:hover { background:#28312b; } }
.btn.primary { background:var(--ac); color:var(--ink); font-weight:600; }   /* flat, no gradient */
.btn.soft { background:var(--acSoft); color:var(--acText); }
.btn.ghost { background:transparent; color:var(--dim); }
@media (hover:hover) { .btn.ghost:hover { background:var(--hover); } }
.btn.danger, .btn.ghost.danger { background:rgba(248,113,113,.15); color:var(--bad); }
.btn.sm { padding:6px 11px; font-size:13px; }                              /* same radius */
.btn.wide { width:100%; }
.btn.edit { align-self:center; }

/* Icon buttons on a row: 34px circle, per shared/DESIGN.md. */
/* tasks' .ibtn verbatim (owner 2026-09-03: icons sat off-centre): inline-flex centring, padding 0 - the
   UA gives <button> 1px 6px, and any later rule that adds padding (danger, inline forms) shifted the glyph. */
.ibtn { width:34px; height:34px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--dim);
  display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; cursor:pointer; text-decoration:none; }
.ibtn i { line-height:1; }
@media (hover:hover) { .ibtn:hover { background:var(--hover); color:var(--txt); } }
.ibtn.danger { background:transparent; color:var(--dim); }   /* beats button.danger below (tasks: quiet until hover) */
@media (hover:hover) { .ibtn.danger:hover { background:rgba(248,113,113,.12); color:var(--bad); } }
.ibtn.on { background:var(--acSoft); color:var(--ac); }
.ibtn.lg { width:38px; height:38px; }
.rowacts { display:flex; flex-direction:column; gap:4px; align-self:center; }
.link { background:none; border:0; color:var(--ac); font-family:inherit; font-size:13px; cursor:pointer; padding:0; }

.swatches { display:flex; gap:12px; }
.sw { cursor:pointer; }
.sw input { position:absolute; opacity:0; }
.sw span { display:block; width:36px; height:36px; border-radius:999px; background:var(--c); border:3px solid transparent; }
.sw.on span { border-color:#edf2ee; }
.seg { display:flex; gap:8px; }
.seg label { flex:1; text-align:center; padding:9px; border-radius:12px; background:var(--sunken); color:var(--meta); font-size:13px; cursor:pointer; }
.seg label.on { background:var(--acSoft); color:var(--acText); }
/* Only the radio CONTROL itself is invisible - the rule used to say ".radio input" and swallowed
   the number fields nested in the option's parameter row, which rendered as blank air beside their
   labels. The hour select survived only because a select is not an input. */
.seg input, .toggle input, .radio > input[type="radio"] { position:absolute; opacity:0; }
/* ...and it takes no width: settings-cards.css gives every settings input width:100%, and an absolute radio with no positioned
   parent measured the whole page - the alerts screen was 462px wide on a 412px phone (found 2026-09-16 by the pickers probe). */
.seg input, .toggle input, .radio > input[type="radio"] { width:1px; height:1px; margin:0; padding:0; pointer-events:none; }
.radio { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:14px; background:var(--sunken); cursor:pointer; }
/* The chosen option must be unmistakable at a glance - the owner could not tell which was on. A
   filled check appears only on the active card, beside the tint and the outline. */
.radio.on { background:var(--acSoft); outline:2px solid var(--ac); outline-offset:-2px; }
.radio b { display:flex; align-items:center; gap:6px; }
.radio-check { display:none; color:var(--ac); font-size:14px; }
.radio.on .radio-check { display:inline; }
.radio-params { display:flex; align-items:center; gap:10px 6px; flex-wrap:wrap; margin-top:8px;   /* stacked >= 8px, side by side >= 6px (family rule 2026-09-12) */
  padding-top:8px; border-top:1px solid var(--line); color:var(--body); font-weight:300; font-size:13px; }
.radio-params select { width:auto; }
.toggle { display:flex; align-items:center; gap:10px; flex-wrap:wrap; cursor:pointer; }
.toggle input + span { width:46px; height:26px; border-radius:999px; background:var(--border); position:relative; flex:0 0 auto; transition:.2s; }
.toggle input + span::after { content:""; position:absolute; inset:3px auto 3px 3px; width:20px; border-radius:999px; background:var(--meta); transition:.2s; }
.toggle input:checked + span { background:var(--ac); }
.toggle input:checked + span::after { inset:3px 3px 3px auto; background:#0f1311; }
.toggle em { flex-basis:100%; font-style:normal; }

/* search field */
.search { display:flex; align-items:center; gap:10px; background:var(--card); border-radius:999px; padding:6px 16px; }
.search input { flex:1; background:none; border:0; color:var(--txt); font-family:inherit; font-size:15.5px; padding:10px 0; }
.search input:focus { outline:none; }
.search i { color:var(--meta); }
/* the search button is a BUTTON, separated from the field and clickable - not only Enter (owner 2026-09-04) */
.search .search-go { flex:none; width:38px; height:38px; margin-inline-start:-8px; padding:0; border:0; border-radius:50%;
  background:var(--hover); color:var(--txt); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; }
.search .search-go i { color:inherit; }
@media (hover:hover) { .search .search-go:hover { background:var(--acSoft); color:var(--ac); } }
/* the clear X is ours and always visible while a search is active; the browser's hover-only one is off */
.search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { -webkit-appearance:none; display:none; }
.search .search-x { flex:none; width:34px; height:34px; padding:0; border:0; border-radius:50%; background:var(--hover); color:var(--txt);
  display:inline-flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; }
.search .search-x i { color:inherit; }
@media (hover:hover) { .search .search-x:hover { background:rgba(248,113,113,.15); color:var(--bad); } }
.search .clear { color:var(--meta); }

/* empty states */
/* Renamed from .empty: the shared date picker marks "no date chosen" with .empty on its button,
   and my empty-state box was styling it into a tall dashed column. A local class must not collide
   with a family component's. */
.emptybox { border:1px dashed var(--border); border-radius:var(--r-card); padding:28px 20px; text-align:center;
  color:var(--dim); display:flex; flex-direction:column; gap:10px; align-items:center; }
.emptybox i { font-size:22px; }
.first-run { display:flex; flex-direction:column; gap:14px; }
.first-run h2 { font-size:22px; font-weight:800; margin:0; }
.tile, .tile-lg { width:44px; height:44px; border-radius:12px; background:var(--acSoft); color:var(--ac); display:grid; place-items:center; font-size:18px; }
.tile-lg { width:52px; height:52px; background:var(--ac); color:var(--ink); font-size:22px; }
.tile.tg { background:rgba(42,171,238,.15); color:#2AABEE; }
/* Settings as an accordion, the family shape (DESIGN.md: every card closed on entry). Taken from
   tasks' .card.acc rules so a settings screen reads the same in both apps. */
.card.acc > h2 { cursor:pointer; user-select:none; margin:0; display:flex; align-items:center; gap:.5rem; }
.card.acc > h2::after { content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.8rem;
                        margin-inline-start:auto; color:var(--dim); transition:transform .15s; }
.card.acc.open > h2 { margin-bottom:.8rem; }
.card.acc.open > h2::after { transform:rotate(180deg); }
.card.acc:not(.open) > :not(h2) { display:none !important; }
.row.mid { align-items:center; }
/* documents: the intake notice, the chosen-file list, the files inside the detail sheet */
.notice { background:var(--acSoft); border-radius:14px; padding:12px 14px; font-size:13px; display:flex;
  flex-direction:column; gap:8px; align-items:flex-start; }
.notice p { margin:0; } .notice i { color:var(--ac); margin-inline-end:4px; }
.filelist { display:flex; flex-direction:column; gap:6px; }
.filerow { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--txt); }
/* a chosen file / a drop zone that got files = a selection mark: the accent, never green
   (owner 2026-09-07, DESIGN.md: green / amber / red are status colours only) */
.filerow i { color:var(--acText); }
.filerow.toobig i { color:var(--bad); }
.filerow .muted { font-size:12px; }
.dropbox.got { border-color:var(--ac); border-style:solid; color:var(--acText); }
.dropbox.got i { color:var(--acText); }
/* the in-app file viewer */
.overlay.viewer { padding:12px; }
.viewer-box { width:min(96vw,900px); height:min(92vh,1100px); background:var(--card);
  border-radius:16px; display:flex; flex-direction:column; overflow:hidden; }
.viewer-head { display:flex; align-items:center; gap:8px; padding:8px 10px; }
.viewer-head bdi { flex:1; text-align:center; font-size:13.5px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.viewer-body { flex:1; background:#0b0e0c; display:grid; place-items:center; overflow:auto; }
.viewer-body img { max-width:100%; max-height:100%; object-fit:contain; }
.viewer-body iframe { width:100%; height:100%; border:0; }
.viewer-fallback { display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--dim); }
.viewer-fallback i { font-size:34px; color:var(--ac); }
.pdf-pages { width:100%; height:100%; overflow:auto; display:flex; flex-direction:column; gap:8px; padding:8px; }
.pdf-pages canvas { display:block; border-radius:6px; background:#fff; }
.doc-files .mini .label i { color:var(--ac); margin-inline-end:6px; }
.doc-files .addfile { padding:8px 0 0; }
.warnc { color:var(--warn); }
.logrow i { color:var(--ac); width:16px; text-align:center; }
.logrow .logwhat { max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* The full-window overlay that appears WHILE files are dragged over the window. It was called .dropzone until
   2026-09-12, when the family's drop zone (the dashed label inside a form, tasks' .dropzone) arrived in the note
   sheet and the two names collided: the label's "show on a mouse device" media query displayed this overlay on
   every page. One name, one component - this one is links' own, so it moved. */
.dropover { position:fixed; inset:10px;   /* full-window on purpose: a drop target, not a control */ z-index:120; display:none; place-items:center; pointer-events:none;
  border:2px dashed var(--ac); border-radius:24px; background:rgba(15,19,17,.85);
  color:var(--acText); font-size:17px; font-weight:600; }
.dropover.open { display:grid; }
.dropover i { margin-inline-end:8px; }
/* the standing drop box in the document sheet: the affordance is there before any drag starts */
.dropbox { display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 14px;
  border:2px dashed var(--border); border-radius:14px; color:var(--dim); cursor:pointer;
  font-size:13.5px; text-align:center; }
.dropbox i { font-size:22px; color:var(--ac); }
@media (hover:hover) { .dropbox:hover { border-color:var(--ac); color:var(--body); } }
/* the X at the top of the detail sheet */
.sheet { position:relative; }
.sheet-x { position:absolute; top:12px; inset-inline-end:12px; z-index:1; }
/* A moment in another year is not the same kind of "soon" (shared dt_badge_cls -> .far). */
.far { color:var(--far); }
/* From tasks (settings.php): the linked-channel row. Same classes in both apps. */
.tile-sm { width:34px; height:34px; border-radius:var(--r-tile); background:var(--hover); color:var(--dim); display:inline-flex; align-items:center; justify-content:center; flex:none; font-size:14px; }
.row .grow { flex:1; min-width:0; }
.row .ttl { font-size:14.5px; font-weight:500; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.steps { line-height:2; margin:0; padding-inline-start:1.2rem; font-size:13.5px; }
.steps code.linkcode { display:inline; padding:2px 6px; }
.installrow { margin-top:14px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }

.flash { background:rgba(248,113,113,.12); color:var(--bad); border-radius:14px; padding:12px 14px; font-size:13.5px; display:flex; gap:.6rem; align-items:flex-start; word-break:break-word; }
.flash.ok { background:rgba(74,222,128,.12); color:var(--ok); }
/* the live refresh's "update waiting" line (tasks' rule): sticky, so a held-back reload is never invisible */
.flash.upd { position:sticky; top:8px; z-index:30; } .flash.upd a { color:inherit; font-weight:600; text-decoration:underline; }

/* floating layers */
/* The family FAB: a round + that opens a two-option menu (tasks' pattern). The + rotates into an x
   while the menu is open, which is the only state indicator it needs. */
.fab { position:fixed; bottom:78px; right:max(18px, calc(50% - 430px)); z-index:35; width:54px; height:54px; border:0; border-radius:50%;
  /* tasks' wide-screen formula: on a phone the max() resolves to the 18px corner, and on a wide
     display the button rides the CONTENT column's edge (.wrap is 860px centred) instead of
     floating in a far corner with nothing near it. Right is the family default (tasks); the
     fab_side preference (body.fab-left) moves it to the left. */
  display:flex; align-items:center; justify-content:center; font-size:24px;
  background:var(--ac); color:var(--ink); box-shadow:0 8px 28px var(--acGlow); cursor:pointer; }
.fab i { transition:transform .15s; }
.fab.open i { transform:rotate(45deg); }
body.fab-left .fab { right:auto; left:max(18px, calc(50% - 430px)); }
body.fab-left .fab-menu { right:auto; left:max(18px, calc(50% - 430px)); }
.fab-menu { position:fixed; bottom:calc(var(--fab-top) + 10px); right:max(18px, calc(50% - 430px)); z-index:56; display:none; flex-direction:column; gap:4px;
  padding:8px; border-radius:20px; background:var(--card); border:1px solid var(--border);
  box-shadow:0 12px 36px rgba(0,0,0,.45); }
.fab-menu.open { display:flex; }
.fab-menu button { display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:14px;
  background:transparent; color:var(--body); font-size:14.5px; font-weight:500; text-align:start; cursor:pointer; border:0; }
.fab-menu button:active { background:var(--hover); } @media (hover:hover) { .fab-menu button:hover { background:var(--hover); } }
.fab-menu button i { color:var(--ac); }
/* The bottom bar, tasks' geometry verbatim (owner 2026-09-02): the framed pill (accent border +
   inner ring), items sitting in fixed 48px circles spread with space-around - not links' old
   full-width flex pills. */
.botnav { position:fixed; bottom:14px; left:50%; transform:translateX(-50%); z-index:36;
  width:min(420px, calc(100vw - 28px)); height:56px;
  display:flex; align-items:center; justify-content:space-around; padding:0 .4rem;
  background:rgba(24,30,27,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-radius:var(--r-pill); border:1px solid var(--acSoft2);
  box-shadow:0 10px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.4); }
.navb { width:48px; height:44px; border:0; background:transparent; color:var(--dim); border-radius:var(--r-pill);
  cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:17px; padding:0; font-family:inherit; }
.navb i { font-size:inherit; }
/* Menu labels (preference btn_labels -> body.lbl), as in tasks: icons only by default, text under
   the bottom-menu icons when the switch is on. */
.navb span { font-size:10px; line-height:1; font-weight:400; display:none; }
body.lbl .navb { flex-direction:column; gap:3px; height:48px; font-size:16px; }
body.lbl .navb span { display:block; }
.navb.on { background:var(--acSoft); color:var(--ac); }

.sheet-wrap { position:fixed; inset:0 0 var(--kb, 0px) 0; z-index:50; background:rgba(6,9,7,.65);
  display:none; align-items:flex-end; justify-content:center; }
/* --kb is the keyboard height published by assets/sheet-keyboard.js (family file). Lifting the
   whole overlay is better than padding the sheet: the sheet then rests on the keyboard instead of
   growing taller behind it. */
.sheet-wrap.open { display:flex; animation:fade .15s ease; }
/* the detail sheet is server-rendered and stays OUTSIDE the layer stack (app.js closeTop), so layers.js never sets
   html.layer-open for it: the same lock here, by CSS, so the page behind neither scrolls nor shakes (owner 2026-09-14, family fe055e7) */
html:has(#detailSheet.open), html:has(#detailSheet.open) body { overflow:hidden; overscroll-behavior:none; }
/* width <= 560 and centred, per shared/DESIGN.md. Mine was 100% with no cap, so on a desktop the
   sheet spanned the whole viewport while every other surface sits in the centred 860px column. */
/* max-height against the WRAP (100%), not the viewport: the wrap ends above the keyboard (--kb), and a 92vh sheet
   inside it overflowed upward past the top of the screen - the title field was there and could not be reached
   (owner 2026-09-09). Now the sheet fits the room left and scrolls inside. */
.sheet { width:min(100%, 560px); max-height:min(92vh, 100%); overflow:auto; overscroll-behavior:contain;
  background:var(--card); border-radius:24px 24px 0 0;
  padding:14px 18px calc(26px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:12px; animation:slideup .2s ease; }
.sheet .fld { scroll-margin-block:90px; }
.grab { width:38px; height:4px; border-radius:999px; background:var(--border); margin:0 auto 4px; }
.sheet h2 { margin:0; font-size:17px; font-weight:600; }
@keyframes slideup { from { transform:translateY(18px); } }
@keyframes fade { from { opacity:0; } }

.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.tile { width:auto; height:auto; padding:16px 8px; flex-direction:column; gap:6px; display:flex; align-items:center;
  background:var(--sunken); border-radius:16px; color:var(--body); font-size:12.5px; position:relative; }
.tiles .tile i { font-size:19px; color:var(--ac); }
.badge { position:absolute; inset:8px 8px auto auto; background:var(--bad); color:#0f1311; border-radius:999px; font-size:10px; padding:1px 6px; }

.overlay { position:fixed; inset:0; z-index:60; background:rgba(6,9,7,.72); display:none; place-items:center; padding:20px; }
.overlay.open { display:grid; animation:fade .15s ease; }
/* .ov is the overlay class of every shared component that brings its own markup - the confirm
   dialog and the date picker both append a <div class="ov">. This app had no rule for it at all,
   which is why the picker never appeared to open: the overlay rendered as a plain block in the
   page flow instead of a centred layer over it. .acts is the dialog's button row, and its two
   buttons are bare elements rather than .btn - which is what lets one file fit both stylesheets. */
.ov { position:fixed; inset:0; z-index:60; background:rgba(6,9,7,.72); display:none; place-items:center; padding:20px; }
.ov.open { display:grid; animation:fade .15s ease; }
.modal.confirm .acts { display:flex; gap:10px; justify-content:flex-end; align-items:center; }
button.ghost { background:transparent; color:var(--dim); }
@media (hover:hover) { button.ghost:hover { background:var(--hover); color:var(--txt); } }
button.danger { background:rgba(248,113,113,.15); color:var(--bad); }
.modal { background:var(--card); border-radius:22px; padding:24px; max-width:420px; width:100%; display:flex; flex-direction:column; gap:12px; }
.modal h3 { margin:0; font-size:16px; font-weight:600; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; align-items:center; }

.urlrow { display:flex; align-items:center; gap:8px; background:var(--sunken); border-radius:12px; padding:10px 12px; font-size:12px; color:var(--meta); }
.urltext { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac { background:var(--sunken); border-radius:12px; padding:6px; display:flex; flex-direction:column; }
.ac button { background:none; border:0; color:var(--txt); font-family:inherit; text-align:start; padding:8px 10px; border-radius:8px; cursor:pointer; }
@media (hover:hover) { .ac button:hover { background:var(--hover); } }
.tagline-edit { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* A saved tag opens for editing in place. <details> so it works without JS. */
.tagedit { display:inline-block; }
.tagedit > summary { list-style:none; cursor:pointer; }
.tagedit > summary::-webkit-details-marker { display:none; }
.tagedit > summary i { opacity:.6; font-size:9px; }
.tagedit[open] { display:block; width:100%; background:var(--sunken); border-radius:14px; padding:10px; }
.tagedit[open] > summary { margin-bottom:8px; }
.tagedit-form { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.tagedit-form .fld { flex:1; }

.addtag { display:flex; gap:8px; align-items:center; }
.addtag .fld { flex:1; }

/* The update button sits away from the field it belongs to, and is not full width: it is one
   action on an existing link, not the primary call to action of the screen. */
.noteform { display:flex; flex-direction:column; gap:10px; }
.noteform-actions { display:flex; justify-content:flex-start; margin-top:6px; }

.linkcode { background:var(--sunk); border-radius:var(--r-input); padding:10px 14px;
  font-size:17px; font-weight:600; letter-spacing:2px; text-align:center; font-variant-numeric:tabular-nums; }
.remrow { display:flex; gap:10px; align-items:center; justify-content:space-between;
  background:var(--sunk); border-radius:var(--r-input); padding:10px 12px; }
.rem-edit { background:none; border:0; padding:6px 0; color:inherit; font:inherit; text-align:start; cursor:pointer; display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.rem-edit-pen { color:var(--dim); font-size:12px; }
#remEdit { margin-top:8px; }

.proposed { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.proposed .chip { background:transparent; border:1px dashed var(--border); color:var(--body); }
.proposed .chip.on { background:var(--acSoft); border-color:transparent; color:var(--acText); }

.sugg { display:inline-flex; align-items:center; gap:2px; }
.chip.dashed { background:transparent; border:1px dashed var(--border); color:var(--body); }
.chip.x { background:transparent; color:var(--meta); padding:4px 7px; }

/* the family toast (tasks d9b33b2, owner 2026-09-11: a narrow max-width made a long text wrap inside a pill): the text takes the
   whole width before it wraps, radius 20 so a wrapped one reads as a rounded box and a single line still as a pill */
.toast, #toast { position:fixed; inset:auto 0 100px 0; z-index:70; margin:0 auto; width:max-content; max-width:calc(100vw - 32px);
  background:var(--hover); border-radius:20px; padding:.6rem 1rem; font-size:14px; line-height:1.4; text-align:start;
  box-shadow:0 10px 30px rgba(0,0,0,.5); animation:fade .2s ease; }
.toast i, #toast i { color:var(--ac); }
.toast a { color:var(--acText); font-weight:600; text-decoration:underline; margin-inline-start:6px; }   /* "לפתוח בתזכיר לי" (owner 2026-09-10) */

/* login */
.login-body { display:grid; place-items:center; min-height:100vh; padding:24px; }
.login { width:100%; max-width:360px; display:flex; flex-direction:column; gap:14px; text-align:center; }
.login h1 { margin:0; font-size:34px; font-weight:800; }
.login h1 span { font-size:18px; font-weight:300; color:var(--meta); }
.login .logo img { width:96px; height:96px; border-radius:26px; filter:drop-shadow(0 10px 28px var(--acGlow)); }
.login .tagline { margin:0; font-size:14px; font-weight:300; color:var(--meta); }
.login form { display:flex; flex-direction:column; gap:12px; }

@media (min-width:700px) {
  .row .thumb { width:104px; height:78px; }
}

/* ---------- admin (tasks' skeleton, family uniformity 2026-09-01) ---------- */
body.adm .fab, body.adm .fab-menu, body.adm .botnav { display:none !important; }
/* the KPI tiles, the avatar and the log table are the family's now (shared/admin.css, owner 2026-09-18) */
.addbar { display:flex; gap:8px; }
.addbar .grow { flex:1; }
.dim { color:var(--dim); } .ac { color:var(--ac); }
.ttl { font-size:14.5px; font-weight:500; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.urow { display:flex; gap:20px; flex-wrap:wrap; }
.ulist { display:flex; flex-direction:column; gap:2px; font-size:12.5px; color:var(--body); }
details.sub summary { cursor:pointer; list-style:none; font-weight:600; font-size:14.5px;
  display:flex; align-items:center; gap:6px; padding:6px 0; }
details.sub summary::-webkit-details-marker { display:none; }
details.sub .chev { transition:transform .15s; color:var(--dim); font-size:11px; }
details.sub[open] .chev { transform:rotate(180deg); }
.caprow { display:flex; align-items:center; gap:6px; margin-top:4px; flex-wrap:wrap; }   /* wrap: validate.js puts "שדה חובה" in the row, and without it the field is squeezed (tasks 2026-09-18) */
.urowuser { align-items:flex-start; }

/* ---------- tab order list (settings): tasks' navord styles on links' tokens ---------- */
fieldset.dtbox { border:1px solid var(--border); border-radius:var(--r-input); padding:.7rem .8rem .8rem; margin:1rem 0 0; min-width:0; }
.dtbox legend { color:var(--dim); font-size:12.5px; padding:0 .4rem; }
.navord { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; max-width:360px; }
.navord li { position:relative; display:flex; align-items:center; gap:.5rem; padding:.45rem .6rem; background:var(--sunk); border:1px solid var(--line); border-radius:var(--r-input); user-select:none; -webkit-user-select:none; cursor:grab; }
.navord li .grip { color:var(--dim); touch-action:none; padding:.3rem .2rem; margin:-.3rem 0; cursor:grab; }
.navord li .num { width:1.2rem; text-align:center; color:var(--dim); font-size:12px; }
.navord li .lbl { flex:1; display:flex; align-items:center; gap:.45rem; }
.navord li .lbl i { width:1.1rem; text-align:center; color:var(--dim); }
.navord li.more .lbl { color:var(--dim); }
.navord li:focus-visible { outline:2px solid var(--ac); outline-offset:1px; }
.navord li.first-more { margin-top:1.4rem; }
.navord li.first-more::before { content:'תחת "עוד"'; position:absolute; top:-1.15rem; inset-inline-start:.4rem; font-size:11px; color:var(--dim); }
.navord li.drag { z-index:5; box-shadow:0 8px 24px rgba(0,0,0,.45); border-color:var(--ac); background:var(--hover); cursor:grabbing; }
.navord.dragging li:not(.drag) { transition:transform .12s; }
.navord-toggle { margin:0 0 .5rem; }

/* ---------- notes tab (tasks' item styles on links' tokens) ---------- */
/* the grip, the lifted item and the locked state of drag to reorder are shared/sortable.css (owner 2026-09-21), loaded after this file; what is below is links' own */
.sort-toggle { margin:0 0 2px; }
.sortable .item { background:var(--card); border-radius:16px; margin-bottom:8px; padding:10px 14px; }
.item summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:.5rem; }
.item summary::-webkit-details-marker { display:none; }
.item summary .grow { flex:1; min-width:0; }
.item summary .ttl { font-size:14px; font-weight:500; line-height:1.35; }
.item summary .meta { font-size:11.5px; color:var(--dim); font-weight:300; display:flex; flex-wrap:wrap; gap:.2rem .6rem; margin-top:.1rem; }
.item summary .meta:empty { display:none; }
.item summary .meta .ac { color:var(--acText); } .item summary .meta .warn { color:var(--warn); }
.item summary .chev { color:var(--dim); font-size:12px; transition:transform .15s; flex:none; }
.item[open] summary .chev { transform:rotate(180deg); }
.item .content { white-space:pre-line; line-height:1.75; font-weight:300; color:var(--body); padding:.6rem 0; overflow-wrap:break-word; }
.item .note-edit { display:flex; flex-direction:column; gap:8px; padding:.6rem 0; }
.item.editing > summary .ttl { visibility:hidden; }   /* the title is in the edit box now, not twice (owner 2026-09-11) */
.item.editing > .content { display:none; }   /* the form stands in for the text while editing */
.item .note-edit .acts { display:flex; gap:.6rem; justify-content:flex-end; }
.item .iacts { display:flex; align-items:center; gap:.1rem; margin-top:.5rem; flex-wrap:wrap; row-gap:.3rem; }
.item .iacts .spacer { flex:1; }
/* the documents' list (owner 2026-09-21): rows, not .item - the handle and the lift are shared/sortable.css; here only the 14 px between the rows that .wrap gives its direct children */
.sortable.rows > .row { margin-bottom:14px; } .sortable.rows > .row:last-child { margin-bottom:0; }
.pin-mark { color:var(--ac); font-size:.8em; margin-inline-end:.15rem; }

/* ---------- tags tab: collapsed tag rows that open in place ---------- */
.taglist { display:flex; flex-direction:column; }
.taglist .item { background:var(--card); border-radius:16px; margin-bottom:8px; padding:10px 14px; }
.taglist .item summary .ttl i { color:var(--ac); font-size:.85em; margin-inline-end:2px; }
.tagbody { display:flex; flex-direction:column; gap:10px; padding:.6rem 0 .2rem; }
.tagbody .kind-head { font-size:14.5px; margin:2px 0 -4px; }
.tagbody .row { background:var(--sunk); }          /* a row inside a card: the sunk tone separates them */

/* ---------- share sheet (documents and notes) ---------- */
#shareSheet .ttl { margin:0; font-weight:600; }
.share-warn { margin:0; padding:10px 12px; border-radius:var(--r-input); background:rgba(251,191,36,.10); color:var(--warn); font-size:12.5px; line-height:1.5; }
.share-warn i { margin-inline-end:4px; }
.share-acts { display:flex; flex-direction:column; gap:8px; }
.share-desk { margin:0 0 6px; line-height:1.4; }
.share-dl { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.share-mail { display:flex; flex-direction:column; gap:6px; margin-top:6px; padding-top:10px; border-top:1px solid var(--line); }
.share-mail .inline-fields .fld { flex:1; min-width:180px; }

/* ---------- first-login wizard: tasks' .wz rules verbatim (family), plus the direction-B bubble ---------- */
.wz-body { padding-bottom:0; }
.wz { min-height:100vh; display:flex; flex-direction:column; gap:24px; width:100%; max-width:480px; margin:0 auto; padding:28px 20px 40px; }
.wz.done { align-items:center; justify-content:center; text-align:center; max-width:440px; gap:20px; }
.wz-top { display:flex; align-items:center; gap:12px; }
.wz-ico { width:38px; height:38px; border-radius:12px; }
.wz-big { width:96px; height:96px; border-radius:26px; box-shadow:0 16px 44px var(--acGlow); }
.wz-prog { flex:1; display:flex; gap:6px; }
.wz-prog i { flex:1; height:5px; border-radius:3px; background:var(--hover); transition:background .25s; }
.wz-prog i.on { background:var(--ac); }
.wz-skip { color:var(--dim); font-size:13px; font-weight:300; padding:4px; } @media (hover:hover) { .wz-skip:hover { color:var(--txt); } }
.wz h1 { font-size:24px; font-weight:800; margin:0; }
.wz p { font-size:14.5px; color:var(--dim); font-weight:300; line-height:1.7; margin:6px 0 0; }
/* .wz-step .wz-card .wz-wait .wz-ok .wz-tg .wz-qr .wz-nav .wz-back .wz-next: shared/wizard.css (owner 2026-09-20), loaded after this file. What stays here is links' own: .wz-top .wz-prog .wz-skip .wz-say .wz-tabs .wz-li */
.wz-li { display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.65; color:var(--body); font-weight:300; }
.wz-li .n { width:24px; height:24px; border-radius:50%; background:var(--acSoft); color:var(--ac); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; flex:none; }
.wz-tabs { display:flex; gap:6px; background:var(--card); border-radius:999px; padding:5px; }
.wz-tabs button { flex:1; border:0; border-radius:999px; padding:10px 6px; font-size:13.5px; background:none; color:var(--dim); cursor:pointer; }
.wz-tabs button i { margin-left:7px; }
.wz-tabs button.on { background:var(--acSoft); color:var(--ac); font-weight:600; }
.hint { color:var(--dim); font-size:13px; font-weight:300; line-height:1.6; } .hint.center { text-align:center; } .hint code { color:var(--txt); }
.dim { color:var(--dim); font-weight:300; }
/* Direction B (owner 2026-09-03): the character speaks first - avatar + chat bubble */
.wz-say { display:flex; gap:10px; align-items:flex-start; }
.wz-say img { width:44px; height:44px; border-radius:14px; flex:none; }
.wz-say .bubble { background:var(--card); border-radius:18px 4px 18px 18px; padding:12px 14px; font-size:15px; line-height:1.65; color:var(--txt); }
.login .wz-say { text-align:start; margin-bottom:14px; }
/* the soft gate's quiet bar, under the header on every screen while Telegram is not linked */
.quietbar { max-width:860px; margin:8px auto 0; padding:8px 12px; display:flex; align-items:center; gap:10px; background:var(--card); border-radius:14px; font-size:13px; color:var(--body); }
.quietbar i { color:#2AABEE; font-size:18px; } .quietbar span { flex:1; }
.btn.sm { padding:7px 12px; font-size:13px; }
/* the feedback score row (tasks) */
.score { display:flex; gap:.45rem; } .score-opt input { display:none; }
.score-opt span { display:inline-block; width:46px; height:46px; line-height:46px; text-align:center; border-radius:12px; background:var(--hover); cursor:pointer; font-weight:500; }
.score-opt input:checked + span { background:var(--acSoft); color:var(--acText); box-shadow:inset 0 0 0 1px var(--ac); }
/* draft.js: the restore line inside an editor (tasks' rule) */
.draft-note { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; background:rgba(251,191,36,.10); color:var(--warn); border-radius:12px; padding:.5rem .8rem; font-size:13px; margin-bottom:.5rem; }
/* paste hint (tasks' rule): only where there is a keyboard and a mouse */
.att-paste-hint { display:none; }
@media (hover:hover) and (pointer:fine) { .att-paste-hint { display:inline; } }
/* inline formatting: the B/U bar above a data-format editor is shared/format.css (owner 2026-09-21); the body is weight 300, so a bare <b> was invisible */
.item .content b { font-weight:700; color:var(--txt); }
.content u { text-decoration-thickness:1.5px; text-underline-offset:2px; }
/* direction B (owner 2026-09-06): "⋮" in the title row, one sticky action bar per open item - tasks' rules verbatim */
.item{position:relative}
.item summary .more-btn{flex:none;font-size:15px;width:32px;height:32px}
.item .iacts.bar{position:sticky;bottom:calc(var(--nav-h) + 8px);z-index:6;display:flex;align-items:stretch;justify-content:space-between;gap:.1rem;margin:.6rem -4px 0;padding:.3rem .2rem;background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:0 10px 28px rgba(0,0,0,.5)}
.item .iacts.bar form.inline,.item .iacts.bar .att-form,.item .iacts.bar .att-add{display:contents}
.item .iacts.bar .att-btn,.item .iacts.bar .ibtn{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;width:auto;height:auto;min-width:0;padding:.35rem .1rem;border-radius:12px;background:none;font-size:10.5px;line-height:1.1;color:var(--body);white-space:nowrap;user-select:none}
.item .iacts.bar .att-btn{color:var(--acText)}.item .iacts.bar .att-btn i,.item .iacts.bar .ibtn i{font-size:16px}
.item .iacts.bar .ibtn.danger{color:var(--bad)}.item .iacts.bar .ibtn.on{color:var(--acText)}
@media (hover:hover) { .item .iacts.bar .att-btn:hover, .item .iacts.bar .ibtn:hover { background:var(--hover) } }
.item .iacts.bar .att-paste-hint,.item .iacts.bar .att-status,.item .iacts.bar .spacer{display:none}
.item .iacts.bar.menu{position:absolute;top:44px;bottom:auto;inset-inline-start:10px;width:220px;flex-direction:column;align-items:stretch;padding:.3rem;z-index:45}   /* above the FAB (35) and the nav (36), below the sheets (50) - owner 2026-09-11: the menu painted under them when the item sat low; no ancestor of the menu makes a stacking context (.item is position:relative without z-index) */
.item .iacts.bar.menu .att-btn,.item .iacts.bar.menu .ibtn{flex-direction:row;justify-content:flex-start;gap:.7rem;font-size:14px;padding:.5rem .7rem}
.item .iacts.bar.menu .att-btn i,.item .iacts.bar.menu .ibtn i{width:20px;text-align:center}
.tag-mark { color:var(--dim); font-size:.8em; margin-inline-start:.3rem; }
.item .tagline { padding:.2rem 0 .4rem; gap:6px; }
.item .tagline .chip { background:var(--acSoft); color:var(--acText); font-size:11px; padding:3px 9px; }
/* category pages (owner 2026-09-04): the notes top row, the search */
.notes-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
/* folders (owner 2026-09-10): the single-select filter chips row under the page head, the accent chip = the active one */
.fchips { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px; }
.fchips .chip b { font-weight:500; opacity:.7; font-size:11px; }
.fchips .chip i { font-size:11px; }
/* subfolders (owner 2026-09-14): a mark on a top folder that has some, a second row inside it, and the settings rows indented */
.fchips .chip .sub-mark { font-size:10px; opacity:.6; }
.fchips .chip .inside { font-size:11px; font-weight:500; opacity:.75; margin-inline-start:2px; }   /* "+N" in the subfolders (owner 2026-09-15) */
.fchips.sub { margin-top:2px; padding-inline-start:10px; border-inline-start:2px solid var(--border); }
#s-folders .frow { flex-wrap:wrap; }
#s-folders .frow > .fld:not(.sm) { flex:1 1 100%; }
#s-folders .frow.fchild { margin-inline-start:14px; padding-inline-start:10px; border-inline-start:2px solid var(--border); }
#s-folders .ibtn.locked { opacity:.45; cursor:default; }
/* the minimal folder list (owner 2026-09-15): a line per folder - icon, name, count, a pencil on a top folder; subfolders indented */
.flist { display:flex; flex-direction:column; gap:2px; margin:6px 0 12px; }
.fline { display:flex; align-items:center; gap:8px; min-height:40px; padding:2px 4px; }
.fline .fname { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fline .fcount .inside { font-weight:500; }
.fline.fchild { margin-inline-start:18px; padding-inline-start:12px; border-inline-start:2px solid var(--border); min-height:34px; }
.fmodal .modal h3 { margin-top:0; }
.fmodal .sub-add { margin-top:10px; }
.fold i { font-size:11px; }
/* a note's files (owner 2026-09-11): the paperclip in the title, the strip in the open note, the add row in the new-note sheet */
.att-mark { color:var(--acText); font-size:.8em; margin-inline-start:.3rem; }
.note-files { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:.2rem 0 .5rem; }
.note-files .nf-img { display:block; width:84px; height:84px; border-radius:12px; overflow:hidden; background:var(--sunken); }
.note-files .nf-img img { width:100%; height:100%; object-fit:cover; display:block; }
.att-add { display:inline-flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
/* the new-note sheet as tasks' new-idea sheet (owner 2026-09-11): tasks' .frm / .frow / .att-btn / .help / .sheet-head / .dropzone values */
.frm { display:flex; flex-direction:column; gap:.7rem; }
.frow { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.frow > * { flex:1; min-width:120px; }
.frow > .fx { flex:none; min-width:0; }
.frow.folder-row { gap:.4rem; } .frow.folder-row select { flex:1 1 10rem; } .frow.folder-row [name=folder_new] { flex:1 1 10rem; }
.att-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .8rem; border-radius:999px; background:var(--hover); color:var(--body); font-size:13px; cursor:pointer; white-space:nowrap; user-select:none; }
.att-btn:active { background:var(--border); } @media (hover:hover) { .att-btn:hover { background:var(--border); } } .att-btn.on { background:var(--acSoft); color:var(--acText); }
.hint { color:var(--dim); font-size:12px; font-weight:300; margin:0; }
.help { width:18px; height:18px; padding:0; border:0; border-radius:50%; font-size:11px; font-weight:700; line-height:18px; text-align:center; background:var(--hover); color:var(--dim); vertical-align:middle; display:inline-block; flex:none; cursor:pointer; }
.help.on { background:var(--acSoft); color:var(--acText); } @media (hover:hover) { .help:hover { background:var(--acSoft); color:var(--acText); } }
.help-pop { flex-basis:100%; width:100%; margin:.35rem 0 .2rem; padding:.55rem .75rem; border-radius:var(--r-input); background:var(--hover); color:var(--body); font-size:12.5px; font-weight:300; line-height:1.5; white-space:normal; font-family:inherit; }
.sheet-head { display:flex; align-items:center; justify-content:space-between; margin:0 0 .7rem; font-size:15px; }
.sheet-head b { display:flex; align-items:center; gap:.5rem; font-weight:600; }
.sheet-head .sheet-close { position:static; }
.add-sheet { max-height:min(88vh, calc(100dvh - var(--kb, 0px) - 8px)); overflow-y:auto; }
.dropzone { display:none; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; padding:1.1rem 1rem; margin:.5rem 0; border:1.5px dashed var(--border); border-radius:16px; color:var(--body); cursor:pointer; text-align:center; user-select:none; transition:.15s; }
.dropzone i { font-size:22px; color:var(--warn); } .dropzone b { font-size:14px; font-weight:600; color:var(--txt); } .dropzone span { font-size:12px; color:var(--dim); }
.dropzone.over { border-color:var(--ac); background:var(--acSoft); } @media (hover:hover) { .dropzone:hover { border-color:var(--ac); background:var(--acSoft); } }
@media (hover:hover) and (pointer:fine) { .dropzone { display:flex; } }
.folder-pick { display:grid; gap:6px; }
/* the folders card's own rows: the family .frow above is the base (gap .6rem); only the card's widths are set here.
   A second unscoped .frow rule used to sit here and quietly won over the family values (6 px, under the 8 px floor). */
#s-folders .frow { margin-bottom:8px; }
#s-folders .frow .fld { flex:1 1 auto; min-width:0; }
#s-folders .frow .fld.sm { flex:0 1 auto; max-width:46%; }
#s-folders .frow .fcount { white-space:nowrap; flex:none; min-width:0; }
.fkind { font-size:14px; font-weight:600; margin:14px 0 6px; display:flex; align-items:center; gap:6px; color:var(--body); }
/* storage line in settings > חשבון (family 5b8c32d, owner 2026-09-11) */
.storage { display:grid; gap:6px; margin-bottom:4px; }
.storage-txt { font-size:13.5px; color:var(--body); } .storage-txt i { color:var(--ac); margin-inline-end:4px; }
.storage-bar { height:4px; border-radius:2px; background:var(--sunken); overflow:hidden; }
.storage-bar i { display:block; height:100%; background:var(--ac); border-radius:2px; }
.storage-bar.warn i { background:#f59e0b; } .storage-bar.bad i { background:var(--bad); }
.storage details.heavy summary { font-size:12.5px; color:var(--dim); cursor:pointer; list-style:disclosure-closed; }
.storage details.heavy[open] summary { list-style:disclosure-open; }
.storage details.heavy a.row { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13px; color:var(--txt); text-decoration:none; border-bottom:1px solid var(--line); }
.storage details.heavy a.row:last-child { border-bottom:0; } .storage details.heavy a.row .grow { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.storage details.heavy a.row i { color:var(--dim); font-size:11px; }
.search.top-bar, main > .search { margin-bottom:10px; }   /* the list page's search sits under the heading (owner 2026-09-11) */
/* a form inside a card keeps the card's rhythm: the save button never touches the last field (owner 2026-09-04) */
.card > form:not(.inline) { display:flex; flex-direction:column; gap:12px; }
/* crop sheet (Cropper.js) - ltr box: the library positions with left/top and misplaces the image under rtl */
#cropSheet { z-index:57; }
.crop-box { direction:ltr; height:60vh; max-height:60vh; overflow:hidden; border-radius:12px; background:var(--sunk); touch-action:none; overscroll-behavior:contain; }
/* the page picker (owner 2026-09-14): a page is a tile toggled by a tap, a check mark on the chosen ones - no checkbox squares */
.page-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px; max-height:58vh; overflow:auto; overscroll-behavior:contain; padding:2px; margin-top:8px; }
.page-tile { position:relative; display:block; width:100%; padding:4px 4px 6px; border:2px solid var(--border); border-radius:10px; background:var(--card); cursor:pointer; color:var(--body); font:inherit; }
.page-tile canvas { display:block; width:100%; border-radius:6px; background:#fff; transition:opacity .15s; }
.page-tile .pno { display:block; margin-top:4px; font-size:12px; text-align:center; }
.page-tile .chk { position:absolute; top:8px; inset-inline-start:8px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:13px; background:var(--ac); color:#0f1311; }
.page-tile.on { border-color:var(--ac); }
.page-tile:not(.on) canvas { opacity:.4; }
.page-tile:not(.on) .chk { background:var(--border); color:transparent; }
/* save from the top of a note form (owner 2026-09-14): the title and a check button share a row; the sheet head holds check + X */
.note-edit .ttlrow { display:flex; align-items:center; gap:6px; }
.note-edit .ttlrow .fld { flex:1; min-width:0; }
.sheet-head .head-acts { display:inline-flex; align-items:center; gap:6px; }
.ibtn.topsave { flex:none; }
.crop-box img { display:block; max-width:100%; max-height:100%; }
.cropper-view-box, .cropper-face { border-radius:4px; }
/* the chosen-files preview in the document sheet (owner 2026-09-05): thumbnails, remove, retake */
.filerow.img img { width:56px; height:56px; object-fit:cover; border-radius:10px; flex:none; cursor:zoom-in; background:var(--sunk); }
.filerow .grow { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.filerow .grow bdi { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filerow .ibtn i { color:inherit; }   /* the row icon rule must not colour the action buttons */

/* merged PDFs on a document (owner 2026-09-05, tasks' view): the group, its sources, the mode chip */
.doc-files .mini.src { margin-inline-start:18px; padding-inline-start:12px; border-inline-start:2px dashed var(--border); opacity:.75; }
.doc-files .srcgroup { display:flex; flex-direction:column; }
.doc-files .srcgroup > form { margin:2px 0 6px 18px; }
.chip.merged { background:var(--acSoft); color:var(--acText); }
.chip.srcmark { background:var(--hover); color:var(--dim); font-size:10.5px; padding:2px 8px; }
.mode-chip { position:relative; display:inline-flex; align-items:center; background:var(--hover); border-radius:var(--r-pill); padding:0 .7rem 0 .55rem; font-size:13px; color:var(--acText); cursor:pointer; }
.mode-chip select { appearance:none; -webkit-appearance:none; background:transparent; border:0; color:inherit; font:inherit; padding:.35rem 0 .35rem 1.2rem; cursor:pointer; width:auto; }
.mode-chip i { position:absolute; inset-inline-end:.6rem; font-size:10px; pointer-events:none; }
.pdfmerge { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
/* the file rows on a document (owner 2026-09-05): one line each - the name truncates, the size and the two
   buttons never wrap under it; a tighter indent for sources */
.doc-files .mini { flex-wrap:nowrap; gap:8px; padding:8px 0; }
.doc-files .mini .label { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.doc-files .mini .label bdi { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-files .mini .label i { flex:none; }
.doc-files .mini > .muted, .doc-files .mini > .chip, .doc-files .mini > .ibtn, .doc-files .mini > form { flex:none; }
.doc-files .mini.src { margin-inline-start:10px; padding-inline-start:10px; }
.doc-files .srcgroup > form { margin:4px 0 6px 10px; }
/* ---------- the recycle bin: tasks' rows (owner 2026-09-06) - kind tile, restore / purge icons, empty-all ---------- */
.trash .trow { flex-wrap:nowrap; }
.trash .trow .grow { flex:1; min-width:0; }
.trash .trow .ttl { font-size:14.5px; font-weight:500; overflow-wrap:anywhere; }
.trash .trow .meta { font-size:12px; color:var(--dim); font-weight:300; display:flex; flex-wrap:wrap; gap:.25rem .7rem; margin-top:.15rem; }
.trash .trow .acts { display:flex; gap:.1rem; flex:none; }
@media (hover:hover) { .ibtn.ok:hover { background:rgba(74,222,128,.12); color:var(--ok); } }
.trash .frow { display:flex; justify-content:flex-end; margin-top:.8rem; }
.btn.purge-all { background:rgba(248,113,113,.15); color:var(--bad); }
/* "להציג הכל" under a page that shows the newest X of N (owner 2026-09-07) */
.showall { display:flex; justify-content:center; margin:10px 0 2px; }
/* the links inside a note (owner 2026-09-07): a checkable row per URL, saved ones marked; the check is the accent */
.notelinks { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.nl-row { display:flex; align-items:center; gap:10px; font-size:13px; min-width:0; }
.nl-row.toggle { flex-wrap:nowrap; }   /* a link to save is the family switch, never a native square (owner 2026-09-13) */
.nl-row bdi { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nl-row .nl-saved { color:var(--acText); font-size:17px; flex:none; width:46px; text-align:center; }
.nl-row .chip { flex:none; }
.nl-actions { display:flex; flex-direction:column; gap:6px; align-items:flex-start; margin-top:4px; }
/* the חשבון card (family settings skeleton, owner 2026-09-07): tasks' devices list and pills in links' tokens */
.acc-code { margin-top:12px; padding:12px; border:1px solid var(--ac); border-radius:12px; display:flex; flex-direction:column; gap:8px; }
.devices { margin-top:12px; }
.devices>summary { display:flex; align-items:center; gap:.6rem; list-style:none; cursor:pointer; padding:.3rem 0; }
.devices>summary::-webkit-details-marker { display:none; }
.devices>summary .grow { flex:1; min-width:0; display:flex; flex-direction:column; }
.devices>summary .ttl { font-size:14px; font-weight:500; }
.devices>summary .meta { font-size:11.5px; color:var(--dim); font-weight:300; }
.devices>summary .chev { color:var(--dim); font-size:11px; transition:transform .15s; }
.devices[open]>summary .chev { transform:rotate(180deg); }
.devices .row.dev { padding:8px 0; border-radius:0; background:transparent; border-bottom:1px solid var(--line); gap:10px; }
.devices .row.dev:last-of-type { border-bottom:0; }
.pill.ac { background:var(--acSoft); color:var(--acText); }
.pill.warn { background:rgba(251,191,36,.12); color:var(--warn); }
.acc-del { margin-top:6px; }
.acc-del>summary { cursor:pointer; color:var(--bad); font-size:13px; list-style:none; }
.acc-del>summary::-webkit-details-marker { display:none; }
.acc-del form { margin-top:8px; }
/* השימוש שלי ב-AI */
.aibar { height:6px; border-radius:999px; background:var(--hover); overflow:hidden; margin:6px 0 10px; }
.aibar i { display:block; height:100%; background:var(--ac); }
.aibar.warn i { background:var(--warn); } .aibar.bad i { background:var(--bad); }
.airow { display:flex; gap:12px; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); font-size:13px; }
.airow:last-child { border-bottom:0; }
/* a URL inside a note's body (owner 2026-09-07): a link, opens in a new tab, breaks anywhere on a narrow screen */
.item .content a.ulink { color:var(--acText); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
/* the detail sheet's bottom bar (owner 2026-09-07): sticky, icons for share / delete, "שמירה" wide */
.sheet .dacts { position:sticky; bottom:-1px; z-index:5; display:flex; align-items:center; gap:4px; margin:12px -6px -6px; padding:8px 6px; background:var(--card); border-top:1px solid var(--line); }
.sheet .dacts .btn.primary { flex:1; margin-inline-start:6px; justify-content:center; }
.sheet .dacts .ibtn.on { color:var(--acText); }
.sheet .link.close { display:block; text-align:center; margin-top:10px; }
/* a pending reminder on a row (owner 2026-09-07): a bell chip, amber once its moment arrived */
.chip.rem { background:var(--acSoft); color:var(--acText); }
.chip.rem.due { background:rgba(251,191,36,.14); color:var(--warn); }
/* the bin (owner 2026-09-07): a section per kind, "הצג הכל" under a capped list, the retention select on the tab */
.trash details.sub { margin-top:6px; }
.trash details.sub summary { display:flex; align-items:center; gap:8px; padding:8px 0; }
.trash details.sub summary .cnt { margin-inline-start:auto; font-size:12px; font-weight:400; color:var(--meta); }
.show-all { display:flex; align-items:center; justify-content:center; gap:.5rem; margin:.6rem 0 .2rem; padding:.6rem; border-radius:12px; background:var(--hover); color:var(--acText); font-size:13.5px; } /* a capped list offers the rest (owner 2026-09-07) */
@media (hover:hover) { .show-all:hover { background:var(--border); } }
.trash .retention { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.trash .retention select.fld { width:auto; padding:8px 12px; }
.trash .frow { flex-wrap:wrap; gap:8px; }
.trash .frow button[disabled] { opacity:.45; cursor:default; }
.sheet .dacts .ibtn.danger { color:var(--bad); }   /* the bin in the sheet's bar is red (owner 2026-09-08), as in the item bar */
/* ---------- settings: two levels + search (owner 2026-09-08, app/settings_groups.php + shared/settings-search.js) ---------- */
.sub-head{display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem}.sub-head h1{margin:0;font-size:18px;font-weight:600;display:flex;align-items:center;gap:.5rem}
.sq-wrap{position:relative;margin:0 0 14px}.sq-wrap>i{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:var(--dim);pointer-events:none}
.sq{width:100%;padding:11px 40px 11px 14px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--border);color:var(--txt)}.sq:focus{border-color:var(--ac);outline:0}
/* settings search results as a panel (family 31f8514 / tasks ab98314, owner 2026-09-11: they 'sank' into the page) */
.sq-results{position:absolute;top:calc(100% + 8px);inset-inline:0;background:var(--hover);border:1.5px solid var(--acSoft2);border-radius:18px;box-shadow:0 18px 44px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4);z-index:40;max-height:60vh;overflow:auto;padding:4px}
.sq-head{padding:8px 14px 4px;font-size:12px;color:var(--dim)}
.sq-item{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:.6rem;padding:10px 14px;border-radius:14px;color:var(--txt);text-decoration:none}
.sq-item .sq-l{font-size:15px;font-weight:600;grid-column:1} .sq-item .sq-g{font-size:12px;color:var(--dim);grid-column:1} .sq-item .sq-c{grid-column:2;grid-row:1 / span 2;color:var(--dim);font-size:12px}
.sq-item mark{background:var(--acSoft);color:var(--acText);border-radius:4px;padding:0 .15em}
.sq-item:focus { background:var(--acSoft) } @media (hover:hover) { .sq-item:hover { background:var(--acSoft) } } .sq-item:focus .sq-g { color:var(--acText) } @media (hover:hover) { .sq-item:hover .sq-g { color:var(--acText) } }

.sgroups { padding-top:6px;padding-bottom:6px } a.sgroup { color:inherit;text-decoration:none;align-items:center;gap:.8rem } a.sgroup .ttl { display:block;font-weight:600 } a.sgroup .meta { display:block;font-weight:300;font-size:12.5px;color:var(--dim) } @media (hover:hover) { a.sgroup:hover .ttl { color:var(--acText) } }
.hl{animation:sassi-hl 1.8s ease-out}@keyframes sassi-hl{0%,60%{box-shadow:0 0 0 3px var(--acSoft2);background:var(--acSoft)}100%{box-shadow:none;background:transparent}}
/* level-2 header (owner 2026-09-08 feedback): the group name in the accent, the back control a pill that nudges once */
.sub-head h1{color:var(--acText)}.sub-head h1 i{color:var(--ac)}
.back-pill{width:40px;height:40px;border-radius:50%;background:var(--acSoft);color:var(--ac);display:inline-flex;align-items:center;justify-content:center;font-size:16px;text-decoration:none;flex:none;border:1px solid var(--acSoft2);animation:sassi-nudge 1.6s ease-in-out .4s 2}
.back-pill:focus-visible { background:var(--ac);color:var(--ink);outline:0 } @media (hover:hover) { .back-pill:hover { background:var(--ac);color:var(--ink);outline:0 } }
@keyframes sassi-nudge{0%,100%{transform:translateX(0)}30%{transform:translateX(5px)}60%{transform:translateX(0)}80%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.back-pill{animation:none}}
.sg-chev { color:var(--dim);font-size:12px } @media (hover:hover) { a.sgroup:hover .sg-chev { color:var(--ac) } }
/* links: a.sgroup rides on our .row (a results card by default) - flatten it inside the groups card */
.sgroups a.sgroup{display:flex;background:transparent;border-radius:0;padding:12px 4px;border-bottom:1px solid var(--line)}.sgroups a.sgroup:last-child{border-bottom:0}
/* ---------- feedback (owner 2026-09-08, shared/feedback.js): every tap answers at once, the wait escalates by time ---------- */
button,.ibtn,a.row,.bnav a,.sq-item,.sgroup,.btn-link,.chk,.fab{transition:transform .08s,filter .08s,background .15s,color .15s}
button:not(:disabled):active,.ibtn:active,a.row:active,.bnav a:active,.sq-item:active,.sgroup:active,.btn-link:active,.chk:active,.fab:active{transform:scale(.96);filter:brightness(.85)}
#sassi-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;background:var(--acSoft2);overflow:hidden}#sassi-progress i{display:block;height:100%;width:30%;background:var(--ac);border-radius:2px;animation:sassi-prog 1s linear infinite}
@keyframes sassi-prog{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}
#sassi-busy{position:fixed;inset:0;background:rgba(6,9,7,.5);z-index:100;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}#sassi-busy[hidden]{display:none}
#sassi-busy .box{background:var(--card);border-radius:14px;padding:1rem 1.4rem;display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;font-size:15px;box-shadow:0 10px 40px rgba(0,0,0,.4);max-width:min(92vw,420px)}#sassi-busy .box>i{color:var(--ac);font-size:1.3rem}#sassi-busy .stuck{display:flex;gap:.5rem;width:100%}
#sassi-offline{position:fixed;top:0;inset-inline:0;z-index:121;background:var(--bad);color:var(--ink);text-align:center;font-size:13px;font-weight:600;padding:5px 8px}#sassi-offline[hidden]{display:none}
/* optimistic one-tap actions (shared/optimistic.js): the row folds at once, the server catches up in the background */
.row.opt-done,.item.opt-done{opacity:.35;transition:opacity .25s,max-height .35s .2s,margin .35s .2s,padding .35s .2s;overflow:hidden;max-height:0;padding-top:0;padding-bottom:0;margin:0;border-width:0}
#toast.err{background:rgba(248,113,113,.18);color:var(--bad)}
/* links: our tag chips and the search-go button are links / buttons of their own classes - the same pressed answer */
a.chip,.search-go,.navb{transition:transform .08s,filter .08s}a.chip:active,.search-go:active,.navb:active{transform:scale(.96);filter:brightness(.85)}
/* offline reading (owner 2026-09-08, shared/sw.js): the amber bar over a saved copy of a page, like #sassi-offline */
#sassi-copy{position:fixed;top:0;inset-inline:0;z-index:121;background:var(--warn);color:var(--ink);text-align:center;font-size:13px;font-weight:600;padding:5px 8px}#sassi-copy[hidden]{display:none}
/* writes waiting for the network (shared/optimistic.js): one card at the top, one row per queued item, amber accent */
.card.pending-sync{border:1px solid rgba(251,191,36,.45)}.card.pending-sync h2 i{color:var(--warn)}.card.pending-sync .meta i{color:var(--warn)}
/* "once more to leave" (shared/back.js, owner 2026-09-09): a toast in the middle of the screen after Back on the home page */
#sassi-exit{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.96);background:var(--card);color:var(--acText);border:1.5px solid var(--ac);border-radius:16px;padding:.9rem 1.3rem;font-size:15px;font-weight:600;box-shadow:0 12px 40px rgba(0,0,0,.45);z-index:130;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
#sassi-exit.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* undo in the row (shared/optimistic.js, owner 2026-09-10: a mistaken tap is taken back in place, never a toast button) -
   used once a one-tap form here carries data-undo-act; tasks' rules verbatim */
.row.opt-undo,.item.opt-undo{opacity:.8}
.undo-btn{height:24px;min-width:24px;padding:0 .45rem;border-radius:8px;border:1.5px solid var(--ac);background:var(--acSoft);color:var(--acText);font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:.25rem;flex:none}
.undo-btn .cnt{font-variant-numeric:tabular-nums;min-width:1.2em;text-align:center}

/* app lock (docs/LOCK.md 1.2, tasks' rules): the page stays hidden until lock.js decided this is not a cold open (1.5 s safety
   net in index.php); the lock screen's PIN field says nothing about the PIN's length */
html.lockchk body{visibility:hidden}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;direction:ltr;font-variant-numeric:tabular-nums;margin:.4rem 0}
.codes b{font-weight:500;letter-spacing:.06em;background:var(--hover);border-radius:10px;padding:6px 10px;text-align:center}

/* green, the family's sixth accent shade (owner 2026-09-15, DESIGN "Accent palette"; the food icon's green); --ok stays the STATUS green */
[data-accent="green"]  { --ac:#22c55e; --ac2:#15803d; --acText:#86efac; --acSoft:rgba(34,197,94,.15); --acSoft2:rgba(34,197,94,.25); --acGlow:rgba(34,197,94,.35); }

/* high contrast (owner 2026-09-15, in place of the colour picker, family-wide): the switch in settings, or a system that asks for
   it. links' accent is fixed amber, so its text shade brightens to a lighter amber */
html[data-contrast="1"]{--line:#3d4944;--border:#56645d;--dim:#b4c1ba;--body:#e2e8e4;--acText:#fde68a}
@media (prefers-contrast: more){html:not([data-contrast]){--line:#3d4944;--border:#56645d;--dim:#b4c1ba;--body:#e2e8e4;--acText:#fde68a}}
html[data-contrast="1"] button,html[data-contrast="1"] .chip,html[data-contrast="1"] .card,html[data-contrast="1"] input,html[data-contrast="1"] select,html[data-contrast="1"] textarea{box-shadow:inset 0 0 0 1px var(--border)}
html[data-contrast="1"] :focus-visible{outline:3px solid var(--acText);outline-offset:2px}

/* the FAMILY login screen (owner 2026-09-15: links must look exactly like tasks and food) - tasks' .login rules, scoped under
   body.flogin so links' own .login (the lock screen) keeps its shape: a centred column of 22px gaps, the 84px logo with its glow,
   one-line title, filled centred fields, a full-width accent button, dim lines, the invite box with a base grey button */
:is(body.flogin,body.lock) .login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;width:auto;max-width:none;gap:0}
:is(body.flogin,body.lock) .auth{width:min(92vw,360px);display:flex;flex-direction:column;gap:22px;align-items:stretch;text-align:center}
:is(body.flogin,body.lock) .auth form{display:contents}
:is(body.flogin,body.lock) .auth .logo{width:84px;height:84px;border-radius:24px;margin:0 auto;box-shadow:0 12px 40px var(--acGlow)}
:is(body.flogin,body.lock) .auth h1{margin:0;font-size:34px;font-weight:800}
:is(body.flogin,body.lock) .auth .tag{display:block;background:none;padding:0;border-radius:0;font-size:15px;line-height:1.7;color:var(--dim);font-weight:300;margin-top:-.5rem} /* never the app's .tag pill: a sentence with an address in it (owner 2026-09-15, family) */
:is(body.flogin,body.lock) .auth input{width:100%;max-width:100%;border:0;border-radius:var(--r-input);background:var(--card);color:var(--txt);text-align:center;padding:.8rem;font-size:14px}
:is(body.flogin,body.lock) .auth input:focus{outline:2px solid var(--ac);outline-offset:-1px}
/* an autofilled field keeps our colours: Chrome paints its own white over the login field (family, owner 2026-09-18) */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--sunk) inset;-webkit-text-fill-color:var(--txt);caret-color:var(--txt);transition:background-color 9999s ease-out 0s}
:is(body.flogin,body.lock) .auth input::placeholder{color:var(--dim);opacity:.75}
:is(body.flogin,body.lock) .auth input.code{font-size:26px;letter-spacing:.35em;font-variant-numeric:tabular-nums;direction:ltr;padding:.7rem}
:is(body.flogin,body.lock) .auth button{border:0;border-radius:var(--r-input);background:var(--hover);color:var(--txt);padding:9px 14px;font-size:14.5px;font-weight:500}
:is(body.flogin,body.lock) .auth button.pri{background:var(--ac);color:var(--ink);font-weight:600;padding:.8rem}
@media (hover:hover) { :is(body.flogin,body.lock) .auth button.pri:hover { background:var(--acText) } }
:is(body.flogin,body.lock) .auth button.lnk{background:none;padding:0;font-size:inherit;font-weight:inherit;color:inherit}
:is(body.flogin,body.lock) .auth .dim{color:var(--dim);font-size:13px;font-weight:300}
:is(body.flogin,body.lock) .auth .dim a{color:var(--dim)}
:is(body.flogin,body.lock) .auth .err{color:var(--bad);font-size:13px}
:is(body.flogin,body.lock) .auth .ok{color:var(--ok);font-size:13px}
:is(body.flogin,body.lock) .invite-box{border:1px solid var(--line);border-radius:14px;padding:.8rem .9rem;display:flex;flex-direction:column;gap:.6rem;font-size:13px}
:is(body.flogin,body.lock) .invite-box .frow{display:flex;gap:.5rem}
:is(body.flogin,body.lock) .invite-box input{padding:.6rem;text-align:right;flex:1;min-width:0}
:is(body.flogin,body.lock) .invite-box input:not(:placeholder-shown){direction:ltr;text-align:left} /* the placeholder reads from the right, a typed code runs LTR (owner 2026-09-15) */
:is(body.flogin,body.lock) .invite-box .dim a{color:var(--acText)}
:is(body.flogin,body.lock){line-height:1.5} /* tasks' body line-height: the column measures the same, element by element (2026-09-15) */
:is(body.flogin,body.lock) .auth a.act{color:var(--acText);font-weight:500;font-size:14px}:is(body.flogin,body.lock) .auth .acts{font-size:14px} /* action links on the login screens, never the dim footer look (owner 2026-09-15, family) */
:is(body.flogin,body.lock) .auth button.act{color:var(--acText);font-weight:500;font-size:14px;background:none;padding:0;border:0;font-family:inherit;line-height:inherit;cursor:pointer} /* the resend is a button that looks like the action links (owner 2026-09-15) */
body.lock .login input.code{letter-spacing:.4em;font-size:22px;text-align:center} /* tasks: the lock screen's PIN field, after the login rules (owner 2026-09-15: the lock screen is tasks' screen) */

:is(#pin-sheet,#bio-sheet,#vault-sheet,#vault-setup-sheet,#vault-change-sheet,#vault-rotate-sheet,#pick-sheet) .err{color:var(--bad);font-size:13px}

/* the page frame and the quiet bar are the family's (owner 2026-09-15, via the anchor: "everything family-wide is identical"):
   tasks' main - 14 px sides and no flex gap; each block keeps tasks' 14 px under it (zero specificity: a component's own margin
   wins, as in tasks), and the quiet bar is tasks' amber flash with the mascot and a filled "לחבר" */
.wrap{padding-left:14px;padding-right:14px;gap:0}
:where(.wrap) > *{margin-bottom:14px}
.flash.warn{background:rgba(251,191,36,.12);color:var(--warn)}
.flash.quiet{border-radius:14px;padding:.7rem 1rem;margin-bottom:14px;font-size:14px;align-items:flex-start}
.btn-link{display:inline-flex;align-items:center;gap:.5rem;padding:9px 14px;font-size:14.5px;border-radius:var(--r-input);background:var(--ac);color:var(--ink);font-weight:600;text-decoration:none}
@media (hover:hover) { .btn-link:hover { background:var(--acText);color:var(--ink) } }
/* tasks' rhythm on every page (owner 2026-09-15, family-wide): body line-height 1.5 - links' 1.55 made the header, the quiet bar
   and every text row 1-2 px taller than tasks' - and the header icons as tasks' span.hdr-icons (38 px .ibtn.lg, a .15rem gap) */
body{line-height:1.5}
.hdr-actions{gap:.15rem}

/* the family lock cards (shared/php/lock_cards.php + shared/lock-cards.css, owner 2026-09-15) use tasks' sheets - a bare .sheet#id with a
   .grip, opened by openSheet() into .show over a .sheet-bg - while links' own sheets are .sheet-wrap > .sheet: tasks' values, scoped to
   those two sheets, so links' layers render them the same (the shared files stay untouched) */
:is(#pin-sheet,#bio-sheet,#vault-sheet,#vault-setup-sheet,#vault-change-sheet,#vault-rotate-sheet,#pick-sheet).sheet{position:fixed;bottom:var(--kb,0px);left:50%;width:min(100vw,560px);transform:translate(-50%,100%);z-index:55;background:var(--card);border-radius:24px 24px 0 0;padding:10px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.5);transition:transform .2s;max-height:85vh;max-height:min(85vh,calc(100dvh - var(--kb,0px) - 8px));overflow:auto;overscroll-behavior:contain;visibility:hidden}
:is(#pin-sheet,#bio-sheet,#vault-sheet,#vault-setup-sheet,#vault-change-sheet,#vault-rotate-sheet,#pick-sheet).sheet.show{transform:translate(-50%,0);visibility:visible}
:is(#pin-sheet,#bio-sheet,#vault-sheet,#vault-setup-sheet,#vault-change-sheet,#vault-rotate-sheet,#pick-sheet) .grip{width:44px;height:4px;border-radius:2px;background:var(--border);margin:0 auto 12px}
/* "שיחה עם ששי" is a family file now (shared/say-sheet.css, owner 2026-09-18): the box, the send row and the answer bubble */

/* the family pickers' sheet (shared/pick.js, 2026-09-16) is one of them too, and stays above a sheet it was opened from: without
   the list it sat in flow at the page's end and covered the item sheet's "שמירה" (found by the reminder-edit probe) */
#pick-sheet.sheet{z-index:70}
.sheet-bg{display:none;position:fixed;inset:0;background:rgba(6,9,7,.5);z-index:54}
.sheet-bg.show{display:block}