/* updatemysite.now — component classes for server-rendered HTML.
   Every rule here is a translation of a component in the design system's components/ directory.
   No new values are introduced: colours, sizes, borders and motion all come from the tokens. */

/* --- Button (core/Button.jsx) --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-h);padding:0 var(--pad-control-x);border:1px solid transparent;border-radius:0;font-family:var(--font-ui);font-size:var(--text-sm);font-weight:var(--weight-medium);letter-spacing:.01em;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;transition:var(--transition-control)}
.btn--sm{height:var(--control-h-sm);padding:0 10px;font-size:var(--text-xs);gap:6px}
.btn--lg{height:var(--control-h-lg);padding:0 18px;font-size:var(--text-base)}
.btn--block{display:flex;width:100%}
.btn--primary{background:var(--ink-900);color:var(--text-inverse);border-color:var(--ink-900)}
.btn--primary:hover{background:var(--ink-700);border-color:var(--ink-700);color:var(--text-inverse)}
.btn--accent{background:var(--surface-accent);color:var(--text-on-accent);border-color:var(--olive-700)}
.btn--accent:hover{background:var(--olive-700);color:var(--text-on-accent)}
.btn--secondary{background:var(--white);color:var(--text-primary);border-color:var(--border-strong)}
.btn--secondary:hover{background:var(--gray-100);color:var(--text-primary)}
.btn--quiet{background:transparent;color:var(--text-primary);border-color:var(--border-hairline)}
.btn--quiet:hover{background:var(--gray-100);border-color:var(--gray-300);color:var(--text-primary)}
.btn--ghost{background:transparent;color:var(--text-secondary);border-color:transparent}
.btn--ghost:hover{background:var(--gray-100);color:var(--text-primary)}
.btn--danger{background:var(--white);color:var(--status-error-fg);border-color:var(--oxide-600)}
.btn--danger:hover{background:var(--oxide-100);color:var(--status-error-fg)}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* --- Badge (core/Badge.jsx) ----------------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 7px;border:1px solid var(--gray-200);background:var(--gray-100);color:var(--gray-500);font-family:var(--font-mono);font-size:var(--text-3xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-label);text-transform:uppercase;white-space:nowrap}
.badge__dot{width:5px;height:5px;flex:0 0 auto;background:var(--gray-400)}
.badge--ok{background:var(--status-ok-bg);color:var(--status-ok-fg);border-color:var(--olive-300)}
.badge--ok .badge__dot{background:var(--status-ok-dot)}
.badge--info{background:var(--status-info-bg);color:var(--status-info-fg);border-color:var(--blue-300)}
.badge--info .badge__dot{background:var(--status-info-dot)}
.badge--warn{background:var(--status-warn-bg);color:var(--status-warn-fg);border-color:var(--ochre-300)}
.badge--warn .badge__dot{background:var(--status-warn-dot)}
.badge--error{background:var(--status-error-bg);color:var(--status-error-fg);border-color:var(--oxide-300)}
.badge--error .badge__dot{background:var(--status-error-dot)}
.badge--ink{background:var(--ink-900);color:var(--text-inverse);border-color:var(--ink-900)}
.badge--ink .badge__dot{background:var(--gray-300)}

/* --- Tag (core/Tag.jsx) — named .chip because tag/ is a JTE directory ----------------------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:var(--control-h-sm);padding:0 var(--pad-control-x-sm);background:var(--white);color:var(--text-primary);border:1px solid var(--border-hairline);font-family:var(--font-ui);font-size:var(--text-xs);white-space:nowrap}
.chip--selected{background:var(--surface-selected);border-color:var(--gray-400)}
.chip__icon{color:var(--text-muted)}

/* --- Card (core/Card.jsx) ------------------------------------------------------------------- */
.card{background:var(--surface-card);color:var(--text-primary);border:1px solid var(--border-hairline)}
.card--sunken{background:var(--surface-sunken)}
.card--inverse{background:var(--surface-inverse);color:var(--text-inverse);border-color:rgba(255,255,255,.16)}
.card__header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);padding:12px var(--pad-card);border-bottom:1px solid var(--border-hairline)}
.card--inverse .card__header,.card--inverse .card__footer{border-color:rgba(255,255,255,.16)}
.card__heading{display:flex;flex-direction:column;gap:2px}
.card__label{font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary)}
.card--inverse .card__label{color:var(--gray-300)}
.card__title{font-family:var(--font-display);font-size:var(--text-md);font-weight:var(--weight-regular);margin:0}
.card__actions{display:flex;align-items:center;gap:var(--space-2)}
.card__body{padding:var(--pad-card)}
.card__body--flush{padding:0}
.card__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:10px var(--pad-card);border-top:1px solid var(--border-hairline)}

