:root {
  --green: #1b5e20;
  --green2: #2e7d32;
  --bg: #f4f6f4;
  --card: #fff;
  --line: #d3dbd3;
  --line-strong: #9aa89c;
  --muted: #5c6b60;
  /* One content column, shared by the header contents, the tab strip and every
     panel. Before this the panel was a fixed 860px while the tabs and the
     header ran to the viewport edge, so on a 1920px screen the app used 45% of
     the width and the tabs sat nowhere near the card they belonged to. */
  --content: min(1180px, calc(100vw - 48px));
}
* { box-sizing: border-box; }
body {
  margin: 0;
  /* Assistant is loaded by both HTML files and was never actually applied -
     the whole product rendered in Segoe UI while paying for the webfont on
     every page load. Assistant is designed for Hebrew and its letterforms are
     noticeably clearer at body size, which is the one hard constraint this
     screen has. */
  font-family: 'Assistant', 'Segoe UI', Arial, sans-serif;
  color: #222;
  /* A very soft vertical wash rather than the old flat #f4f6f4. The panel is
     used to clear a queue, so the background's job is to sit still: nothing
     patterned, and no contrast anywhere near body copy, which is Hebrew and
     needs every bit of legibility it can get. Fixed, so scrolling a long queue
     does not drag a gradient past the reader. */
  background: linear-gradient(180deg, #f8faf8 0%, var(--bg) 45%, #eef2ee 100%) fixed;
  min-height: 100vh;
}

/* A corner watermark of the mark was tried here and removed. On the login
   screen it was the only other thing on a near-empty page, so it read as a
   rendering artifact rather than as branding; on the queue screen anything
   competing with the item cards works against the one job that screen has.
   The wash plus real card elevation carries the polish on its own. */
/* Inline text links — currently only the "where do I get a key" notes. The
   browser default blue is the one colour nowhere else in this palette. The
   underline stays: colour alone is not a strong enough affordance, and these
   sit inside .muted text that the reader has no reason to try clicking.
   Button-shaped anchors (.btn.google) override this further down. */
a { color: var(--green2); }

header {
  display: flex; align-items: center; gap: 12px;
  padding-block: 16px;
  /* Full-bleed bar, column-aligned contents, without an extra wrapper element. */
  padding-inline: max(24px, calc((100% - var(--content)) / 2));
  background: var(--card); border-bottom: 1px solid var(--line);
}
header h1 { font-size: 20px; margin: 0; color: var(--green); }
/* The title is a button (the way home) but must not look like one. */
.home {
  display: flex; align-items: center; gap: 0;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 20px; font-weight: 700; color: var(--green);
}
.home:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }

/* Setup and administration: chrome, so icon-sized and quiet until hovered.
   36px square clears the 24px touch minimum with room for a fingertip. */
