/* Page frame: sticky header, compact page head, two-column work area.
   The old hero used clamp(2.8rem,7vw,6.5rem) display type and up to 120px of
   padding, which pushed every control below the fold. Nothing here exceeds
   ~50px of vertical chrome above the tool itself. */

.top{
  display:flex;align-items:center;gap:var(--s5);
  padding:0 var(--s5);height:52px;
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50
}
.brand{
  margin-right:var(--s1);
  color:var(--ink);text-decoration:none;
  font:600 17px/1 var(--serif);letter-spacing:-.01em;white-space:nowrap
}
.brand em{
  color:var(--accent);font-style:normal;font-size:11px;font-family:var(--sans);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  vertical-align:2px;margin-left:5px
}
.top nav{display:flex;flex-wrap:wrap;gap:2px;margin-right:auto}
.top nav a{
  padding:7px 11px;border-radius:var(--r);
  color:var(--ink-2);text-decoration:none;
  font-size:13.5px;font-weight:500;white-space:nowrap
}
.top nav a:hover{background:var(--sunken);color:var(--ink)}
.top nav a[aria-current=page]{background:var(--accent-soft);color:var(--accent);font-weight:600}

.tbtn{
  display:grid;place-items:center;width:32px;height:32px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);color:var(--ink-2);
  cursor:pointer;font-size:14px;flex:none
}
.tbtn:hover{border-color:var(--line-2);color:var(--ink)}

.head{
  padding:18px var(--s5) 14px;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap
}
.head h1{font-size:25px}
.head p{color:var(--ink-3);font-size:13.5px;max-width:62ch}

/* Two-column work area: controls left, output right. A calculation never
   requires scrolling to see its result on a normal desktop viewport. */
.work{display:grid;grid-template-columns:minmax(400px,1fr) minmax(440px,1.15fr);align-items:start}
.col{padding:18px var(--s5) var(--s6)}
.col+.col{
  border-left:1px solid var(--line);
  background:var(--sunken);
  min-height:calc(100vh - 118px)
}

/* Single-column pages (Learn, Glossary, Evidence tabs). Prose is capped for
   readability, but the PAGE is not: cards and tables use the full width, so a wide
   screen is not half empty. */
.content{padding:var(--s5);max-width:1320px}
.content.narrow{max-width:900px}
.content > p,.content > h2 + p,.content > ol,.content > ul{max-width:78ch}

.footer{
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  padding:16px var(--s5);
  border-top:1px solid var(--line);
  background:var(--surface);color:var(--ink-3);font-size:12.5px
}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.grid.two{grid-template-columns:repeat(2,1fr)}

@media(max-width:920px){
  .work{grid-template-columns:1fr}
  .col+.col{border-left:0;border-top:1px solid var(--line);min-height:0}
  .grid,.grid.two{grid-template-columns:1fr}
}
@media(max-width:700px){
  .top{height:auto;padding:8px var(--s4);flex-wrap:wrap;gap:var(--s2)}
  .top nav{order:3;width:100%}
  .head{padding:14px var(--s4) 12px}
  .col{padding:14px var(--s4) var(--s5)}
}

/* Short viewports (laptops at 1366x768 and below, which is most conference laptops).
   The brief was "as much above the fold as possible"; measured on a 720px-tall viewport
   the Calculate button landed at 893px. These reclaim ~180px without hiding anything:
   the page head collapses to a single line and the field rhythm tightens. */
@media (max-height:820px) and (min-width:921px){
  /* The head's subtitle wraps to two lines and costs ~40px. On a short screen the
     h1 and subtitle share one line and the subtitle truncates rather than wrapping;
     the full text stays available as its title attribute and to screen readers. */
  .head{padding:8px var(--s5);gap:12px;flex-wrap:nowrap;align-items:baseline}
  .head h1{font-size:19px;white-space:nowrap}
  .head p{
    font-size:12.5px;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap
  }
  .col{padding:10px var(--s5) var(--s5)}
  .fields{gap:7px 14px}
  .hint{margin-top:2px;font-size:11px;line-height:1.3}
  .go{margin-top:10px;padding:9px}
  details.panel{margin-top:6px}
  .session-toolbar{margin-top:8px}
  /* The method description is reference material once you know the test. Keep the
     first line and the example visible, drop the vertical padding. */
  .about{padding:8px 11px;margin-bottom:9px}
  .about p{font-size:12.5px;line-height:1.45;margin-bottom:4px}
  .about b{margin-bottom:2px}
  .effect-help{margin:8px 0 0}
}

/* The primary action must always be reachable without hunting.
   Even after tightening, a 1366x768 laptop (768px chrome-inclusive -> ~720px viewport)
   cannot fit ten inputs plus the button. Rather than hide inputs or shrink text below
   comfortable reading size, the action sticks to the bottom of the form column: it is
   on screen at every scroll position, at every height, without covering content
   (the column reserves space for it). */
@media (min-width:921px){
  /* simulation-lab and validate use the legacy .tool-layout / .form-card structure
     rather than .work > .col, so the sticky action is applied to both shapes. */
  .tool-layout > .form-card,
  .tool-layout > form{
    position:sticky;top:52px;
    display:flex;flex-direction:column;
    max-height:calc(100vh - 64px)
  }
  .tool-layout > .form-card > .submit,
  .tool-layout > form > .submit{
    position:sticky;bottom:0;z-index:5;margin-top:auto;
    box-shadow:0 -10px 18px -8px var(--surface)
  }
  .work > .col:first-child{
    display:flex;flex-direction:column;
    max-height:calc(100vh - 52px);
    position:sticky;top:52px;
  }
  /* The result column scrolls independently, so the headline number cannot end up
     clipped beneath the sticky header when the form column is short. */
  .work > .col:nth-child(2){
    position:sticky;top:52px;
    max-height:calc(100vh - 52px);
    overflow-y:auto;
    scroll-padding-top:var(--s3)
  }
  .work > .col:first-child > form{
    display:flex;flex-direction:column;min-height:0;flex:1
  }
  /* Everything above the button scrolls; the button does not. */
  .work > .col:first-child .go{
    position:sticky;bottom:0;z-index:5;
    margin-top:auto;
    box-shadow:0 -10px 18px -8px var(--paper)
  }
  .work > .col:first-child > form > .go ~ *{flex:none}
}