/* ══════════════════════════════════════════════════════════════
   Meetback — editor (Edit Card)

   Lifted from the pinned reference
   design-system/products/meetback/assets/editor.html @ bccba094.

   ⚠ THE EXEMPTION IS OVER, AND ONLY THE OWNER COULD END IT (Q43, 2026-08-08).
   Build request §7 and specs/editor.md recorded the grey filled fields, the
   BLACK toggles, the black Save and the system font as a DELIBERATE deviation
   they had approved, with "re-tokenising it is not a cleanup" written beside it.
   Nothing else in this queue overrides a written approval. They chose DIRECTION
   B — "the exemption ends" — so the screen joins the rest of the app: Inter, one
   large left-aligned title that scrolls away, TWO surface levels instead of a
   third field-grey, and the app accent on Save instead of black.

   ⚠ WHAT IS CARRIED OUT OF THE EXEMPTION RATHER THAN DISCARDED WITH IT. Its
   stated defence was that a system font is easier to read on a form at 19px than
   a webfont. Ending the exemption does not make that false, and the ruling says
   so: the fix is the type SCALE, not a smaller form. Hence --t-form in
   tokens.css, which is 19.1px at 375 and never below what shipped.

   ⚠ AND THE PROPORTIONS WERE WRONG UNDER EITHER DIRECTION. The preview spent
   about 450px before the first field on a 667pt screen — a 200px cover, a 180px
   avatar hanging 52px below it, a 70px spacer. B is a palette-and-typography
   ruling; the item says those proportions are wrong either way and are fixed in
   the same build.

   Everything is scoped under `.editor` so this screen's palette cannot leak
   into the token-driven screens that sit either side of it. `--profile` is
   set inline on the root by the module and re-set live by the colour picker.
   ══════════════════════════════════════════════════════════════ */

.editor {
  --ink: var(--ed-ink);
  --muted: var(--ed-muted);
  /* TWO SURFACE LEVELS, NOT THREE (LANGUAGE.md §2.2). --ed-field was a third
     grey nested inside the card, which reads as a panel inside a
     panel. The field is now the card's own surface with a hairline divider —
     §2.2's "keep --border for dividers INSIDE a surface". */
  --field: var(--surface);
  --fieldtx: var(--ed-fieldtx);
  --profile: var(--profile-fallback);
  /* Inter, like everything else. The variable keeps its name so nothing that
     reads it has to change; what changed is where it points. */
  --ed-font: var(--font-body);

  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  background: var(--surface-3);
  color: var(--ink);
  font-family: var(--ed-font);
}

