/* Page templates (page_templates.js, REDESIGN_2026-11.md): every page but Home is a list, report, tool or settings
   page, drawn to Home's standard. Home is the reference: a frame head (title, one muted line, actions), then a row of
   key-figure tiles, then cards on a grid with wide gaps; cards are hairline, 18 px round, 22 px padded, with a 16 px
   heading and no rule under it; figures are big and tabular; body text 13-14 px. Every rule here is scoped to
   #content[data-template], so Home (which has no template) is untouched. Grove tokens only. */

/* ---- Every templated page: one header, card, figure and field language ---- */
/* Older page heads read like the kit's frame head on Home: no rule under them, more air before the task. */
#content[data-template] .page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border:0;padding:0;margin:0 0 28px}
#content[data-template] .page-head h1{font-size:var(--ui-title);font-weight:700;letter-spacing:-.03em;line-height:1.15;color:#f1f7f2;margin:0}
#content[data-template] .page-head p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ui-muted);max-width:70ch}
#content[data-template] .page-head .head-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
#content[data-template] #page-mount>.page-head{margin-bottom:20px}

/* Body text at Home's size. */
#content[data-template] :is(.panel-body,.tpl-card,.ui-card)>p,#content[data-template] :is(.panel-body,.tpl-card)>:is(ul,ol)>li{font-size:13.5px;line-height:1.6}
#content[data-template] .form-caption{font-size:12.5px;line-height:1.55;color:var(--ui-muted)}

/* Cards: the older .panel and any loose form, table or list (page_templates.js marks it .tpl-card) are Home's card. */
#content[data-template] :is(.panel,.tpl-card){border-radius:var(--ui-radius);border:1px solid var(--ui-card-line);background-color:var(--ui-card);background-image:var(--ui-card-image,none);box-shadow:var(--ui-shadow);margin:0 0 26px;min-width:0}
#content[data-template] .tpl-card{padding:var(--ui-pad)}
#content[data-template] .tpl-card:is(ul,ol){list-style:none}
#content[data-template] fieldset.tpl-card{border:1px solid var(--ui-card-line)}
#content[data-template] fieldset.tpl-card>legend{float:left;width:100%;padding:0;margin:0 0 14px;font-size:var(--ui-card-title);font-weight:650;color:var(--ui-ink)}
#content[data-template] fieldset.tpl-card>legend+*{clear:both}
#content[data-template] .panel>.panel-head{border-bottom:0;padding:var(--ui-pad) var(--ui-pad) 0;min-height:0;margin:0 0 14px;background:none;align-items:center;gap:10px;flex-wrap:wrap}
#content[data-template] .panel>.panel-head :is(h2,h3){font-size:var(--ui-card-title);font-weight:650;letter-spacing:-.01em;color:var(--ui-ink);margin:0}
#content[data-template] .panel>.panel-head p{margin:3px 0 0;font-size:12.5px;color:var(--ui-muted)}
#content[data-template] .panel>.panel-head>span:not(.ui-badge):not(.badge){font-size:12px;color:var(--ui-muted)}
#content[data-template] .panel>.panel-body{padding:0 var(--ui-pad) var(--ui-pad)}
#content[data-template] .panel>.panel-body:first-child{padding-top:var(--ui-pad)}
#content[data-template] .panel>:is(.table-wrap,.ui-table-scroll){margin:0 var(--ui-pad) var(--ui-pad);border:1px solid var(--ui-line);border-radius:var(--ui-radius-field)}
#content[data-template] .panel>:is(.table-wrap,.ui-table-scroll):first-child{margin-top:var(--ui-pad)}
#content[data-template] .panel>.panel-body+:is(.table-wrap,.ui-table-scroll){margin-top:0}
#content[data-template] .panel>details,#content[data-template] .panel>p{margin-left:var(--ui-pad);margin-right:var(--ui-pad)}
#content[data-template] .panel>details:last-child,#content[data-template] .panel>p:last-child{margin-bottom:var(--ui-pad)}
#content[data-template] :is(.panel-body,.tpl-card) h3{font-size:13.5px;font-weight:650;color:var(--ui-ink);margin:24px 0 10px}
#content[data-template] :is(.panel-body,.tpl-card)>h3:first-child{margin-top:0}
/* A card inside a card is plain space (as on Home). */
#content[data-template] :is(.panel,.tpl-card,.ui-card) :is(.panel,.tpl-card){background:none;border:0;box-shadow:none;margin-bottom:12px}
#content[data-template] :is(.panel,.tpl-card,.ui-card) .panel>.panel-head{padding-left:0;padding-right:0;padding-top:0}
#content[data-template] :is(.panel,.tpl-card,.ui-card) .panel>.panel-body{padding-left:0;padding-right:0}
/* Disclosures that end a card ("How this works", "Show advanced"): a quiet row. */
#content[data-template] .panel>details{padding:12px 0;border-top:1px solid var(--ui-line)}
#content[data-template] details>summary{font-size:13px}

