/* Page content (page_content.js, REDESIGN_2026-11.md second pass): heroes, small charts, guided forms, compact tables
   and tool results drawn in Home's language. Every rule is scoped to #content[data-template], so Home is untouched.
   Grove tokens only: deep green-black cards, one lime accent, pink for losses. */

/* ---- Hero: one big figure, a small real chart, up to three supporting figures, in one card ---- */
#content[data-template] .pc-hero{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.45fr) minmax(190px,.85fr);gap:30px;align-items:center;
  padding:22px 26px;margin:0 0 26px;border:1px solid var(--ui-card-line);border-radius:var(--ui-radius);background-color:var(--ui-card);
  background-image:var(--ui-card-image,none);box-shadow:var(--ui-shadow);min-width:0;font-family:var(--ui-font)}
#content[data-template] .pc-hero[data-nochart=true]{grid-template-columns:minmax(240px,1fr) minmax(260px,440px);justify-content:space-between}
#content[data-template] .pc-hero-main{display:flex;flex-direction:column;gap:6px;min-width:0}
#content[data-template] .pc-hero-label{font-size:12.5px;font-weight:600;color:var(--ui-muted)}
#content[data-template] .pc-hero-figure{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
#content[data-template] .pc-hero-value{font-size:var(--ui-hero);font-weight:800;letter-spacing:-.035em;line-height:1.02;color:#f1f7f2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#content[data-template] .pc-hero-value[data-tone=down]{color:var(--ui-down)}
#content[data-template] .pc-hero-value[data-tone=up]{color:var(--ui-accent)}
#content[data-template] .pc-hero-value[data-tone=warn]{color:var(--ui-warn)}
#content[data-template] .pc-delta{font-size:13px;font-weight:700;color:var(--ui-muted)}
#content[data-template] .pc-delta[data-tone=up]{color:var(--ui-up)}
#content[data-template] .pc-delta[data-tone=down]{color:var(--ui-down)}
#content[data-template] .pc-hero-context{font-size:12.5px;line-height:1.5;color:var(--ui-muted)}
#content[data-template] .pc-hero-action{font-size:13px;font-weight:650;color:var(--ui-accent);text-decoration:none;margin-top:4px;width:max-content}
#content[data-template] .pc-hero-action:hover{text-decoration:underline}
@media (max-width:820px),(pointer:coarse){#content[data-template] .pc-hero-action{display:inline-flex;align-items:center;min-height:44px;margin-top:0}}
#content[data-template] .pc-hero-chart{display:flex;flex-direction:column;gap:8px;min-width:0}
#content[data-template] .pc-hero-chart-title{font-size:11.5px;color:var(--ui-muted)}
#content[data-template] .pc-hero-stats,#content[data-template] .pc-adopted{display:flex;flex-direction:column;margin:0;min-width:0}
#content[data-template] .pc-hero-stats>div{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 12px;padding:9px 0;border-top:1px solid var(--ui-line)}
#content[data-template] .pc-hero-stats>div:first-child{border-top:0;padding-top:0}
#content[data-template] .pc-hero-stats>div:last-child{padding-bottom:0}
#content[data-template] .pc-hero-stats dt{font-size:12.5px;color:var(--ui-muted)}
#content[data-template] .pc-hero-stats dd{margin:0;font-size:17px;font-weight:750;color:var(--ui-ink);font-variant-numeric:tabular-nums;text-align:right}
#content[data-template] .pc-hero-stats dd[data-tone=up]{color:var(--ui-up)}
#content[data-template] .pc-hero-stats dd[data-tone=down]{color:var(--ui-down)}
#content[data-template] .pc-hero-stats dd[data-tone=warn]{color:var(--ui-warn)}
#content[data-template] .pc-hero-stats>div>span{grid-column:1/-1;font-size:11.5px;color:var(--ui-muted)}
/* A page's own figure row adopted into the hero: its tiles become the hero's quiet figure list. */
#content[data-template] .pc-adopted :is(.ui-tiles,.ui-chips,.metric-row){display:flex!important;flex-direction:column;gap:0;margin:0;padding:0;border:0;background:none}
#content[data-template] .pc-adopted :is(.ui-tile,.ui-chip,.metric){display:grid!important;grid-template-columns:1fr auto;align-items:baseline;gap:2px 12px;padding:9px 0!important;margin:0;
  border:0!important;border-top:1px solid var(--ui-line)!important;border-radius:0!important;background:none!important;box-shadow:none!important;min-width:0;min-height:0}
