/* ============================================================
   NIKA SETTINGS SURFACE  --  B-5 SKELETON, 2026-07-30
   MARKER: B5-SKELETON-20260730-MARKER

   Loaded ON TOP of nika-tokens.css + shell.css by every
   /account/* page. Settings nav, form rows, toggles,
   the effort ladder, plan/usage bars.
   ============================================================ */

/* ---- settings two-column ---------------------------------------- */
.nk-set { display: grid; grid-template-columns: 210px 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .nk-set { grid-template-columns: 1fr; gap: 18px; } }

.nk-set-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 20px; }
.nk-set-nav a {
  padding: 8px 12px; border-radius: var(--nk-radius-sm);
  color: var(--nk-ink-soft); font-size: 14.5px; font-weight: 500;
  display: flex; align-items: center; gap: 10px;  /* UISNAG-ST2-20260831-MARKER: icon row */
}
.nk-set-nav .nk-nav-ic { flex: 0 0 auto; }  /* UISNAG-ST2-20260831-MARKER: stroke=currentColor tracks is-active/hover */
.nk-set-nav a:hover { background: var(--nk-cream-2); text-decoration: none; }
.nk-set-nav a.is-active { background: var(--nk-azure-soft); color: var(--nk-azure-deep); font-weight: 600; }
@media (max-width: 860px) {
  .nk-set-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
}

/* ---- setting rows ------------------------------------------------ */
.nk-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--nk-border-soft);
}
.nk-row:last-child { border-bottom: 0; padding-bottom: 0; }
.nk-row-txt { min-width: 0; }
.nk-row-txt .nk-row-title { font-size: 14.5px; font-weight: 600; color: var(--nk-ink); }
.nk-row-txt .nk-row-sub { font-size: 13px; color: var(--nk-muted); margin: 3px 0 0; }
.nk-row-ctl { flex: none; display: flex; align-items: center; gap: 10px; }
.nk-row-ctl select { min-width: 190px; }

.nk-kv { display: grid; grid-template-columns: 190px 1fr; gap: 8px 16px; font-size: 14.5px; }
.nk-kv dt { color: var(--nk-muted); }
.nk-kv dd { margin: 0; color: var(--nk-ink); }

/* ---- toggle ------------------------------------------------------ */
.nk-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.nk-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.nk-toggle .nk-track {
  width: 42px; height: 24px; border-radius: 999px; background: var(--nk-border);
  position: relative; transition: background .15s ease; flex: none;
}
.nk-toggle .nk-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--nk-white); box-shadow: var(--nk-shadow-sm);
  transition: transform .15s ease;
}
.nk-toggle input:checked + .nk-track { background: var(--nk-azure-deep); }
.nk-toggle input:checked + .nk-track::after { transform: translateX(18px); }
.nk-toggle input:disabled + .nk-track { opacity: .55; }
.nk-toggle .nk-state { font-size: 12.5px; font-weight: 600; color: var(--nk-muted); min-width: 26px; }

/* ---- effort ladder ---------------------------------------------- */
.nk-effort { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 4px 0 2px; }
@media (max-width: 700px) { .nk-effort { grid-template-columns: 1fr 1fr; } }
.nk-rung {
  border: 1.5px solid var(--nk-border); border-radius: var(--nk-radius-sm);
  padding: 12px 12px 11px; background: var(--nk-white); cursor: pointer; display: block;
}
.nk-rung input { position: absolute; opacity: 0; width: 0; height: 0; }
.nk-rung .nk-rung-name { font-size: 14px; font-weight: 700; color: var(--nk-ink); }
.nk-rung .nk-rung-mode { font-size: 11.5px; color: var(--nk-muted-soft); margin-top: 2px; }
.nk-rung .nk-rung-tag { display: inline-block; margin-top: 8px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; }
.nk-rung.is-selected { border-color: var(--nk-azure-deep); background: var(--nk-azure-soft); }
.nk-rung.is-selected .nk-rung-tag { color: var(--nk-azure-deep); }
/* Above the plan ceiling: shown, labelled, never hidden and never
   silently capped -- 0716-B access-based ruling. */
.nk-rung.is-gated { background: var(--nk-cream-2); border-style: dashed; }
.nk-rung.is-gated .nk-rung-name { color: var(--nk-muted); }
.nk-rung.is-gated .nk-rung-tag { color: var(--nk-cerise-deep); }

/* ---- meters ------------------------------------------------------ */
.nk-meter { margin: 12px 0; }
.nk-meter-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--nk-muted); margin-bottom: 5px; }
.nk-meter-bar { height: 8px; border-radius: 999px; background: var(--nk-cream-2); overflow: hidden; }
.nk-meter-fill { height: 100%; background: var(--nk-azure); border-radius: 999px; }
.nk-meter-fill.is-high { background: var(--nk-cerise); }

