/* cutveymeter.com: the reading layer, loaded by every page but the home page (after family.css and site.css).
   Written by hand. Inner pages, the reading rail and phone tables (shell.py writes the markup for both), the free
   tools, help and the support form. Tools may add their own tools.css after this file. */

/* ---------- inner pages ---------- */
.page-head{padding:40px 0 32px}
.page-head .h1{margin:14px 0 18px;max-width:20ch}
.page-head .h1.long{max-width:none;font-size:clamp(30px,3vw + 16px,50px)}
.page-head .lede{margin:0}
.page-head .meta{font-family:var(--font-mono);font-size:13px;color:var(--muted);margin:16px 0 0}
.crumb{font-family:var(--font-mono);font-size:13px;color:var(--muted);line-height:1.6}
.crumb a{color:var(--muted);text-decoration:none;display:inline-block;padding:10px 0}
.crumb a:hover{color:var(--fg)}
.prose{max-width:68ch;color:var(--body)}
.prose h2{font-size:26px;line-height:1.2;font-weight:800;margin:48px 0 14px;color:var(--fg)}
.prose h3{font-size:19px;font-weight:700;margin:28px 0 8px;color:var(--fg)}
.prose p,.prose li{font-size:17px;line-height:1.65}
.prose ul,.prose ol{padding-left:22px;margin:0 0 1em}
.prose li{margin-bottom:6px}
.prose strong{color:var(--fg)}
.prose figure{margin:32px 0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.prose figure.phone{display:block;margin:32px 0}
.prose figcaption{font-size:14px;color:var(--muted);max-width:60ch}
.prose .table-wrap{margin:20px 0 28px}
.answer-box{background:var(--band);border:1px solid var(--hair);border-left:3px solid var(--accent);border-radius:12px;padding:20px 22px;max-width:68ch;color:var(--text);font-size:18px;line-height:1.6}
.answer-box p{margin:0}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:start}
.two-col aside{position:sticky;top:calc(var(--header-h) + 24px);display:flex;flex-direction:column;gap:16px}
@media (max-width:900px){.two-col{grid-template-columns:minmax(0,1fr);gap:32px}.two-col aside{position:static}}
.facts-dl{display:grid;grid-template-columns:200px minmax(0,1fr);border-top:1px solid var(--hair);margin:0 0 24px}
.facts-dl dt,.facts-dl dd{padding:14px 0;border-bottom:1px solid var(--hair);margin:0}
.facts-dl dt{font-weight:700;color:var(--fg);padding-right:16px}
.facts-dl dd{color:var(--body)}
@media (max-width:700px){.facts-dl{grid-template-columns:minmax(0,1fr)}.facts-dl dt{border-bottom:0;padding-bottom:2px}.facts-dl dd{padding-top:0}}
.lang-list{columns:3 200px;padding:0;list-style:none;font-size:15px}
.lang-list li{break-inside:avoid;padding:3px 0;color:var(--body)}
.lang-list span{color:var(--muted);margin-left:6px}
.release{border-top:1px solid var(--hair);padding:32px 0}
.release h2{font-size:26px;font-weight:800;margin:0}
.release .when{font-family:var(--font-mono);font-size:13px;color:var(--muted);margin:6px 0 16px}
.list-links{list-style:none;padding:0;margin:0;border-top:1px solid var(--hair)}
.list-links li{border-bottom:1px solid var(--hair)}
.list-links a{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:56px;padding:12px 0;text-decoration:none;color:var(--fg);font-weight:700}
.list-links a span{font-weight:400;color:var(--muted);font-size:14px;text-align:right}
.list-links a:hover{color:var(--eyebrow)}
@media (max-width:700px){.list-links a{flex-direction:column;align-items:flex-start;gap:4px}.list-links a span{text-align:left}}
.related{margin-top:56px}
.related h2{font-size:14px;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--eyebrow);margin:0 0 8px;font-weight:500}
.glossary dt{font-weight:800;font-size:19px;color:var(--fg);margin-top:28px}
.glossary dd{margin:6px 0 0;color:var(--body);max-width:68ch}
.az{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.az a{font-family:var(--font-mono);min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--hair);border-radius:8px;text-decoration:none;color:var(--fg)}
.cmp td:first-child{font-weight:700;color:var(--fg)}
.cmp tr.ours td{background:rgba(255,154,60,.07)}

