/* harrhys.com · layout.css · home dashboard + wide/responsive page layouts */
/* ---------- home dashboard (wider page, more breathing room) ---------- */
/* sized for a 1920px monitor first; reflows for iPad landscape (~1130-1200), iPad portrait (~740-840) and iPhone (~430) */
/* navbar keeps the same full width on every page (no resizing when you change pages) */
.topin{max-width:1720px}
/* every page uses the full 1920 width; each page then lays its content out across it below */
.page,footer{max-width:1720px}
.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:999px){.sgrid{grid-template-columns:minmax(0,1fr)}}
/* builds list: rows in two columns */
@media (min-width:1200px){.page-builds .blist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}}
/* a build's checklist: sections side by side (4 across on 1920, 2 on iPad landscape/laptops) */
@media (min-width:1000px){
  .page-build,.page-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;align-items:start}
  .page-build>*:not(.sec),.page-build>.sec-notes,.page-steps>*:not(.sec){grid-column:1/-1}}
@media (min-width:1600px){.page-build{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* scripts: commands in columns within each group */
@media (min-width:1200px){.page-scripts .sec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}.page-scripts .sec>.shead{grid-column:1/-1}}
@media (min-width:1600px){.page-scripts .sec{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* replies: wider list, preview beside it */
@media (min-width:1200px){.page-replies .pane2{grid-template-columns:380px minmax(0,1fr)}}
/* tool results side by side instead of one long column */
@media (min-width:1200px){
  #eout,#ho,#cout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;align-items:start}
  #ho>:nth-child(3),#cout>p{grid-column:1/-1}
  #mo>.panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px}
  #mo .chk-row:nth-last-child(2){border-bottom:0}}
@media (min-width:1600px){.page,.topin,footer{padding-left:32px;padding-right:32px}}
.fill{flex:1 1 0;min-height:0;overflow:hidden}
/* "+N more" line added by fitLists() when a list has more than fits */
.fill>.fmore{display:block;padding:4px 0 0;font-size:.82rem;font-weight:600;color:var(--sage-d);list-style:none;border:0}
.fmore a{color:inherit;text-decoration:none}.fmore a:hover{text-decoration:underline}
.clock{display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:right}
.clock .tm{font:400 2.7rem/1 "Share Tech Mono",ui-monospace,monospace;color:var(--sage-d);flex:none}
/* fixed-width cells per character so the time never shifts as digits change */
.clock .tm i{font-style:normal;display:inline-block;width:.6em;text-align:center}.clock .tm i.c{width:.3em}
:root[data-theme="dark"] .clock .tm{text-shadow:0 0 18px var(--glow)}
.clock small{display:block;color:var(--muted);font-size:.82rem;line-height:1.35;font-variant-numeric:tabular-nums}.clock b{color:var(--blue-ink)}
/* coming up: built-in dates + reminders, beside the clock */
.upcp h3{margin:0}.upcp .spread{align-items:center}.upcp .ghost{font-size:.82rem}
.upc{list-style:none;margin:6px 0 0;padding:0}
.upc li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:3px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.upc li:last-child{border-bottom:0}
.upc .ut{min-width:0}.upc .ut small{color:var(--muted);font-size:.75rem}
.upc .ud{flex:none;text-align:right;white-space:nowrap}.upc .ud b{font-weight:600}.upc .ud small{color:var(--muted);margin-left:6px;font:400 .78rem "Share Tech Mono",ui-monospace,monospace}
.upc li.soon .ud b{color:var(--blue-ink)}.upc li.now .ud b,.upc li.now .ut{color:var(--sage-d);font-weight:700}
.evdel{border:0;background:transparent;padding:0 4px;color:var(--muted);font-size:1rem;line-height:1}.evdel:hover{color:var(--danger);box-shadow:none}
.evf{display:grid;grid-template-columns:1fr auto;gap:6px;margin-top:8px}.evf input[type=text]{grid-column:1/-1}
.evf input,.evf select{padding:5px 8px;font-size:.88rem}
.evf .primary{padding:5px 14px}.evf select{width:auto}
.stats.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0}
a.stat{display:block;text-decoration:none;transition:border-color .3s,transform .45s var(--ease)}
a.stat:hover{transform:translateY(-3px)}
/* finished per month: column chart that fills the tile */
.mchart{flex:1;display:flex;gap:8px;margin-top:8px;min-height:120px}
.mcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.mcol b{font-size:.8rem;color:var(--muted)}.mcol small{font-size:.78rem;color:var(--muted)}
.mtrack{flex:1;width:100%;max-width:46px;display:flex;align-items:flex-end;background:color-mix(in srgb,var(--line) 45%,transparent);border-radius:2px;overflow:hidden}
.mtrack i{display:block;width:100%;background:linear-gradient(0deg,var(--sage),var(--blue));box-shadow:0 0 10px var(--glow);transition:height .6s var(--ease)}
/* on the bench: recently finished builds sit at the foot of the tile */
.bfoot{margin-top:auto;padding-top:10px;display:flex;flex-direction:column;gap:2px}
.bfoot .mlabel{color:var(--muted);margin-bottom:2px}
.brecent{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-top:1px solid var(--line);text-decoration:none;font-size:.9rem}
.brecent small{color:var(--muted);white-space:nowrap}.brecent:hover b{color:var(--sage-d)}
.qbtns{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.qbtns button{padding:8px 6px}
.qcmd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.qcmd:last-child{border-bottom:0}
.qcmd b{display:block;font-weight:600;font-size:.95rem}
code.qc{display:block;margin-top:4px;padding:3px 8px;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qbtns button{flex:1}
.pchips{display:flex;flex-wrap:wrap;gap:10px}
.pchip{padding:9px 14px;border:1px solid var(--line);border-radius:3px;background:var(--card);text-decoration:none;font-weight:600;transition:border-color .2s,box-shadow .2s}
.pchip span{color:var(--sage-d)}
.pchip:hover{border-color:var(--sage);box-shadow:0 0 16px var(--glow)}
/* header: tighten up so all links fit on iPads without scrolling */
@media (max-width:1100px){.tl{padding:6px 8px;font-size:.85rem}.ckbtn kbd{display:none}}
@media (max-width:900px){.ckbtn .ckword{display:none}.logo{margin-right:4px}}
@media (max-width:780px){.logo span{display:none}}
/* phones: the header is one slim row (see mobile.css); there's room for the full logo again */
@media (max-width:599px){.logo span{display:inline}}