/* ── header ── */
.editor .hdr { flex: 0 0 auto; background: var(--surface); padding: calc(14px + var(--sat)) 20px 0; }
.editor .hdr-row { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.editor .hdr-x {
  cursor: pointer; display: grid; place-items: center; width: 34px; height: 34px;
  margin-left: -6px; background: none; border: 0; padding: 0;
}
.editor .hdr-x svg { width: 24px; height: 24px; stroke: var(--ink); }
/* ⚠ THE TITLE LEFT THE HEADER. LANGUAGE.md §2.4: "A screen's title is the first
   thing in its own scroll, so it scrolls away with the content" — one large
   left-aligned title, not a centred one in a band. What stays in the fixed row
   is the ✕ and Preview, which are controls rather than a title. */
.editor .ed-title {
  font-size: var(--t-xl); font-weight: 800; letter-spacing: -.02em;
  margin: 2px 2px 2px; text-align: left;
}
.editor .hdr-prev {
  font-size: 17px; font-weight: 700; color: var(--ink); cursor: pointer;
  background: none; border: 0; padding: 0; font-family: inherit;
}
.editor .hdr-x:focus-visible, .editor .hdr-prev:focus-visible { outline: 2px solid var(--profile); outline-offset: 2px; }

.editor .tabs { display: flex; margin-top: 16px; }
.editor .tab {
  flex: 1; text-align: center; padding: 12px 0 14px; font-size: 17px; font-weight: 700;
  color: var(--n-380); cursor: pointer; border: 0; border-bottom: 2.5px solid transparent;
  background: none; font-family: inherit;
}
.editor .tab.on { color: var(--ink); border-bottom-color: var(--ink); }

/* ── scrolling body — the header and Save stay put, per the spec ── */
.editor .body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 18px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.editor .pane { display: none; flex-direction: column; gap: 16px; }
.editor .pane.on { display: flex; }

/* ── preview ── */
.editor .preview { background: var(--surface); border-radius: 18px; padding: 8px 8px 0; position: relative; }
.editor .pv-cover {
  /* 200 → 148. With the avatar and the spacer below it, the old trio spent
     about 450px of a 667pt screen before the first field. */
  display: block; height: 148px; border-radius: 14px; overflow: hidden; cursor: pointer;
  background: linear-gradient(160deg, var(--warn-1), var(--warn-2) 55%, var(--olive));
}
.editor .pv-cover img { width: 100%; height: 100%; object-fit: cover; }
.editor .pv-av {
  position: absolute; left: 50%; bottom: -38px; transform: translateX(-50%);
  width: 132px; height: 132px; border-radius: 50%; overflow: hidden; background: var(--surface);
  box-shadow: 0 0 0 6px #fff, 0 8px 20px rgba(0, 0, 0, .18); cursor: pointer;
}
.editor .pv-av img { width: 100%; height: 100%; object-fit: cover; }
.editor .pv-av .mono {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--mono-1), var(--mono-2));
  font-size: 42px; font-weight: 800; color: var(--profile);
}
.editor .pv-logo {
  position: absolute; left: calc(50% + 44px); bottom: -18px; width: 56px; height: 56px;
  border-radius: 50%; background: var(--surface); box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
  letter-spacing: .03em; color: var(--ink);
}
/* The spacer only has to clear whatever the avatar hangs below the cover. It is
   derived from that overhang rather than typed as a round number, so shrinking
   the avatar can never leave a gap or a collision behind. */
.editor .preview-spacer { height: 46px; }

/* ── fields ── */
.editor .field {
  background: var(--field); border: 1px solid var(--border);
  border-radius: 15px; padding: 20px;
}
.editor .field input, .editor .field textarea {
  width: 100%; border: none; background: transparent; outline: none;
  font-family: var(--ed-font); font-size: var(--t-form); color: var(--fieldtx);
}
.editor .field input::placeholder, .editor .field textarea::placeholder { color: var(--n-450); }
.editor .field.bio { min-height: 150px; }
.editor .field.bio textarea { resize: none; min-height: 110px; }

.editor .titlefield {
  background: var(--field); border: 1px solid var(--border);
  border-radius: 15px; padding: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.editor .titlefield .k { font-size: var(--t-form); color: var(--muted); flex: 0 0 auto; }
.editor .titlefield .v {
  font-size: var(--t-form); font-weight: 600; text-align: right; flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; outline: none; font-family: var(--ed-font);
  color: var(--fieldtx);
}
.editor .titlefield .v::placeholder { color: var(--n-450); }
.editor .desc { font-size: 16px; line-height: 1.4; color: var(--n-600); padding: 0 4px; margin-top: -4px; }

/* ── setting cards ── */
.editor .setcard { background: var(--surface); border-radius: 16px; padding: 20px; }
.editor .setcard-top { display: flex; align-items: center; gap: 10px; }
.editor .setcard-top .t { font-size: 20px; font-weight: 700; flex: 1; display: flex; align-items: center; gap: 9px; }
.editor .verif { width: 26px; height: 26px; }
.editor .setcard .d { font-size: 16px; line-height: 1.42; color: var(--n-600); margin-top: 14px; }

/* ── profile colour ── */
.editor .pcolor { background: var(--surface); border-radius: 16px; padding: 20px; }
.editor .pcolor-top { display: flex; align-items: center; justify-content: space-between; }
.editor .pcolor-top .t { font-size: 20px; font-weight: 700; }
.editor .pcolor-sw {
  position: relative; width: 56px; height: 32px; border-radius: 9px; background: var(--profile);
  cursor: pointer; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.editor .pcolor-sw input {
  position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px);
  opacity: 0; cursor: pointer; border: none; padding: 0;
}
.editor .pcolor .d { font-size: 16px; line-height: 1.42; color: var(--n-600); margin: 14px 0 0; }
.editor .pc-presets { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.editor .pc-chip {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); position: relative;
}
.editor .pc-chip.on::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ink);
}