#content[data-template] .pc-adopted :is(.ui-tile,.ui-chip,.metric):first-child{border-top:0!important;padding-top:0!important}
#content[data-template] .pc-adopted :is(.ui-tile-label,.ui-chip>span:first-child,.metric .label){font-size:12.5px;color:var(--ui-muted)}
#content[data-template] .pc-adopted :is(.ui-tile-value,.ui-chip>b,.metric .value){font-size:17px!important;font-weight:750;text-align:right;color:var(--ui-ink);line-height:1.2}
#content[data-template] .pc-adopted :is(.ui-tile-context,.ui-chip>span:last-child:not(:first-child),.metric :is(small,.sub,.context)){grid-column:1/-1;font-size:11.5px;color:var(--ui-muted)}
#content[data-template] .pc-adopted #hub-summary{margin:0}

/* ---- Small charts ---- */
#content[data-template] .pc-area{position:relative;height:96px;color:var(--ui-accent)}
#content[data-template] .pc-area[data-tone=down]{color:var(--ui-down)}
#content[data-template] .pc-area svg{display:block;width:100%;height:100%;overflow:visible}
#content[data-template] .pc-area .pc-line{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 6px color-mix(in srgb,currentColor 45%,transparent))}
#content[data-template] .pc-area .pc-zero{stroke:var(--ui-line);stroke-width:1;stroke-dasharray:3 4}
#content[data-template] .pc-dot{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:var(--ui-radius-round);background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 22%,transparent)}
#content[data-template] .pc-bars-wrap{display:flex;flex-direction:column;gap:6px;min-width:0}
#content[data-template] .pc-bars{position:relative;display:flex;gap:4px;height:84px}
#content[data-template] .pc-bars::after{content:"";position:absolute;left:0;right:0;top:var(--pc-zero);border-top:1px solid var(--ui-line);pointer-events:none}
#content[data-template] .pc-col{position:relative;flex:1;min-width:2px;max-width:30px;height:100%}
#content[data-template] .pc-bars{justify-content:space-between}
#content[data-template] .pc-bars.pc-bars-few{justify-content:flex-start;gap:14px}
#content[data-template] .pc-bars.pc-bars-few>.pc-col{max-width:44px}
#content[data-template] .pc-bar{position:absolute;left:0;right:0;border-radius:var(--ui-radius-xs) var(--ui-radius-xs) 0 0;background:color-mix(in srgb,var(--ui-accent) 78%,transparent)}
#content[data-template] .pc-bar[data-tone=down]{background:color-mix(in srgb,var(--ui-down) 80%,transparent);border-radius:0 0 var(--ui-radius-xs) var(--ui-radius-xs)}
#content[data-template] .pc-bar[data-tone=none]{background:rgba(255,255,255,.08)}
#content[data-template] .pc-col:last-child .pc-bar[data-tone=up]{background:var(--ui-accent);box-shadow:0 0 12px -2px color-mix(in srgb,var(--ui-accent) 60%,transparent)}
#content[data-template] .pc-bars-foot{display:flex;justify-content:space-between;font-size:11px;color:var(--ui-muted)}
#content[data-template] .pc-meter{display:flex;gap:3px;height:12px;border-radius:var(--ui-radius-pill);overflow:hidden}
#content[data-template] .pc-meter>span{min-width:6px;background:rgba(255,255,255,.09)}
#content[data-template] .pc-meter>span[data-tone=up]{background:var(--ui-accent)}
#content[data-template] .pc-meter>span[data-tone=busy]{background:color-mix(in srgb,var(--ui-accent) 40%,#1d2d23)}
#content[data-template] .pc-meter>span[data-tone=down]{background:var(--ui-down)}
#content[data-template] .pc-meter>span[data-tone=warn]{background:var(--ui-warn)}
#content[data-template] .pc-meter-key{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:12px;color:var(--ui-muted)}
#content[data-template] .pc-meter-key b{color:var(--ui-ink);font-weight:700;margin-left:2px}
#content[data-template] .pc-meter-key i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:var(--ui-radius-xs);background:rgba(255,255,255,.14)}
#content[data-template] .pc-meter-key [data-tone=up] i{background:var(--ui-accent)}
#content[data-template] .pc-meter-key [data-tone=busy] i{background:color-mix(in srgb,var(--ui-accent) 40%,#1d2d23)}
#content[data-template] .pc-meter-key [data-tone=down] i{background:var(--ui-down)}
#content[data-template] .pc-meter-key [data-tone=warn] i{background:var(--ui-warn)}
#content[data-template] .pc-rank{display:flex;flex-direction:column;gap:9px}
#content[data-template] .pc-rank-row{display:grid;grid-template-columns:minmax(60px,34%) minmax(0,1fr) auto;align-items:center;gap:12px;font-size:12.5px}
#content[data-template] .pc-rank-name{color:var(--ui-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#content[data-template] .pc-rank-row>b{color:var(--ui-ink);font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
#content[data-template] .pc-rank-track{height:8px;border-radius:var(--ui-radius-pill);background:rgba(255,255,255,.05);overflow:hidden}
#content[data-template] .pc-rank-track>span{display:block;height:100%;border-radius:inherit;background:var(--ui-accent)}
#content[data-template] .pc-rank-track>span[data-tone=down]{background:var(--ui-down)}
#content[data-template] .pc-rank-more{font-size:11.5px;color:var(--ui-muted)}
#content[data-template] .pc-gauges{display:flex;flex-direction:column;gap:12px}
#content[data-template] .pc-gauge-head{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--ui-muted);margin-bottom:6px}
#content[data-template] .pc-gauge-head b{color:var(--ui-ink);font-weight:700;font-variant-numeric:tabular-nums}
#content[data-template] .pc-gauge-head small{color:var(--ui-muted);font-weight:500}
#content[data-template] .pc-gauge-track{height:8px;border-radius:var(--ui-radius-pill);background:rgba(255,255,255,.07);overflow:hidden}
#content[data-template] .pc-gauge-track>span{display:block;height:100%;min-width:3px;border-radius:inherit;background:var(--ui-accent)}
#content[data-template] .pc-gauge-track>span[data-tone=warn]{background:var(--ui-warn)}
#content[data-template] .pc-gauge-track>span[data-tone=down]{background:var(--ui-down)}

