/* UT Austin Field Guide: calculators (/tools and /tools/<slug>), the Everything page and its search.
   Built on the report frame (fg-reports.css): the answer card is the live result. Ink and grays only.
   Sizes stay on the report scale: 44 (the answer), 28/26 (H1), 20 (H2 and legends), 16 (body), 14 (meta). */
.fg-tl .tl-form{display:grid;gap:32px}
.fg-tl fieldset{min-width:0;margin:0;padding:0;border:0}
.fg-tl legend{padding:0;margin-bottom:14px;font-size:20px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.tl-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;align-items:start}
.tl-field label{display:block;margin-bottom:6px;font-size:14px;font-weight:600}
.tl-in{display:flex;align-items:center;gap:4px;box-sizing:border-box;min-height:48px;padding:0 14px;border:1px solid var(--line-2);border-radius:8px;background:#fff}
.tl-in:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.tl-in span{color:var(--muted);font-weight:500}
.tl-in input{flex:1;min-width:0;width:100%;height:46px;padding:0;border:0;outline:0;background:transparent;color:var(--ink);font:500 16px/1 var(--gw-font,Figtree,system-ui,sans-serif);font-variant-numeric:tabular-nums;appearance:textfield;-moz-appearance:textfield}
.tl-in input::-webkit-outer-spin-button,.tl-in input::-webkit-inner-spin-button{appearance:none;margin:0}
.tl-hint{margin-top:6px;font-size:14px;line-height:1.4;color:var(--muted)}
.tl-rows-below{margin-top:36px}
.fg-tl .rp-answer .rp-big{margin-top:0}
.fg-tl .rp-answer .tl-rows{margin-top:16px;border-top:1px solid var(--line)}
.fg-tl .rp-answer .tl-rows span{font-size:14px;color:var(--ink-2)}
.fg-tl .rp-answer .tl-need{margin-top:0}
.tl-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:20px}
.fg-tl .tl-actions button{min-height:48px;padding:0 18px;border-radius:8px;font:600 16px/1 var(--gw-font,Figtree,system-ui,sans-serif);cursor:pointer}
.fg-tl .tl-share{border:1px solid var(--ink);background:var(--ink);color:#fff}
.fg-tl .tl-share:hover{background:#000}
.fg-tl .tl-reset{border:1px solid var(--ink);background:#fff;color:var(--ink)}
.fg-tl .tl-reset:hover{background:var(--well)}
.fg-tl :is(button,a,input,summary):focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tl-bar{display:none}

/* /tools: every calculator with its opening answer, then what else the guide does. */
.tl-hub,.ev-page{max-width:860px}
.tl-hub-head,.ev-head{display:block;margin-bottom:28px}
.tl-hub-head h1,.ev-head h1{font-size:28px;line-height:1.15;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
.tl-list{border-top:1px solid var(--line)}
.tl-list li{border-bottom:1px solid var(--line)}
.fg-tl .tl-list a{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) 12px;gap:4px 24px;align-items:center;min-height:64px;padding:10px 0;text-decoration:none}
.tl-list strong{font-size:16px;font-weight:600}
.tl-list span{font-size:14px;color:var(--muted)}
.tl-list a::after{content:"";width:7px;height:7px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg);justify-self:end}
.tl-list a:hover strong{text-decoration:underline}

/* /everything: one search over the whole guide, then every guide and tool by area. */
.ev-search{display:flex;align-items:center;gap:8px;box-sizing:border-box;min-height:56px;margin-top:20px;padding:4px 4px 4px 20px;border:1px solid var(--line-2);border-radius:999px;background:#fff;box-shadow:0 6px 16px rgb(0 0 0/6%)}
.ev-search:focus-within{border-color:var(--ink)}
.ev-search input{flex:1;min-width:0;height:46px;padding:0;border:0;outline:0;background:transparent;color:var(--ink);font:500 16px/1 var(--gw-font,Figtree,system-ui,sans-serif)}
.ev-search input::-webkit-search-cancel-button{appearance:none}
.fg-tl .ev-search button{flex:none;min-width:48px;height:46px;padding:0 20px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:600 16px/1 var(--gw-font,Figtree,system-ui,sans-serif);cursor:pointer}
.ev-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ev-count{margin-top:16px;font-size:14px;color:var(--muted)}
.ev-results h2{margin:28px 0 8px;font-size:20px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.ev-list{border-top:1px solid var(--line)}
.ev-list li{border-bottom:1px solid var(--line)}
.fg-tl .ev-list a{display:block;padding:12px 0;text-decoration:none}
.ev-list strong{display:block;font-size:16px;font-weight:600}
.ev-list span{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:var(--muted)}
.ev-list a:hover strong{text-decoration:underline}
.ev-list mark{background:transparent;color:inherit;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.ev-browse{margin-top:28px}
.ev-browse .rp-row-in{padding-bottom:8px}
.ev-browse .ev-list{border-top:0}
.ev-browse .ev-list li:last-child{border-bottom:0}
.ev-more{margin-top:8px;font-size:14px;font-weight:600}
.fg-tl :is(.ev-page,.tl-hub) .query-byline{margin-top:28px;font-size:14px;color:var(--muted)}
.ev-more a{display:inline-flex;align-items:center;min-height:44px}

@media (max-width:760px){
  .tl-fields{grid-template-columns:minmax(0,1fr)}
  .fg-tl .tl-list a{grid-template-columns:minmax(0,1fr) 12px}
  .tl-list span{grid-column:1}
  .tl-list a::after{grid-column:2;grid-row:1/span 2}
  .tl-hub-head h1,.ev-head h1{font-size:26px}
  .tl-bar:not([hidden]){display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;align-items:baseline;gap:8px;box-sizing:border-box;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line-2);background:#fff;box-shadow:0 -6px 16px rgb(0 0 0/6%)}
  .tl-bar strong{flex:none;font-size:20px;font-weight:800;letter-spacing:-.02em}
  .tl-bar span{min-width:0;overflow:hidden;font-size:14px;color:var(--ink-2);text-overflow:ellipsis;white-space:nowrap}
  main.fg-tl[data-report="tool"]{padding-bottom:72px}
}