/* Spool theme: the one definition of tokens and shared components.
   Linked by the workbench, the sign-in document, the landing and the docs pages.
   The font faces live in /fonts/fonts.css (src/base/font-head.ts links it). */

:root{
 --paper:#F3F0E6;--paper-raised:#F7F3EA;--paper-sunk:#E6E4D9;
 --ink:#1C1C1B;--ink-soft:#4A4A44;--hairline:#CFCBBE;--mark:#F9D357;
 --rule:1px solid var(--ink);--card-border:1.5px solid var(--ink);--inner-border:1px solid rgb(28 28 27 / .7);--hairline-border:1px solid var(--hairline);
 --font-display:"Zilla Slab",Rockwell,Georgia,serif;
 --font-text:"IBM Plex Sans",system-ui,sans-serif;
 --font-code:"IBM Plex Mono",ui-monospace,monospace;
 --radius-card:10px;--radius-input:6px;--radius-pill:999px;
 --gutter:80px;--card-pad:24px;--section-gap:96px;--app-gap:32px;
 /* The highlighter is a flat stroke with slightly ragged ends, never a box. */
 --ragged-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 20' preserveAspectRatio='none'%3E%3Cpath d='M8 1.2 L3.2 .6 L1.4 2.8 L2.6 5 L.2 7.6 L1.8 10 L.6 12.8 L2.2 15.2 L.8 17.6 L3.4 19.6 L8 19z'/%3E%3C/svg%3E") left/8px 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 20' preserveAspectRatio='none'%3E%3Cpath d='M0 1.2 L4.6 .2 L6.2 2.4 L5.2 4.6 L7.8 7.4 L6.4 10.2 L7.6 12.6 L5.8 15.4 L7.2 17.8 L4.4 19.8 L0 19z'/%3E%3C/svg%3E") right/8px 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 1.2 C20 .4 35 1.8 50 1 S80 .2 100 1.2 V19 C80 19.8 62 18.6 46 19.4 S16 19.2 0 19z'/%3E%3C/svg%3E") center/calc(100% - 14px) 100% no-repeat;
 color-scheme:light;
}
@media(max-width:760px){:root{--gutter:24px;--card-pad:16px;--section-gap:64px;--app-gap:24px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--font-text)}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:-.01em;font-variant-numeric:lining-nums;text-wrap:balance}
p{margin:0}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1.5px}
code,pre,kbd,samp{font-family:var(--font-code)}
code{font-size:.93em}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* Programmatic focus targets (main, headings) announce without drawing a box. */
[tabindex="-1"]:focus{outline:none}
hr{border:0;border-top:var(--rule);margin:0}

/* Wordmark: the spool-of-thread mark and the name in the slab face. */
.wordmark{display:inline-flex;align-items:center;gap:.3em;font:700 32px/1 var(--font-display);letter-spacing:-.01em;color:var(--ink);text-decoration:none;white-space:nowrap}
.wordmark img{width:1.4em;height:1.4em;flex:none}

/* Highlighter: at most twice on a screen. */
.mark{background:var(--mark);color:var(--ink);padding:.1em .3em;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;-webkit-mask:var(--ragged-mask);mask:var(--ragged-mask)}
/* A full-width stroke behind a row; drawn behind the element so its focus ring stays visible. */
.mark-bar{position:relative;z-index:0}
.mark-bar::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--mark);border-radius:3px;-webkit-mask:var(--ragged-mask);mask:var(--ragged-mask)}
.mark-underline{background:linear-gradient(var(--mark),var(--mark)) 0 92%/100% max(6px,.2em) no-repeat;padding:0 .12em;margin:0 -.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Actions: black pill primary, yellow pill only for downloads, underlined secondary. */
.primary-button,.highlight-button,.danger-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 26px;border:1.5px solid var(--ink);border-radius:var(--radius-pill);font:600 15px/1.2 var(--font-text);text-align:center;text-decoration:none;cursor:pointer}
.primary-button{background:var(--ink);color:var(--paper)}
.primary-button:hover{background:#000}
.highlight-button{background:var(--mark);border-color:var(--mark);color:var(--ink)}
.highlight-button:hover{border-color:var(--ink)}
.danger-button{background:transparent;color:var(--ink)}
.danger-button:hover{background:var(--paper-sunk)}
.text-button{display:inline-flex;align-items:center;min-height:36px;padding:0;border:0;background:none;color:var(--ink);font:500 15px/1.3 var(--font-text);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;cursor:pointer}
.text-button:hover{text-decoration-thickness:2.5px}
.primary-button:disabled,.highlight-button:disabled,.danger-button:disabled,.text-button:disabled{opacity:.45;cursor:default}

/* Ruled cards. */
.card{background:var(--paper-raised);border:var(--card-border);border-radius:var(--radius-card);padding:var(--card-pad)}
.card-title{font:700 17px/1.2 var(--font-display);padding-bottom:12px;margin-bottom:16px;border-bottom:var(--rule)}

/* Fields. */
.form-field{display:flex;flex-direction:column;gap:6px;min-width:0;font:500 14px/1.4 var(--font-text)}
.form-field input:not([type=checkbox]):not([type=radio]),.form-field select,.form-field textarea,.select{width:100%;max-width:100%;min-height:44px;padding:9px 12px;background:var(--paper-raised);border:1.5px solid var(--ink);border-radius:var(--radius-input);font:400 15px/1.4 var(--font-text);color:var(--ink)}
.form-field select,.select{appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.form-field input[type=file]{padding:6px}
.form-field input::file-selector-button{margin-right:14px;padding:8px 16px;border:0;border-right:var(--rule);background:none;font:600 14px var(--font-text);color:var(--ink)}
.form-field input::placeholder{color:var(--ink-soft)}

/* State chips carry no colour per state. */
.state-chip,.attention-badge{display:inline-block;padding:2px 12px;border-radius:var(--radius-pill);background:var(--paper-sunk);font:500 13px/1.5 var(--font-text);white-space:nowrap}
.attention-badge{background:transparent;border:1px solid var(--ink)}

pre{margin:12px 0;padding:16px;background:var(--paper-sunk);border:var(--inner-border);border-radius:var(--radius-input);font:400 13px/1.55 var(--font-code);white-space:pre-wrap;overflow-wrap:anywhere}
.skip-link{position:absolute;top:-100px;left:16px;z-index:20;padding:10px 16px;background:var(--paper-raised);border:var(--card-border);border-radius:var(--radius-input)}
.skip-link:focus{top:16px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}