/* ==========================================================================
   COMPONENTS · ACCOUNT (clean-room p-account) — the private rooms of the
   institution: the member's home, the settings desk, the welcome. These are
   the membership-desk surfaces, and the new vocabulary they need that neither
   the base system nor the three M1 systems already carry. Everything below the
   settings layer reads tokens only; "poor" brick is the destructive pigment,
   the rubric stays identity-only, the primary action stays solid-ink.
   Composes: op-btn, op-field, op-badge, op-dossier, op-empty, op-kicker.
   ITCSS: 06-components. Link AFTER offprint.css and the M1 component CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · THE SIGNED-IN ACCOUNT MENU — the small, consistent extension of the
   nameplate: signed in, the dateline "Sign in" link becomes a quiet menu that
   reaches account · settings · library · the Dossier · billing · sign out.
   It is furniture, not navigation — it never enters the six-destination bar.
   -------------------------------------------------------------------------- */
.op-acctmenu { position: relative; display: inline-flex; }

.op-acctmenu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.15em 0.2em;
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  background: none;
  border: 0;
  cursor: pointer;
  transition: var(--transition-ink);
}
.op-acctmenu__trigger:hover { color: var(--accent); }
.op-acctmenu__trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the member's register mark — a small debossed initial seal */
.op-acctmenu__seal {
  display: inline-grid;
  place-content: center;
  inline-size: 1.6em;
  block-size: 1.6em;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-seal);
  font-family: var(--font-data);
  font-size: 0.72em;
  letter-spacing: 0;
  color: var(--text-secondary);
  background: var(--surface-raised);
}
.op-acctmenu__caret { font-size: 0.7em; opacity: 0.7; }

.op-acctmenu__panel {
  position: absolute;
  top: calc(100% + var(--space-2xs));
  right: 0;
  z-index: var(--z-popover);
  min-inline-size: 15rem;
  margin: 0;
  padding: var(--space-2xs);
  list-style: none;
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-page);
}
.op-acctmenu__panel[hidden] { display: none; }
.op-acctmenu__who {
  padding: var(--space-2xs) var(--space-xs) var(--space-xs);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-2xs);
}
.op-acctmenu__who-name {
  display: block;
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--text);
}
.op-acctmenu__who-meta {
  display: block;
  font-family: var(--font-data);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.op-acctmenu__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0.5em 0.65em;
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-xs);
}
.op-acctmenu__link:hover { background: var(--surface-sunken); color: var(--accent); }
.op-acctmenu__link-note {
  font-family: var(--font-data);
  font-size: var(--text-3xs);
  color: var(--text-muted);
}
.op-acctmenu__sep { height: 1px; background: var(--rule); margin: var(--space-2xs) 0; border: 0; }
.op-acctmenu__link--signout { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   2 · THE MEMBERSHIP RECORD — who they are, set as a printed record card, not
   a profile widget. Furniture labels left, the figures (member no., dates) in
   mono right. A faint letterpress register sits at the corner.
   -------------------------------------------------------------------------- */
.op-record {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-lg);
  align-items: start;
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-lg) var(--space-md);
  box-shadow: var(--shadow-emboss);
}
.op-record__name {
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin-bottom: var(--space-md);
}
/* reset the base dl's auto 1fr grid — rows stack in one column, each row owns
   its own dt|dd split */
