/* ============================================================
   PASSAGE — Notifications settings panel.

   House tokens only (--paper, --bone, --ink, --gold, --green, --red,
   --stroke…), no new palette and no raw hex outside a token fallback.

   THE ONE LAYOUT RULE THAT MATTERS HERE

     The matrix is a four-column grid on a desktop and a stack of blocks on
     a phone. It is NOT a <table>: a table with four columns of which one
     holds six lead-time chips cannot be made to fit 390px without a
     horizontal scroll, and this app must never scroll sideways. Below
     640px each row becomes its own card with the two switches side by side
     underneath the label, which is the same shape settingshub.css collapses
     its card grid into.
   ============================================================ */

.ntf-panel { margin-top: 18px; }

/* styles.css only styles `.hint` INSIDE a .panel-title, so a standalone one
   inherits body type — which is how every explanatory line on this panel
   first rendered as full-size copy rather than as annotation, making the
   screen read like prose instead of a control surface. Scoped to this panel
   so nothing else changes weight. */
.ntf-panel .hint {
  font-family: var(--body, 'Hanken Grotesk', sans-serif);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: .02em;
  color: var(--ink-faint, #9B988D);
}

.ntf-loading,
.ntf-error {
  font-size: 13px;
  color: var(--ink-soft, #6A685F);
  padding: 6px 0;
}
.ntf-error .ntf-label { color: var(--red, #8C3B2E); font-weight: 600; margin-bottom: 4px; }

/* ---------- the two honest status lines ---------- */

.ntf-status {
  border: 1px solid var(--stroke-soft, rgba(26, 27, 24, .07));
  background: var(--bone, #F4F0E9);
  border-radius: var(--r-md, 16px);
  padding: 13px 15px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ntf-status-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;                      /* lets the sentence wrap instead of pushing the pill */
}
.ntf-status-row .pill { flex: 0 0 auto; margin-top: 1px; }
.ntf-status-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft, #6A685F);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------- blocks ---------- */

.ntf-block { margin-bottom: 24px; }
.ntf-block-title {
  font-family: var(--disp, 'Bricolage Grotesque', sans-serif);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .02em;
  margin-bottom: 6px;
}
.ntf-block > .hint { display: block; margin-bottom: 12px; max-width: 68ch; line-height: 1.55; }

.ntf-master {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 3px 0;
}
.ntf-master input { margin-top: 3px; accent-color: var(--gold, #A9824C); flex: 0 0 auto; }
.ntf-master-hint { display: block; margin: 2px 0 14px 26px; max-width: 62ch; }

.ntf-email-fields { transition: opacity .2s ease; }
/* Dimmed, not hidden and not disabled: the hour and the recipients stay
   readable and editable while the switch is off, so a firm can set them up
   before turning email on rather than after. */
.ntf-dim { opacity: .5; }

.ntf-actions-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.ntf-actions-inline .hint { max-width: 46ch; line-height: 1.5; }

/* ---------- the matrix ---------- */

.ntf-group { margin-top: 18px; }
.ntf-group:first-of-type { margin-top: 6px; }

.ntf-group-title {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-deep, #8A6634);
  padding: 4px 0 8px;
}

/* One template, shared by the header and every row, so the columns line up
   without a table. minmax(0,…) on the first column is what stops a long
   source string forcing the grid wider than its container. */
.ntf-head,
.ntf-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px 78px minmax(0, 210px);
  gap: 10px;
  align-items: start;
}

.ntf-head {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-faint, #9B988D);
  padding: 0 2px 7px;
  border-bottom: 1px solid var(--stroke-soft, rgba(26, 27, 24, .07));
}
.ntf-head .ntf-check { text-align: center; }

.ntf-row {
  padding: 11px 2px;
  border-bottom: 1px solid var(--stroke-soft, rgba(26, 27, 24, .07));
}
.ntf-row:last-child { border-bottom: 0; }

/* An always-on notice is not a control, so it must not look like one that
   happens to be stuck. */
.ntf-row-fixed { background: rgba(26, 27, 24, .022); border-radius: var(--r-sm, 10px); }

.ntf-cell { min-width: 0; }

.ntf-label {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.ntf-source {
  font-size: 11px;
  color: var(--ink-faint, #9B988D);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ntf-note {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-soft, #6A685F);
  margin-top: 4px;
  max-width: 60ch;
}

/* ---------- switches ---------- */

.ntf-check { display: flex; justify-content: center; }

.ntf-sw {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding-top: 2px;
}
.ntf-sw input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.ntf-sw-face {
  width: 38px; height: 21px;
  border-radius: 99px;
  background: var(--bone-2, #EDE7DC);
  border: 1px solid var(--stroke, rgba(26, 27, 24, .12));
  position: relative;
  transition: background .18s ease, border-color .18s ease;
}
.ntf-sw-face::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--paper, #FBF9F4);
  box-shadow: 0 1px 3px rgba(26, 27, 24, .22);
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.2);
}
.ntf-sw input:checked + .ntf-sw-face {
  background: var(--green, #1E3A33);
  border-color: var(--green, #1E3A33);
}
.ntf-sw input:checked + .ntf-sw-face::after { transform: translateX(17px); }
/* Keyboard focus must be visible: the real checkbox is off-screen, so the
   ring has to be drawn on the face that replaced it. */
.ntf-sw input:focus-visible + .ntf-sw-face {
  outline: 2px solid var(--gold, #A9824C);
  outline-offset: 2px;
}

.ntf-sw-txt {
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-faint, #9B988D);
}
/* The column header already says Email / In app on a wide screen. */
@media (min-width: 641px) { .ntf-sw-txt { display: none; } }

/* ---------- lead-time chips ---------- */

.ntf-leads { display: flex; flex-wrap: wrap; gap: 5px; }

.ntf-lead {
  border: 1px solid var(--stroke, rgba(26, 27, 24, .12));
  background: var(--paper, #FBF9F4);
  color: var(--ink-soft, #6A685F);
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: all .16s ease;
}
.ntf-lead:hover { border-color: var(--gold, #A9824C); color: var(--gold-deep, #8A6634); }
.ntf-lead.on {
  background: rgba(169, 130, 76, .13);
  border-color: var(--gold, #A9824C);
  color: var(--gold-deep, #8A6634);
}
.ntf-lead:focus-visible { outline: 2px solid var(--gold, #A9824C); outline-offset: 2px; }

.ntf-lead-none {
  font-size: 11.5px;
  color: var(--ink-faint, #9B988D);
  font-style: italic;
}

/* ---------- live preview ---------- */

.ntf-preview {
  border: 1px solid var(--stroke-soft, rgba(26, 27, 24, .07));
  border-radius: var(--r-md, 16px);
  padding: 4px 14px 12px;
  background: rgba(255, 255, 255, .5);
}
.ntf-pv-group { margin-top: 12px; }
.ntf-pv-title {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-deep, #8A6634);
  margin-bottom: 5px;
}
.ntf-pv-item {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
  align-items: baseline;
  font-size: 12.5px;
  line-height: 1.6;
  padding: 2px 0;
}
.ntf-pv-when {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 96px;
}
.ntf-pv-when.late { color: var(--red, #8C3B2E); }
.ntf-pv-what { min-width: 0; overflow-wrap: anywhere; }
.ntf-pv-detail { color: var(--ink-soft, #6A685F); min-width: 0; overflow-wrap: anywhere; }

/* ---------- save bar ---------- */

.ntf-save {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--stroke-soft, rgba(26, 27, 24, .07));
}
.ntf-save .btn:disabled { opacity: .45; cursor: default; transform: none; }
.ntf-save .btn:disabled:hover { border-color: var(--stroke, rgba(26, 27, 24, .12)); color: inherit; }

/* ============================================================
   Phone. Four columns cannot fit 390px, so each row becomes a card:
   the label on its own line, the two switches side by side beneath it,
   and the lead chips below those. Nothing overflows sideways.
   ============================================================ */

@media (max-width: 640px) {
  .ntf-head { display: none; }

  /* Two equal columns, and auto-placement does the rest: the label spans
     both, the two switches take one cell each on the next line, and the
     chips span both again. No nth-child arithmetic and no fixed offsets to
     drift when a row gains a note. */
  .ntf-row {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    padding: 13px;
    border: 1px solid var(--stroke-soft, rgba(26, 27, 24, .07));
    border-radius: var(--r-md, 16px);
    background: var(--paper, #FBF9F4);
    margin-bottom: 9px;
  }
  .ntf-row:last-child { border-bottom: 1px solid var(--stroke-soft, rgba(26, 27, 24, .07)); }

  .ntf-what,
  .ntf-lead-cell { grid-column: 1 / -1; }
  .ntf-check { justify-content: flex-start; }

  .ntf-sw { flex-direction: row; align-items: center; gap: 8px; }
  .ntf-sw-txt { font-size: 10.5px; }

  .ntf-status { padding: 12px; }
  .ntf-block > .hint { max-width: none; }
  .ntf-pv-when { min-width: 0; }
  .ntf-save { flex-direction: column; align-items: stretch; }
  .ntf-save .btn { width: 100%; }
  .ntf-save .hint { text-align: center; }
}

/* The firm's own number of days. Dashed, because it opens a question rather
   than setting a value — and so it never reads as a lead time that is
   already switched off. */
.ntf-lead-add { border-style: dashed; color: var(--ink-faint, #9B988D); font-weight: 600; }
.ntf-lead-add:hover { border-style: solid; }