.hdr-btn {
  width: 36px; height: 36px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 8px;
  font-size: 17px; line-height: 1; cursor: pointer;
}
.hdr-btn:hover { background: #f1f5f1; border-color: var(--line); }
.hdr-btn.on { background: #e8f2e8; border-color: #b7d3b7; }
.hdr-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.hdr-btn.hidden { display: none; }
/* The mark sits on the text baseline rather than being a bullet beside it, and
   gets a margin only on its inner side so RTL mirrors it for free. */
.mark { vertical-align: -3px; margin-inline-end: 8px; flex: none; }
.login-card h1 { display: flex; align-items: center; justify-content: flex-start; }
.pill { font-size: 12px; padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.pill-open { background: #c8e6c9; color: var(--green); }
.pill-connecting, .pill-unknown { background: #fff3cd; color: #7a6000; }
.pill-close { background: #f8d7da; color: #842029; }

/* The .steps tab row lived here. Removed with the tab row itself. */

/* Second level, shown only inside setup. Pills rather than underlined tabs, so
   it never competes with the primary row for "where am I". */
/* Sticky, because the way OUT of setup must not scroll away. The settings page
   is long; the back button lived at the top, went off-screen after one flick,
   and was reported as "really difficult to find how to get back to the ticket".
   It is now on screen the whole time you are in setup. */
.subnav {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  max-width: var(--content); margin: 0 auto; padding: 12px 0 10px;
  position: sticky; top: 0; z-index: 20;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
/* The way out. It goes UP a level; the four beside it move sideways. Styling it
   like them was the whole problem - it read as a fifth page rather than as an
   exit, so people scanned past it. Solid, coloured, and fenced off with its own
   divider so the eye lands on it first. */
.substep.back {
  background: var(--green); border-color: var(--green); color: #fff; font-weight: 600;
  padding-inline: 14px;
}
.substep.back:hover { background: var(--green2); border-color: var(--green2); }
.subnav .substep.back + .substep { margin-inline-start: 10px; border-inline-start: 1px solid var(--line); }
.subnav.hidden { display: none; }
.substep {
  border: 1px solid var(--line); background: var(--card); cursor: pointer;
  font: inherit; font-size: 13px; color: var(--muted);
  padding: 6px 12px; border-radius: 999px;
}
.substep:hover { border-color: var(--line-strong); }
.substep.active { background: #e8f2e8; border-color: #b7d3b7; color: var(--green); font-weight: 600; }
.substep:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Setup checklist: three requirements stated together. */
.checklist { list-style: none; margin: 16px 0 0; padding: 0; }
.check {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
}
.check-mark { font-size: 16px; line-height: 1.4; flex: none; width: 20px; text-align: center; }
.check.ok { border-color: #c3ddc3; background: #fbfdfb; }
.check.ok .check-mark { color: var(--green2); }
.check.todo { border-color: var(--line-strong); }
.check.todo .check-mark { color: #8a6d00; }
.check-body { flex: 1 1 auto; min-width: 0; }
.check-title { font-weight: 600; margin-bottom: 2px; }
.check-state { flex: none; font-size: 13px; }
.check.all-done { align-items: center; border-color: #b7d3b7; background: #e8f5e9; }

.panel {
  display: none; max-width: var(--content); margin: 16px auto; padding: 24px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  /* Two shadows: a tight one for the edge, a wide soft one for the lift. A
     single large shadow just looks blurry against a gradient. */
  box-shadow: 0 1px 2px rgba(27, 94, 32, 0.05), 0 8px 24px -12px rgba(27, 94, 32, 0.18);
}
.panel.active { display: block; }
.panel h2 { margin-top: 0; color: var(--green); }

/* "מה עשינו בשבילך" — its own block above the queue, separated by a rule so it
   reads as a report on work done rather than as part of the list of things
   waiting. Sharing a line with the queue heading made 2,607 look like a backlog. */
.did-for-you {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 22px; padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.did-for-you h2 { font-size: 17px; color: var(--muted); margin: 0; font-weight: 600; }
.kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.kpi {
  min-width: 104px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
}
/* Deliberately NOT tabular-nums: equal-width digits make a large standalone
   number look loose. Proportional figures are for display sizes; tabular is for
   columns that have to align. Same sans as the rest of the product - a display
   face on a headline number reads as decoration. */
.kpi-value {
  font-size: 30px; font-weight: 600; line-height: 1.05; color: #202124;
  font-variant-numeric: proportional-nums;
}
/* Ink, not the accent: the heading beside these is already green, and three
   green numbers next to a green heading is all emphasis and no hierarchy. */
.kpi-label { font-size: 12px; color: var(--muted); margin-top: 4px; }
@media (max-width: 640px) {
  /* Three tiles do not fit side by side on a phone; two do, and the third wraps
     under them rather than shrinking the digits. */
  .kpis { gap: 8px; }
  .kpi { min-width: 92px; padding: 8px 10px; }
  .kpi-value { font-size: 24px; }
}
/* Width for the working areas, not for prose: a 1100px line of Hebrew is
   measurably harder to read than a 75-character one, so explanatory copy keeps
   its own measure while lists, tables and cards use the full column. */
.panel > p { max-width: 75ch; }
.muted { color: var(--muted); font-size: 14px; }
.hidden { display: none !important; }

.btn { border: 1px solid var(--green); background: #fff; color: var(--green); padding: 9px 16px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.btn.primary { background: var(--green); color: #fff; }
.btn.ghost { border-color: var(--line); color: var(--muted); }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }

#qr-img { width: 280px; height: 280px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #fff; }
.ok-box { background: #e8f5e9; border: 1px solid #c8e6c9; padding: 14px; border-radius: 8px; margin-top: 12px; }
.warn-box { background: #fff3cd; border: 1px solid #ffe69c; padding: 12px; border-radius: 8px; margin-bottom: 12px; }

.group-row { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.group-row .head { display: flex; align-items: center; gap: 10px; }
.group-row .subject { font-weight: 600; }
.group-row .gid { color: var(--muted); font-size: 12px; }
.group-row .fields { display: none; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.group-row .fields input { padding: 7px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; width: 100%; }
.group-row .fields label { font-size: 12px; color: var(--muted); display: block; }
.group-row .fields .full { grid-column: 1 / -1; }

.actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.chk { font-size: 13px; color: var(--muted); }
/* Sits directly under the actions: how fresh the queue is, and whether it will
   refresh itself. Small, because it is context rather than content. */
.queue-freshness { font-size: 13px; margin-top: 8px; }
/* Proof of work, one line under the freshness. Quiet: it is reassurance, not
   something to read every visit. */
.queue-stats { font-size: 12px; margin-top: 2px; color: var(--muted); }
/* The account of a scan that skipped groups. Same weight as the stats line:
   it explains, it does not alarm. */
.scan-explain { font-size: 12px; margin-top: 6px; line-height: 1.5; }
.scan-explain summary { cursor: pointer; color: var(--muted); }
.scan-explain summary:hover { color: var(--fg); }
.scan-explain ul { margin: 6px 0 0; padding-inline-start: 18px; }
.scan-explain li { margin-top: 4px; }

.result-card, .history-card { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.result-card .bar, .history-card .bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fafafa; border-bottom: 1px solid var(--line); }
.result-card .name { font-weight: 600; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.badge.sent { background: #c8e6c9; color: var(--green); }
.badge.generated { background: #d0e7ff; color: #084298; }
.badge.skipped-empty { background: #eee; color: #666; }
.badge.error, .badge.email-error { background: #f8d7da; color: #842029; }
.result-card iframe, .history-card iframe { width: 100%; border: 0; height: 360px; background: #fff; }
.history-card .bar { cursor: pointer; }
.ts { color: var(--muted); font-size: 12px; margin-inline-start: auto; white-space: nowrap; flex: none; }

/* --- groups picker: search toolbar + activity badges (170+ groups need it) --- */
.group-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 12px 0; padding: 10px 12px;
  background: #f6f8f6; border: 1px solid #dde5dd; border-radius: 8px;
  position: sticky; top: 0; z-index: 5;
}
.group-toolbar input[type="search"] {
  flex: 1 1 240px; min-width: 180px; padding: 8px 10px;
  border: 1px solid #c8d4c8; border-radius: 6px; font-size: 14px;
}
.group-toolbar input[type="search"]:focus { outline: 2px solid #1b5e20; outline-offset: -1px; }
.group-toolbar select { padding: 7px 8px; border: 1px solid #c8d4c8; border-radius: 6px; font-size: 13px; }
.group-toolbar #group-count { margin-inline-start: auto; white-space: nowrap; font-size: 13px; }

.group-row .activity {
  font-size: 12px; color: var(--muted); white-space: nowrap;
  background: #eef1ee; border-radius: 10px; padding: 2px 8px;
}
.group-row .activity.live { color: #1b5e20; background: #e3f0e3; font-weight: 600; }

/* ===================================================================
   Triage UI: tier picker, item queue, profile form, modal.
   Written with logical properties (inline-start/end) so the RTL
   document mirrors correctly without a second stylesheet.
   =================================================================== */

/* --- privacy modal --- */
.modal-back {
  position: fixed; inset: 0; z-index: 50; padding: 20px;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: var(--card); border-radius: 12px; padding: 24px;
  max-width: 520px; box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}
.modal h2 { margin-top: 0; color: var(--green); }

/* "צור קשר". Wider than the privacy notice because it holds a textarea people
   actually type paragraphs into, and its own grid so the footer line (counter
   on one side, reply-to on the other) survives RTL without hand-placed floats. */
.contact-modal { width: min(560px, 100%); }
.contact-label { display: block; margin: 12px 0 6px; font-size: 14px; font-weight: 600; }
.contact-modal textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 120px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: 14px; line-height: 1.5; color: inherit; background: #fff;
}
.contact-modal textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.contact-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 12px; }
/* The count is digits that change as you type, so it must not reflow the row. */
#contact-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.contact-actions { display: flex; gap: 8px; margin-top: 16px; }
.contact-status { margin: 12px 0 0; font-size: 14px; border-radius: 8px; padding: 10px 12px; }
.contact-status.ok { background: #e8f2e8; color: var(--green); }
.contact-status.bad { background: #f8d7da; color: #842029; }
/* The mailto fallback is LTR inside a Hebrew sentence; isolate it so bidi
   cannot drag the punctuation into the address. */
.contact-status a { color: inherit; }

/* --- profile form --- */
.profile-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.profile-form .full { grid-column: 1 / -1; }
.profile-form label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 4px; }
.profile-form input, .profile-form textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 6px; font: inherit; font-size: 14px; resize: vertical;
}
.profile-form input:focus, .profile-form textarea:focus { outline: 2px solid var(--green); outline-offset: -1px; }

/* --- group rows: the tier picker replaces the old on/off checkbox --- */
.group-row .row-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.group-row .head { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.group-row.tracked { border-color: #b7d3b7; background: #fbfdfb; }
.group-row .fields { display: none; }
.group-row.tracked .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }

.tier-pick {
  display: inline-flex; flex: 0 0 auto; background: #fff;
  border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
}
.tier-btn {
  border: 0; background: transparent; padding: 5px 12px; font-size: 12px;
  cursor: pointer; color: var(--muted); font-family: inherit; white-space: nowrap;
}
.tier-btn + .tier-btn { border-inline-start: 1px solid var(--line); }
.tier-btn:hover { background: #f2f5f2; }
.tier-btn.on.tier-watch { background: var(--green); color: #fff; font-weight: 600; }
.tier-btn.on.tier-background { background: #ffe9c2; color: #7a5000; font-weight: 600; }
.tier-btn.on.tier-muted { background: #e4e4e4; color: #555; font-weight: 600; }

/* Someone is visibly waiting here — the signal worth tiering on. */
.group-row .openq {
  font-size: 12px; font-weight: 600; color: #b3261e;
  background: #fdecea; border-radius: 10px; padding: 2px 8px; white-space: nowrap;
}

/* --- bulk tier bar --- */
.bulk-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 8px 12px;
  background: #f9faf9; border: 1px dashed #cfdccf; border-radius: 8px;
}

/* --- item queue --- */
.queue-counts { margin-bottom: 10px; }
.bucket {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 0 10px; padding: 8px 12px;
  border-radius: 6px; font-weight: 700; font-size: 14px;
}
.bucket-label { flex: 1 1 auto; }
.bucket-n { font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .7); border-radius: 999px; padding: 1px 8px; }
.bucket-needs-reply { background: #fdecea; color: #b3261e; }
.bucket-follow-up   { background: #fff4e5; color: #8a5000; }
.bucket-fyi         { background: #e8f0fe; color: #0b5394; }

.item-card {
  background: #fff; border: 1px solid var(--line);
  border-inline-start: 4px solid #cfd8cf; border-radius: 8px;
  padding: 12px 14px; margin-bottom: 10px;
}
.item-card.u5 { border-inline-start-color: #b3261e; }
.item-card.u4 { border-inline-start-color: #e06c00; }
.item-card.u3 { border-inline-start-color: #cfd8cf; }
.item-card.busy { opacity: .5; }
/* An LTR address inside an RTL quote. isolate is the load-bearing half: without
   it the bidi algorithm splits the URL across a line break and puts the tail at
   the far end of the next one. break-all stops a long address widening the card. */
.item-card .quote a { unicode-bidi: isolate; word-break: break-all; }
/* Source line above the title: which group, and who spoke. These are the two
   facts you judge an item by, and they used to sit at 12px muted next to the
   urgency and the age. */
.item-card .source {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  font-size: 13.5px; margin-bottom: 2px;
}
.item-card .source .grp { font-weight: 600; color: var(--green2); }
.item-card .source .sender { color: #202124; }
.item-card .source .sep { color: var(--line-strong); }
.item-card .title { font-weight: 600; font-size: 16px; color: #202124; line-height: 1.35; }
.item-card .meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.item-card .quote {
  margin: 8px 0 0; padding: 8px 10px; border: 0;
  background: #f7f8f9; border-inline-start: 3px solid #c8d4c8;
  border-radius: 4px; font-size: 13px; color: #3c4043;
}
.item-card .why { margin-top: 6px; font-size: 12px; color: #5f6368; }
.item-card .item-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.badge.closed { background: #eee; color: #666; }
/* No italic: Assistant has no italic face, so this was a synthesised
   oblique, and Hebrew does not use italics for emphasis anyway. A rule on the
   inline start sets it apart without slanting the letterforms. */
.dismiss-hint {
  margin-top: 16px; font-size: 13px; color: var(--muted);
  border-inline-start: 3px solid var(--line); padding-inline-start: 10px;
}
.dismiss-hint-go { margin-top: 8px; }

/* The scan log is what makes an empty queue trustworthy, so it stays on this
   screen - but collapsed, so it is not three cards of operational noise sitting
   under the actual work. */
.runlog-box { margin-top: 22px; border-top: 1px dashed var(--line); padding-top: 12px; }
.runlog-box > summary {
  cursor: pointer; color: var(--muted); font-size: 14px; font-weight: 600;
  padding: 4px 2px; border-radius: 6px; width: fit-content;
}
.runlog-box > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.runlog-box[open] > summary { margin-bottom: 10px; }

/* Suggest-the-rules block: a helper attached to the form above it, so it is
   inset and quieter rather than a second competing panel. */
.suggest-box {
  margin-top: 22px; padding: 18px 20px;
  background: #f7faf7; border: 1px solid #cfdccf; border-radius: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.suggest-box h3 { margin: 0; font-size: 15px; color: var(--green); }
.suggest-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.suggest-pick input[type="search"] {
  flex: 1 1 220px; padding: 8px 10px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 6px;
}
/* Capped and scrollable: an account here has 166 groups, and an unbounded list
   would bury the button that acts on it. */
.suggest-groups {
  max-height: 240px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
}
.suggest-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-bottom: 1px solid var(--line); cursor: pointer;
  font-size: 14px;
}
.suggest-row:last-child { border-bottom: 0; }
.suggest-row:hover { background: #f4f8f4; }
.suggest-row .nm { flex: 1 1 auto; min-width: 0; }
.suggest-row .muted { font-size: 12px; white-space: nowrap; }
.suggest-result {
  padding: 10px 12px; border-radius: 8px;
  background: #e8f5e9; border: 1px solid #b7d3b7; font-size: 13px;
}
.suggest-result.hidden { display: none; }

/* --- danger zone --- */
.danger-zone { margin-top: 24px; padding-top: 14px; border-top: 1px dashed var(--line); }

/* Keyboard focus. Before this the whole product had four :focus rules, all on
   inputs — every button, tab, tier control and caret fell back to the UA
   default, and several of them have border:0 on a transparent background, so a
   keyboard pass over the queue was close to invisible. :focus-visible, so a
   mouse click does not leave a ring behind. */
.btn:focus-visible, .tier-btn:focus-visible,
.bucket-toggle:focus-visible, button.bucket-label:focus-visible,
.fmt-btn:focus-visible, .emoji-panel .emoji:focus-visible,
.openq-btn:focus-visible, .item-pick:focus-visible, .bucket-pick:focus-visible,
select:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px;
}
/* A --green ring on a --green button is invisible, so the primary gets a
   darker one with more offset. */
.btn.primary:focus-visible { outline-color: #0b3d0f; outline-offset: 3px; }

/* Touch targets. WCAG 2.2 SC 2.5.8 asks for 24x24; the item and bucket
   checkboxes measured 13x13 and the collapse caret 20x17. These are the
   gestures repeated dozens of times to clear a queue, so on a touch screen
   they get more than the minimum. */
.item-pick, .bucket-pick { width: 20px; height: 20px; }
@media (pointer: coarse) {
  .item-pick, .bucket-pick { width: 24px; height: 24px; }
  .bucket-toggle { padding: 6px 10px; }
  .item-card .item-actions .btn.small { padding: 10px 12px; font-size: 13px; }
  /* Four buttons in a flex row orphan the fourth onto its own line in every
     single card at phone width. Two columns keeps the card compact. */
  .item-card .item-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

/* The bulk bar is display:none until something is selected, and it sits in flow
   above the list - so ticking the first checkbox inserted ~44px and pushed
   every card down under the finger still touching the screen. On a phone it
   becomes a fixed bar at the bottom instead: thumb-reachable, and it moves
   nothing. */
@media (max-width: 640px) {
  #item-bulk:not(.hidden) {
    position: fixed; inset-inline: 0; bottom: 0; top: auto;
    margin: 0; border-radius: 0; z-index: 20;
    box-shadow: 0 -4px 16px -8px rgba(27, 94, 32, .4);
  }
  #panel-inbox.active { padding-bottom: 76px; }
}

@media (max-width: 640px) {
  .profile-form, .group-row.tracked .fields { grid-template-columns: 1fr; }
  /* The header is a single non-wrapping flex row, and .bsd takes the leftover
     space with margin-inline-start:auto. At 390px there is no leftover space,
     so it was pushed 89px past the start edge and gave the whole page a
     horizontal scroll (measured: viewport 390, scrollWidth 479). The header
     wraps here, and .bsd - a blessing, not a control - is the one thing that
     may drop off a phone. */
  header { flex-wrap: wrap; row-gap: 6px; }
  .bsd { display: none; }
  /* The header was taking three rows at 390px. The signed-in address is the
     least load-bearing thing in it — the avatar still identifies the account,
     and the full address is one tap away in הגדרות. */
  .who span { display: none; }
  /* A fade lived here, hinting that the tab strip scrolled — compensating for
     six primary tabs on a 367px strip. The strip itself is gone now. */
}

/* --- reply composer: the only place the product writes to WhatsApp --- */
.composer {
  margin-top: 10px; padding: 10px 12px;
  background: #f7faf7; border: 1px solid #cfdccf; border-radius: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.composer .to { font-weight: 600; color: var(--green2); }
/* Quieter than .to: the destination is the thing you must not get wrong,
   whereas this explains the shape of what is about to be sent. */
.composer .as-quote { font-size: 12px; margin-top: -2px; }
/* A reply that went out unattached. The card deliberately stays on screen,
   so it needs to look handled-but-different rather than untouched. */
.item-card.sent-plain { border-color: #d9b310; background: #fffdf3; }
.composer .reply-text {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 6px; resize: vertical;
}
.composer .reply-text:focus { outline: 2px solid var(--green); outline-offset: -1px; }
.composer-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- sign-in page --- */
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.login-card {
  width: 100%; max-width: 360px; padding: 28px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(27, 94, 32, 0.06), 0 18px 40px -20px rgba(27, 94, 32, 0.28);
}
.login-card h1 { margin: 0 0 2px; font-size: 22px; color: var(--green); }
/* The promise, not a heading: it carries the weight the name cannot, so it gets
   real size, while 'כניסה ללוח הבקרה' below drops to a caption. */
.tagline {
  margin: 0 0 14px; font-size: 15px; font-weight: 600;
  color: var(--green2); letter-spacing: 0.01em;
}
.login-card .muted { margin: 0 0 4px; font-size: 13px; }
.login-card label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.login-card input {
  width: 100%; padding: 9px 10px; margin-bottom: 14px; font: inherit;
  border: 1px solid var(--line); border-radius: 6px;
}
.login-card input:focus { outline: 2px solid var(--green); outline-offset: -1px; }
.login-card .btn { width: 100%; }
.login-err { color: #842029; font-size: 13px; margin-top: 12px; min-height: 1.2em; }

/* --- item selection + bulk actions --- */
.item-card .card-head { display: flex; align-items: flex-start; gap: 10px; }
/* One column for source + title + meta, so the checkbox stays aligned to the
   top of the block rather than to the middle of a three-line stack. */
.item-card .card-head .headline { flex: 1 1 auto; min-width: 0; }
.item-card.picked { border-color: var(--green2); background: #f6faf6; }
.item-pick { margin-top: 3px; flex: 0 0 auto; }
#item-bulk { position: sticky; top: 0; z-index: 6; background: #f3f7f3; }

/* --- composer formatting toolbar --- */
.fmt-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.fmt-btn {
  min-width: 32px; padding: 4px 8px; font: inherit; font-size: 13px;
  background: #fff; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
}
.fmt-btn:hover { color: var(--green); border-color: var(--green); }
.fmt-bar .fmt-btn:nth-child(1) { font-weight: 700; }
.fmt-bar .fmt-btn:nth-child(2) { font-style: italic; }
.fmt-bar .fmt-btn:nth-child(3) { text-decoration: line-through; }
.fmt-bar .fmt-btn:nth-child(4) { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; }
.emoji-panel {
  display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px;
  padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  max-height: 168px; overflow-y: auto;
}
.emoji-panel .emoji {
  border: 0; background: transparent; font-size: 18px; line-height: 1;
  padding: 4px; cursor: pointer; border-radius: 4px;
}
.emoji-panel .emoji:hover { background: var(--surface-2, #eef1ee); }
.fmt-hint { font-size: 12px; }
@media (max-width: 640px) { .emoji-panel { grid-template-columns: repeat(8, 1fr); } }

.bucket-pick { margin-inline-end: 2px; flex: 0 0 auto; accent-color: currentColor; }

/* Sits at the far left of the header — the page is RTL, so this is the end of
   the line, which is where it traditionally goes. */
.bsd {
  margin-inline-start: auto;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: .02em;
}

/* --- UX-11: interactive controls need a 3:1 border to be perceivable. The
   light --line stays for decorative dividers, which are not held to that bar. --- */
.btn,
.group-toolbar input[type="search"],
.group-toolbar select,
.controls input, .controls select,
.profile-form input, .profile-form textarea,
.login-card input,
.composer .reply-text,
.fmt-btn,
.tier-pick { border-color: var(--line-strong); }
.btn.ghost { border-color: var(--line-strong); }

/* --- group multi-select + open-question drill-down --- */
/* The tick is the primary control on this screen now, so it gets a real target
   rather than a browser default sitting in a 12px gap. .group-row.picked used
   to paint the same green as .tracked for a row that was merely staged for a
   bulk action; ticked and tracked are one state now, so .tracked alone says it. */
.group-pick { flex: 0 0 auto; width: 18px; height: 18px; cursor: pointer; accent-color: var(--green); }
.pick-hint { margin: 0 0 8px; font-size: 13px; }
.openq-btn { cursor: pointer; font-family: inherit; border: 1px solid transparent; }
.openq-btn:hover { border-color: currentColor; }
.openq-btn[aria-expanded="true"] { border-color: currentColor; }
.qpanel {
  margin-top: 10px; padding: 8px 10px;
  background: #fff8f7; border: 1px solid #f0d8d4; border-radius: 8px;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 240px; overflow-y: auto;
}
.qrow { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.qwho { font-weight: 600; color: var(--green2); white-space: nowrap; flex: 0 0 auto; }
.qtext { flex: 1 1 auto; color: #3c4043; }
.qts { color: var(--muted); font-size: 11px; white-space: nowrap; flex: 0 0 auto; }

/* --- collapsible queue sections --- */
.bucket { cursor: default; }
.bucket-toggle {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1;
  padding: 2px 4px; color: currentColor; border-radius: 4px; flex: 0 0 auto;
}
button.bucket-label {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font: inherit; font-weight: 700; color: currentColor; text-align: start;
}
.bucket-toggle:hover, button.bucket-label:hover { text-decoration: underline; }
.bucket.collapsed { opacity: .85; }
.bucket-body { display: flex; flex-direction: column; }

/* An auto-closed item must say why, or items look like they vanish. */
.badge.closed.answered { background: #e8f5e9; color: var(--green); font-weight: 600; }

/* --- multi-user: who is signed in, and the Google sign-in button --- */

/* Sits between the connection pill and the sign-out button. Pushed to the end
   of the header row by the .bsd rule further up, which owns margin-inline-start. */
.who {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0;   /* or max-width and the ellipsis below never take effect */
  font-size: 13px; color: var(--muted); max-width: 260px;
}
/* .who uses inline-flex, which beats the browser default for [hidden]. */
.who[hidden] { display: none; }
.who img { width: 22px; height: 22px; border-radius: 50%; }
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Google's brand guidance: white button, its own wordless mark, neutral border.
   Deliberately not tinted with --green like the app's own buttons. */
.btn.google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-color: var(--line-strong); color: #3c4043; background: #fff;
  text-decoration: none; font-weight: 600; padding: 11px 16px;
}
.btn.google:hover { background: #f8f9fa; }
.btn.google svg { flex: none; }

/* "or" divider between sign-in methods, with a rule either side. */
.login-or {
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 12px; margin: 14px 0 10px;
}
.login-or::before, .login-or::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* The login card stacks its own children; give the Google button room. */
.login-card .btn.google { margin-top: 16px; }

/* --- signup: trial countdown, account gate, admin queue --- */

/* Lifecycle states, shared by the header countdown pill and the admin rows. */
.pill-pending  { background: #fff3cd; color: #8a6d00; }
.pill-trial    { background: #e3f2fd; color: #0d47a1; }
/* The last few days deserve a warmer colour than "informational". */
.pill-trial-urgent { background: #fff3cd; color: #8a6d00; }
.pill-active   { background: #c8e6c9; color: var(--green); }
.pill-expired  { background: #f8d7da; color: #842029; }
.pill-rejected,
.pill-disabled { background: #e9ecef; color: #495057; }

/* The gate replaces the product, so it reads as a statement rather than a form. */
#panel-gate { max-width: 620px; text-align: center; }
#panel-gate h2 { margin-bottom: 8px; }
#panel-gate .actions { justify-content: center; }

/* One card per account. Grid rather than a table: the four cells wrap to one
   column on a narrow screen, where a table would force a sideways scroll. */
.admin-card {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) auto minmax(180px, 1fr) auto;
  gap: 10px 16px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  background: #fff;
}
/* Someone is waiting on a decision — say so without reading the pill. */
.admin-card.pending { border-color: #f0c36d; background: #fffdf5; }

.admin-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-who img { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.admin-email { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }

.admin-state { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.admin-facts { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.admin-actions .btn.danger { border-color: #c98a90; color: #842029; }

@media (max-width: 760px) {
  .admin-card { grid-template-columns: 1fr; }
  .admin-actions { justify-content: flex-start; }
}

/* Auto-close options. The hint sits under its own radio and is indented to it,
   because three choices that differ only in a sentence of explanation are
   unreadable when the sentences float free of the controls. */
.ac-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ac-hint { font-size: 12px; margin: 2px 0 0; padding-inline-start: 24px; line-height: 1.5; }

/* Somebody else already answered. Distinct from .why - that explains why the
   item exists, this warns that the thread has moved on - so it reads as a
   caution rather than as more reasoning. */
.answered {
  font-size: 13px; margin-top: 6px; padding: 6px 10px; line-height: 1.5;
  border-inline-start: 3px solid #b8860b; background: #fdf8ec; border-radius: 4px;
}
.draft-note { font-size: 12px; margin-top: 4px; }

/* A KPI tile that navigates. Same box as the inert ones - it must not look like
   a different kind of thing - but it accepts a pointer and answers to hover. */
.kpi-link {
  cursor: pointer; font: inherit; text-align: inherit; color: inherit;
  border: 1px solid var(--line); background: transparent;
}
.kpi-link:hover { border-color: var(--green); background: #f1f5f1; }
.kpi-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* The way back out of a setup page. Repeated at the bottom because these pages
   are long and the subnav at the top scrolls out of sight - which is exactly
   how a user ends up stranded in settings. */
.back-out {
  margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line);
}

/* Applies to the closing options as a group, so it sits apart from the
   per-option hints rather than reading as another one. */
.ac-note { font-size: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }

/* --- the risk disclosure ---------------------------------------------------
   Set wider-spaced and quieter than the rest of the app on purpose. This is the
   one screen in the product meant to be READ rather than operated, and making
   it look like another settings form is how a disclosure gets skimmed. */
.risk-section { margin-top: 22px; }
.risk-section h3 {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--green);
}
.risk-section p { margin: 0 0 8px; line-height: 1.65; }
.risk-section ul { margin: 0 0 8px; padding-inline-start: 20px; line-height: 1.65; }
.risk-section li { margin-bottom: 4px; }
/* The two sentences that must not be skimmed: the number can be banned, and
   other people in the group never agreed to any of this. */
.risk-emphasis {
  font-weight: 600;
  color: #7a2e2e;
  background: #fdf3f3;
  border-inline-start: 3px solid #b04a4a;
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
}
.risk-confirm {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  line-height: 1.6;
}
.risk-confirm input { margin-top: 5px; flex: none; width: 18px; height: 18px; }
/* A disabled primary button that still looks pressable is how someone concludes
   the page is broken rather than that they have not ticked the box. */
#risk-accept:disabled { opacity: 0.45; cursor: not-allowed; }
/* A button that reads as a link: the settings row is prose, not a toolbar. */
.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--green2);
  text-decoration: underline;
  cursor: pointer;
}
.linkish:hover { color: var(--green); }