.nk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 760px) { .nk-stats { grid-template-columns: 1fr 1fr; } }
.nk-stat { border: 1px solid var(--nk-border); border-radius: var(--nk-radius-sm); padding: 14px; background: var(--nk-white); }
.nk-stat .nk-stat-label { font-size: 12px; color: var(--nk-muted); }
.nk-stat .nk-stat-value { font-size: 22px; font-weight: 700; margin-top: 2px; }

/* ---- tables ------------------------------------------------------ */
.nk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nk-table th, .nk-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--nk-border-soft); }
.nk-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--nk-muted); }

/* ---- placeholder block (skeleton surfaces) ----------------------- */
.nk-placeholder {
  border: 1px dashed var(--nk-border); border-radius: var(--nk-radius-sm);
  padding: 16px; background: var(--nk-cream-2); color: var(--nk-muted); font-size: 13.5px;
}
.nk-placeholder strong { color: var(--nk-ink-soft); }

/* ---- legal / long-form copy -------------------------------------- */
.nk-prose { max-width: 720px; }
.nk-prose h2 { margin: 28px 0 10px; }
.nk-prose p, .nk-prose li { font-size: 15px; color: var(--nk-ink-soft); }
.nk-prose ul { padding-left: 20px; }

/* ============================================================
   ACCS-ST1-20260826-MARKER -- ONE account shell (RULINGS SM C1).
   (a) rail group labels for account/_shell_nav.html;
   (b) legacy account content rules ported from accounts.css onto
       --nk-* tokens. accounts.css stays on disk, unreferenced
       (no deletions without [T]'s nod).
   Palette per SM2: cream canvas (shell), #FCFCFB card lift,
   NO Azure section-wash on account surfaces. Cerise only on the
   paid boundary (pay CTAs), per the token doctrine.
   ============================================================ */
.nk-set-group { font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--nk-muted-soft); padding: 16px 12px 4px; }
.nk-set-nav .nk-set-group:first-child { padding-top: 2px; }

/* legacy page wrappers (were standalone <main>) */
.acct-main { max-width: 1080px; }
.bc-main { max-width: 560px; }
.acct-head { display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-bottom: 8px; }
.acct-head h1 { margin: 0; }
.acct-lead, .muted { color: var(--nk-muted); }

/* panels / cards */
.panel, .acct-card { background: #FCFCFB; border: 1px solid var(--nk-border);
  border-radius: var(--nk-radius); box-shadow: var(--nk-shadow-sm);
  padding: 22px 24px; margin-bottom: 18px; }
.panel--quiet { background: var(--nk-cream-2); box-shadow: none; }

/* metric cards */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin: 8px 0 4px; }
.metric-card { background: #FCFCFB; border: 1px solid var(--nk-border);
  border-radius: var(--nk-radius-sm); padding: 14px 16px; position: relative; }
.metric-card::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px; border-radius: 3px; background: var(--nk-azure-tint); }
.metric-label { font-size: 12px; color: var(--nk-muted); margin: 0 0 4px; padding-left: 8px; }
.metric-value { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; padding-left: 8px; }

/* tables */
.table-wrap, .table-wrapper { overflow-x: auto; border: 1px solid var(--nk-border);
  border-radius: var(--nk-radius-sm); }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; font-weight: 600; font-size: 12px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--nk-muted); background: var(--nk-cream-2);
  padding: 10px 14px; border-bottom: 1px solid var(--nk-border); }
.data-table td { padding: 11px 14px; border-bottom: 1px solid var(--nk-border); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--nk-cream-2); }

