/* Sign-in, the account area and the inbox.
   Written against the tokens in style.css; logical properties throughout so the
   whole thing mirrors with dir="rtl". Linked only on those pages and admin
   (functions/[[route]].js, ROUTE_CSS); a rule for something drawn elsewhere goes in
   style.css. */

/* ---------- sign in / sign up ---------- */
.authpage { display: grid; place-items: center; padding-block: clamp(36px, 7vw, 84px); }
.authgrid { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 360px); gap: 40px; align-items: start; }
@media (max-width: 860px) { .authgrid { grid-template-columns: 1fr; gap: 26px; } .authside { order: -1; } }
.authcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 34px); box-shadow: var(--sh-2); }
.authmark { display: inline-flex; align-items: center; gap: 10px; color: var(--jade); font-weight: 700; font-size: 20px; letter-spacing: -.02em; text-decoration: none; margin-block-end: 18px; }
.authmark span { color: var(--ink); }
.authmark svg { flex: none; }
[dir="rtl"] .authmark { font-size: 22px; letter-spacing: 0; }
.authh1 { font-size: clamp(22px, 2.6vw, 28px); margin-block-end: 8px; }
.authform { margin-block-start: 20px; }
.authnote { font-size: 13.5px; color: var(--ink-3); margin-block-start: 14px; line-height: 1.6; }
.authfine { font-size: 12.5px; color: var(--ink-3); margin-block-start: 18px; }
.authresend { background: none; border: 0; color: var(--jade); font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.authresend[disabled] { color: var(--ink-3); cursor: default; text-decoration: none; }
.authside { background: var(--surface-2); border-radius: var(--r-lg); padding: 26px; }
.authside ul { margin: 14px 0 0; padding-inline-start: 18px; display: grid; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
/* The country menu is as wide as its text, on one line; the number takes the rest. */
.phonerow { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px; }
.phonerow select { width: auto; white-space: nowrap; }
.otp { font-family: var(--mono, ui-monospace, monospace); font-size: 26px; letter-spacing: .38em;
       text-align: center; direction: ltr; font-variant-numeric: tabular-nums; padding-inline: 12px; }
.devcode { display: block; margin-block-start: 12px; padding: 10px 14px; border-radius: var(--r-sm);
           background: var(--ochre-wash); color: var(--ochre-ink); font-size: 13.5px; font-weight: 600; }

/* what someone is here to do — two choices, both allowed */
.intent { display: grid; gap: 10px; margin-block: 0 var(--field-gap); }
.intent-ask { font-weight: 600; margin-block-end: 6px; }
.intent-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--line-2);
              border-radius: var(--r); cursor: pointer; transition: border-color .16s, background .16s; }
.intent-opt:hover { border-color: var(--ink-3); }
.intent-opt:has(input:checked) { border-color: var(--jade); background: var(--jade-wash); }
.intent-opt input { width: 20px; height: 20px; min-height: 0; flex: none; margin-block-start: 2px; }
.intent-opt b { display: block; font-size: 15px; }
.intent-opt span { font-size: 13.5px; color: var(--ink-2); }

/* ---------- account shell ---------- */
.acctpage { padding-block: clamp(26px, 4vw, 48px) clamp(40px, 6vw, 72px); }
.acct-head { display: flex; flex-direction: column; gap: 10px; margin-block-end: 22px; }
.acct-head h1 { font-size: clamp(24px, 3.4vw, 36px); }
.acct-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
              padding: 4px 11px; border-radius: var(--r-pill); background: var(--jade-wash); color: var(--jade); }
.signout { align-self: flex-start; }
.acct { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 900px) { .acct { grid-template-columns: 1fr; gap: 18px; } }
.acct-nav { display: flex; flex-direction: column; gap: 3px; position: sticky; inset-block-start: calc(var(--nav-h) + 14px); }
@media (max-width: 900px) {
  .acct-nav { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-block-end: 6px;
              scrollbar-width: none; border-block-end: 1px solid var(--line); }
  .acct-nav::-webkit-scrollbar { display: none; }
  /* a row of tabs now: in Arabic the count sits on the right of the words, as on
     every chip (.has-count in style.css). Stacked on a wide screen it is a column. */
  [dir="rtl"] .acct-nav a > :is(.acct-n, .acct-badge) { order: -1; }
}
.acct-nav a { display: flex; align-items: center; justify-content: space-between; gap: 10px; white-space: nowrap;
              padding: 11px 14px; border-radius: var(--r-sm); font-size: 15px; font-weight: 600; color: var(--ink-2);
              transition: background .16s, color .16s; }
