/* ══════════════════════════════════════════════════════════════
   Meetback — editor-item (the item detail sheet)

   Lifted from the pinned reference
   design-system/products/meetback/assets/editor-item.html @ 5408efaa,
   and design-system/products/meetback/specs/editor-item.md @ 9ae8222d
   ⚠ Q43, 2026-08-08 — THE EXEMPTION ENDED AND THIS SHEET MOVED WITH THE FORM.
   The owner chose direction B; the item is explicit that "the form and the item
   sheet move together… a build that restyles the form and leaves the sheet gives
   two screens that argue with each other mid-edit". So: Inter rather than the
   system font, and the field grey replaced by the surface with a hairline.

   (the spec's Styling table: sheet var(--surface-3) / radius 24px top, grabber
   var(--n-300), 44px tile at radius 12px in var(--profile), fields var(--field) at
   radius 14px with a var(--n-450) prefix, toggle off var(--surface-5) / on var(--ink),
   black Save, red var(--red) delete).

   ⚠ DO NOT RE-TOKENIZE. Build request §7 and the spec's own styling table:
   the grey filled fields, BLACK toggle, black Save and system font are a
   DELIBERATE deviation from Meetback's Mist / indigo / Fraunces tokens, and
   the design is approved that way — the same deviation editor.css carries.
   Harmonizing it needs an explicit request from the designer.

   Everything is scoped under `.editor-item` so this palette cannot leak into
   the token-driven screens around it. `--profile` is set inline on the stage
   by the module, from card.accent.

   THE REFERENCE'S `.stage` IS A DEMO FRAME — a dim panel with a 26px radius
   holding a sheet mock. Here it is the real backdrop: fixed, full-screen, over
   the editor it dims, and it is the element a tap-outside lands on.
   ══════════════════════════════════════════════════════════════ */

.editor-item {
  --ink: var(--ed-ink);
  --muted: var(--ed-muted);
  --field: var(--ed-field);
  --fieldtx: var(--ed-fieldtx);
  --red: var(--ed-red);
  --profile: var(--profile-fallback);
  --ei-font: var(--font-body);
  /* Set live by the module from visualViewport — the software keyboard covers
     the bottom of a bottom sheet, and the sheet has to sit on top of it. */
  --kb: 0px;
  --ei-sab: var(--sab, env(safe-area-inset-bottom, 0px));

  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(20, 20, 28, .42);
  font-family: var(--ei-font);
  color: var(--ink);
}

/* ── the sheet ── */
.editor-item .sheet {
  width: 100%;
  max-width: 460px;              /* the editor's own column width */
  margin: 0 auto;
  margin-bottom: var(--kb);      /* ride above the keyboard */
  background: var(--surface-3);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .15);
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Bounded by the VISIBLE area, not the document: at 375×667 with the keyboard
     up there is ~400px left, and a sheet taller than that puts Save off screen.
     The body scrolls inside instead. */
  max-height: calc(100% - var(--kb) - 24px);
  outline: none;
  animation: ei-rise .22s cubic-bezier(.2, .8, .3, 1);
}

@keyframes ei-rise { from { transform: translateY(14px); } to { transform: none; } }

.editor-item .grab {
  width: 38px; height: 5px; border-radius: 100px;
  background: var(--n-300); margin: 9px auto 0; flex: 0 0 auto;
}

/* ── header: Cancel · type · Save (stays put; the body scrolls) ── */
.editor-item .s-hdr {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px 10px; gap: 12px;
}
.editor-item .s-hdr .cancel,
.editor-item .s-hdr .save {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-family: inherit; font-size: 16px;
}
.editor-item .s-hdr .cancel { color: var(--muted); font-weight: 600; }
.editor-item .s-hdr .save { color: var(--ink); font-weight: 700; }
.editor-item .s-hdr .title {
  font-size: 17px; font-weight: 700; text-align: center;
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── body ── */
.editor-item .s-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 6px 16px calc(18px + var(--ei-sab));
  display: flex; flex-direction: column; gap: 14px;
}

/* ── item head: tile + type + Show on card ── */
.editor-item .itemhead {
  background: var(--surface); border-radius: 16px; padding: 16px;
  display: flex; align-items: center; gap: 13px;
}
.editor-item .itemhead .tile {
  width: 44px; height: 44px; border-radius: 12px; background: var(--profile);
  display: grid; place-items: center; color: var(--surface); flex: 0 0 auto;
}
.editor-item .itemhead .tile svg { width: 24px; height: 24px; }
.editor-item .itemhead .tile .let { font-weight: 800; font-size: 18px; }
.editor-item .itemhead .nm { flex: 1; min-width: 0; }
.editor-item .itemhead .nm .t { font-size: 17px; font-weight: 700; }
.editor-item .itemhead .nm .s { font-size: 12.5px; color: var(--muted); margin-top: 1px; }

/* Toggle — BLACK when on. The reference's language, not a token. */
.editor-item .tg {
  width: 50px; height: 30px; border-radius: 100px; background: var(--surface-5);
  position: relative; flex-shrink: 0; cursor: pointer;
  border: 0; padding: 0; transition: .2s;
}
.editor-item .tg.on { background: var(--ink); }
.editor-item .tg::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--surface); transition: .2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.editor-item .tg.on::after { left: 23px; }