/* A hero with no figures beside it: the figure and the chart share the card. */
#content[data-template] .pc-hero[data-nostats=true]{grid-template-columns:minmax(220px,1fr) minmax(0,1.9fr)}
#content[data-template] .pc-hero[data-nostats=true][data-nochart=true]{grid-template-columns:minmax(0,1fr)}
/* Inline: the same summary drawn inside a card that already exists (Validate's results, a tool's last result). */
#content[data-template] .pc-hero.pc-hero-inline{border:0;background:none;box-shadow:none;padding:0 0 18px;margin:0 0 18px;border-bottom:1px solid var(--ui-line);border-radius:0;gap:26px}
#content[data-template] .ui-card>.pc-hero.pc-hero-inline:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
#content[data-template] .pc-hero.pc-hero-inline .pc-hero-value{font-size:34px}
/* A tool's last real result, shown in its result area until a new run replaces it. */
#content[data-template] .pc-last .pc-hero.pc-hero-inline{grid-template-columns:minmax(0,1fr);border-bottom:0;margin:0;padding:0}
#content[data-template] .pc-last .pc-hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#content[data-template] .pc-last .pc-hero-stats>div{display:flex;flex-direction:column;gap:2px;border:0;padding:0}
#content[data-template] .pc-last .pc-hero-stats dd{text-align:left}
#content[data-template] .pc-last .pc-area{height:150px}
#content[data-template] .pc-last-note{margin:16px 0 0;font-size:12.5px;color:var(--ui-muted)}
#content[data-template] .pc-last~:is(.lab-empty,.ui-empty){display:none}
#content[data-template] #research-results.pc-has-last{padding:var(--ui-pad)}
#content[data-template] .tpl-canvas:has(.pc-last){border-style:solid;background-color:var(--ui-card);background-image:var(--ui-card-image,none);box-shadow:var(--ui-shadow)}
#content[data-template] .tpl-canvas:has(.pc-last) .pc-last,#content[data-template] .pc-has-last>.pc-last{display:block;flex:none}