.acct-nav a:hover { background: var(--surface-2); color: var(--ink); }
.acct-nav a.on, .acct-nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.acct-n { min-width: 22px; height: 22px; padding-inline: 6px; border-radius: var(--r-pill); background: var(--jade);
          color: var(--on-jade); font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }
.acct-nav a.on .acct-n { background: var(--jade); }
/* ---------- admin nav ---------- */
/* The page: the nav and the tab's rows. Wide: the nav is a sidebar in its own column (it may
   stick, it can never lie over a row). Narrow: the nav is two plain rows above the content,
   never sticky: the groups, then the open group's tabs in one row that scrolls sideways.
   Both on a solid surface, so nothing shows through. Markup: adminNav() in views/_admin.js. */
.adm { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.adm-main { min-width: 0; display: grid; gap: var(--space-4); align-content: start; }
.adm-main > .msg { margin: 0; }
.adm-nav { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-2); }
.adm-nav ul { list-style: none; margin: 0; padding: 0; }
.adm-nav a { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; border-radius: var(--r-sm);
             font-weight: 600; color: var(--ink-2); transition: background .16s, color .16s; }
.adm-nav a:hover { background: var(--surface-2); color: var(--ink); }
.adm-tabs a { min-height: 40px; padding: 8px 12px; font-size: 14.5px; }
.adm-tabs a.on { background: var(--ink); color: var(--paper); }
@media (min-width: 1000px) {
  .adm { grid-template-columns: 228px minmax(0, 1fr); gap: var(--space-5); }
  .adm-nav { position: sticky; inset-block-start: calc(var(--nav-h) + 14px); max-block-size: calc(100vh - var(--nav-h) - 28px);
             overflow-y: auto; overscroll-behavior: contain; display: grid; gap: var(--space-3); }
  .adm-grp { display: grid; gap: 2px; }
  .adm-grp + .adm-grp { padding-block-start: var(--space-3); border-block-start: 1px solid var(--line); }
  /* the group's name is a label here; its tabs are all in view, so its sum is not shown */
  .adm-grp-h { padding: 2px 12px; font-size: 12.5px; color: var(--ink-3); letter-spacing: .02em; }
  .adm-grp-h > .count { display: none; }
  .adm-tabs { display: grid; gap: 2px; }
  .adm-tabs a { justify-content: space-between; }
}
@media (max-width: 999.98px) {
  /* It sticks under the site bar on a solid surface, slides away while the page scrolls down
     and comes back on the way up or when a tab link gets focus (public/assets/admin-nav.js reads
     --adm-autohide, so the wide sidebar, in its own column, never hides). */
  .adm-nav { --adm-autohide: 1; padding: var(--space-3); position: sticky; inset-block-start: var(--nav-h); z-index: 80; box-shadow: var(--sh-2);
             display: flex; flex-wrap: wrap; gap: var(--space-1); transition: transform .24s var(--ease); }
  .adm-nav.is-away { transform: translateY(calc(-100% - var(--nav-h) - 12px)); }
  .adm-grp { display: contents; }
  .adm-grp-h { min-height: 38px; padding: 6px 12px; font-size: 14px; border: 1px solid var(--line); }
  .adm-grp.cur > .adm-grp-h { background: var(--jade-wash); border-color: transparent; color: var(--ink); }
  .adm-grp:not(.cur) > .adm-tabs { display: none; }
  .adm-grp.cur > .adm-tabs { order: 1; flex: 1 0 100%; min-width: 0; display: flex; gap: var(--space-1); overflow-x: auto;
                             margin-block-start: var(--space-1); padding-block-start: var(--space-2); border-block-start: 1px solid var(--line);
                             scrollbar-width: thin; overscroll-behavior-x: contain; }
  .adm-tabs li { flex: none; }
}
/* An admin tab's queue is the shared count badge (.has-count, style.css) in jade:
   same shape and type, the colour says "waiting for you". */
