/* Accounts pages, on top of capstones.css. Ink on paper, one amber accent
   (--acc), the system SF stack, no gradients or glass beyond the nav pill. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acc-d); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 980px; }
.skip:focus { left: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cs-nav .navback { color: rgba(255, 255, 255, .72); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.cs-nav .navback:hover { color: #fff; }
.cs-nav .navwho { color: rgba(255, 255, 255, .72); font-size: 13px; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-nav .pill { padding: 8px 16px; font-size: 13px; }
.cs-nav a.brand { text-decoration: none; }
form.inline { display: inline; margin: 0; }
@media (max-width: 720px) {
  .cs-nav .navback, .cs-nav .navwho { display: none; }
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 120px 16px 80px; min-height: 70vh; }
.narrow { max-width: 560px; margin: 0 auto; }
.center { text-align: center; }
.h1 { font-size: var(--d3); line-height: 1.04; font-weight: var(--hw); letter-spacing: var(--tr2); margin: 14px 0 12px; text-wrap: balance; }
.h3 { font-size: var(--d5); line-height: 1.1; font-weight: var(--hw); letter-spacing: var(--tr3); margin: 10px 0 8px; }
.lead { font-size: var(--t2); color: var(--grey); margin: 0 0 24px; }
.muted { color: var(--grey); }
.fine { color: var(--faint); font-size: 13px; margin-top: 28px; }
.stack { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.center .stack { max-width: 340px; margin: 0 auto; }
.wide { width: 100%; padding: 14px 22px; font-size: 15px; }
.notice { background: var(--soft); border-left: 3px solid var(--acc); padding: 12px 16px; border-radius: 10px; margin: 16px 0; }

.head { margin-bottom: 28px; }
.tabs, .subnav { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 16px; }
.tabs a, .subnav a { text-decoration: none; padding: 8px 14px; border-radius: 980px; font-size: 14px; font-weight: 500; color: var(--grey); background: var(--soft); }
.tabs a[aria-current="page"], .subnav a[aria-current="page"] { background: var(--ink); color: #fff; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { border: 1px solid var(--line); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 6px; background: var(--paper); }
.card.owned { background: var(--soft); border-color: transparent; }
.card .actions { margin-top: auto; padding-top: 14px; }
.metric { display: flex; align-items: baseline; gap: 10px; margin: 8px 0; }
.metric .num { font-size: var(--d4); font-weight: var(--hw); letter-spacing: var(--tr3); }
.metric .lbl { color: var(--grey); font-size: 14px; }
.row { min-height: 26px; }
.tag { display: inline-block; font: 600 12px/1 var(--mono); letter-spacing: .04em; padding: 6px 10px; border-radius: 980px; background: var(--paper); border: 1px solid var(--line); color: var(--grey); margin: 2px 0; }
.tag.acc { border-color: var(--acc); color: var(--ink); }
.tag.ok { color: var(--ok); }
.tag.warn { border-color: var(--acc-d); color: var(--ink); background: #fff7e0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.panel { border: 1px solid var(--line); border-radius: 22px; padding: 22px; margin-bottom: 20px; overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: left; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 0 12px 12px 0; }
.tbl td { border-top: 1px solid var(--line); padding: 12px 12px 12px 0; vertical-align: top; }

.field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; }
.field > span, .field legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 6px; }
input, select { font: inherit; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); min-height: 44px; }
.prodrole { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.choices { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.choice { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--ink); }
.choice small { display: block; color: var(--grey); }
.choice input { min-height: 0; }

.dlg { border: 0; border-radius: 22px; padding: 26px; max-width: min(480px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); color: var(--ink); }
.dlg::backdrop { background: rgba(11, 11, 12, .45); }
.dlg.open { box-shadow: none; border: 1px solid var(--line); max-width: none; }
.dlg form { margin: 0; }

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