/* --- Tabs (navigation/Tabs.jsx) — raised folder tabs ---------------------------------------- */
.tabs{display:flex;align-items:flex-end;gap:2px;padding-top:3px;border-bottom:1px solid var(--border-hairline)}
.tab{display:inline-flex;align-items:center;gap:6px;height:calc(var(--control-h) - 2px);margin-bottom:-1px;padding:0 20px;border:1px solid var(--border-hairline);background:var(--surface-page);color:var(--text-secondary);font-family:var(--font-ui);font-size:var(--text-sm);line-height:1;text-decoration:none;cursor:pointer;transition:var(--transition-control)}
.tab:hover{background:var(--gray-100);color:var(--text-primary);text-decoration:none}
.tab--active{height:calc(var(--control-h) + 1px);background:var(--surface-card);color:var(--text-primary);font-weight:var(--weight-medium);border-bottom-color:var(--surface-card);box-shadow:inset 0 2px 0 0 var(--ink-900)}
.tab--active:hover{background:var(--surface-card)}
.tab__count{display:inline-flex;align-items:center;position:relative;top:.5px;font-family:var(--font-mono);font-size:var(--text-3xs);line-height:1;font-variant-numeric:tabular-nums;opacity:.6}

/* --- Fields (forms/Input.jsx, Textarea.jsx, Select.jsx) ------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary)}
.field__control{display:flex;align-items:center;gap:8px;height:var(--control-h);padding:0 var(--pad-control-x);background:var(--white);border:1px solid var(--border-hairline);transition:var(--transition-control)}
.field__control--area{height:auto;align-items:stretch;padding:10px var(--pad-control-x)}
.field__control:focus-within{border-color:var(--border-focus);box-shadow:inset 0 0 0 1px var(--border-focus)}
.field--error .field__control{border-color:var(--oxide-600)}
.field__input{flex:1;min-width:0;padding:0;border:0;outline:none;background:transparent;font-family:var(--font-ui);font-size:var(--text-sm);color:var(--text-primary)}
/* The control draws the focus state (:focus-within), so suppress the global :focus-visible ring on the inner input. */
.field__input:focus-visible{box-shadow:none}
.field__input--mono{font-family:var(--font-mono)}
.field__input--area{resize:vertical;min-height:88px;line-height:var(--leading-normal)}
.field__icon{color:var(--text-muted)}
.field__suffix{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted)}
.field__hint{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--text-secondary)}
.field__hint--error{color:var(--status-error-fg)}
.field select.field__input{appearance:none;cursor:pointer}

/* --- App shell (ui_kits/console/AppShell.jsx) ----------------------------------------------- */
.shell{display:grid;grid-template-columns:var(--rail-w) 1fr;grid-template-rows:var(--topbar-h) 1fr var(--statusbar-h);min-height:100vh}
.shell__topbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:0 var(--space-5);background:var(--white);border-bottom:1px solid var(--border-hairline)}
.shell__brand{font-family:var(--font-display);font-size:var(--text-md);letter-spacing:var(--tracking-tight);text-decoration:none;color:var(--text-primary)}
.shell__brand:hover{color:var(--text-primary)}
.shell__rail{display:flex;flex-direction:column;gap:2px;padding:var(--space-4) 0;background:var(--surface-card);border-right:1px solid var(--border-hairline)}
.rail__group{padding:var(--space-4) var(--space-5) 6px;font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary)}
.rail__item{display:flex;align-items:center;gap:10px;height:32px;padding:0 var(--space-5);color:var(--text-secondary);font-size:var(--text-sm);text-decoration:none;transition:var(--transition-control)}
.rail__item:hover{background:var(--surface-hover);color:var(--text-primary);text-decoration:none}
.rail__item--active{background:var(--surface-selected);color:var(--text-primary);box-shadow:inset 2px 0 0 0 var(--ink-900)}
.shell__main{padding:var(--space-6) var(--space-7);background:var(--surface-page);overflow:auto}
.shell__status{grid-column:1/-1;display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-5);background:var(--white);border-top:1px solid var(--border-hairline);font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary)}
.shell__status .sep{color:var(--gray-300)}