.has-count > .count.acct-n { background: var(--jade); color: var(--on-jade); }
/* The blocks of an account page (tiles, panels) stack with one gap; none spaces itself. */
.acct-main { min-width: 0; display: grid; gap: var(--space-5); align-content: start; }
.acct-main > * { min-width: 0; margin-block: 0; }

/* ---------- panels ----------
   A panel is a head and a body. The body pads its content the same as the head and
   spaces its children with one gap, so nothing inside a panel sets its own outer
   margin or touches the border:
     <section class="apanel"><div class="apanel-head">…</div><div class="apanel-body">…</div></section>
   Content that runs edge to edge with its own row padding (the thread list, the
   inbox, a table) goes in .apanel-flush instead. panel() in _account.js writes this. */
/* clip, not hidden: hidden makes the panel a scroll container, and a sticky bar inside it
   (the listing editor's Save, .ed-save) then never sticks */
.apanel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: clip; }
.apanel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3);
               padding: var(--panel-pad-b) var(--panel-pad-i); border-block-end: 1px solid var(--line); }
.apanel-head h2 { font-size: 19px; }
.apanel-body { display: grid; gap: var(--space-4); align-content: start; padding: var(--panel-pad-b) var(--panel-pad-i) var(--space-5); }
.apanel-body > * { min-width: 0; margin-block: 0; }
.apanel-body > .empty { padding-block: var(--space-6); }
.apanel-flush { min-width: 0; }
/* One panel, one topic. A panel holding more than one thing to do splits into sub-rows:
   each .asub a small heading (.asub-h), its words and its own form, padded like the body,
   a thin rule between two (panel(..., { flush: true }) with .asub children;
   update/CONVENTIONS.md "Spacing and panels"). */
.asub { display: grid; gap: var(--space-3); align-content: start; padding: var(--panel-pad-b) var(--panel-pad-i); }
.asub + .asub { border-block-start: 1px solid var(--line); }
.asub > * { min-width: 0; margin-block: 0; }
.asub-h { font-size: 16px; font-weight: 650; }
.asub > form { display: grid; gap: var(--space-3); }
.asub > form > * { margin-block: 0; }
.asub .form-actions { margin-block-start: 0; }
/* admin folds: a record or a longer help text, closed (style.css, "folds") */
.admin-fold { margin-block-start: var(--space-3); }
.admin-help > .fold-h { min-height: 32px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.tile { display: grid; gap: var(--space-1); padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.tile-n { font-size: 30px; font-weight: 700; line-height: 1; }
.tile-k { font-size: 13.5px; color: var(--ink-2); }

/* ---------- thread list ---------- */
.tlist-wrap { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); min-height: 460px; }
@media (max-width: 860px) { .tlist-wrap { grid-template-columns: 1fr; } .tlist-wrap .thread { display: none; } .tlist-wrap.open .tlist { display: none; } .tlist-wrap.open .thread { display: flex; } }
.tlist { list-style: none; margin: 0; padding: 0; border-inline-end: 1px solid var(--line); overflow-y: auto; max-height: 620px; }
.tlist-flat { border-inline-end: 0; }
.tlist a { display: flex; gap: 12px; padding: 15px 18px; border-block-end: 1px solid var(--line); transition: background .15s; }
.tlist a:hover { background: var(--surface-2); }
.tlist a.on { background: var(--jade-wash); }
.tl-av { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--ink); color: var(--paper);
         display: grid; place-items: center; font-size: 15px; font-weight: 700; }