.op-record__dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.op-record__row {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-2xs);
  border-top: 1px solid var(--rule);
}
.op-record__row:first-of-type { border-top: 0; }
.op-record__dt {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}
.op-record__dd {
  margin: 0;
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  color: var(--text);
}
.op-record__dd--mono {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-wide);
}
.op-record__dd--verified {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}
.op-record__tag {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--myrtle);
}
/* the corner imprimatur — a faint debossed seal, "MEMBER" */
.op-record__seal {
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.15em;
  inline-size: 6.5rem;
  block-size: 6.5rem;
  border-radius: var(--radius-seal);
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  box-shadow:
    var(--shadow-deboss),
    inset 0 0 0 0.32rem var(--surface-raised),
    inset 0 0 0 calc(0.32rem + 1px) color-mix(in oklab, var(--rule-strong) 70%, transparent);
}
.op-record__seal-kicker {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.op-record__seal-year {
  font-family: var(--font-data);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--text);
}
.op-record__seal-tier {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (max-width: 40rem) {
  .op-record { grid-template-columns: 1fr; gap: var(--space-md); }
  .op-record__seal { justify-self: start; inline-size: 5.5rem; block-size: 5.5rem; }
  .op-record__row { grid-template-columns: 1fr; gap: var(--space-3xs); }
}

/* --------------------------------------------------------------------------
   3 · THE LIBRARY — the offprints a member owns (one-time purchases). A ruled
   contents list, kin to the Dossier but on the leaf (owned, paid-for, kept).
   The escorted Badge (s2) does the score; this only carries identity + receipt.
   -------------------------------------------------------------------------- */
.op-library { list-style: none; margin: 0; padding: 0; }
.op-library__row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-top: 1px solid var(--rule);
}
.op-library__row:last-child { border-bottom: 1px solid var(--rule); }
.op-library__identity { min-width: 0; }
.op-library__title {
  font-family: var(--font-reading);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  color: var(--text);
  text-decoration: none;
}
.op-library__title:hover { color: var(--accent); text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 0.18em; }
.op-library__sub {
  display: block;
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.1em;
}
.op-library__receipt {
  text-align: right;
  font-family: var(--font-data);
  font-size: var(--text-3xs);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-muted);
  white-space: nowrap;
}
.op-library__receipt b {
  display: block;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
@media (max-width: 40rem) {
  .op-library__row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "identity score" "receipt action";
    gap: var(--space-2xs) var(--space-md);
  }
  .op-library__identity { grid-area: identity; }
  .op-library__score    { grid-area: score; justify-self: end; }
  .op-library__receipt  { grid-area: receipt; text-align: left; }
  .op-library__action   { grid-area: action; justify-self: end; }
}

/* --------------------------------------------------------------------------
   4 · THE DOORWAYS — the calm index of rooms the home opens onto. A quiet grid
   of editorial doorways (a title, a one-line, a register arrow that goes rubric
   on hover). Not tiles, not a dashboard — the contents page of the desk.
   -------------------------------------------------------------------------- */
.op-doorways {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}
.op-doorway {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-md);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: var(--transition-ink), transform var(--duration-fast) var(--ease-standard);
}
.op-doorway:hover { transform: translateY(-2px); border-color: var(--rule-strong); box-shadow: var(--shadow-raised); }
.op-doorway:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.op-doorway__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.op-doorway__arrow { font-family: var(--font-data); color: var(--text-muted); transition: var(--transition-ink); }
.op-doorway:hover .op-doorway__arrow { color: var(--accent); }
.op-doorway__note {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   5 · DATA & RIGHTS — the honest GDPR controls, first-class and grave. Export
   is plain and calm; deletion carries the weight it deserves: brick (the band's
   warning pigment, never the rubric, never a glossy red), a real confirmation
   that asks the reader to type their email, and plain language about the loss.
   -------------------------------------------------------------------------- */
.op-rights {
  background: var(--surface-sunken);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-lg) var(--space-md);
}
.op-right { display: grid; gap: var(--space-xs); padding-block: var(--space-md); }
.op-right + .op-right { border-top: 1px solid var(--rule); }
.op-right__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
}
.op-right__title {
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.op-right__body {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-width: 64ch;
}
.op-right__body code,
.op-right__body .op-mono {
  font-family: var(--font-data);
  font-size: 0.92em;
  color: var(--text);
}
/* the grave one — a brick left keyline marks the destructive room */
.op-right--grave {
  border-left: 3px solid var(--brick);
  padding-left: var(--space-md);
  margin-left: calc(-1 * var(--space-md));
}

/* a destructive button — brick, plainly. Never the rubric, never dressed up. */
.op-btn--danger {
  background: var(--surface-raised);
  color: var(--brick);
  border-color: var(--brick);
}
.op-btn--danger:hover { background: var(--critical-wash); border-color: var(--brick); }
.op-btn--danger-solid {
  background: var(--brick);
  color: var(--leaf);
  border-color: var(--brick);
}
.op-btn--danger-solid:hover { background: color-mix(in oklab, var(--brick) 86%, var(--ink)); border-color: transparent; }

/* the confirmation panel — opens in place, lists what is lost, gates the
   destructive button behind an acknowledgement + the typed email */
.op-confirm {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  background: var(--surface-raised);
  border: 1px solid var(--brick);
  border-radius: var(--radius-sm);
}
.op-confirm[hidden] { display: none; }
.op-confirm__label {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: var(--space-xs);
}
.op-confirm__loss {
  margin: 0 0 var(--space-md);
  padding-left: 1.2em;
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}
.op-confirm__loss li { margin-block: var(--space-3xs); }
.op-confirm__ack {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  color: var(--text);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-sm);
}
.op-confirm__ack input { inline-size: auto; width: auto; margin-top: 0.25em; }
.op-confirm__type { display: grid; gap: var(--space-3xs); max-width: 24rem; margin-bottom: var(--space-md); }
.op-confirm__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* --------------------------------------------------------------------------
   6 · THE FLASH — a page-level acknowledgement (settings save / error). A
   ruled band with a band-ink left keyline; success is myrtle, error is brick.
   Never a toast, never a colour-only signal — it carries a word and a rule.
   -------------------------------------------------------------------------- */