/* ---- Guided forms: the rest under "More options" ---- */
#content[data-template] details.pc-more{grid-column:1/-1;margin:6px 0 4px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-field);padding:0 14px;background:rgba(255,255,255,.012)}
#content[data-template] details.pc-more>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font:600 13px var(--ui-font);color:#c4d4c9;list-style:none}
#content[data-template] details.pc-more>summary::-webkit-details-marker{display:none}
#content[data-template] details.pc-more>summary::before{content:"+";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:9px;border-radius:var(--ui-radius-xs);background:rgba(255,255,255,.06);color:var(--ui-accent);font-weight:700}
#content[data-template] details.pc-more[open]>summary::before{content:"−"}
#content[data-template] details.pc-more>.pc-more-body,#content[data-template] details.pc-more>:not(summary){padding-bottom:14px}
#content[data-template] details.pc-more>.pc-more-body.form-grid{display:grid}
#content[data-template] .pc-wrap-title{display:none}
/* Older optional groups inside a form ("Planned levels", "Show advanced") read like "More options". */
#content[data-template] :is(.panel-body,.field-stack,.tpl-card,.ui-card)>details:not(.pc-more):not(.ui-advanced):not(.uxo-fold):not(.calm-more):not(.ui-card){border:1px solid var(--ui-line);border-radius:var(--ui-radius-field);padding:0 14px;margin:6px 0;background:rgba(255,255,255,.012)}
#content[data-template] :is(.panel-body,.field-stack,.tpl-card,.ui-card)>details:not(.pc-more):not(.ui-advanced):not(.uxo-fold):not(.calm-more):not(.ui-card)>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font:600 13px var(--ui-font);color:#c4d4c9}
#content[data-template] :is(.panel-body,.field-stack,.tpl-card,.ui-card)>details:not(.pc-more):not(.ui-advanced):not(.uxo-fold):not(.calm-more):not(.ui-card)[open]{padding-bottom:14px}
/* A strategy's latest result: the net figure leads, the others follow in one row. */
#content[data-template] #ws-latest .ui-tiles{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:12px}
#content[data-template] #ws-latest .ui-tile:first-child .ui-tile-value{font-size:34px;font-weight:800;letter-spacing:-.03em}
@media (max-width:720px){#content[data-template] #ws-latest .ui-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
#content[data-template] .pc-history{display:flex;flex-direction:column;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--ui-line)}

/* ---- Long pages of sections: one open at a time by default ---- */
#content[data-template] [data-pc-fold]>.panel-head{cursor:default}
#content[data-template] [data-pc-fold=closed]>:not(.panel-head):not(.pc-fold-toggle){display:none!important}
#content[data-template] [data-pc-fold=closed].pc-fold-plain>.panel-body{display:block!important}
#content[data-template] [data-pc-fold=closed].pc-fold-plain>.panel-body>:not(h2):not(.pc-fold-toggle){display:none!important}
#content[data-template] [data-pc-fold=closed]>.panel-head{margin-bottom:0;padding-bottom:var(--ui-pad)}
#content[data-template] .pc-fold-toggle{margin-left:auto}
#content[data-template] .pc-fold-plain .pc-fold-toggle{float:right;margin-top:-30px}

/* ---- Compact tables: key columns, the rest per row ---- */
@media (min-width:721px){
  #content[data-template] :is(th,td).pc-col-more{display:none}
}
#content[data-template] td.pc-col-toggle,#content[data-template] th.pc-col-toggle{width:1%;white-space:nowrap;text-align:right}
#content[data-template] .pc-row-detail>td{background:rgba(255,255,255,.015)}
#content[data-template] .pc-row-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 22px;margin:4px 0}
#content[data-template] .pc-row-dl dt{font-size:11.5px;color:var(--ui-muted)}
#content[data-template] .pc-row-dl dd{margin:2px 0 0;font-size:13px}
@media (max-width:720px){
  #content[data-template] :is(th,td).pc-col-toggle,#content[data-template] .pc-row-detail{display:none}
}

/* ---- Phones and narrow windows: the hero stacks ---- */
@media (max-width:1100px){
  #content[data-template] .pc-hero,#content[data-template] .pc-hero[data-nochart=true]{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
  #content[data-template] .pc-hero-chart{grid-column:1/-1;grid-row:2}
}
@media (max-width:720px){
  #content[data-template] .pc-hero,#content[data-template] .pc-hero[data-nochart=true]{grid-template-columns:minmax(0,1fr);gap:18px;padding:18px;margin-bottom:18px}
  #content[data-template] .pc-hero-chart{grid-row:auto}
  #content[data-template] .pc-hero-value{font-size:34px}
  #content[data-template] .pc-area{height:80px}
  #content[data-template] .pc-bars{height:70px}
  #content[data-template] .pc-hero.pc-hero-inline,#content[data-template] .pc-hero[data-nostats=true]{grid-template-columns:minmax(0,1fr)}
  #content[data-template] .pc-last .pc-hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}