/* hubs-guides.css: the guide and the field guide on the hub layout in hubs.css.
   The three steps, the eight tools, the question list, the public links, the
   test threads and the five fields become rows on hairlines, with the name in
   the rail and square controls. Loaded after hubs.css by guide.html and
   field-guide.html only; every rule is scoped to body.hub-plate with the same
   :not(#_) step. */

/* 1. The guide: the three steps and the eight tools become rows. */
html:root body.hub-plate:not(#_) main .idea{display:block;max-width:var(--hub-wide);margin:clamp(1.5rem,3vw,2.5rem) 0 0;border-top:1px solid var(--line-strong)}
html:root body.hub-plate:not(#_) main .idea .step{display:grid;grid-template-columns:minmax(9rem,15rem) minmax(0,1fr);column-gap:clamp(1rem,3vw,2.5rem);padding:1.4rem 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
html:root body.hub-plate:not(#_) main .idea .step > *{grid-column:2}
html:root body.hub-plate:not(#_) main .idea .step .n{grid-column:1;grid-row:1 / span 2;font-family:var(--font-sans);font-size:1.0625rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
html:root body.hub-plate:not(#_) main .idea .step h3{margin:0 0 .5rem;font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem);font-weight:720;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
html:root body.hub-plate:not(#_) main .idea .step p{margin:0;max-width:var(--hub-read);font-size:1.0625rem;line-height:1.6;color:var(--soft)}

html:root body.hub-plate:not(#_) main .tools{display:block;max-width:none;margin:clamp(1.5rem,3vw,2.5rem) 0 0;border-top:1px solid var(--line-strong)}
html:root body.hub-plate:not(#_) main .tools .tool{display:grid;grid-template-columns:minmax(10rem,17rem) minmax(0,1fr);column-gap:clamp(1.25rem,3.5vw,3.5rem);padding:clamp(1.5rem,3vw,2.25rem) 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
html:root body.hub-plate:not(#_) main .tools .tool > *{grid-column:2;min-width:0}
html:root body.hub-plate:not(#_) main .tools .tool > .top{grid-column:1;grid-row:1 / span 3;display:block}
html:root body.hub-plate:not(#_) main .tools .tool .name{display:block;font-family:var(--font-sans);font-size:clamp(1.9rem,1.3rem + 1.8vw,2.9rem);font-weight:780;letter-spacing:-.04em;line-height:.95;text-transform:none;color:var(--ink)}
html:root body.hub-plate:not(#_) main .tools .tool .role{display:block;margin-top:.65rem;font-family:var(--font-sans);font-size:1rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--soft)}
html:root body.hub-plate:not(#_) main .tools .tool .what{margin:0 0 1.1rem;max-width:var(--hub-read);font-size:1.125rem;line-height:1.55;color:var(--ink)}
html:root body.hub-plate:not(#_) main .tools .tool dl{display:grid;gap:0;margin:0;padding:0;border:0;border-top:1px solid var(--line)}
html:root body.hub-plate:not(#_) main .tools .tool dl > div{display:grid;grid-template-columns:minmax(8rem,10rem) minmax(0,1fr);column-gap:1.25rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
html:root body.hub-plate:not(#_) main .tools .tool dt{margin:0;font-family:var(--font-sans);font-size:.9375rem;font-weight:700;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--ink)}
html:root body.hub-plate:not(#_) main .tools .tool dd{margin:0;font-size:1rem;line-height:1.55;color:var(--soft)}
html:root body.hub-plate:not(#_) main .tools .tool dd.use{padding:.7rem .9rem;overflow-x:auto;border:1px solid var(--line);border-radius:0;background:var(--inset);font-family:var(--font-mono);font-size:.9375rem;line-height:1.65;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
html:root body.hub-plate:not(#_) main .tools .tool .links{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;margin-top:1.1rem}
html:root body.hub-plate:not(#_) main .tools .tool .links a{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;font-family:var(--font-sans);font-size:1rem;font-weight:650;letter-spacing:0;text-transform:none;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}

html:root body.hub-plate:not(#_) main .pick{display:block;max-width:var(--hub-wide);margin:clamp(1.5rem,3vw,2.25rem) 0 0;border-top:1px solid var(--line-strong)}
html:root body.hub-plate:not(#_) main .pick .pick-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(7rem,11rem);column-gap:1.5rem;align-items:baseline;padding:1rem 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
html:root body.hub-plate:not(#_) main .pick .q{font-size:1.0625rem;line-height:1.55;color:var(--soft)}
html:root body.hub-plate:not(#_) main .pick .a{font-family:var(--font-sans);font-size:1.35rem;font-weight:760;letter-spacing:-.02em;text-align:right;text-transform:none;color:var(--ink)}

/* 2. The field guide: public links as rows, test threads as square controls,
   and the five fields as rows with the field named in the rail. */
html:root body.hub-plate:not(#_) main .call-band{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(13rem,.75fr);column-gap:clamp(1.5rem,4vw,4rem);align-items:start;margin:0;padding:0;border:0;background:none}
html:root body.hub-plate:not(#_) main .repo-list{display:grid;gap:0;margin:0;padding:0;border:0;border-top:1px solid var(--line-strong)}
html:root body.hub-plate:not(#_) main .repo-list a{display:flex;align-items:center;min-height:44px;padding:.55rem 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none;font-family:var(--font-sans);font-size:1.0625rem;font-weight:650;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
html:root body.hub-plate:not(#_) main .thread-list{display:flex;flex-wrap:wrap;gap:.6rem;margin:clamp(1.75rem,3vw,2.5rem) 0 0;padding:0;border:0;background:none}
html:root body.hub-plate:not(#_) main .thread-list a{display:inline-flex;align-items:center;min-height:44px;padding:.5rem .95rem;border:1px solid var(--line-strong);border-radius:var(--radius-control,2px);background:none;box-shadow:none;font-family:var(--font-sans);font-size:1rem;font-weight:650;color:var(--ink);text-decoration:none}
html:root body.hub-plate:not(#_) main .thread-list a:is(:hover,:focus-visible){background:var(--ink);color:var(--paper);border-color:var(--ink)}

html:root body.hub-plate:not(#_) main .field-grid{display:block;margin:clamp(1.5rem,3vw,2.5rem) 0 0;border-top:1px solid var(--line-strong)}
html:root body.hub-plate:not(#_) main .field-grid .field-card{display:grid;grid-template-columns:minmax(10rem,16rem) minmax(0,1fr);column-gap:clamp(1.25rem,3.5vw,3.5rem);padding:clamp(1.5rem,3vw,2.25rem) 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
html:root body.hub-plate:not(#_) main .field-card > *{grid-column:2;min-width:0}
html:root body.hub-plate:not(#_) main .field-card > .tag{grid-column:1;grid-row:1 / span 5;display:block;margin:0;padding:.3rem 0 0;border:0;border-radius:0;background:none;font-family:var(--font-sans);font-size:1.0625rem;font-weight:700;line-height:1.35;letter-spacing:0;text-transform:none;color:var(--ink)}
html:root body.hub-plate:not(#_) main .field-card h3{max-width:26ch;margin:0 0 1rem;font-size:clamp(1.5rem,1.1rem + 1.3vw,2.25rem);font-weight:760;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
html:root body.hub-plate:not(#_) main .field-card p{max-width:var(--hub-read);margin:0 0 .9rem;font-size:1.0625rem;line-height:1.6;color:var(--soft)}
html:root body.hub-plate:not(#_) main .field-card p b{color:var(--ink)}
html:root body.hub-plate:not(#_) main .field-card ul{max-width:var(--hub-read);margin:1rem 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
html:root body.hub-plate:not(#_) main .field-card li{margin:0;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:1rem;line-height:1.55;color:var(--soft)}
html:root body.hub-plate:not(#_) main .field-card li::before{display:none}
html:root body.hub-plate:not(#_) main .field-card li > span:first-child{font-family:var(--font-sans);font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}

/* 3. Phones and narrow windows: every row stacks, the name above its text. */
@media (max-width:52rem){
  html:root body.hub-plate:not(#_) main .call-band{grid-template-columns:minmax(0,1fr);row-gap:1.5rem}
}
@media (max-width:40rem){
  html:root body.hub-plate:not(#_) main :is(.idea .step,.tools .tool,.field-grid .field-card,.tools .tool dl > div){grid-template-columns:minmax(0,1fr);row-gap:.4rem}
  html:root body.hub-plate:not(#_) main :is(.idea .step,.tools .tool,.field-grid .field-card) > *{grid-column:1}
  html:root body.hub-plate:not(#_) main :is(.idea .step .n,.tools .tool > .top,.field-card > .tag){grid-row:auto;margin-bottom:.35rem}
  html:root body.hub-plate:not(#_) main .pick .pick-row{grid-template-columns:minmax(0,1fr);row-gap:.2rem}
  html:root body.hub-plate:not(#_) main .pick .a{text-align:left}
}
@media (forced-colors:active){
  html:root body.hub-plate:not(#_) .thread-list a:is(:hover,:focus-visible){background:Highlight;color:HighlightText}
}