/* ════════════════════════════════════════════════════════════
   THE SMART DIALOG
   Centred sheet of paper on the desk; bottom sheet on a phone.
   Sits above the mobile chrome (61) and the lookup popover (70),
   below the toast (90) so a message can still land on top of it.
   ════════════════════════════════════════════════════════════ */

#sdScrim {
  position: fixed; inset: 0; z-index: 84;
  background: rgba(44, 41, 37, .44);
  animation: sdFade .16s ease-out;
}
@keyframes sdFade { from { opacity: 0 } to { opacity: 1 } }

#sdDialog {
  position: fixed; z-index: 85;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(620px, calc(100vw - 48px));
  max-height: min(760px, calc(100vh - 64px));
  display: flex; flex-direction: column;
  background: var(--chrome);
  border: 1px solid var(--chrome-line);
  border-radius: var(--r);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .18);
  animation: sdRise .18s cubic-bezier(.22, .68, .28, 1);
}
@keyframes sdRise {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) }
  to   { opacity: 1; transform: translate(-50%, -50%) }
}

/* ---------------- head ---------------- */
.sd-head {
  flex: none; display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 12px 11px 16px;
  border-bottom: 1px solid var(--chrome-line);
  background: linear-gradient(180deg, var(--tb-top), var(--chrome));
  border-radius: var(--r) var(--r) 0 0;
}
.sd-head-text { flex: 1 1 auto; min-width: 0; }
.sd-eyebrow {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-ui-2); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent-ink);
}
.sd-eyebrow svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.sd-head h2 {
  margin: 3px 0 0; font-size: 20px; font-weight: 600; line-height: 1.2;
  color: var(--ink); letter-spacing: -.005em;
  overflow-wrap: break-word;
}
.sd-x {
  flex: none; border: 1px solid transparent; background: transparent;
  border-radius: var(--r); padding: 4px; color: var(--ink-faint); line-height: 0;
}
.sd-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sd-x:hover { color: var(--accent-ink); background: var(--lift); border-color: var(--chrome-line-2); }

/* ---------------- body ---------------- */
.sd-body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 16px 18px;
}

/* ---------------- the live page row ---------------- */
.sd-preview { margin-bottom: 16px; }
.sd-pv-label {
  font-family: var(--font-ui-2); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px;
}
.sd-pv-label em { font-style: italic; letter-spacing: .04em; text-transform: none; color: var(--ink-faint); }
.sd-pv-sheet {
  /* PAPER. A preview of the printed row, so it states its own ink
     rather than inheriting the chrome's. */
  background: var(--paper);
  color: var(--paper-ink);
  border: 1px solid var(--paper-rule);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
  padding: 12px 14px;
  overflow: hidden;
}
.sd-pv-grid { display: grid; column-gap: 10px; align-items: baseline; }
/* Everything below lives INSIDE .sd-pv-sheet, which is paper. It must
   therefore use the paper tokens, not the chrome ones. Written against
   `--ink` and friends, this block put cream text on white stock the
   moment a dark theme existed — the row was still there, just invisible.
   That is the v7.2.99 bug at one twentieth the size, and it is why the
   paper tokens have no dark counterpart to reach for by mistake. */
.sd-pv-heads {
  font-family: var(--font-ui-2) !important;
  font-size: 8.5px !important; line-height: 1.6 !important;
  letter-spacing: .13em; text-transform: uppercase; color: var(--paper-faint);
  padding-bottom: 4px; margin-bottom: 5px;
  border-bottom: 1px solid var(--paper-rule);
}
.sd-pv-cell { color: var(--paper-ink); overflow-wrap: break-word; min-width: 0; }
.sd-pv-cell.dim { color: var(--paper-dim); }
.sd-pv-ph { color: var(--paper-faint); font-style: italic; opacity: .75; }
/* A column this dialog is about to create announces itself. */
.sd-pv-head.is-new { color: var(--accent-paper); }
.sd-pv-cell.is-new {
  background: var(--accent-paper-soft);
  box-shadow: -3px 0 0 var(--accent-paper-soft), 3px 0 0 var(--accent-paper-soft);
}

/* prose preview — wine, leader, price, detail beneath */
.sd-pv-head-row { display: flex; align-items: baseline; gap: 6px; }
.sd-pv-wine { flex: none; max-width: 78%; color: var(--paper-ink); overflow-wrap: break-word; }
.sd-pv-leader {
  flex: 1 1 auto; min-width: 16px; align-self: flex-end;
  margin-bottom: .28em;
  border-bottom: 1px dotted var(--paper-faint); opacity: .7;
}
.sd-pv-price { flex: none; color: var(--paper-ink); font-variant-numeric: tabular-nums; }
.sd-pv-detail { color: var(--paper-dim); margin-top: .12em; padding-left: 1.1em; }