.tl-main { min-width: 0; flex: 1; }
.tl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tl-who { font-weight: 700; font-size: 14.5px; }
.tl-time { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.tl-sub { font-size: 13.5px; color: var(--ink); }
.tl-snip { font-size: 13px; color: var(--ink-2); margin-block-start: 3px;
           display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.tl-badge { min-width: 20px; height: 20px; padding-inline: 6px; border-radius: var(--r-pill); background: var(--jade);
            color: var(--on-jade); font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; flex: none; align-self: center; }
.tlist-empty { padding: var(--space-6) var(--space-5); text-align: center; color: var(--ink-3); }
.tl-main { display: grid; gap: 2px; }

/* ---------- one thread ---------- */
.thread { display: flex; flex-direction: column; min-height: 460px; max-height: 620px; }
.thread-idle { display: grid; place-items: center; padding: var(--space-6); text-align: center; color: var(--ink-3); }
.thread-idle .xs { max-width: 38ch; }
.th-head { padding: var(--panel-pad-b) var(--panel-pad-i); border-block-end: 1px solid var(--line); display: flex; align-items: center; gap: var(--space-3); }
.th-head h2 { font-size: 17px; }
.th-back { display: none; }
@media (max-width: 860px) { .th-back { display: inline-flex; } }
.th-log { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: var(--panel-pad-b) var(--panel-pad-i); display: flex; flex-direction: column; gap: var(--space-3); }
.th-msg, .bub { max-width: 78%; }
.bub { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.bub-who { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
/* the message is .bub-b (a system line: its first span); .bub-t is its time underneath */
.bub-b, .bub.sys > span:first-child { margin: 0; padding: 11px 15px; border-radius: var(--r); background: var(--surface-2); font-size: 14.5px; line-height: 1.65; white-space: pre-wrap; }
.bub-t { color: var(--ink-3); }
.bub.me, .th-msg.me { align-self: flex-end; align-items: flex-end; }
.bub.me .bub-b, .th-msg.me p { background: var(--jade); color: var(--on-jade); border-end-end-radius: 4px; }
.bub.team .bub-b, .bub.sys > span:first-child { border-start-start-radius: 4px; }
.bub.sys { align-self: center; align-items: center; }
.bub.sys > span:first-child { background: var(--ochre-wash); color: var(--ink); font-size: 13.5px; }
.th-msg { display: flex; flex-direction: column; gap: 4px; align-self: flex-start; }
.th-msg p { margin: 0; padding: 11px 15px; border-radius: var(--r); background: var(--surface-2); font-size: 14.5px; line-height: 1.65; white-space: pre-wrap; }
.th-msg time, .bub time { font-size: 11.5px; color: var(--ink-3); }
.th-form { display: flex; gap: var(--space-2) var(--space-3); align-items: flex-end; padding: var(--space-3) var(--panel-pad-i); border-block-start: 1px solid var(--line); }
.th-form textarea { min-height: 46px; margin: 0; }
.thread > .msg { margin: var(--space-3) var(--panel-pad-i) 0; }
.th-note { margin: 0; padding: 0 var(--panel-pad-i) var(--space-4); font-size: 12.5px; color: var(--ink-3); }

/* ---------- requests, listings ---------- */
.reqs, .ulist { display: grid; gap: 12px; }
.req, .urow { display: flex; gap: var(--space-4); align-items: flex-start; justify-content: space-between;
              padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); flex-wrap: wrap; }
.req-main, .urow-t { min-width: 0; flex: 1; }
.req-main { display: grid; gap: 6px; }
.req-main > * { margin: 0; }
.req-q { font-size: 14px; color: var(--ink-2);
         display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.req-end, .urow-end { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- settings and deletion ---------- */
/* A form in a panel: one column, one gap between its fields, groups, hints and actions. */
.setform { display: grid; gap: var(--space-4); max-width: 520px; }
.setform > * { min-width: 0; margin-block: 0; }
.setform > .form-actions { margin-block-start: var(--space-1); }
.dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 700px) { .dgrid { grid-template-columns: 1fr; } }
.dcol h3 { font-size: 15px; margin-block-end: 8px; }
.dcol ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 7px; font-size: 14px; color: var(--ink-2); }
.dkeep { background: var(--surface-2); border-radius: var(--r); padding: var(--space-4); margin: 0; }
.dkeep dt { font-weight: 600; }
.dkeep dd { margin: var(--space-1) 0 var(--space-3); }
.dkeep dd:last-child { margin-block-end: 0; }
.dform { margin-block-start: var(--space-4); }
.dconfirm { max-width: 320px; }
.btn-danger { background: var(--clay); color: var(--on-clay); }
/* toward the ink: darker under white text in light mode, lighter under dark text in dark */
.btn-danger:hover { background: color-mix(in srgb, var(--clay) 85%, var(--ink)); }
.btn-danger[disabled] { background: var(--line-2); color: var(--ink-3); }

/* ---------- admin rows ----------
   A row is a card in three stacked parts, each the card's full width:
     .arow-head   the title and its meta line, the status tags at the end
     .arow-main   the body: facts (.kv-2: two columns of pairs on a wide card), notes and
                  boxes (duplicates, changes, errors) full width, one gap between them
     .arow-side   the action bar under a line: primary (jade) first, then secondary (soft),
                  then links (ghost); a destructive action (.act-danger) in .acts-end,
                  pushed to the far end. A one-line input + button (.inline-form) stays on one line.
   .arow-block is a card whose content lays itself out (a form, a table). */
/* Relaxed (owner, 2026-09-28): room between cards, room inside them, a quiet border; a
   heading between groups of cards stands apart from the group above it. */
.arows { display: grid; gap: var(--space-5); }
.arow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-content: start;
        background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: var(--r-lg);
        padding: var(--space-5) var(--space-6); box-shadow: var(--sh-1); }
@media (max-width: 600px) { .arow { padding: var(--space-4); } }
.arow.done { opacity: .55; }
.arow h3 { font-size: 16.5px; line-height: 1.35; }
.arow > * { min-width: 0; margin-block: 0; }
/* a card that lays out its own content (a form, a table, a note): one step between its
   blocks, whatever margins they carry */
.arow.arow-block { display: flow-root; }
.arow.arow-block > * + * { margin-block-start: var(--space-4); }
.arow.arow-block > .msg:not(.show) + * { margin-block-start: 0; }
.arow-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.arow-title { flex: 1 1 12rem; min-width: 0; display: grid; gap: var(--space-1); }
/* a heading between groups of rows (News: "Waiting for review"), sized like a panel's */
.arows > .sub-h, .arows > .fold > .fold-h .sub-h { font-size: 19px; margin-block: var(--space-4) 0; }
.arows > .sub-h + p { margin-block-start: calc(-1 * var(--space-3)); }
/* labels and fields in an admin form grid: room to breathe, a comfortable width */
.arows .tf-grid { gap: var(--space-3) var(--space-4); }
.arows .tf-grid label { gap: 6px; }
.arows .setform { max-width: 560px; }
.arows .setform.setform-2 { max-width: none; }
.arow-title > * { margin: 0; }
.arow-main { display: grid; gap: var(--space-3); align-content: start; }
.arow-main > * { min-width: 0; margin-block: 0; }
.arow-main > .msg.show { margin: 0; }
.arow .kv { grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; }
@media (min-width: 720px) {
  /* two pairs a line: label, value, label, value */
  .arow .kv-2 { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); column-gap: var(--space-4); }
}
.arow .kv dd.bad { color: var(--clay); font-weight: 700; }
/* a figure with its words may wrap on a phone rather than run past the card's padding */
.arow .kv dd.num { white-space: normal; overflow-wrap: anywhere; }
.arow-flags { display: grid; gap: var(--space-2); }
.arow-flags > p { margin: 0; }
.mod-flags { margin-block-start: var(--space-2); }
/* the action bar */
.arow-side { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
             padding-block-start: var(--space-3); border-block-start: 1px solid var(--line); }
.arow-side:not(:has(*)) { display: none; }   /* a row with nothing to do has no bar */
.arow-side > .row, .arow-side > form.row { flex: 1 1 auto; }
.arow-side > input, .arow-side > .deal-note { flex: 1 1 220px; width: auto; min-width: 0; }
.acts-end { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); margin-inline-start: auto; }
.act-danger { color: var(--clay); border-color: color-mix(in srgb, var(--clay) 40%, var(--line-2)); }
.act-danger:hover { background: var(--clay-wash); border-color: var(--clay); color: var(--clay); }
.inline-form { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2); max-width: 100%; }
.inline-form input { width: 18ch; min-width: 0; flex: 1 1 18ch; }
/* a reply box: the input takes the row */
.inline-form-wide { display: flex; width: 100%; }
.inline-form .btn { flex: none; }
.acts .btn-sm, .inline-form .btn-sm { min-height: 42px; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
@media (prefers-reduced-motion: reduce) { .adm-nav { transition: none; } }
/* the reason box beside a destructive action (whyField() in functions/_render.js) */
.why { display: inline-flex; flex: 1 1 16rem; min-width: 0; max-width: 26rem; }
.why input { width: 100%; min-width: 0; }
.acts-end:has(> .why) { flex: 1 1 22rem; justify-content: flex-end; }
.arow-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; }
/* a row with a picture (Reels): the picture beside the body on a wide card, above it on a phone */
.arow:has(> .arow-media) { grid-template-columns: minmax(0, 1fr) 160px; column-gap: var(--space-5); }
.arow-media { display: grid; gap: var(--space-2); align-content: start; justify-items: start; }
@media (max-width: 600px) {
  .arow:has(> .arow-media) { grid-template-columns: minmax(0, 1fr); }
  .arow-media { order: -1; grid-auto-flow: column; align-items: center; justify-content: start; }
  .arow-media .reel-thumb { width: 120px; }
}
/* Reels → discovery: one card per run, the counts as chips, the long parts folded */
.runs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.run { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface-2); border-radius: var(--r); }
.run > * { margin: 0; }
.run-h { font-size: 14.5px; }
.run-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.run-stats > li { font-size: 13px; color: var(--ink-2); padding: 3px 4px 3px 10px; border-radius: var(--r-pill); background: var(--surface); }
[dir="rtl"] .run-stats > li { padding: 3px 10px 3px 4px; }
.run-more > summary { cursor: pointer; color: var(--ink-2); }
.run-more > ul, .run-more > p, .run-more > details { margin: var(--space-2) 0 0; }
.run-more ul { padding-inline-start: 18px; display: grid; gap: 2px; }
/* a folded group of rows inside a tab (Reels: the rejected ones) */
.arows-sub { display: grid; gap: var(--space-4); padding-block-start: var(--space-3); }
/* an admin table's headings never break inside a word */
.arows .c-table th { white-space: nowrap; }
/* two forms of a row next to each other when there is room (Sponsored: approve, reject) */
.arow-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-4) var(--space-5); align-items: start; }
/* a form whose Arabic and English twins (fields with lang) sit side by side on a wide card */
.setform.setform-2 { max-width: none; }
@media (min-width: 720px) {
  .setform-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
  .setform-2 > * { grid-column: 1 / -1; }
  .setform-2 > .field:has(> [lang]) { grid-column: auto; }
}
.fbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.fbtn { border: 1.5px solid var(--line-2); background: var(--surface); border-radius: var(--r-pill);
        padding: 5px 12px; font-size: 13px; font-weight: 600; color: var(--ink-3); cursor: pointer; transition: all .15s; }
