/* Lastbook. Plain CSS shared by both pages. */

@font-face{font-family:"Atkinson Hyperlegible Next";font-weight:400;font-style:normal;font-display:swap;
  src:url("fonts/AtkinsonHyperlegibleNext-Regular.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-weight:600;font-style:normal;font-display:swap;
  src:url("fonts/AtkinsonHyperlegibleNext-SemiBold.woff2") format("woff2")}
@font-face{font-family:"LB Fallback";font-weight:400;
  src:local("Arial"),local("Helvetica"),local("Roboto");
  size-adjust:99.9%;ascent-override:98.5%;descent-override:31.6%}
@font-face{font-family:"LB Fallback";font-weight:600;
  src:local("Arial Bold"),local("Helvetica Bold"),local("Roboto Bold");
  size-adjust:97.4%;ascent-override:101%;descent-override:32.4%}

:root{
  color-scheme:light dark;
  --page:#F6F7F4;--tint:#E4EEE9;--ink:#1A2622;--muted:#4C5A54;--control:#78867F;--rule:#D9DED9;
  --accent:#17594A;--on-accent:#FFFFFF;--wait-text:#7A4A00;--wait-bg:#F8EBCF;--focus:#0B4FA8;
  --gap:56px;
  /* Type sizes in rem, so the browser's font-size setting is respected. */
  --text-sm:1rem;--text-md:1.125rem;--text-lg:1.3125rem;--text-xl:1.875rem;
  --lead-sm:1.5;--lead-md:1.5;--lead-lg:1.24;--lead-xl:1.2;
}
@media (prefers-color-scheme:dark){
  :root{
    --page:#121918;--tint:#1E2E2A;--ink:#E8EDEA;--muted:#A9B6B1;--control:#6F817B;--rule:#2C3835;
    --accent:#7CCBB6;--on-accent:#0C1B17;--wait-text:#E8B860;--wait-bg:#2E2513;--focus:#9CC3FF;
  }
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
/* Room above a focused control for its question, and below it for the pinned total. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-block:56px 96px}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:"Atkinson Hyperlegible Next","LB Fallback",sans-serif;
  font-weight:400;font-size:var(--text-md);line-height:var(--lead-md)}
h1,h2,p,ol,ul,fieldset,legend{margin:0;padding:0}
fieldset{border:0;min-width:0}
input,select,button{font:inherit;color:inherit}
h1,h2,legend,.steplabel,.wordmark,.name,.size,#total,.waithead{font-weight:600}
h1,#total{font-size:var(--text-xl);line-height:var(--lead-xl)}
h1{text-wrap:balance}
h2,legend,.steplabel,.wordmark,.name{font-size:var(--text-lg);line-height:var(--lead-lg)}
.small,.line,.waitblock,.linkfield,.freeroom,#addnote,footer.site,
.owners .what,.owners .from,.download .fine,.download .also{font-size:var(--text-sm);line-height:var(--lead-sm)}

/* The hit area grows past 44px while the focus ring stays tight around the words. */
a{color:var(--accent);text-decoration:underline}
a:not(.btn){position:relative}
a:not(.btn)::after{content:"";position:absolute;inset:-12px 0}
a.wordmark{color:inherit;text-decoration:none}

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* Page frame */
.wrap{max-width:672px;padding-inline:16px;margin-inline:auto}
header.site{display:flex;align-items:center;justify-content:space-between;padding-block:8px}
main{padding-top:24px}
.hero p{margin-top:16px}
.wait,.waitblock{color:var(--wait-text);background:var(--wait-bg);border-radius:4px}
.wait{padding:12px 16px}
.chooser,.lower,.lower-list{margin-top:var(--gap)}
.lower p,.lower ol{margin-top:16px}
.lower ol{padding-left:28px}
.lower li+li{margin-top:12px}
footer.site{margin-top:var(--gap);padding-block:24px 32px;border-top:1px solid var(--rule);color:var(--muted)}
footer.site p+p{margin-top:12px}

/* Fields */
select,.linkfield,.search input{display:block;width:100%;min-height:56px;padding-inline:12px;
  background-color:var(--page);border:1px solid var(--control);border-radius:4px}

/* Steps */
.steps>*+*{margin-top:40px}
.steps>.nojs{margin-top:24px}
.steplabel{display:block}
.statebox{margin-top:16px;min-height:88px}
#mapnote{margin-top:8px;min-height:24px;color:var(--muted);font-variant-numeric:tabular-nums}
.allbox{display:flex;align-items:center;min-height:56px}

/* Disclosures */
summary{display:flex;align-items:center;gap:8px;min-height:56px;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"";flex:none;border-block:6px solid transparent;border-left:9px solid currentColor}
details[open]>summary::before{transform:rotate(90deg)}
.freeroom{margin-top:4px;color:var(--muted)}
.freeroom summary{min-height:44px}
.freeroom p{margin-bottom:4px}

.rows{margin-top:16px;border-block:1px solid var(--rule)}
.row{display:flex;gap:12px;align-items:flex-start;min-height:72px;padding:12px;cursor:pointer}
.row+.row{border-top:1px solid var(--rule)}
.row input,.opt input{flex:none;width:24px;height:24px;margin:1px 0 0;accent-color:var(--accent)}
.row:has(:checked){background:var(--tint);box-shadow:inset 0 0 0 2px var(--accent)}
.rowbody{display:block;min-width:0;flex:1}
.rowhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:12px}
.size{font-variant-numeric:tabular-nums}
.line{display:block;margin-top:4px;color:var(--muted)}
.below{margin-top:12px;color:var(--muted)}

/* Add-ons */
#addnote{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--accent)}
.opt{display:flex;gap:12px;align-items:center;min-height:56px;padding:8px 12px;cursor:pointer;
  border-top:1px solid var(--rule);font-variant-numeric:tabular-nums}
.opt input{margin:0}
.allmore{display:flex;align-items:center;min-height:56px}

/* Total. Under 960px it is pinned to the bottom edge while the chooser is on screen. */
.stick{display:contents}
.total{position:sticky;bottom:0;z-index:2;min-height:82px;margin-top:40px;
  margin-inline:-16px;padding:8px 16px 12px;background:var(--page);border-top:2px solid var(--rule)}
.bar,.barlabels{display:none}
#total{font-variant-numeric:tabular-nums}
.note{color:var(--muted)}

/* Outcome */
.outcome{margin-top:24px}
.waitblock{padding:16px;min-height:140px}
.waithead{font-size:var(--text-md);line-height:var(--lead-sm)}
#recap{margin-top:4px}
#waitline{margin-top:4px}
.carry{margin-top:32px}
.carry>p{margin-top:8px}
.linklabel{display:block;margin-top:16px;font-weight:600}
.linkfield{margin-top:4px}
.actions{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:10px 16px;
  font-size:var(--text-md);line-height:var(--lead-sm);font-weight:600;text-align:center;text-decoration:none;cursor:pointer;
  color:var(--accent);background:transparent;border:1px solid var(--accent);border-radius:4px}
.fill-btn{color:var(--on-accent);background:var(--accent)}
.copystatus{margin-top:8px;min-height:24px;color:var(--muted)}
.question{margin-top:24px}
.download .fine,.download .also{margin-top:12px}
.download .fine{color:var(--muted)}

/* Credits */
.credits-intro p{margin-top:12px}
.search{margin-top:16px}
.search label{display:block;font-weight:600}
.search input{margin-top:8px}
#searchstatus{margin-top:8px;min-height:24px}
.lower-list>.nojs,#loaderror{margin-top:16px}
#ownernote{margin-top:16px;color:var(--muted)}
.plainlist{list-style:none;margin-top:16px}
.plainlist li+li{margin-top:8px}
.owners{list-style:none;margin-top:12px;border-top:1px solid var(--rule)}
.owners li{padding-block:12px;border-bottom:1px solid var(--rule);overflow-wrap:anywhere}
.owners .owner{display:block;font-weight:600}
.owners .what,.owners .from{display:block;color:var(--muted)}

/* JavaScript gates */
.nojs{display:none}
html:not(.js) .nojs{display:block}
html:not(.js) .total,html:not(.js) .carry,html:not(.js) #recap,html:not(.js) .search{display:none}
html:not(.js) .waitblock{min-height:0;margin-top:40px}

/* Focus */
a:focus-visible,button:focus-visible,summary:focus-visible,
select:focus-visible,input:focus-visible,
.row:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.row:has(input:focus-visible){position:relative;z-index:1;transition:none}
@supports selector(:has(*)){.row input:focus-visible{outline:none}}

/* Hover, only where a pointer can hover */
@media (hover:hover){
  .row:hover,.opt:hover,.btn:hover{background:var(--tint)}
  .fill-btn:hover{background:var(--accent);opacity:.9}
  summary:hover{color:var(--accent)}
}

/* Motion */
@media (prefers-reduced-motion:no-preference){
  .bar .fill{transition:transform 120ms ease-out}
  .btn{transition:transform 150ms ease-out}
  .btn:active{transform:scale(.97)}
  .row{transition:background-color 120ms ease-out,box-shadow 120ms ease-out,transform 150ms ease-out}
  .row:active{transform:scale(.985)}
}

/* Very narrow windows and very high zoom */
@media (max-width:359px){
  #total{font-size:1.625rem;line-height:1.24}
  .statebox{min-height:112px}
}

/* Desktop. The total and Not ready stay in view; Keep your choices follows the steps. */
@media (min-width:960px){
  :root{--gap:72px}
  html{scroll-padding-bottom:0}
  h1{font-size:2.5rem;line-height:1.15}
  h2,legend,.steplabel{font-size:1.5rem;line-height:1.25}
  .wrap{max-width:1040px}
  .hero,.lower,.lower-list{max-width:640px}
  footer.site p{max-width:640px}
  .chooser{display:grid;grid-template-columns:minmax(0,600px) 340px;column-gap:64px}
  .steps,.after{grid-column:1}
  .stick{display:block;grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:24px}
  .total{position:static;min-height:0;margin:0;padding:0;background:none;border:0}
  .bar{display:block;height:6px;overflow:hidden;background:var(--rule)}
  .bar .fill{display:block;height:100%;background:var(--accent);transform:scaleX(.014);transform-origin:left}
  .barlabels{display:flex;justify-content:space-between;margin-top:4px;color:var(--muted)}
  #total{margin-top:12px}
  .carry{margin-top:40px}
  .actions{flex-direction:row;flex-wrap:wrap}
  .actions .btn{width:auto;flex:1 1 auto}
}