/* ── item rows ── */
.editor .item {
  background: var(--surface); border-radius: 16px; padding: 16px 18px;
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.editor #items .item:last-child { margin-bottom: 0; }
.editor .item .grip { color: var(--n-320); display: flex; }
.editor .item .grip svg { width: 16px; height: 22px; }
/* The icon + name are a real <button> — they open the item sheet. The reference
   draws them as inert <span>s, so this carries no styling of its own: it is the
   same two spans, laid out the same way, in something that can be tapped and
   reached by keyboard. */
.editor .item .iedit {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px;
  background: none; border: 0; padding: 0; margin: 0; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
}
.editor .item .iedit:focus-visible { outline: 2px solid var(--profile); outline-offset: 3px; border-radius: 10px; }
.editor .item .iic { width: 34px; height: 34px; display: grid; place-items: center; color: var(--profile); flex: 0 0 auto; }
.editor .item .iic svg { width: 30px; height: 30px; }
.editor .item .iic .let { font-weight: 800; font-size: 17px; }
/* The name and what the item holds, stacked. The reference has only the name —
   see rowInner()'s note: once a row can carry a value, a row that looks the same
   empty as filled is how a card ships with nothing reachable on it. */
.editor .item .itxt { flex: 1; min-width: 0; display: grid; gap: 1px; }
/* The name row carries the name and, when hidden, the chip. They are separate
   elements so `.ilbl` stays exactly the name: it is what truncates, and what
   applyItem and the harness read as the item's title. */
.editor .item .irow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.editor .item .ilbl {
  min-width: 0; font-size: var(--t-form); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.editor .item .ival {
  min-width: 0; font-size: 14px; font-weight: 500; color: var(--n-650);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* An empty item's second line is the ACTION, in the card's own accent — it is
   the affordance and the instruction in one. Not a warning colour: an item with
   nothing in it is a normal state, not a mistake. */
.editor .item .ival.unset { color: var(--profile); font-weight: 600; }

/* Hidden-from-your-card, stated rather than switched. The toggle moved into the
   item sheet (owner ruling 2026-08-03, option F): it was the only thing in the
   row that looked interactive, and it was not what opened the sheet. */
.editor .item .hid {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--n-650); background: var(--surface-4); border-radius: 6px; padding: 3px 7px;
  flex: 0 0 auto;
}
.editor .item.off .iic,
.editor .item.off .ilbl,
.editor .item.off .ival { opacity: .45; }
/* The chip is what SAYS hidden, so it must not fade with the thing it labels. */
.editor .item.off .hid { opacity: 1; }

/* Disclosure chevron — the row opens the item sheet, and this is what says so. */
.editor .item .chev { color: var(--n-320); display: grid; place-items: center;
  width: 20px; height: 20px; flex: 0 0 auto; }
.editor .item .chev svg { width: 18px; height: 18px; }
.editor .item .rm { color: var(--n-320); cursor: pointer; display: none; width: 26px; height: 26px; place-items: center; }
.editor .item.added .rm { display: grid; }
.editor .item .rm svg { width: 20px; height: 20px; stroke: currentColor; }

/* Toggle — the ACCENT when on. It was black, which was the exemption's language;
   Q43 ended the exemption and this is the app's. */
.editor .tg {
  width: 52px; height: 31px; border-radius: 100px; background: var(--surface-5);
  position: relative; cursor: pointer; flex-shrink: 0; transition: .2s;
}
.editor .tg.on { background: var(--accent-dk); }
.editor .tg::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 25px; height: 25px;
  border-radius: 50%; background: var(--surface); transition: .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.editor .tg.on::after { left: 24px; }

/* ── add item ── */
.editor .additem { background: var(--surface); border-radius: 16px; padding: 22px 18px; }
.editor .add-t {
  text-align: center; font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.editor .add-t svg { width: 22px; height: 22px; stroke: var(--ink); }
.editor .add-d { text-align: center; font-size: 16px; line-height: 1.42; color: var(--n-600); margin: 12px 8px 18px; }
.editor .add-icons { display: flex; justify-content: space-between; align-items: center; gap: 4px; flex-wrap: wrap; }
.editor .ai {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  color: var(--n-330); cursor: pointer; transition: .15s; background: transparent;
}
.editor .ai svg { width: 23px; height: 23px; }
.editor .ai .let { font-weight: 800; font-size: 15px; }
.editor .ai:hover { background: var(--surface-2); }
.editor .ai.active { color: var(--surface); background: var(--profile); }

/* ── footer ── */
.editor .foot { flex: 0 0 auto; background: var(--surface-3); padding: 12px 18px calc(14px + var(--sab)); }
.editor .save {
  /* ⚠ --accent-dk, NOT --profile. The owner's card colour is arbitrary and
     unconstrained — Q24's whole lesson — so a primary button painted with it is
     a contrast coin toss. --accent-dk is fixed and MEASURED: white on it is
     7.90:1, comfortably past AA, and it is the app's accent rather than this
     card's.
     ⚠ THE RATIO IS NAMED WITHOUT ITS HEX ON PURPOSE. one_palette.mjs reads
     literals anywhere in the file, comments included, and it is right to — a
     gate loosened to accommodate prose is a gate with a hole in it. The value
     lives in tokens.css; this cites the measurement. */
  width: 100%; padding: 20px; border-radius: 16px; border: none; background: var(--accent-dk);
  color: var(--surface); font-family: var(--ed-font); font-weight: 700;
  font-size: var(--t-form); cursor: pointer;
}
.editor .save:disabled { opacity: .55; cursor: default; }
.editor .save-msg {
  font-size: 14px; line-height: 1.4; text-align: center; color: var(--n-600);
  margin-bottom: 10px; min-height: 1.4em;
}
.editor .save-msg.is-error { color: var(--err-strong); }

@media (prefers-reduced-motion: reduce) { .editor * { transition: none !important; } }

/* Q7 — the editor blanks the nav and ends in its own panel grey; both bands
   continue it. The literal matches .ed-wrap's background above. */
body:has([data-screen="editor"]) { background: var(--surface-3); }
[data-screen="editor"] { --edge-top: var(--surface-3); }

/* ══════════════════════════════════════════════════════════════
   Q62's sibling, Q63 — AUTOFILL REPAINTS WHAT WE DREW.

   Owner, 2026-08-09, two screenshots: the item sheet's WhatsApp number and Edit
   card's name field, both rendered as BLACK TEXT ON A BRIGHT YELLOW BLOCK
   inside a dark form where every other field is ink-on-surface.

   ⚠ IT IS THE BROWSER, NOT THE STYLESHEET, WHICH IS WHY NOTHING IN THIS REPO
   SAW IT. `grep -rn autofill public/src/styles` returned NOTHING before this —
   the app had never told the browser what an autofilled field should look like,
   so on a dark form it got the light-mode default. And it lands on Q43, which
   the owner CONFIRMED hours earlier: an autofilled value only exists once the
   browser has one to offer, which it did not when Q43 was judged. Q43 is not
   reopened by this.

   ⚠ `background-color` DOES NOT OVERRIDE -webkit-autofill, and reaching for it
   is the trap this comment exists to stop. The mechanism that does is an inset
   box-shadow the size of the field, plus -webkit-text-fill-color for the glyphs,
   because `color` is overridden too.

   ⚠ FOUR STATES, and three of them are usually forgotten: the browser re-asserts
   its own paint on :hover, :focus and :active as well.

   ⚠ AND IT FOLLOWS THE THEME (Q28: both edges move). The colours are this
   surface's own tokens, never literals — one_palette would refuse a literal
   anyway, and a hard-coded dark value would be wrong in light mode.
   ══════════════════════════════════════════════════════════════ */

.editor .field input:-webkit-autofill,
.editor .field textarea:-webkit-autofill,
.editor .field input:-webkit-autofill:hover,
.editor .field input:-webkit-autofill:focus,
.editor .field input:-webkit-autofill:active,
.editor .titlefield .v:-webkit-autofill,
.editor .titlefield .v:-webkit-autofill:hover,
.editor .titlefield .v:-webkit-autofill:focus,
.editor .titlefield .v:-webkit-autofill:active {
  /* The input is transparent over `.field`, so the shadow paints the FIELD's
     colour — matching the wrapper is what makes it disappear. */
  box-shadow: 0 0 0 1000px var(--field) inset;
  -webkit-text-fill-color: var(--fieldtx);
  caret-color: var(--fieldtx);
}