/* Sections and splits have Home's spacing. */
#content[data-template] :is(.split,.split-wide){gap:26px;align-items:start;margin-bottom:26px}
#content[data-template] :is(.split,.split-wide)>*{min-width:0;margin-bottom:0}
#content[data-template] .ui-section{margin-bottom:26px}
#content[data-template] .ui-grid{gap:26px}

/* Key figures: Home's tile row (older .metric-row and a hub's chip row alike). */
#content[data-template] .metric-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:0 0 26px;padding:0;background:none;border:0;box-shadow:none;overflow:visible}
#content[data-template] .panel .metric-row{margin:0 0 6px}
#content[data-template] .metric{display:flex;flex-direction:column;gap:4px;min-width:0;padding:14px 16px;border:1px solid var(--ui-card-line)!important;border-radius:var(--ui-radius-md);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008))}
#content[data-template] .metric .label{font-size:12px;font-weight:500;color:var(--ui-muted);letter-spacing:0;text-transform:none}
#content[data-template] .metric .value{font-size:26px;font-weight:750;letter-spacing:-.025em;line-height:1.1;color:#f1f7f2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#content[data-template] .metric :is(small,.sub,.context){font-size:12px;color:var(--ui-muted)}
#content[data-template] .ui-chips:not(.ui-chips-row){display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
#content[data-template] .ui-chips>.ui-chip{min-width:0;padding:14px 16px;gap:3px}
#content[data-template] .ui-chips>.ui-chip b{font-size:24px;font-weight:750;letter-spacing:-.025em;line-height:1.15}
#content[data-template] a.ui-chip:hover{border-color:rgba(255,255,255,.14)}
#content[data-template] .tpl-figures{margin-bottom:26px}
#content[data-template] .ui-chip[data-tone=down] b{color:var(--ui-down)}
#content[data-template] .ui-chip[data-tone=up] b{color:var(--ui-up)}
/* Clear status colours on figures and table values. */
#content[data-template] :is(.metric .value,td,.ui-tile-value,.ui-chip b).positive{color:var(--ui-up)}
#content[data-template] :is(.metric .value,td,.ui-tile-value,.ui-chip b).negative{color:var(--ui-down)}

/* Notices: one quiet line with a coloured edge, as on Home. */
#content[data-template] .notice{border-radius:0 var(--ui-radius-md) var(--ui-radius-md) 0;font-size:13px;line-height:1.55;margin:0 0 22px}
#content[data-template] .panel-body>.notice:last-child{margin-bottom:0}

/* Fields: the kit's field language (label above, 12.5 px, quiet), comfortable rows. */
#content[data-template] :is(.form-grid,.field-stack){gap:16px 18px}
#content[data-template] :is(.form-grid,.field-stack,.panel-body,.tpl-card)>label:not(.check){font:600 12.5px var(--ui-font);color:#c4d4c9}
#content[data-template] :is(.form-grid,.field-stack,.panel-body,.tpl-card)>label.check{font:500 13px var(--ui-font);color:var(--ui-ink)}
#content[data-template] :is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color]),select){min-height:38px}
#content[data-template] :is(.panel-body,.tpl-card)>:is(button,.button,a.button):not(.quiet){margin-top:16px;margin-right:8px}
#content[data-template] :is(.panel-body,.tpl-card)>:is(button,.button)+:is(button,.button){margin-left:0}

/* Option groups (time frames, weekdays): a quiet box with the choices in a row, not a tall grey frame. */
#content[data-template] fieldset:not(.tpl-card):not(.ui-section){border:1px solid var(--ui-line);border-radius:var(--ui-radius-field);padding:10px 14px 12px;margin:4px 0 0;min-width:0}
#content[data-template] fieldset:not(.tpl-card):not(.ui-section)>legend{padding:0 6px;font:600 12.5px var(--ui-font);color:#c4d4c9}
#content[data-template] fieldset:not(.tpl-card):not(.ui-section)>label:has(>input:is([type=checkbox],[type=radio])){display:inline-flex;align-items:center;gap:7px;margin:4px 16px 4px 0;font:500 13px var(--ui-font);color:var(--ui-ink)}

