/* Board layout, loaded after doom.css: a slim top bar, a one-line vitals strip, and a free grid of panels (gridstack)
   that size to their content. No panel scrolls inside; a panel shows either its full view or its summary (.is-sum). */
html,body{height:auto}
body{padding-block:8px}
.dash{display:flex;flex-direction:column;gap:8px;height:auto}

/* ---------- top bar: one row, about 36px ---------- */
.top{flex-direction:row;align-items:stretch;min-height:36px}
.brand{flex-direction:row;align-items:center;gap:10px;padding:4px 12px;min-width:0;white-space:nowrap}
.brand h1{font-size:1.05rem;line-height:1}
.brand small{gap:0}
.brand small .lt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.brand .api{margin:0;font-size:.625rem}
.cty{flex-direction:row;align-items:center;margin:0}
.cty span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.cty select{padding:3px 6px;font-size:.75rem;max-width:150px}
.estnote{margin:0}
.ticks{grid-template-columns:repeat(7,minmax(0,1fr))}
.tick{gap:0;padding:3px 10px}
.tick .n{font-size:.8125rem;line-height:1.2}
.tick .l{font-size:.625rem;line-height:1.2}
.tick .lw,.tick .a{display:none}
.over{flex-direction:row;align-items:baseline;gap:8px;padding:4px 12px;min-width:0;max-width:300px;border-left:1px solid var(--line)}
.over .big{font-size:1.05rem;white-space:nowrap}
.over small{font-size:.6875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.over #overSrc{flex:none}
.reset{flex:none;align-self:center;margin:0 8px;background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);font:500 .6875rem var(--mono);padding:3px 8px;cursor:pointer;white-space:nowrap}
.reset:hover{color:var(--ink);border-color:var(--dim)}
.one-col .reset{display:none}
@media (max-width:1080px){
  .top{flex-wrap:wrap}
  .brand{flex:1 1 auto;border-right:0}
  .over{max-width:none;flex:1 1 auto;border-left:0}
  .ticks{order:3;flex-basis:100%;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line)}
  .tick{border-bottom:1px solid var(--line)}
}
@media (max-width:820px){.ticks{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){
  .ticks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand .api{display:none}
}

/* ---------- planet vitals: one line per reading, Details opens the context ---------- */
.vbar{display:flex;align-items:stretch;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;min-width:0}
.vbar .vitals{flex:1;border:0;border-radius:0;background:none;min-width:0}
.vit{flex-direction:row;align-items:center;gap:8px;padding:4px 12px;flex:1 1 auto;min-width:0;overflow:hidden}
.vit .k{flex:none}
.vit .v{font-size:.875rem}
.vbar:not(.open) .vitals{flex-wrap:nowrap}
.vbar:not(.open) .vit .s{font-size:0;gap:0;flex-wrap:nowrap}
.vbar:not(.open) .vit .s .chip{font-size:.625rem;padding:1px 6px}
.vbar.open .vit{flex-wrap:wrap}
.vbar.open .vit .s{flex-basis:100%}
.vmore{flex:none;align-self:center;margin:0 8px;background:none;border:0;color:var(--muted);font:500 .6875rem var(--mono);padding:4px 6px;cursor:pointer}
.vmore:hover{color:var(--ink)}

/* ---------- the board ---------- */
.grid-stack{min-height:200px}
.grid-stack>.grid-stack-item>.grid-stack-item-content{overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:10px;container:panel/inline-size}
/* the panel content keeps its natural height; the grid item is sized to it by js/layout.js */
.grid-stack .tile{height:auto;border:0;border-radius:0;background:none;overflow:visible}
.grid-stack .tile .scroll{overflow:visible;flex:none;max-height:none}
.grid-stack .tile.globe{height:100%;overflow:hidden}
.grid-stack-placeholder>.placeholder-content{background:rgba(67,198,219,.06);border:1px dashed var(--sel);border-radius:10px}
.grid-stack-item.ui-draggable-dragging>.grid-stack-item-content{box-shadow:0 18px 40px -10px rgba(0,0,0,.7);border-color:var(--dim)}
.grid-stack-item.ui-resizable-resizing>.grid-stack-item-content{border-color:var(--sel)}
.drag{cursor:grab}
.ui-draggable-dragging .drag{cursor:grabbing}
.one-col .drag{cursor:auto}
/* resize handles: quiet until hover */
.grid-stack-item>.ui-resizable-se{opacity:0;transition:opacity .15s}
.grid-stack-item:hover>.ui-resizable-se{opacity:.7}

/* header controls: the summary toggle sits at the end of every header */
.head{align-items:center;padding-right:40px}
.head h2{margin-right:auto}
.head .vt{position:absolute;top:6px;right:6px}
.vt{flex:none;width:24px;height:24px;display:grid;place-items:center;padding:0;background:none;border:1px solid transparent;border-radius:6px;color:var(--dim);cursor:pointer}
.vt svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vt:hover{color:var(--ink);border-color:var(--line);background:var(--panel2)}
.ghead{display:flex;align-items:center;gap:8px;pointer-events:auto;width:max-content}
.globe .title{pointer-events:none}
.globe .ghead .vt{pointer-events:auto}

/* long lists: a few rows, then "+N more" (js/layout.js) grows the panel */
.lst:not(.open)>.li:nth-child(n+6){display:none}
.more{align-self:flex-start;background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);font:500 .6875rem var(--mono);padding:4px 10px;margin:-4px 0 10px;cursor:pointer}
.more:hover{color:var(--ink);border-color:var(--dim)}