/* ── fields ── */
.editor-item .fieldwrap .lab {
  display: block; font-size: 12px; font-weight: 600; color: var(--muted);
  letter-spacing: .02em; margin: 0 4px 6px;
}
.editor-item .field {
  /* Q43 — TWO SURFACE LEVELS. --field was a third grey nested inside the
     sheet's own surface; §2.2 calls that a panel inside a panel. The field is
     the surface with a hairline now, and the SHEET moves with the form because
     they are one flow — a build that restyled the form and left this gives two
     screens that argue with each other mid-edit. */
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 15px 16px;
  font-size: 17px; display: flex; align-items: center; gap: 10px;
}
.editor-item .field .pfx { color: var(--n-450); font-size: 17px; flex: 0 0 auto; }
/* A pasted profile URL already carries everything the prefix stands for —
   "in/https://linkedin.com/in/x" reads as a mistake the user did not make. */
.editor-item .field .pfx.hide { display: none; }
.editor-item .field input,
.editor-item .field textarea {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-family: var(--ei-font); font-size: var(--t-form); color: var(--fieldtx);
}
.editor-item .field textarea { resize: none; line-height: 1.35; padding: 0; }
.editor-item .field input::placeholder,
.editor-item .field textarea::placeholder { color: var(--n-450); }
/* THE FIELD IS THE FOCUS SURFACE, not the <input> inside it.
   The input is borderless and transparent — the grey rounded `.field` is what
   reads as the control — so the focus ring has to be drawn on the wrapper,
   where it follows the 14px radius.
   Measured on a real iPhone (2026-08-03, owner screenshot): this ring at
   rgba(10,10,10,.18) composites to var(--n-340) on var(--field), which is 1.5:1 — far
   under the 3:1 a focus indicator needs, so it could not be the only one.
   var(--n-650) is 3.9:1 on the same fill, and is the grey the editor's item rows
   already use for a value. */
.editor-item .field:focus-within { box-shadow: inset 0 0 0 2px #6c6c74; }
.editor-item .field.bad { box-shadow: inset 0 0 0 2px var(--red); }

/* The chevron is decorative in the reference; here it opens the preset picker. */
.editor-item .field .chev {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--n-380); display: grid; place-items: center; flex: 0 0 auto;
  width: 24px; height: 24px;
}
.editor-item .field .chev svg { width: 16px; height: 16px; stroke: var(--n-380); }
.editor-item .field .chev[aria-expanded="true"] svg { transform: rotate(180deg); }

.editor-item .presets { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 4px 0; }
.editor-item .presets[hidden] { display: none; }
.editor-item .preset {
  background: var(--surface); border: 0; border-radius: 100px; padding: 9px 16px;
  font-family: var(--ei-font); font-size: 15px; font-weight: 600; color: var(--ink);
  cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}

.editor-item .err {
  font-size: 13px; line-height: 1.35; color: var(--red);
  margin: 7px 4px 0; display: none;
}
.editor-item .err.on { display: block; }

/* ── delete ── */
.editor-item .delete {
  width: 100%; background: var(--surface); border: none; border-radius: 14px; padding: 16px;
  font-family: var(--ei-font); font-size: 16px; font-weight: 700; color: var(--red);
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.editor-item .delete svg { width: 18px; height: 18px; stroke: var(--red); flex: 0 0 auto; }
/* The armed second tap: the SAME two-tap confirm contacts.js uses, and it says
   what the next tap does rather than being the same button in a new colour. */
.editor-item .delete.armed { background: var(--red); color: var(--surface); }
.editor-item .delete.armed svg { stroke: var(--surface); }

/* Clear value takes the same slot but is NOT destructive — nothing is removed
   and nothing is committed until Save. Red would be a lie about what it does. */
.editor-item .delete.clearval { color: var(--n-800); }
.editor-item .delete.clearval svg { stroke: var(--n-650); }

.editor-item .s-msg {
  font-size: 13px; line-height: 1.4; text-align: center; color: var(--n-600);
  margin: 0 4px; display: none;
}
.editor-item .s-msg.on { display: block; }

/* ── focus, for the keyboard users the <span>s in the reference excluded ── */
/*
   BUTTONS ONLY. This used to cover input and textarea as well, and WebKit
   matches :focus-visible on a text field the moment it is TAPPED — so touching
   the phone number drew a hard 2px BLACK SQUARE inside the rounded grey pill,
   on top of the wrapper's own ring. Two frames, one of them square, around a
   14px-radius field. Measured off the owner's screenshot: an outer var(--n-340) ring
   and an inner var(--ink-975) one, where the unfocused Label field next to it had a
   clean edge and nothing else.
   An outline cannot follow the pill anyway — the <input> has no border-radius
   of its own and takes its shape from the wrapper — so this is not a matter of
   softening the colour. The wrapper's :focus-within ring above is the whole
   indicator, and it is the one that meets contrast.
*/
.editor-item button:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}

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

/* ── Q63: autofill takes this surface's own colours. The reasoning and the
   box-shadow trap are written out once, in editor.css. ── */

.editor-item .field input:-webkit-autofill,
.editor-item .field textarea:-webkit-autofill,
.editor-item .field input:-webkit-autofill:hover,
.editor-item .field input:-webkit-autofill:focus,
.editor-item .field input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px var(--field) inset;
  -webkit-text-fill-color: var(--fieldtx);
  caret-color: var(--fieldtx);
}