/* models.css — the providers, and the models behind them. */

.models-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }

.models-empty {
	padding: 12px; border: 1px dashed var(--border-2); border-radius: 8px;
	color: var(--text-secondary); font-size: var(--fs-xs); text-align: center;
}

.models-prov { border: 1px solid var(--border-2); border-radius: 8px; overflow: hidden; }

/* Same reason as the model rows below: the name is built to wrap in the rail
   (see .models-prov-name, which breaks between whole facts), and a disclosure
   caret centred against two or three lines of it points at the middle of the
   name rather than at the line it opens. */
.settings-section .models-prov-head {
	display: flex; align-items: flex-start; gap: 8px; width: 100%;
	padding: 8px 10px; cursor: pointer; text-align: left;
	background: var(--bg-tertiary); border: 0; color: var(--text-primary);
	font-size: var(--fs-xs);
}
.settings-section .models-prov-head:hover { background: var(--bg-hover); }
.models-caret     { width: 10px; color: var(--text-secondary); }
.models-prov-name { font-weight: 600; flex: 1; }
.models-prov-key  { font-size: var(--fs-2xs); color: var(--text-secondary); }
.models-prov-count{ font-size: var(--fs-2xs); color: var(--text-secondary); min-width: 68px; text-align: right; }

.models-prov-body { display: flex; flex-direction: column; padding: 4px; gap: 2px; }

/* Top, not centre. The id is `word-break: break-all` in a column that is about
   90px wide once the star and the chips have taken their share of a 220px rail,
   and model ids run to thirty characters -- so two and three line rows are the
   normal case here, not the exception. Centred, the star and the DEFAULT chip
   floated halfway down the block, level with nothing. They belong on the id's
   first line, which is where the row starts. Single-line rows do not move: every
   item on one is within a pixel of the same height. */
.settings-section .models-model {
	display: flex; align-items: flex-start; gap: 8px; width: 100%;
	padding: 5px 8px; border-radius: 6px; cursor: pointer; text-align: left;
	background: transparent; border: 0; color: var(--text-secondary);
	font-family: var(--font-mono); font-size: var(--fs-2xs);
}
.settings-section .models-model:hover { background: var(--bg-hover); color: var(--text-primary); }
.models-model.on    { color: var(--accent-text); background: var(--accent-soft); }
.models-star { width: 12px; }
.models-id   { flex: 1; word-break: break-all; }
/* var(--font-sans) does not exist, so the badge inherited the row's monospace
   -- the one thing it is meant NOT to look like. */
.models-def  {
	font-family: var(--font); font-size: var(--fs-3xs); font-weight: 600;
	padding: 1px 6px; border-radius: 999px;
	background: var(--accent); color: var(--on-fill, #fff);
}

/* The radius is the skin's, not a number: `--radius-sm` is 6px in the sharp skin, so nothing
   moves there, and 10px in the warm one, where a 6px button beside a 10px field was the one
   square corner in a rounded panel. */
.settings-section .models-refetch, .settings-section .models-remove, .settings-section .models-add {
	padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-2xs);
	background: var(--bg-tertiary); border: 1px solid var(--border-strong);
	color: var(--text-secondary);
}
.settings-section .models-refetch:hover, .settings-section .models-remove:hover, .settings-section .models-add:hover {
	background: var(--bg-hover); color: var(--text-primary);
}
.settings-section .models-refetch:disabled { opacity: .5; cursor: default; }
.settings-section .models-remove { align-self: flex-start; margin-top: 4px; }
.settings-section .models-add    { width: 100%; }

/* How old the model list is, under the button that asks for it again. A caveat on
   the list above rather than a second heading, so it takes the chip size and the
   secondary ink the rest of the provider furniture uses. No stale state: a
   catalogue does not go out of date the way a balance does. */
.models-list-age {
	padding: 2px 2px 4px;
	font-size: var(--fs-2xs); line-height: 1.45;
	color: var(--text-secondary);
}

.models-default {
	margin-top: 6px; padding: 6px 2px;
	font-size: var(--fs-2xs); color: var(--text-secondary);
	border-top: 1px solid var(--border);
}

/* The drafting-model row: a label and its select, under the default. A refinement of
   the default rather than a peer of it, so it is quieter -- no rule above it, and the
   label at the panel's chip size. */
.models-draft {
	margin-top: 4px; padding: 2px;
	font-size: var(--fs-2xs); color: var(--text-secondary);
}
.models-draft-lab {
	display: flex; align-items: center; gap: 6px;
}
.models-draft-sel {
	flex: 1 1 auto; min-width: 0;
}

/* What is left on this provider's key, inside its expanded body. It sits between the provider
   head and the model rows, so it is ruled off from both rather than floating between them; and
   it is built entirely from the panel's own tokens, which is what carries it across dark, light
   and lollypop, and across both skins, without a single override.

   It is drawn as two zones, because it does two things: it STATES what is left, and it offers
   the ways of changing that answer. The statement keeps the raised surface and is read at the
   panel's reading size; the affordances sit below a rule on the recessed surface. A person
   glancing at the row wants the figure, and finds it first; a person who has come to correct
   the figure is looking for a field, and a field is what the foot of the block is. */
