/* ═══════════════════════════════════════════════════════════════════════ FIELDCUT UI — BASE Reset, root type, focus, motion. Sets no colour of its own: every value here comes from tokens.css. The warm-paper override that used to live at the bottom of this file is gone. The site and the app now stand on the same off-white ground, which is the entire point of the direction: one surface, one ink, one corner. ═══════════════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box} /* The sideways clamp belongs on , not on . overflow-x on the body quietly turns the body into the scrolling container, which leaves window.scrollTo doing nothing and position:sticky measuring against the wrong box. Everything wide is clipped by its own container anyway. */ /* The face is set on the root, not on . Anything that escapes the body — a dialog in the top layer, a ::backdrop, a print header — inherits from , and with no family declared here that fell back to the browser's default serif. One face means one face everywhere, including the places body does not reach. */ html{font-family:var(--fc-font-body);-webkit-text-size-adjust:100%;overflow-x:hidden} body{ margin:0; background:var(--fc-canvas); color:var(--fc-fg); font-family:var(--fc-font-body); font-size:var(--fc-fs-4); font-weight:var(--fc-fw); line-height:var(--fc-lh); /* Set on the root or SF Pro renders heavy on a Mac. macOS dropped subpixel antialiasing years ago, so this is what the system itself draws with. */ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; /* Lets SF Pro pick its own optical cut per size, the way AppKit does. */ font-optical-sizing:auto; } /* Headings are 500. Size carries the hierarchy; 500 is the working weight for anything that is a label rather than a sentence, and nothing above it is used on a heading anywhere in the product. */ h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0} h1,h2,h3,h4{font-weight:var(--fc-fw-mid);line-height:var(--fc-lh-snug);letter-spacing:var(--fc-ls-tight);text-wrap:balance} /* A browser's own bold is 700, which is a fourth weight nobody asked for. Everything that arrives bold by default is pulled down to the one step up, so the whole product really is 400 / 500 / 600 and nothing else. The 300 was retired with the retune; --fc-fw-down now resolves to 400. */ b,strong,th,h5,h6,optgroup{font-weight:var(--fc-fw-up)} h1{font-size:var(--fc-fs-7);line-height:var(--fc-lh-head)} h2{font-size:var(--fc-fs-6)} h3{font-size:var(--fc-fs-5)} h4{font-size:var(--fc-fs-4)} p{text-wrap:pretty;max-width:var(--fc-measure)} ul,ol{margin:0;padding:0} li{list-style:none} small{font-size:var(--fc-fs-3)} hr{height:1px;border:0;background:var(--fc-border);margin:var(--fc-s-5) 0} a{color:var(--fc-ac-ink);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{text-decoration-thickness:2px} button,input,select,textarea{font:inherit;font-weight:var(--fc-fw);color:inherit} button{background:none;border:0;padding:0;cursor:pointer} :disabled{cursor:not-allowed} [hidden]{display:none !important} /* A 1px edge on every image, pure black in light and pure white in dark, never a tinted neutral. A tint picks up the surface under it and reads as dirt on the edge. */ img,video,canvas{max-width:100%;height:auto;display:block} img,video{outline:1px solid var(--fc-img-edge);outline-offset:-1px} /* One focus ring, everywhere: 2px of ink, 2px clear of the control so it reads even on a filled black button. Never removed without a replacement. Ink measures 17.8:1 in light and 17.5:1 in dark against the page, which no accent hue manages in both directions. */ :focus{outline:none} :focus-visible,.is-focus{ outline:var(--fc-bw2) solid var(--fc-ring); outline-offset:2px; border-radius:var(--fc-r-sm); } /* FORCED STATES. Every hover and press rule in components.css also answers to .is-hover, .is-active and .is-focus, so a state can be pinned open — on the demo page, or by JS during a drag. The declarations are written once, so a pinned state can never drift from the real one. */ /* Numbers that change use mono and tabular figures, so a row never jumps sideways when a value updates. */ .num{font-family:var(--fc-font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* The small caps label — the one place letter spacing is widened, and one of only two places weight is used to make a difference. */ .label{ font-family:var(--fc-font-mono);font-size:var(--fc-fs-1); font-weight:var(--fc-fw-label); letter-spacing:.01em;color:var(--fc-fg2); } /* A nav item or a small UI label in the body face. The other place. */ .label-ui{font-size:var(--fc-fs-4);font-weight:var(--fc-fw-label);color:var(--fc-fg2)} /* One display line per page. Never a paragraph. */ .display{ font-family:var(--fc-font-display);font-weight:var(--fc-fw); line-height:var(--fc-lh-tight);letter-spacing:var(--fc-ls-tight); text-wrap:balance; } /* Prose block on a marketing page. */ .prose{font-size:var(--fc-fs-read);line-height:var(--fc-lh-prose);color:var(--fc-fg2);max-width:var(--fc-measure)} /* Reached by keyboard only, then it lands on top of everything. */ .skip{ position:absolute;left:var(--fc-s-3);top:var(--fc-s-3);z-index:999; background:var(--fc-bg);color:var(--fc-fg);border:var(--fc-bw) solid var(--fc-border2); border-radius:var(--fc-radius);padding:var(--fc-s-2) var(--fc-s-4); transform:translateY(calc(-100% - var(--fc-s-5))); transition:transform var(--fc-dur) var(--fc-ease-out); } .skip:focus-visible{transform:translateY(0)} /* Anything wider than the phone scrolls inside its own box, not the page. */ .scroll-x{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch} /* A long pasted link must never be able to push a phone layout sideways. */ .break{overflow-wrap:anywhere;word-break:break-word} /* Only visible to a screen reader. */ .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;/* token-lint: geometry, the clip idiom */overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} /* Honoured, never overridden. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } }