/* ============================================================
   Free tool pages. Loaded after pages.css, which supplies the tokens, the bar, the footer,
   the FAQ and the closing card. This file adds only what a tool page has that a post does not:
   the tool window, the call to action under it, the quiet steps section and Docket's own panel.

   Every block on the page is the bar's width (the 1048 column inside .tool-wrap); the FAQ stays
   at the reading measure on purpose.
   ============================================================ */

:root[data-theme="dark"]{color-scheme:dark}
.tool-page{padding-top:56px}
.tool-wrap{max-width:1120px;margin:0 auto;padding-inline:36px}
.tool-head{max-width:760px;margin:0 auto;padding:26px 36px 0;text-align:center}
.tool-head .kicker{margin-bottom:18px}
.tool-head h1{font-size:clamp(34px,4.6vw,52px);letter-spacing:-.048em;text-wrap:balance}
.tool-head .deck{max-width:540px;margin:20px auto 0;font-size:17px;line-height:1.6;color:var(--muted);text-wrap:balance}

.tool-sect{padding-top:76px}
.tool-sect .head{margin-bottom:26px}
.tool-sect .label{display:block;margin-bottom:12px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.tool-sect h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.045em;text-wrap:balance}
.soft{color:var(--muted)}

/* ---- the tool window ---- */
.rn-frame{position:relative;margin-top:44px;padding:12px;border-radius:26px;
  background:linear-gradient(160deg,var(--tint),var(--sunk));box-shadow:var(--sh)}
.rn-win{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;height:648px}
.rn-pane{display:flex;flex-direction:column;min-width:0;min-height:0;padding:20px 22px;border-radius:18px;background:var(--panel)}
.rn-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px;margin-bottom:12px}
.lbl{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rn-link{font:inherit;font-size:13px;font-weight:700;color:var(--accent);background:none;border:0;cursor:pointer;padding:9px 0;min-height:34px}
.rn-link:hover{text-decoration:underline;text-underline-offset:3px}

.rn-text{flex:1;min-height:0;width:100%;resize:none;padding:14px 16px;border-radius:12px;border:1px solid var(--hairline);
  background:var(--sunk);color:var(--ink);font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;tab-size:4;white-space:pre;overflow:auto}
.rn-text:focus{outline:2px solid var(--accent);outline-offset:2px}
.rn-status{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--muted);min-height:20px}
.rn-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.rn-field label{display:block;font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px}
.rn-field input{width:100%;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--hairline);background:var(--panel);
  color:var(--ink);font:inherit;font-size:14px}
.rn-field input::placeholder{color:var(--muted);opacity:.8}
.rn-field input:focus{outline:2px solid var(--accent);outline-offset:2px}
.rn-check{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer}
.rn-check input{width:17px;height:17px;accent-color:var(--accent);flex:none}
.rn-check span{font-weight:500;color:var(--muted)}

.rn-hints{margin-top:12px;border-radius:12px;background:var(--sunk)}
.rn-hints summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:13.5px;font-weight:700;color:var(--ink)}
.rn-hints summary::-webkit-details-marker{display:none}
.rn-hints summary::after{content:'';margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .25s}
.rn-hints[open] summary::after{transform:rotate(-135deg)}
.rn-hints summary small{font-size:12.5px;font-weight:500;color:var(--muted)}
.rn-hints ul{list-style:none;max-height:150px;overflow:auto;padding:0 14px 12px;display:grid;gap:10px}
.rn-hints li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;font-size:13px;line-height:1.45}
.rn-h-was{color:var(--muted);grid-column:1}
.rn-h-to{color:var(--ink);font-weight:600;grid-column:1}
.rn-h-note{grid-column:1/-1;color:var(--muted)}
.rn-hints li button{grid-column:2;grid-row:1/3;align-self:center;height:30px;padding:0 13px;border-radius:999px;border:1px solid var(--hairline);
  background:var(--panel);color:var(--ink);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.rn-hints li button:hover{border-color:var(--muted)}
.rn-hints li.used .rn-h-was{text-decoration:line-through}

/* ---- the result ---- */
.rn-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;min-height:34px}
.rn-tabs{display:flex;flex:1;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;background:var(--sunk)}
.rn-tabs [role="tab"]{flex:1 1 auto;height:30px;padding:0 12px;border:0;border-radius:9px;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:700;
  letter-spacing:-.01em;cursor:pointer;white-space:nowrap}
.rn-tabs [role="tab"]:hover{color:var(--ink)}
.rn-tabs [role="tab"][aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(31,31,30,.1),0 0 0 1px var(--soft)}
.rn-tabs [role="tab"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rn-sample{display:none;position:absolute;top:12px;right:14px;z-index:2;height:26px;align-items:center;padding:0 11px;border-radius:999px;background:var(--tint);color:var(--on-tint);
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
[data-sample="true"] .rn-sample{display:inline-flex}

.rn-outwrap{position:relative;flex:1;min-height:0;display:flex}
.rn-out{flex:1;min-width:0;overflow:auto;border-radius:12px;background:var(--sunk)}
.rn-out [role="tabpanel"]{padding:18px 18px 20px}
.rn-out [role="tabpanel"][hidden]{display:none}
.rn-code{margin:0;font:12.5px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);white-space:pre-wrap;word-break:break-word;letter-spacing:0}
.rn-code:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}

/* the preview borrows Docket's own changelog entry: a version chip, the date, a soft card of lines */
.rn-entry .rn-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-height:26px}
.rn-chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;background:var(--panel);box-shadow:0 0 0 1px var(--soft);
  font:700 12.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
.rn-date{font-size:13.5px;color:var(--muted)}
.rn-entry .rn-card{display:block;padding:16px 20px;border-radius:14px;background:var(--panel);box-shadow:0 0 0 1px var(--soft),0 8px 20px -14px rgba(31,31,30,.2)}
.rn-group+.rn-group{margin-top:14px}
.rn-group b{display:block;margin-bottom:6px;font-size:13px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.rn-group ul{list-style:none;display:grid;gap:7px}
.rn-group li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.5;color:var(--body)}
.rn-group li::before{content:'';position:absolute;left:3px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--muted)}
.rn-group code{font:12.5px ui-monospace,SFMono-Regular,Menlo,monospace;padding:1px 5px;border-radius:5px;background:var(--sunk);color:var(--ink)}
.rn-empty{font-size:14px;color:var(--muted)}