/* wide panels use the width instead of growing tall */
@container panel (min-width:620px){
  .lst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
  .plist,.clist,.swaps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .dgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container panel (min-width:900px){
  .plist,.swaps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dgrid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@container panel (max-width:360px){
  .dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .equiv{grid-template-columns:minmax(0,1fr)}
}

/* ---------- summary views: the one or two numbers that matter, everything else folded away ---------- */
.is-sum .head .hint{display:none}
/* your day: the whole-country total and the first three figures */
.is-sum .dshade,.is-sum #dayNote,.is-sum .dcell .w,.is-sum .dcell .eqv{display:none}
.is-sum .dcell:nth-child(n+4){display:none}
.is-sum .dgrid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
@container panel (max-width:300px){.is-sum .dgrid{grid-template-columns:minmax(0,1fr)}.is-sum .dcell:nth-child(n+2){display:none}}
/* forecast: the saving and a short chart */
.is-sum .swaps,.is-sum .people,.is-sum #fsrc{display:none}
.is-sum .fchart{height:96px}
/* listings: the headline and the top three; products and stores: the top three */
.is-sum #lpanel>:nth-child(n+4),.is-sum #lpanel .li:nth-child(n+4),.is-sum #lpanel .li .c{display:none}
.is-sum .pcard:nth-child(n+4),.is-sum .puse,.is-sum .pwiki,.is-sum .psrcs{display:none}
.is-sum .co:nth-child(n+4),.is-sum .cdet{display:none}
.is-sum .more{display:none}
/* clocks: the years left, no slider or notes */
.is-sum .grow,.is-sum #clkNote,.is-sum .clk .cs{display:none}
/* receipt: totals and the budget bar */
.is-sum .rrow,.is-sum .rc>hr:first-of-type,.is-sum .receipt .note{display:none}
/* globe: route and one figure */
.is-sum .globe .search,.is-sum .globe .overlay .stat:nth-child(n+2),.is-sum .globe .overlay .srcrow{display:none}
.is-sum .globe .title p{font-size:.95rem}
.is-sum .globe .title p small{display:none}

@media (prefers-reduced-motion:reduce){.grid-stack>.grid-stack-item{transition:none!important}}