/* --- Ledger table --------------------------------------------------------------------------- */
.ledger{width:100%;font-size:var(--text-sm)}
.ledger th{padding:8px var(--space-4);border-bottom:1px solid var(--border-strong);font-family:var(--font-mono);font-size:var(--text-3xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary);text-align:left}
.ledger td{padding:11px var(--space-4);border-bottom:1px solid var(--border-subtle);vertical-align:middle}
.ledger tbody tr:hover{background:var(--gray-50)}
.ledger .num{font-family:var(--font-mono);font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.ledger .right{text-align:right}
.ledger-scroll{overflow-x:auto}

/* --- Record stamp motif --------------------------------------------------------------------- */
.stamp{display:inline-flex;align-items:stretch;border:1px solid var(--ink-900);font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:var(--tracking-label);text-transform:uppercase}
.stamp__key{padding:3px 7px;background:var(--ink-900);color:var(--text-inverse)}
.stamp__val{padding:3px 7px;font-variant-numeric:tabular-nums}

/* --- Diff pair ------------------------------------------------------------------------------ */
.diff{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--leading-normal)}
.diff__line{display:flex;gap:14px;padding:2px var(--space-4);white-space:pre-wrap}
.diff__no{width:24px;flex:0 0 auto;text-align:right;color:var(--text-muted);font-variant-numeric:tabular-nums}
.diff__line--del{background:var(--diff-del-bg);color:var(--diff-del-fg);box-shadow:inset 2px 0 0 0 var(--diff-del-gutter)}
.diff__line--add{background:var(--diff-add-bg);color:var(--diff-add-fg);box-shadow:inset 2px 0 0 0 var(--diff-add-gutter)}
.diff__line--ctx{color:var(--text-secondary)}

/* --- Toast (feedback/Toast.jsx), rendered inline after a post ------------------------------- */
.toast{display:flex;align-items:center;gap:var(--space-3);padding:10px var(--space-4);background:var(--ink-900);color:var(--text-inverse);font-size:var(--text-sm);box-shadow:var(--shadow-overlay)}
.toast .num{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--gray-300);font-variant-numeric:tabular-nums}

/* --- Notice (feedback/Notice.jsx), a status that stays on the document ---------------------- */
.notice{display:flex;align-items:flex-start;gap:var(--space-2);padding:10px var(--space-4);background:var(--surface-sunken);border:1px solid var(--border-hairline);color:var(--text-primary)}
.notice__dot{width:5px;height:5px;flex:0 0 auto;margin-top:7px;background:var(--gray-400)}
.notice__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.notice__label{font-family:var(--font-mono);font-size:var(--text-3xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-label);text-transform:uppercase}
.notice__message{font-family:var(--font-ui);font-size:var(--text-sm);line-height:var(--leading-normal)}
.notice--ok{background:var(--status-ok-bg);border-color:var(--olive-300);color:var(--status-ok-fg)}
.notice--ok .notice__dot{background:var(--status-ok-dot)}
.notice--info{background:var(--status-info-bg);border-color:var(--blue-300);color:var(--status-info-fg)}
.notice--info .notice__dot{background:var(--status-info-dot)}
.notice--warn{background:var(--status-warn-bg);border-color:var(--ochre-300);color:var(--status-warn-fg)}
.notice--warn .notice__dot{background:var(--status-warn-dot)}
.notice--error{background:var(--status-error-bg);border-color:var(--oxide-300);color:var(--status-error-fg)}
.notice--error .notice__dot{background:var(--status-error-dot)}

/* --- Small layout helpers used by the pages ------------------------------------------------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}
.page-head h1{font-size:var(--text-xl)}
.page-head p{margin-top:6px;color:var(--text-secondary);font-size:var(--text-sm);max-width:var(--layout-prose)}
.stack{display:flex;flex-direction:column;gap:var(--space-5)}
.stack--tight{gap:var(--space-3)}
.row{display:flex;align-items:center;gap:var(--space-3)}
.row--end{justify-content:flex-end}
.grid-2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--space-5);align-items:start}
.muted{color:var(--text-secondary)}
.icon-sprite{position:absolute;overflow:hidden}
.icon{display:inline-block;flex:0 0 auto;vertical-align:middle}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}
@media (max-width:700px){
 .shell{grid-template-columns:1fr;grid-template-rows:var(--topbar-h) auto 1fr var(--statusbar-h)}
 .shell__rail{grid-column:1;flex-direction:row;align-items:center;gap:0;padding:0;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border-hairline)}
 .rail__group{padding:10px var(--space-4);flex:0 0 auto}
 .rail__item{height:40px;padding:0 var(--space-4);flex:0 0 auto}
 .shell__main{grid-column:1;min-width:0;padding:var(--space-5) var(--space-4)}
 .page-head{align-items:flex-start;flex-direction:column}
}