/* ============================================================
   skin-warm.css — the "Warm" skin.
   ------------------------------------------------------------
   Everything here is scoped to :root[data-skin="warm"], so the
   default (sharp) skin is not affected by a single rule -- the
   whole file is dormant until a user chooses Warm.

   It carries the two halves a token swap cannot: the DENSITY
   (Tier 2 -- paddings and gaps loosened, driven by --space-scale
   so the whole skin breathes from one number) and the CALMER
   CHROME (Tier 3 -- the monospace telemetry de-teched, section
   headers softened, cards lifted on soft shadows rather than
   ruled with hard borders, buttons rounded toward pills, the
   primary Start surface made inviting).

   The shape tokens (radius, font, shadows, --space-scale) are in
   variables.css under the same selector; this file spends them.
   ============================================================ */

/* The friendly typeface. One variable file covers 400..800; it is
   only fetched when an element actually renders in it, i.e. when the
   warm skin is active, so the sharp skin pays nothing for it. */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/nunito-var-latin.woff2') format('woff2');
}

/* ── Base tone ─────────────────────────────────────────────── */
:root[data-skin="warm"] body {
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
/* The dense monospace furniture is what most reads as "developer tool".
   Under the soft skin the small telemetry speaks in the friendly face
   instead, which de-techs the whole surface in one stroke. The real
   monospace is kept for actual code (pre/code), where it belongs. */
:root[data-skin="warm"] .top-meter,
:root[data-skin="warm"] .rail-count,
:root[data-skin="warm"] .astat-aside,
:root[data-skin="warm"] .session-box-meta,
:root[data-skin="warm"] .session-box-ctx,
:root[data-skin="warm"] .session-box-cost,
:root[data-skin="warm"] .session-box-time,
:root[data-skin="warm"] .tile-meter {
	font-family: var(--font);
	letter-spacing: 0;
}
/* The always-on stats bar is telemetry, not a task. Kept, but quietened,
   so the eye lands on the work rather than the numbers. */
:root[data-skin="warm"] .top-meter { opacity: 0.6; }
:root[data-skin="warm"] .top-meter:hover { opacity: 1; }

/* Section headers lose the ALL-CAPS engineering shout for a friendly weight.
   The global pause row is NOT one of them -- it is a switch, already in
   sentence case in both skins, and dressing it as a header is what made it
   look like a third section with its alignment lost. */
:root[data-skin="warm"] .railhead > span:first-child,
:root[data-skin="warm"] .pop-head,
:root[data-skin="warm"] .admin-sec,
/* The Models/Credits/Push drawer headings share the account menu's `.admin-sec`
   idiom (see app.css), so they take the same friendly weight here -- otherwise
   the two settings menus read as two systems under this skin. */
:root[data-skin="warm"] .admin-body .settings-section h3 {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 700;
	font-size: var(--fs-sm);
	color: var(--text-secondary);
}

/* ── Panels: lift, don't rule ──────────────────────────────── */
:root[data-skin="warm"] .ai,
:root[data-skin="warm"] .web,
:root[data-skin="warm"] .doc,
:root[data-skin="warm"] .msg,
:root[data-skin="warm"] .compose,
:root[data-skin="warm"] .tools,
/* The terminal panel was added after this list and never joined it, so under
   the warm skin it kept a hard border while every sibling wore a shadow. It was
   invisible for as long as the warm skin was the one nobody had by default;
   Simple made warm the default and `verify_termpanel` said so at once -- it
   measures this panel against the AI panel across all eleven palettes. */
:root[data-skin="warm"] .termpanel {
	border-color: transparent;
	box-shadow: var(--shadow-1);
}

/* ── Cards and dialogs: more room, a soft lift ─────────────── */
:root[data-skin="warm"] .login-card,
:root[data-skin="warm"] .modal-card,
:root[data-skin="warm"] .dlg-card {
	border-color: transparent;
	box-shadow: var(--shadow-2);
	padding: calc(24px * var(--space-scale));
}
/* The About card's splash and its foot rule bleed to the card's edges by
   cancelling its padding out, so the loosened padding above has to be told to
   them as well -- `--about-pad` is that number, and it is set here for the same
   reason the line above it is. A bleed measured against the sharp skin's 24px
   would hang the picture past the edge of a warm card. `verify_about.mjs`
   measures the splash against the card's padding box in BOTH skins, so a third
   skin that changes this fails loudly instead of quietly. */
:root[data-skin="warm"] .about-card { --about-pad: calc(24px * var(--space-scale)); }
:root[data-skin="warm"] .pass-gen {
	padding: calc(12px * var(--space-scale));
	border-color: transparent;
	box-shadow: var(--shadow-1);
}

/* ── Buttons: rounded toward pills, roomier hit targets ────── */
:root[data-skin="warm"] .dlg-ok,
:root[data-skin="warm"] .dlg-cancel,
:root[data-skin="warm"] .modal-close,
:root[data-skin="warm"] #id-primary,
:root[data-skin="warm"] .id-passkey,
:root[data-skin="warm"] .compose-send,
:root[data-skin="warm"] .compose-btn,
:root[data-skin="warm"] .admin-btn,
:root[data-skin="warm"] .pass-gen-btn,
:root[data-skin="warm"] .empty-new-session,
:root[data-skin="warm"] .login-card button {
	border-radius: 999px;
	padding: calc(9px * var(--space-scale)) calc(18px * var(--space-scale));
	font-weight: 600;
}
/* The primary calls to action carry the accent as a fill, the way an
   approachable UI makes the one next step obvious. */
:root[data-skin="warm"] .empty-new-session,
:root[data-skin="warm"] #id-primary,
:root[data-skin="warm"] .dlg-ok {
	box-shadow: var(--shadow-1);
}
/* Small icon and add buttons just round off; they stay compact. */
:root[data-skin="warm"] .icon-btn,
:root[data-skin="warm"] .addbtn {
	border-radius: var(--radius);
}

/* ── Inputs: rounder, with room to type ────────────────────── */
:root[data-skin="warm"] .dlg-input,
:root[data-skin="warm"] .login-card input,
:root[data-skin="warm"] .compose-row input,
:root[data-skin="warm"] .compose-text,
:root[data-skin="warm"] #chat-input,
:root[data-skin="warm"] textarea,
:root[data-skin="warm"] input[type="text"],
:root[data-skin="warm"] input[type="password"] {
	border-radius: var(--radius);
	padding: calc(9px * var(--space-scale)) calc(13px * var(--space-scale));
}

/* ── The rail: roomier rows, calmer boxes ──────────────────── */
:root[data-skin="warm"] .session-box {
	padding: calc(9px * var(--space-scale)) calc(11px * var(--space-scale));
	border-color: transparent;
	box-shadow: var(--shadow-1);
}
/* The selected tile's ring, drawn INSIDE the border box.
   Outside it, the ring takes no layout space, and the Chats list is
   `overflow-x: hidden` -- so the two vertical sides were sliced clean off and
   the tile appeared to have a border that stopped at the corners. Same fault as
   the selected tag chip's ring, in a different list: ink that has to survive
   belongs inside the box, not in the margin a scroll container is entitled to
   cut. Inset, the 2px reads identically and cannot be clipped by anything. */
:root[data-skin="warm"] .session-box.active {
	box-shadow: inset 0 0 0 2px var(--accent);
}
/* The resting tiles are lifted by a soft shadow rather than ruled by a border,
   and that shadow spreads sideways into the same clipped margin. Three pixels
   of room, this skin only: the compact skin draws borders, needs none of it,
   and its rail metrics must not move. */
:root[data-skin="warm"] .session-list,
:root[data-skin="warm"] .diamond-list {
	padding-left: 3px;
	padding-right: 3px;
}
:root[data-skin="warm"] .admin-item {
	border-radius: var(--radius);
	padding: calc(8px * var(--space-scale)) calc(10px * var(--space-scale));
}
:root[data-skin="warm"] .admin-item:hover {
	background: var(--bg-hover);
}
:root[data-skin="warm"] .astat-row {
	padding: calc(4px * var(--space-scale)) calc(6px * var(--space-scale));
}

/* ── Chat: friendlier bubbles, more breathing room ─────────── */
:root[data-skin="warm"] .chat-output {
	padding: calc(14px * var(--space-scale));
}
:root[data-skin="warm"] .chat-msg-user .chat-msg-content {
	border-radius: 20px 20px 6px 20px;
	padding: calc(9px * var(--space-scale)) calc(14px * var(--space-scale));
}
:root[data-skin="warm"] .chat-msg-assistant .chat-msg-content {
	line-height: 1.6;
}
:root[data-skin="warm"] .chat-input-bar {
	padding: calc(10px * var(--space-scale)) calc(12px * var(--space-scale));
	border-top-color: transparent;
	gap: 10px;
}

/* ── Chips and tags: soft pills ────────────────────────────── */
:root[data-skin="warm"] .tag-chip,
:root[data-skin="warm"] .seg button {
	border-radius: 999px;
}

/* All | Any, under this skin's typeface. Centring puts the LINE BOX in the
   middle of the pill, and a line box is not the ink: Nunito's ascent sits
   higher above the baseline than the system stack's, so the same rule that
   lands the letters dead centre in the sharp skin lifts them 0.31px here --
   measured off the paint at 8x, not predicted. That is five times the offset
   the closer was corrected by, and at 10px type it is visible as a switch
   whose words float.

   Stated in em so it follows the reading control, and scoped to this skin
   because the sharp skin measures centred and must not be moved. */
:root[data-skin="warm"] .tag-mode-btn { transform: translateY(0.031em); }

/* ── The empty state: an inviting Start, not a placeholder ─── */
:root[data-skin="warm"] .empty-state {
	gap: calc(12px * var(--space-scale));
	padding: calc(24px * var(--space-scale));
}
:root[data-skin="warm"] .empty-state h2 {
	font-weight: 800;
	letter-spacing: -0.01em;
}
:root[data-skin="warm"] .empty-new-session {
	font-size: var(--fs-lg);
	padding: calc(11px * var(--space-scale)) calc(24px * var(--space-scale));
}