.fbtn:hover { border-color: var(--ink-3); color: var(--ink); }
.fbtn.on { background: var(--jade); border-color: var(--jade); color: var(--on-jade); }

/* My listings: stats and completeness (functions/_quality.js) */
.urow { flex-wrap: wrap; }
.uq { flex-basis: 100%; display: grid; gap: 8px; padding-block-start: 10px; border-block-start: 1px dashed var(--line); }
.uq-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-2); }
.uq-score { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.uq-bar { block-size: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.uq-bar i { display: block; block-size: 100%; background: var(--jade); border-radius: 999px; }
.uq-tips { margin: 0; padding-inline-start: 18px; color: var(--ink-2); }

/* Owner edit of a listing (functions/views/_unitedit.js) */
#ed-form { display: grid; gap: var(--space-5); }
#ed-form > * { margin-block: 0; }
.ed-set legend { margin-block-end: var(--space-3); }
.ed-set > legend + .hint { margin-block: 0 var(--space-3); }
.ed-set .note { margin-block-end: var(--space-4); }
.ed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 0 16px; }
/* the save bar runs the panel's full width: it takes back the body's side padding */
.ed-save { position: sticky; inset-block-end: 0; padding: var(--space-3) var(--panel-pad-i); margin-inline: calc(-1 * var(--panel-pad-i));
           background: var(--surface); border-block-start: 1px solid var(--line); }
.ed-save .msg { margin-block-end: var(--space-3); }
.ed-phs { list-style: none; margin: var(--space-3) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ed-ph { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.ed-ph img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.ed-ph.gone img { opacity: .3; }
.ed-ph-bar { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px; }
.ed-ph-b { border: 0; background: var(--surface); border-radius: var(--r-sm); min-width: 32px; min-height: 32px; font-size: 18px; cursor: pointer; }
[dir=rtl] .ed-ph-b[data-move] { transform: scaleX(-1); }
.ed-ph-x[aria-pressed=true] { background: var(--clay); color: var(--on-clay); }
.ed-diff { margin-block-start: 10px; }
.ed-diff table { border-collapse: collapse; font-size: 13.5px; inline-size: 100%; }
.ed-diff td, .ed-diff th { padding: 4px 8px 4px 0; text-align: start; vertical-align: top; border-block-end: 1px dashed var(--line); overflow-wrap: anywhere; }
.ed-diff del { color: var(--clay); } .ed-diff ins { color: var(--jade); text-decoration: none; font-weight: 600; }


/* Viewings (functions/_viewings.js) */
.vslots { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vslots li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 8px; border-block-end: 1px dashed var(--line); }
.vslots li:last-child { border: 0; }
.warn-t { color: var(--ochre-ink); font-weight: 600; }
.vbooks { margin: 8px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; }
.vcancel input { min-width: 0; flex: 1 1 160px; }
.arows > * { min-width: 0; }   /* a grid track grows to its widest table otherwise, and the page scrolls sideways on phones */
.arows .c-table { display: block; overflow-x: auto; }
.c-table-narrow { max-width: 520px; }

/* ---------- other ways in: provider buttons, sign-in methods ---------- */
.author { display: flex; align-items: center; gap: 12px; margin-block: 22px 14px; color: var(--ink-3); font-size: 13.5px; }
.author::before, .author::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sso-list { display: grid; gap: 10px; }
/* Each provider's own button, in its brand colours (tokens in style.css, both themes). */
.sso { --sso-bg: var(--google-bg); --sso-ink: var(--on-google); --sso-line: var(--google-line);
       display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 10px 18px;
       border-radius: var(--r-pill); border: 1px solid var(--sso-line); background: var(--sso-bg); color: var(--sso-ink);
       font-weight: 600; font-size: 15px; text-decoration: none; transition: box-shadow .18s, transform .16s var(--ease); }
.sso:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.sso:focus-visible { outline: 3px solid var(--jade); outline-offset: 2px; }
.sso-logo { width: 20px; height: 20px; flex: none; }
/* Inside the Android/iOS apps (native.js adds .in-app) a provider flow must not run in the
   WebView, which Google refuses. native.js adds .app-sso when this app build can run it in
   the system browser and come back (mobile/README.md); an older build without that keeps
   the buttons hidden and offers the phone code and email + password. Apple's button may
   exist only for the iOS app's native sheet ([data-native-only]: the web flow is off). */
.in-app:not(.app-sso) .sso { display: none; }
[data-native-only] { display: none; }
.in-app.app-sso.app-apple [data-native-only] { display: flex; }
.sso-facebook { --sso-bg: var(--facebook-bg); --sso-ink: var(--on-facebook); --sso-line: var(--facebook-bg); }
.sso-apple { --sso-bg: var(--apple-bg); --sso-ink: var(--on-apple); --sso-line: var(--apple-bg); }
.methods { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.method { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
          padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); }
.method-main { min-width: 0; flex: 1 1 260px; }
.method h3 { font-size: 15.5px; margin-block-end: 4px; }
.method .sso { min-height: 42px; font-size: 14px; }
.method-more { margin-block-start: var(--space-3); }
.method-more .setform { margin-block-start: var(--space-3); }
form.inline { display: inline; }
/* the answer line under a one-line form in a row takes its own line */
.price-form > .msg, .vcancel > .msg { flex-basis: 100%; margin: 0; }

/* ---------- AI assistants (MCP): consent, Settings, docs ---------- */
.agent-log { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.agent-consent .kv dd { overflow-wrap: anywhere; }
/* Admin → Reels (N40): a video link, a contact or a handle is one long word; it wraps inside its row. */
.reel-admin-row, .news-admin-row { overflow-wrap: anywhere; min-width: 0; }
/* N40c: the video's picture beside its row (YouTube's; a plain box for the others), the
   filters in one wrapping line, the priority box. */
.reel-thumb { display: block; width: 160px; max-width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover;
              border-radius: var(--r-sm); background: var(--surface-2); }
.reel-thumb-none { display: grid; place-items: center; font-size: 12px; color: var(--ink-3); border: 1px dashed var(--line-2); }
.reel-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.reel-filters .field { min-width: 160px; margin: 0; }
.reel-filters .form-actions { margin: 0; }
.reel-prio { width: 96px; }

/* A plain list of rows (the expat hub's shared fields, the admin's developer accounts). */
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
/* the anonymous conversation's title is the page's h1, sized like the inbox's h2 */
.th-head h1 { font-size: 17px; }

/* ---------- personal info ---------- */
/* Settings → Personal info (functions/views/_profile.js): full-width rows, each an icon,
   the label over its value, and a chevron; a row is one link, 60px and up, so the whole
   row is the tap target. The field pages reuse the panel with a back link on top. */
.pinfo-intro { margin: 0; padding: var(--space-3) var(--panel-pad-i) 0; }
.pinfo-say { padding: var(--space-3) var(--panel-pad-i) 0; }
.pinfo-say .msg { margin: 0; }
.pinfo-group { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink-3); margin: 0;
               padding: var(--space-5) var(--panel-pad-i) var(--space-2); }
[dir="rtl"] .pinfo-group { letter-spacing: 0; font-size: 14px; }
.pinfo { list-style: none; margin: 0; padding: 0; }
.pinfo > li + li { border-block-start: 1px solid var(--line); }
.pinfo-row { display: flex; align-items: center; gap: var(--space-3); min-height: 60px;
             padding: var(--space-3) var(--panel-pad-i); color: var(--ink); text-decoration: none;
             transition: background .14s; }
.pinfo-row:hover { background: var(--surface-2); }
.pinfo-row:focus-visible { outline-offset: -3px; border-radius: 0; }
.pinfo-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; color: var(--ink-2); }
.pinfo-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pinfo-lbl { font-size: 14px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pinfo-val { font-size: 15.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinfo-none { color: var(--ink-3); }
/* a destructive row (Delete account): red words only, in the ordinary row */
.pinfo-danger { color: var(--clay); font-weight: 600; }
.pinfo-sub { font-weight: 400; font-size: 13.5px; color: var(--ink-2); }
.pinfo-tag { font-size: 11.5px; padding: 1px 8px; }
.pinfo-go { flex: none; color: var(--ink-3); }
[dir="rtl"] .pinfo-go, [dir="rtl"] .pinfo-back-ic { transform: scaleX(-1); }
/* the picture, or the initial: sized here and in the markup, so nothing moves */
.pinfo-av { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.pinfo-av-none { display: inline-grid; place-items: center; background: var(--jade); color: var(--on-jade);
                 font-weight: 700; font-size: 18px; line-height: 1; }
.pinfo-av-lg { width: 128px; height: 128px; font-size: 52px; }
.pinfo-inset { border: 1px solid var(--line); border-radius: var(--r); overflow: clip; }
.pinfo-inset .pinfo-row { padding-inline: var(--space-4); }

/* a field's own page */
.pinfo-head { justify-content: flex-start; }
.pinfo-back { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: 600;
              color: var(--ink-2); text-decoration: none; }
.pinfo-back:hover { color: var(--ink); }
.pinfo-title { font-size: clamp(22px, 3vw, 28px); }
.pinfo-why { color: var(--ink-2); padding: var(--space-3) var(--space-4); background: var(--surface-2); border-radius: var(--r-sm); }
.pinfo-why b { color: var(--ink); font-weight: 600; }
.pinfo-status { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pinfo-photo { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.pinfo-clear { display: flex; }
.pinfo-pin { min-width: 0; }

/* the picture's crop: a square canvas with the circle that will be kept */
.crop-wrap { display: grid; gap: var(--space-2); }
.crop-wrap[hidden] { display: none; }
.crop { position: relative; width: min(100%, 320px); aspect-ratio: 1; border-radius: var(--r); overflow: hidden;
        background: var(--surface-2); touch-action: none; }
.crop canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.crop canvas:active { cursor: grabbing; }
.crop::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
               box-shadow: 0 0 0 999px color-mix(in srgb, var(--ink) 45%, transparent); }
.crop-zoom { max-width: 320px; }
.crop-zoom input { width: 100%; }
@media (max-width: 600px) {
  .pinfo-ic { width: 28px; }
}