.op-flash {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm) var(--space-md);
  align-items: start;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
}
.op-flash__mark {
  font-family: var(--font-data);
  font-size: var(--text-md);
  line-height: 1;
}
.op-flash__title {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.op-flash__body {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin-top: 0.15em;
}
.op-flash__body a { color: var(--text); }
.op-flash--success { border-left-color: var(--myrtle); }
.op-flash--success .op-flash__mark,
.op-flash--success .op-flash__title { color: var(--myrtle); }
.op-flash--error { border-left-color: var(--brick); }
.op-flash--error .op-flash__mark,
.op-flash--error .op-flash__title { color: var(--brick); }
.op-flash__list { margin: var(--space-3xs) 0 0; padding-left: 1.2em; }

/* --------------------------------------------------------------------------
   7 · WELCOME — the first step. One warm push, not a wizard: a hero card with
   a single solid-ink action, two quiet alternatives beneath, set on the leaf.
   -------------------------------------------------------------------------- */
.op-firststep {
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--accent);   /* one rubric register, the welcome mark */
  border-radius: var(--radius-sm);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-raised);
}
.op-firststep__title {
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text);
  margin-bottom: var(--space-sm);
  max-width: 22ch;
}
.op-firststep__lede {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  max-width: 52ch;
  margin-bottom: var(--space-lg);
}
.op-firststep__lede em { font-style: italic; color: var(--text); }
.op-firststep__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.op-firststep__alt {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.op-firststep__alt a { color: var(--text); }

/* --------------------------------------------------------------------------
   8 · THE OPERATOR PREVIEW STRIP — scaffolding, NOT part of the product. It
   lets the operator flip between the required states (member-with-holdings vs
   new-member; pristine / saved / error) on one openable file. Drawn as an
   obvious dashed lab strip so it never reads as chrome.
   -------------------------------------------------------------------------- */
.op-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--surface-sunken);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-sm);
}
.op-preview__label {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.op-preview__opts { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.op-preview__btn {
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  padding: 0.3em 0.7em;
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  cursor: pointer;
}
.op-preview__btn[aria-pressed="true"] { background: var(--surface-inverse); color: var(--text-inverse); border-color: var(--surface-inverse); }
@media (max-width: 40rem) {
  .op-preview { flex-direction: column; align-items: stretch; gap: var(--space-2xs); }
  .op-preview__opts { width: 100%; }
  .op-preview__btn { flex: 1 1 auto; text-align: center; }
}

/* --------------------------------------------------------------------------
   9 · DESK SECTIONS — the rhythm furniture shared by the three surfaces: a
   ruled section header (kicker + serif title + an optional count/aside).
   -------------------------------------------------------------------------- */
.op-desk { display: grid; gap: var(--space-md); }
.op-desk__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--rule-strong);
}
.op-desk__title {
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.op-desk__aside {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.op-desk__aside .op-mono { font-family: var(--font-data); }

/* the status strip — a one-line membership/billing glance, calm, no upsell */
.op-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.op-status__line { font-family: var(--font-furniture); font-size: var(--text-sm); color: var(--text-secondary); }
.op-status__line b { color: var(--text); font-weight: var(--weight-semibold); }

/* the page shell width for these desk surfaces */
.op-account-main { padding-block: var(--space-lg) var(--space-2xl); }