/* status + notices */
.status-success, .status-error, .status-warning, .badge { display: inline-block;
  font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.status-success { background: #eef6ef; color: var(--nk-ok); }
.status-warning { background: #fbf3e3; color: var(--nk-warn); }
.status-error   { background: #fbeded; color: var(--nk-err); }
.notice { border: 1px solid var(--nk-border); border-left: 3px solid var(--nk-azure);
  background: #FCFCFB; border-radius: var(--nk-radius-sm); padding: 12px 16px; margin: 8px 0; }

/* buttons (legacy classnames, house tokens) */
.button-primary { display: inline-block; background: var(--nk-azure-deep); color: #fff;
  font-weight: 600; font-size: 14px; padding: 10px 18px; border: 0;
  border-radius: var(--nk-radius-sm); cursor: pointer; text-decoration: none; }
.button-primary:hover { background: var(--nk-azure); color: #fff; }
.button-ghost { display: inline-block; background: #FCFCFB; color: var(--nk-ink);
  font-weight: 600; font-size: 14px; padding: 9px 16px; border: 1px solid var(--nk-border);
  border-radius: var(--nk-radius-sm); cursor: pointer; text-decoration: none; }
.button-ghost:hover { background: var(--nk-cream-2); }

/* usage bars */
.usage-row { margin: 14px 0; }
.usage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.usage-sub { color: var(--nk-muted); font-size: 13px; }
.bar { height: 8px; background: var(--nk-cream-2); border-radius: 6px; overflow: hidden; margin-top: 6px; }
.bar > span { display: block; height: 100%; background: var(--nk-azure); border-radius: 6px; }

/* buy-credits + checkout */
.bc-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.bc-head h1 { font-size: 22px; margin: 0; }
.bc-lead { color: var(--nk-muted); font-size: 14px; line-height: 1.5; margin: 6px 0 8px; }
.bc-bal { font-size: 13px; color: var(--nk-muted); }
.bc-bal strong { color: var(--nk-ink); }
.bc-opts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 16px 0; }
.bc-opt { border: 1.5px solid var(--nk-border); border-radius: var(--nk-radius);
  padding: 14px 10px; cursor: pointer; text-align: center; background: #FCFCFB; }
.bc-opt:hover { border-color: var(--nk-azure-tint); }
.bc-opt.sel { border-color: var(--nk-azure-deep); box-shadow: 0 0 0 1px var(--nk-azure-deep) inset; }
.bc-amt { font-size: 18px; font-weight: 700; color: var(--nk-ink); }
.bc-per { font-size: 12px; font-weight: 500; color: var(--nk-muted); }
.bc-tag { font-size: 11px; color: var(--nk-muted); margin-top: 3px; line-height: 1.3; }
.bc-summary { display: flex; justify-content: space-between; font-size: 15px;
  color: var(--nk-muted); border-top: 1px solid var(--nk-border);
  padding-top: 14px; margin-bottom: 14px; }
.bc-summary strong { color: var(--nk-ink); }
.bc-pay, .co-pay { display: block; width: 100%; text-align: center; background: var(--nk-cerise);
  color: #fff; font-weight: 600; font-size: 15px; padding: 13px; border: 0;
  border-radius: var(--nk-radius-sm); text-decoration: none; cursor: pointer; }
.bc-pay:hover, .co-pay:hover { background: var(--nk-cerise-deep); }
.bc-note { font-size: 12px; color: var(--nk-muted); margin-top: 12px; text-align: center; }
.co-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.co-table th, .co-table td { text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--nk-border); }
.co-table th:last-child, .co-table td:last-child { text-align: right; }
.co-table tfoot td { border-bottom: 0; }
.co-form label { display: block; font-weight: 600; font-size: 14px; }
.co-form label input:not([type=checkbox]):not([type=radio]) { display: block; width: 100%;
  margin-top: 4px; padding: 9px 10px; border: 1px solid var(--nk-border);
  border-radius: var(--nk-radius-sm); font: inherit; font-weight: 400; background: #fff; }
.co-form label.row { font-weight: 400; }

/* account forms, report helpers, utilities */
.acct-form label { display: block; margin: 12px 0; font-weight: 600; font-size: 14px;
  color: var(--nk-ink-soft); }
.acct-form input[type="text"], .acct-form input[type="url"], .acct-form select,
.acct-form textarea { width: 100%; font: inherit; font-size: 14px; font-weight: 400;
  color: var(--nk-ink); background: #fff; border: 1px solid var(--nk-border);
  border-radius: var(--nk-radius-sm); padding: 9px 12px; margin-top: 4px; }
.acct-form input:focus, .acct-form select:focus, .acct-form textarea:focus {
  outline: none; border-color: var(--nk-azure); }
.report-share { width: 260px; max-width: 100%; font-size: 12px; padding: 6px 8px;
  border: 1px solid var(--nk-border); border-radius: 6px; color: var(--nk-ink); }
.report-revoke { margin: 0; }
.report-revoke label { font-size: 11px; display: block; margin-bottom: 4px; }
/* UISNAG-ST6-20260831-MARKER: Reports page -- Revoke/Delete button pair,
   click-to-copy share fields, section spacing. Additive only. */
.report-actions { display: flex; gap: 6px; }
.nk-copyfield { display: inline-flex; align-items: center; gap: 8px; }
.nk-copied-flag { font-size: 11px; font-weight: 600; color: var(--nk-ok); opacity: 0; transition: opacity .15s ease; }
.nk-copied-flag.is-visible { opacity: 1; }
.nk-section-gap { margin-top: 40px; }  /* matches .nk-set-body .panel's 40px section rhythm */
.stack-sm > * + * { margin-top: 8px; }
.stack-md > * + * { margin-top: 16px; }
.row { display: flex; align-items: center; gap: 10px; }
/* =========================================================================
   ACCIA-ST3-CSS-20260831-MARKER -- hub v2 layout laws (snag :384-385) +
   the R-5 buy-credits badge. NO chartreuse; NO underlined buttons, ever.
   Palette: SM M2 restrained account face (cream / #FCFCFB lifts).
   ========================================================================= */
.nk-set-body .panel { margin-bottom: 40px; }                 /* vertical space BETWEEN sections */
.nk-set-body .panel,
.nk-set-body .nk-card { width: 100%; max-width: none; margin-right: 24px; }  /* fill wide, right margin */
.nk-set-body .table-wrap table { width: 100%; }

.nk-buybadge {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #FCFCFB; border: 1px solid #D87768; border-radius: 12px;
  padding: 14px 18px; margin: 18px 0;
}
.nk-buybadge-txt { font-weight: 600; }
.nk-buybadge-btn,
.nk-buybadge-btn:hover, .nk-buybadge-btn:visited {
  background: #D87768; color: #fff; border-radius: 999px; padding: 8px 18px;
  text-decoration: none; /* R-5: no button underlines, ever */
  display: inline-block; white-space: nowrap;
}
.nk-usagebar { margin: 14px 0; }
.nk-usagebar-head { display: flex; justify-content: space-between; }
.nk-usagebar-track { background: #EDF2F4; border-radius: 999px; height: 8px; margin-top: 6px; }
.nk-usagebar-fill { background: #D87768; border-radius: 999px; height: 8px; }
.nk-usage-resets { margin-top: 12px; font-size: 12.5px; color: var(--nk-muted); }  /* UISNAG-ST4-20260831-MARKER: [T] snag -- more space above the Resets line */
.nk-pager a { text-decoration: none; margin: 0 10px; }
/* =========================================================================
   ACCIA-ST5-CSS-20260831-MARKER -- chrome snags (:292-294, :810-812, :670-677)
   ⚠ VERIFY on [T]'s walk: the side-title clearance + logout rules target the
   global shell; if /chat loads a different sheet the pair rides there too.
   ========================================================================= */
.nk-logout-btn { outline: 0; border: 0; }                    /* snag :294 */
.nk-logout-btn:focus-visible { outline: 2px solid #D87768; } /* keyboard a11y kept */
.nk-set-nav .nk-set-group:first-child { margin-top: 44px; }  /* snag :293: title clear of the toggle */
.acct-main .table-wrap table, .acct-main .nk-table { width: 100%; }  /* snag :810-811 */
.nk-mem-edit { display: flex; gap: 8px; }
.nk-mem-edit input[type=text] { flex: 1; }
.bc-bal { font-size: inherit; }                              /* snag :670 */
.bc-opts, .bc-lead, .bc-bal { width: 100%; }                 /* snag :671 full-width lines */
.bc-pay, .bc-pay:hover, .bc-pay:visited {                    /* R-5: palette + no underline */
  background: #D87768; color: #fff; text-decoration: none;
}

/* COPY-ST4-20260831-MARKER: nk-password.js injects these two classes
   sitewide; zero CSS existed for either anywhere in the codebase before
   this stage (grep-confirmed). Honest-fallback-literal idiom -- same
   pattern style.css already uses for --primary -- so this ONE block is
   safe to append verbatim to every sheet that loads a page with a
   .nk-pw-toggle/.nk-pw-generate field, regardless of whether that sheet
   defines the --nk-* tokens itself. */
.nk-pw-eye { display:inline-block; margin-top:6px; padding:4px 10px; font-size:12.5px;
  font-weight:600; color: var(--nk-azure-deep, #1b4e75); background: transparent;
  border: 1px solid var(--nk-border, #e8e5de); border-radius: 6px; cursor: pointer; }
.nk-pw-eye:hover { background: var(--nk-cream-2, #f4f2ee); text-decoration: none; }
.nk-pw-generate { display:inline-block; margin-top:6px; padding:6px 12px; font-size:13px;
  font-weight:600; color: var(--nk-azure-deep, #1b4e75); background: transparent;
  border: 1px solid var(--nk-border, #e8e5de); border-radius: 6px; cursor: pointer; }
.nk-pw-generate:hover { background: var(--nk-cream-2, #f4f2ee); text-decoration: none; }