.models-credit {
	display: flex; flex-direction: column;
	margin: 4px 4px 6px;
	border: 1px solid var(--border-2); border-radius: var(--radius-sm);
	background: var(--bg-tertiary);
	/* So the control strip's corners are the card's corners, in either skin. */
	overflow: hidden;
}
/* The sentence that says what is known and how it is known. It wraps: a manual figure names the
   base, the estimated spend and the date, and cutting that short would lose the caveat. It is
   the block's headline, so it is set in the panel's ordinary reading size and its ordinary
   text colour, rather than at the chip size the rest of the provider furniture uses. */
.models-credit-line {
	padding: 9px 11px 8px;
	font-size: var(--fs-xs); line-height: 1.5;
	color: var(--text-primary);
}
/* How old the figure above it is, and whether the last attempt to renew it answered.

   It is set below the statement it qualifies, at the chip size the rest of the provider
   furniture uses and in the secondary ink: it is a caveat on the figure, not a second figure,
   and a line that competed with the amount would make the amount harder to read for the sake
   of something read once. `.stale` lifts it a rung, to the ink the panel's own sentences are
   set in, because past a certain age the caveat IS the message.

   NOT `--warn`, which is what this reached for first. That token is a dot and a pill's
   lettering, and dev/verify_theme records it at 1.95 against its worst surface on Lollypop
   where a word needs 4.5 -- so an amber caution here would have been invisible on one palette
   and short on several. A rung of the text ramp carries the emphasis on all eleven, because
   the ramp is the thing that is held to the floor. */
.models-credit-age {
	padding: 0 11px 8px;
	font-size: var(--fs-2xs); line-height: 1.45;
	color: var(--text-secondary);
}
.models-credit-age.stale { color: var(--text-primary); font-weight: 600; }
/* And the same on the closed row's balance, which is all a passer-by sees. Dotted, because a
   solid rule under a number reads as a link; in the number's OWN ink, for the reason above,
   with the words in the tooltip. */
.models-bal[data-stale] {
	text-decoration: underline dotted;
	text-underline-offset: 2px;
	text-decoration-color: currentColor;
}

/* Asking the provider is the other way of answering the same question, so it stays on the
   statement's surface -- and keeps its own width, which is what says it acts on this one key
   rather than on the row it sits in. */
.settings-section .models-credit > .models-refetch {
	align-self: flex-start;
	margin: 0 11px 9px;
}
/* The user's own figure: a field and the button that commits it, on one line, filling the
   block's width so the pair reads as one control rather than two loose ones. `stretch` is what
   balances the pair -- the button takes the field's height exactly, rather than landing near
   it -- and the strip runs the full width of the card, ruled off from the figure above. */
.models-credit-form {
	display: flex; align-items: stretch; gap: 6px; width: 100%;
	padding: 8px 11px 9px;
	border-top: 1px solid var(--border);
	background: var(--bg-secondary);
}
.settings-section .models-credit-form > .models-refetch { flex: none; white-space: nowrap; }
/* Sized to the buttons beside it (`.models-refetch`), NOT to `.settings-section input`, whose
   9px/base is a form-field scale and would tower over the row. Monospace, as the balance on the
   provider row is: an amount is read digit by digit. The well is the deepest surface, which is
   the one shade that is recessed in all three palettes rather than only in the dark one. */
.settings-section .models-credit-input {
	flex: 1; min-width: 0;
	padding: 6px 8px; font-size: var(--fs-2xs);
	font-family: var(--font-mono);
	background: var(--bg-primary); border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm); color: var(--text-primary);
	transition: border-color .12s ease;
}
/* Rest, hover, focus, in three steps: the border firms up under the pointer, and takes the
   accent once the field is being typed in.
   THE THIRD STEP USED TO BE INVISIBLE. It was `outline: none` plus a 3px ring in
   `--accent-soft`, and `--accent-soft` is a tint of the surface it is drawn on: measured
   1.03-1.48 against `--bg-primary`, `--bg-secondary` and `--bg-tertiary` on all eleven
   palettes, where WCAG 2.2 SC 2.4.11 asks 3.0 of a focus indicator. What was left was the
   border recoloured to `--accent`, which is 1.11-1.81 against the `--border-strong` it
   replaces -- so this field had, in effect, no focus mark at all. The soft ring is dropped
   for the same real outline the app's other twenty-one fields carry, drawn outside the
   control against the surface, where it measures 3.87-6.75. The three steps survive: the
   pointer firms the border, the keyboard draws the ring. */
.settings-section .models-credit-input:hover { border-color: var(--text-muted); }
.settings-section .models-credit-input:focus {
	outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
/* The quiet rung, plainly, like the other ten placeholders in this app.
   `--text-secondary` at `opacity: .7` looked like the same idea and was not: the
   dimming composites the ink towards the field's own ground, and the result
   measured 2.99 (Lollypop), 3.00 (Light), 3.08 (Mist), 3.21 (Sage), 3.27
   (Linen) -- the lowest readings of any text in the app, in the band where the
   surfaces are palest and there is least room to lose. A placeholder is text a
   person reads to find out what the field wants; WCAG 2.2 SC 1.4.3 exempts it
   from nothing. `--text-muted` is the rung for this and carries 4.83-6.65 on
   `--bg-primary` across the eleven. */
.settings-section .models-credit-input::placeholder { color: var(--text-muted); }
/* And the caret's own ring on the buttons, matching the admin rows: a button that answered only
   to hover left a keyboard user with nothing to see. */
.settings-section .models-credit .models-refetch:focus-visible {
	outline: 2px solid var(--accent); outline-offset: 1px;
}