/* ---------- free tools (family .tool panel, answer first) ---------- */
.tool-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:start}
@media (max-width:900px){
  .tool-layout{display:flex;flex-direction:column;gap:20px}
  .tool-intro{display:contents}
  .tool-intro .h1{order:-3}
  .tool-intro .lede{order:-2}
  .tool-layout>.tool{order:-1}
  .page-head .tool-form{margin-top:0}
}
.page-head .tool-form{margin-top:24px}
.tool-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-content:start}
.tool-form .full{grid-column:1 / -1}
.tool-form label,.tool-form .lab{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.tool-form input,.tool-form select{font-family:var(--font-sans);font-size:16px;padding:12px 14px;min-height:48px;border-radius:8px;border:1px solid var(--control-border);background:var(--surface);color:var(--fg);width:100%;min-width:0}
.tool-form .seg-group{align-self:flex-start}
@media (max-width:520px){.tool-form{grid-template-columns:minmax(0,1fr)}}
.tool{border:1px solid var(--hair)}
.tool .big{font-family:var(--font-mono);font-size:clamp(26px,2.6vw + 12px,40px);font-weight:600;line-height:1.1;color:#FFE7C2}
.tool .rows{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid #26262F}
.tool .rows div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #26262F;font-size:15px}
.tool .rows .k{color:#9A9AA6}
.tool .rows .v{font-family:var(--font-mono);color:#F2F2F5;text-align:right}
.tool-head{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#FFD29A}
.tool .gelbar{height:10px;border-radius:5px;background:var(--kelvin)}
.tool .tool-note{margin:0}
.chip-links{display:flex;flex-wrap:wrap;gap:10px}
.app-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center;background:var(--band);border:1px solid var(--hair);border-radius:18px;padding:36px}
.app-card p{margin:0}
.app-card .stack{align-items:flex-start}
@media (max-width:700px){.app-card{grid-template-columns:minmax(0,1fr);padding:24px;justify-items:center}}
.table-wrap .num{font-family:var(--font-mono);white-space:nowrap}
.table-wrap thead th{font-size:13px;color:var(--muted);font-weight:600}
.note-line{font-size:14px;color:var(--muted);margin-top:12px}
.stack-lg{display:flex;flex-direction:column;gap:56px}

/* ---------- help ---------- */
.help-hero{padding:48px 0 24px}
.help-hero .h1{margin:14px 0 22px}
.help-hero label{display:block;font-size:16px;color:var(--muted);margin-bottom:10px}
.help-results{margin-top:18px;max-width:640px}
.help-results[hidden]{display:none}
.help-results a{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--fg);font-weight:700}
.help-results a span{font-weight:400;font-size:13px;color:var(--muted);white-space:nowrap}
.help-results p{color:var(--muted);margin:0 0 14px}
/* a topic group fills its row whatever its count: one tile runs the width, two share it, four sit in a row */
.help-topics{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.stack-lg:has(>.help-topics){gap:40px}
@media (max-width:900px){.help-topics{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
@media (max-width:520px){.help-topics{grid-template-columns:minmax(0,1fr)}}
.help-search{max-width:640px}
.help-topics .help-topic{background:var(--band);border-color:var(--hair)}
.help-topic .blurb{display:block;font-weight:400;font-size:14px;color:var(--body);margin-top:6px}
.help-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:start}
@media (max-width:900px){.help-split{grid-template-columns:minmax(0,1fr)}}
.help-article{background:var(--band);border-color:var(--hair)}
.help-article .steps{counter-reset:s;list-style:none;padding:0}
.help-article .steps li{counter-increment:s;position:relative;padding-left:38px;margin-bottom:12px}
.help-article .steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;background:#26262F;color:#FFE7C2;font-family:var(--font-mono);font-size:13px;display:flex;align-items:center;justify-content:center}
.help-article h2{font-size:19px;font-weight:700;margin:12px 0 0}
.help-article figure{margin:8px 0}
.help-meta{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin:0}

/* ---------- the form on /support ---------- */
.form{display:flex;flex-direction:column;gap:16px;max-width:640px;position:relative}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;font-size:15px;color:var(--fg)}
.field input,.field select,.field textarea{font-family:var(--font-sans);font-size:16px;padding:12px 14px;min-height:48px;border-radius:8px;border:1px solid var(--control-border);background:var(--surface);color:var(--fg);width:100%}
.field input[type="file"]{padding:10px}
.field textarea{min-height:160px;resize:vertical}
.field .help{font-size:13px;color:var(--muted);margin:0}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.notice{display:none;border-radius:10px;padding:14px 16px;font-size:15px}
.notice.show{display:block}
.notice.ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4);color:#D7F5E1}
.notice.err{background:rgba(209,44,32,.12);border:1px solid rgba(209,44,32,.45);color:#F7D6D3}
.address{font-style:normal;color:var(--body);line-height:1.7}
.lost{padding:96px 0;min-height:50vh}


/* ---------- the reading rail (shell.py side_rail): the page's sections and a small app card beside a long section,
   so a wide screen is not a column of text and an empty third. Below 1000 px the rail folds into a closed box. ---------- */
.doc-grid{display:grid;grid-template-columns:minmax(0,760px) 272px;justify-content:space-between;gap:48px;align-items:start}
.doc-grid>.prose,.doc-grid>.prose-w{max-width:760px;min-width:0}
.doc-grid h2[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
.doc-rail{position:sticky;top:calc(var(--header-h) + 24px);display:flex;flex-direction:column;gap:22px;max-height:calc(100vh - var(--header-h) - 48px);overflow-y:auto;padding-top:6px}
.doc-toc{display:flex;flex-direction:column;border-left:2px solid var(--hair)}
.doc-toc-t{margin:0 0 6px 14px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.doc-toc a{display:block;margin-left:-2px;padding:6px 0 6px 14px;border-left:2px solid transparent;font-size:15px;line-height:1.35;text-decoration:none;color:var(--body)}
.doc-toc a:hover{color:#fff;border-left-color:var(--accent)}
.doc-toc-m{display:none}
@media (max-width:1000px){
  .doc-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .doc-rail{display:none}
  .doc-toc-m{display:block;border:1px solid var(--hair);border-radius:10px;background:var(--band);padding:12px 16px;margin:0 0 24px}
  .doc-toc-m summary{font-weight:700;cursor:pointer;min-height:24px}
  .doc-toc-m div{display:flex;flex-direction:column;margin-top:8px}
  .doc-toc-m a{padding:10px 0;font-size:16px;text-decoration:none}
}

/* ---------- a table on a phone: one card a row, every column labeled (shell.py writes data-label on each cell),
   the first cell the card's title. Nothing is cut and nothing scrolls sideways. ---------- */
@media (max-width:700px){
  .table-wrap.stack{overflow:visible;border:0;background:none;border-radius:0}
  .table-wrap.stack table{display:block;min-width:0!important;width:100%;font-size:15px}
  .table-wrap.stack caption{display:block;text-align:left;padding:0 0 10px}
  .table-wrap.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .table-wrap.stack tbody{display:flex;flex-direction:column;gap:10px}
  .table-wrap.stack tr{display:block;background:var(--band);border:1px solid var(--hair);border-radius:12px;padding:4px 14px}
  .table-wrap.stack td,.table-wrap.stack th{display:block;position:relative;min-height:38px;padding:9px 0 9px 9.2em;border-bottom:1px solid var(--hair);text-align:left;white-space:normal}
  .table-wrap.stack td::before,.table-wrap.stack th::before{content:attr(data-label);position:absolute;left:0;top:10px;width:8.4em;font-family:var(--font-sans);font-size:13px;font-weight:600;line-height:1.35;color:var(--muted)}
  .table-wrap.stack tr>:first-child{display:block;min-height:0;padding:11px 0 9px;font-weight:800;font-size:16px;color:var(--fg)}
  .table-wrap.stack tr>:first-child::before{content:none}
  .table-wrap.stack tr>:last-child{border-bottom:0}
  .table-wrap.stack tr.ours{background:#1E1913;border-color:#4A3A26}
  .table-wrap.stack tr.ours td{background:none}
}