.rn-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;min-height:36px}
.rn-note{font-size:12.5px;line-height:1.45;color:var(--muted);margin:0}
.rn-counts{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;line-height:1.45;color:var(--muted);margin:0}
.rn-counts[hidden],.rn-note[hidden]{display:none}
.rn-counts b{font-weight:700;color:var(--ink)}
.rn-counts .over,.rn-counts .over b{color:#B3261E}
[data-theme="dark"] .rn-counts .over,[data-theme="dark"] .rn-counts .over b{color:#FF8A80}
.rn-act{display:flex;gap:10px;flex:none}
.rn-act .btn{width:118px;padding:0;border-radius:12px}
.rn-act .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

.rn-privacy{margin:16px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}
.rn-frame .rn-droptip{position:absolute;inset:0;display:none;align-items:center;justify-content:center;border-radius:26px;
  background:color-mix(in srgb,var(--canvas) 80%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.03em;z-index:3;pointer-events:none}
.dropping .rn-droptip{display:flex}
.rn-dropnote{margin:8px 0 0;font-size:13px;color:var(--muted);text-align:center}

/* ---- the card under the tool ---- */
.tool-cta{display:flex;align-items:center;gap:18px;margin-top:22px;padding:18px 22px;border-radius:20px;background:var(--sunk)}
.tool-cta .tile{flex:none;width:52px;height:52px;border-radius:14px;background:var(--panel);box-shadow:0 0 0 1px var(--soft);display:grid;place-items:center;color:var(--accent)}
.tool-cta .tile .mark{--mark:24px}
.tc-text{flex:1;min-width:0}
.tc-text h2{font-size:17px;letter-spacing:-.036em;line-height:1.25}
.tc-text p{margin-top:3px;font-size:14px;line-height:1.5;color:var(--body);text-wrap:balance}
.tool-cta .btn{flex:none;height:44px;padding:0 22px;font-size:14.5px}

/* ---- steps and the formats box: one quiet section, no cards ---- */
.guide-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.guide-steps{list-style:none;display:grid;gap:24px;align-content:start}
.guide-steps li{display:grid;grid-template-columns:34px 1fr;gap:16px}
.guide-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--tint);color:var(--on-tint);font-size:14px;font-weight:800}
.guide-steps h3{font-size:18px;letter-spacing:-.035em;margin-bottom:5px}
.guide-steps p{font-size:15px;line-height:1.6;color:var(--body)}
.guide-side{padding:26px 28px;border-radius:20px;background:var(--sunk)}
.guide-side .lbl{display:block;margin-bottom:16px}
.guide-terms{display:grid;gap:14px}
.guide-terms dt{font-size:14.5px;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.guide-terms dd{margin-top:2px;font-size:14px;line-height:1.5;color:var(--muted)}

/* ---- Docket's own panel ---- */
.dk-band{padding:44px 44px 48px;border-radius:28px;background:var(--dock);color:var(--dock-ink)}
.dk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px}
.dk-head .label{display:block;margin-bottom:12px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dock-body)}
.dk-head h2{color:var(--dock-ink);font-size:clamp(26px,3.2vw,36px);letter-spacing:-.046em;text-wrap:balance}
.dk-head h2 .soft{color:var(--dock-body)}
.dk-head .btn{flex:none;height:46px;padding:0 24px;font-size:14.5px;background:#fff;color:#1F1F1E!important;box-shadow:none}
.dk-rows{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dk-row{container-type:inline-size;padding:18px 22px;border-radius:16px;background:#fff;color:#1F1F1E}
.dk-row b{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;letter-spacing:-.03em;color:#1F1F1E}
.dk-row b svg{width:16px;height:16px;flex:none;color:#44586B}
.dk-row p{margin-top:6px;white-space:nowrap;font-size:min(14px,calc((100cqi - 2px) / 25));line-height:1.5;color:#55554F}
[data-theme="dark"] .dk-band{background:#10100F;box-shadow:inset 0 0 0 1px #242422,inset 0 60px 120px -60px color-mix(in srgb,var(--accent) 30%,transparent)}
[data-theme="dark"] .dk-row{background:#1B1B19;color:var(--ink);box-shadow:0 0 0 1px #2A2A28}
[data-theme="dark"] .dk-row b{color:var(--ink)}
[data-theme="dark"] .dk-row b svg{color:var(--accent)}
[data-theme="dark"] .dk-row p{color:var(--muted)}
[data-theme="dark"] .dk-head .btn{background:#F5F4F2}

/* ---- FAQ at the reading measure, closing card at the bar's width ---- */
.tool-faq{max-width:660px;margin:0 auto}
.tool-faq .head{margin-bottom:22px}
.tool-end{margin-top:76px;margin-bottom:0}

@media(max-width:1000px){
  .rn-win{grid-template-columns:1fr;height:auto}
  .rn-text{flex:none;height:280px}
  .rn-pane.out .rn-outwrap{flex:none;height:420px}
  .guide-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  .rn-tabs [role="tab"],.rn-hints li button{height:36px}
  .tool-wrap{padding-inline:22px}
  .tool-head{padding-inline:22px}
  .tool-page{padding-top:40px}
  .tool-sect{padding-top:56px}
  .rn-frame{margin-top:32px;padding:8px;border-radius:20px}
  .rn-pane{padding:16px}
  .rn-foot{flex-direction:column;align-items:stretch}
  .rn-act{width:100%}
  .rn-act .btn{flex:1;width:auto}
  .rn-bar{flex-direction:column;align-items:flex-start}
  .tool-cta{flex-wrap:wrap}
  .tool-cta .btn{width:100%}
  .dk-band{padding:28px 20px 24px;border-radius:22px}
  .dk-head{flex-direction:column;align-items:flex-start}
}
@media(max-width:900px){
  .dk-rows{grid-template-columns:1fr}
}
@media(max-width:520px){
  .dk-row p{white-space:normal;font-size:14px;text-wrap:balance}
  .dk-row p br{display:none}
}
@media(max-width:420px){
  .rn-fields{grid-template-columns:1fr}
}