/* Cheapfax — free tools (/tools/*).
   Pairs with home.css, which supplies the tokens, the fonts, the topbar, the
   FAQ rows and the footer. This file is only the tool chrome: the workbench
   grid, the form, and the paper preview.

   Both this file and home.css are edge-cached for 4h behind Cloudflare, so the
   ?v=YYYYMMDD on every <link> and <script> has to be bumped on any change here.

   Layout is the "workbench" from docs/plans/old plans/2026-08-31-fax-cover-sheet-generator.md §2.8. */

/* The tool wants more room than the homepage's 1120. */
.shell{max-width:1180px}

.toolhead{padding:clamp(1.8rem,4vw,2.8rem) 0 1.5rem}
.toolhead .kick{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);margin-bottom:.7rem}
.toolhead h1{font-weight:800;letter-spacing:-.045em;line-height:.98;font-size:clamp(1.9rem,4.2vw,3rem)}

/* ---------- workbench ---------- */
.bench{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(2rem,4vw,3.6rem);
  align-items:start;border-top:1px solid var(--line2);padding:2rem 0 clamp(2.5rem,6vw,4rem)}
@media(max-width:940px){.bench{grid-template-columns:1fr;gap:2.2rem}}

/* ---------- pickers ---------- */
.pickers{margin-bottom:1.6rem}
.pickrow{display:flex;align-items:center;gap:1rem;padding-bottom:.9rem;flex-wrap:wrap}
.pickrow .rl{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted);width:52px;flex:none}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{font-family:var(--sans);font-size:.85rem;font-weight:500;color:var(--muted);padding:.42rem .85rem;
  cursor:pointer;white-space:nowrap;background:none;border:0;border-left:1px solid var(--line)}
.seg button:first-child{border-left:0}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--ink);color:#fff;font-weight:600}
.chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chips button{font-family:var(--sans);font-size:.85rem;font-weight:500;color:var(--muted);background:none;
  border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;cursor:pointer;white-space:nowrap}
.chips button:hover{color:var(--ink);border-color:#cfcdc6}
.chips button.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}
.seg button:focus-visible,.chips button:focus-visible,.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- form ---------- */
.form{border-top:1px solid var(--line)}
.f{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:1rem;
  border-bottom:1px solid var(--line);padding:.2rem 0}
.f label{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--muted)}
.f input,.f textarea{font-family:var(--sans);font-size:.98rem;font-weight:500;color:var(--ink);
  border:0;outline:none;background:none;padding:.95rem 0;width:100%}
.f textarea{resize:vertical;min-height:5.4rem;line-height:1.5;font-weight:400}
.f input::placeholder,.f textarea::placeholder{color:#BEBBB3}
.f:focus-within label{color:var(--ink)}
/* Focus is the row's own underline going ink — never an edge rule. */
.f:focus-within{border-bottom-color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
.f.tall{align-items:start}
.f.tall label{padding-top:1.05rem}
.f input:disabled,.f textarea:disabled{color:#B3B0A8;-webkit-text-fill-color:#B3B0A8;opacity:1}
body.is-blank .f label{color:#BEBBB3}

/* ---------- actions ---------- */
.actions{display:flex;gap:.6rem;padding-top:1.4rem;flex-wrap:wrap;align-items:center}
.btn{font-family:var(--sans);font-size:.95rem;font-weight:600;padding:.85rem 1.5rem;border-radius:12px;
  border:1.5px solid var(--ink);cursor:pointer;background:none;color:var(--ink)}
.btn.solid{background:var(--ink);color:#fff}
.btn[disabled]{opacity:.5;cursor:default}
.status{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--muted)}

/* ---------- preview pane ---------- */
.pane{position:sticky;top:88px}
@media(max-width:940px){.pane{position:static}}
.panehead{display:flex;align-items:center;justify-content:space-between;padding-bottom:.9rem}
.panehead .pl{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted)}
.sheetwrap{background:var(--ground,#F4F3F0);border:1px solid var(--line);padding:clamp(14px,2.6vw,30px)}

/* The sheet is its own query container, so 100cqw is exactly the 612pt page
   width and --pt is exactly one PDF point. Every op is positioned in points. */
.sheet{container-type:inline-size;aspect-ratio:8.5/11;background:#fff;border:1px solid #DCDAD3;
  box-shadow:0 18px 44px -26px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.06);
  position:relative;overflow:hidden;--pt:calc(100cqw / 612);color:#000}
.sheet > div{position:absolute}
.op-t{white-space:pre}
.op-r{background:#000}
.op-box{border:0 solid #000}
.op-pill{background:#000}
.op-blank{border-top:1px solid #000;height:0}

/* ---------- below the fold ---------- */
.fieldtable{width:100%;border-collapse:collapse;font-size:.95rem}
.fieldtable th{text-align:left;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted);
  font-weight:400;padding:0 1.2rem .7rem 0;border-bottom:1px solid var(--line)}
.fieldtable td{padding:.8rem 1.2rem .8rem 0;border-bottom:1px solid var(--line);vertical-align:top;color:#333}
.fieldtable td:first-child{font-weight:600;width:32%;color:var(--ink)}
.prose{color:#333}
.prose p{margin-bottom:1rem}
.prose p:last-child{margin-bottom:0}
.notices{border-top:1px solid var(--line)}
.notice{border-bottom:1px solid var(--line);padding:1.4rem 0}
.notice h3{font-size:1.02rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.6rem}
.notice blockquote{font-size:.92rem;color:#333;line-height:1.6}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.cols .c{padding-right:2rem;border-left:1px solid var(--line);padding-left:1.6rem}
.cols .c:first-child{border-left:0;padding-left:0}
.cols .c h3{font-size:1.05rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.6rem}
.cols .c p{color:var(--muted);font-size:.95rem}
@media(max-width:760px){.cols{grid-template-columns:1fr;gap:2rem}.cols .c{border-left:0;padding-left:0;padding-right:0}}
.toolnav{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.95rem;padding-top:.4rem}
.toolnav a{border-bottom:1px solid var(--line);padding-bottom:2px}
.toolnav a:hover{border-bottom-color:var(--ink)}

/* ---------- print: the sheet, nothing else ---------- */
@media print{
  @page{size:letter;margin:0}
  body{padding:0;background:#fff}
  .topbar,.toolhead,.pickers,.form,.actions,.panehead,section.block,.ctaband,footer,.toolnav{display:none !important}
  .bench{display:block;border:0;padding:0}
  .pane{position:static}
  .shell{padding:0;max-width:none}
  .sheetwrap{background:#fff;border:0;padding:0}
  .sheet{width:8.5in;height:11in;aspect-ratio:auto;border:0;box-shadow:none;break-inside:avoid}
  /* Every rule and the Urgent pill are painted as a background, and browsers
     drop background graphics from print by default — which left the printed
     sheet with no rules at all and the pill's white label on white paper. */
  .sheet,.sheet > div{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}