/* ---------------- blocks ---------------- */
.sd-group { margin-top: 4px; }
.sd-group h3 {
  margin: 0 0 8px; padding-bottom: 4px;
  font-family: var(--font-ui-2); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 500;
  border-bottom: 1px solid var(--chrome-line-2);
}
.sd-group-staff { margin-top: 18px; }

.sd-block { margin-bottom: 10px; }
.sd-b-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 3px; min-height: 20px;
}
.sd-b-head label {
  font-family: var(--font-ui-2); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-soft);
}
.sd-block input, .sd-block textarea {
  width: 100%; font-family: var(--font-ui); font-size: 15px; color: var(--ink);
  background: var(--field); border: 1px solid var(--chrome-line-2); border-radius: var(--r);
  padding: 6px 8px; outline: none;
}
.sd-block input:focus, .sd-block textarea:focus {
  border-color: var(--accent-line); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-ink) 8%, transparent);
}
.sd-block textarea { resize: vertical; min-height: 58px; line-height: 1.45; }
.sd-b-note {
  margin: 4px 0 0; font-family: var(--font-ui-2); font-size: 10.5px;
  line-height: 1.5; color: var(--ink-faint);
}

/* destination — where the words go */
.sd-dest {
  font-family: var(--font-ui-2); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-ink);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--r); padding: 1px 6px; white-space: nowrap;
}
.sd-dest-staff {
  color: var(--ink-faint); background: transparent; border-color: var(--chrome-line-2);
}

.sd-seg { display: inline-flex; flex: none; border: 1px solid var(--chrome-line); border-radius: var(--r); overflow: hidden; background: var(--lift); }
.sd-seg button {
  border: 0; background: transparent; padding: 3px 9px;
  font-family: var(--font-ui-2); font-size: 10px; letter-spacing: .04em;
  color: var(--ink-soft); white-space: nowrap;
}
.sd-seg button + button { border-left: 1px solid var(--chrome-line-2); }
.sd-seg button:hover:not(:disabled):not(.on) { background: var(--lift); color: var(--ink); }
.sd-seg button.on { background: var(--accent); color: var(--on-accent); }
.sd-seg button:disabled { opacity: .38; }

/* ---------------- foot ---------------- */
.sd-foot {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-top: 1px solid var(--chrome-line);
  background: linear-gradient(180deg, var(--chrome), var(--chrome-2));
  border-radius: 0 0 var(--r) var(--r);
}
.sd-hint {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-ui-2); font-size: 10.5px; line-height: 1.4;
  color: var(--ink-faint);
}
.sd-btn {
  flex: none; border: 1px solid var(--chrome-line); background: var(--lift);
  border-radius: 2px; padding: 6px 14px; font-family: var(--font-ui);
  font-size: 14px; color: var(--ink);
}
.sd-btn:hover { border-color: var(--ink-faint); }
.sd-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sd-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); border-color: color-mix(in srgb, var(--accent) 88%, #000); }
.sd-btn:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }

/* ════════════════ PHONE — the same dialog as a bottom sheet ════════════════ */
@media (max-width: 760px) {
  #sdDialog {
    left: 0; right: 0; top: auto; bottom: 0; transform: none;
    width: auto; max-height: 92vh;
    border: 0; border-top: 1px solid var(--chrome-line);
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    animation: sdUp .22s cubic-bezier(.22, .68, .28, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @keyframes sdUp { from { transform: translateY(100%) } to { transform: none } }

  .sd-head { border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 14px 12px 12px 16px; }
  .sd-head h2 { font-size: 19px; }
  .sd-x { padding: 7px; }
  .sd-x svg { width: 17px; height: 17px; }

  .sd-body { padding: 14px 14px 16px; }

  /* Four columns of page preview inside 390px is unreadable, so the
     preview keeps the real grid but drops to the document's own size
     floor and allows a horizontal squeeze rather than overflowing. */
  .sd-pv-sheet { padding: 10px 11px; }
  .sd-pv-grid { column-gap: 6px; }

  .sd-b-head { flex-wrap: wrap; gap: 4px 8px; }
  .sd-block input, .sd-block textarea { font-size: 16px; padding: 9px 10px; }
  .sd-seg button { padding: 5px 10px; font-size: 10.5px; }

  .sd-foot {
    flex-wrap: wrap; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .sd-hint { flex: 1 0 100%; order: 3; margin-top: 2px; }
  .sd-btn { flex: 1 1 0; padding: 11px 14px; font-size: 15px; text-align: center; }
}