/* Tables: the kit's data table look. */
#content[data-template] table{width:100%;border-collapse:collapse}
#content[data-template] th{font:600 11px var(--ui-font);letter-spacing:.06em;text-transform:uppercase;color:var(--ui-muted);background:#0c1711;padding:10px 12px;white-space:nowrap;text-align:left}
#content[data-template] td{padding:var(--ui-row-pad) 12px;font-size:13px;line-height:1.45;border-bottom:1px solid var(--ui-line);vertical-align:middle}
#content[data-template] td small{display:block;margin-top:2px;font-size:11.5px;color:var(--ui-muted)}
#content[data-template] tbody tr:last-child>td{border-bottom:0}
#content[data-template] .tpl-card>table,#content[data-template] .tpl-card>.table-wrap{border:1px solid var(--ui-line);border-radius:var(--ui-radius-field)}

/* Empty states: Home's centred title and one action. */
#content[data-template] :is(.empty,.ui-empty){padding:30px 16px;text-align:center}
#content[data-template] :is(.empty,.ui-empty) :is(h2,.ui-empty-title){font-size:15.5px;font-weight:700;color:var(--ui-ink)}
#content[data-template]>.empty,#content[data-template] :is(#page-mount,.ui-frame-body)>.empty{border:1px dashed var(--ui-card-line);border-radius:var(--ui-radius);margin-bottom:26px}

/* Tabs inside a page (Connections / Accounts / Credentials) sit like Home's segmented controls. */
#content[data-template] #page-mount .tabs{margin-bottom:24px}

/* ---- List pages: full width, figures on top, the collection in one card ---- */
#content[data-template=list] .ui-table-toolbar{margin-bottom:6px}
#content[data-template=list] .ui-card:has(>.ui-table){padding-bottom:10px}

/* ---- Report pages: figures as hero tiles, charts in cards ---- */
#content[data-template=report] .metric-row{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
#content[data-template=report] .metric .value{font-size:30px}
#content[data-template=report] .metric-row>.metric:first-child .value{font-size:34px;color:#f1f7f2}
#content[data-template=report] .ui-tile-value{font-size:28px}
#content[data-template=report] :is(svg[id$=-chart],[id$=-chart] svg){border-radius:var(--ui-radius-field)}

/* ---- Tool pages: the form on the left, the result on the right ---- */
@media (min-width:1101px){
  #content[data-template=tool] .split:not(.lab-split){grid-template-columns:minmax(360px,440px) minmax(0,1fr)}
  #content[data-template=tool] .split:not(.lab-split)>:is(.panel,.tpl-card){margin-bottom:0}
  /* Until there is a result, its card (page_templates.js marks it .tpl-canvas) is a quiet canvas as tall as the form,
     not a short box floating beside it. */
  #content[data-template=tool] .tpl-canvas-row{align-items:stretch}
  #content[data-template=tool] .tpl-canvas-row>*{align-self:start}
  #content[data-template=tool] .tpl-canvas-row>.tpl-canvas-column{align-self:stretch;display:flex;flex-direction:column}
  #content[data-template=tool] .tpl-canvas-column>.tpl-canvas{flex:1}
  #content[data-template=tool] .tpl-canvas{display:flex;flex-direction:column;min-height:300px}
  #content[data-template=tool] .tpl-canvas>:last-child{flex:1;display:grid;align-content:center}
}
/* The waiting canvas is a quiet dashed card with one line in it; no drawing pretends to be data (page_content.js puts
   the tool's last real result here when there is one). */
#content[data-template=tool] .tpl-canvas{border-style:dashed;box-shadow:none;background-color:rgba(255,255,255,.012);background-image:none}
/* A tool page with one form and nothing beside it: a readable width, not a field stretched across the screen. */
#content[data-template=tool] :is(#page-mount,.ui-frame-body,#content)>:is(.panel,.tpl-card):only-of-type:has(:is(input,select)){max-width:980px}

/* ---- Settings pages: one readable column of section cards ---- */
#content[data-template=settings] :is(#page-mount,.ui-frame-body)>:not(.ui-tabs):not(.tabs):not(.ui-chips):not(#hub-summary),#content[data-template=settings]>:not(.ui-frame):not(.page-head){max-width:1200px}
#content[data-template=settings] .split{grid-template-columns:minmax(0,1fr)!important}
@media (min-width:1101px){
  #content[data-template=settings] .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #content[data-template=settings] .form-grid>:is(.full,.check.full){grid-column:1/-1}
}

/* ---- Phones: the head stacks left-aligned, as the frame head does ---- */
@media (max-width:720px){
  #content[data-template] .page-head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:20px}
  #content[data-template] .ui-chips:not(.ui-chips-row){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #content[data-template] .metric-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #content[data-template] :is(.panel,.tpl-card,.split,.ui-section){margin-bottom:18px}
}