@layer base;
/* Design tokens — one file per token type, in tokens/.
*
* Imported here rather than through a tokens/index.css barrel: global.css is a
* in the document head, so every level of @import nesting is one more
* serial round trip before first paint. Listed flat, the ten files are
* discovered in a single parse and fetched in parallel.
*
* `node ui/scripts/gen-tokens.mjs` reads the directory, not this list, so it
* cannot fall out of step with what is actually there. */
@import '/common/tokens/palette.css' layer(base);
@import '/common/tokens/colors.css' layer(base);
@import '/common/tokens/typography.css' layer(base);
@import '/common/tokens/spacing.css' layer(base);
@import '/common/tokens/border-radius.css' layer(base);
@import '/common/tokens/border-width.css' layer(base);
@import '/common/tokens/sizing.css' layer(base);
@import '/common/tokens/elevation.css' layer(base);
@import '/common/tokens/motion.css' layer(base);
@import '/common/tokens/z-index.css' layer(base);
/* Nasiko UI Design System fonts — vendored locally (see nasiko_ui Flutter package) */
@font-face {
font-family: 'Chivo Mono';
font-weight: 400;
font-style: normal;
font-display: swap;
src: url('fonts/ChivoMono-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Chivo Mono';
font-weight: 500 700; /* 700 synthesized from Medium — no bold TTF shipped */
font-style: normal;
font-display: swap;
src: url('fonts/ChivoMono-Medium.ttf') format('truetype');
}
@font-face {
font-family: 'Inter';
font-weight: 100 900;
font-style: normal;
font-display: swap;
src: url('fonts/Inter-VariableFont_opsz.ttf') format('truetype-variations');
}
@font-face {
font-family: 'Inter';
font-weight: 100 900;
font-style: italic;
font-display: swap;
src: url('fonts/Inter-Italic-VariableFont_opsz.ttf') format('truetype-variations');
}
@layer base {
/* 1. Design Tokens
*
* The tokens themselves live in tokens/ — one file per token type. They are
* imported at the top of this file, into @layer base, so the cascade is
* unchanged from when they were declared inline here.
*
* tokens/ is the single source of truth and the input to
* `node ui/scripts/gen-tokens.mjs`, which emits tokens/tokens.json — the
* machine-readable form a generator reads. Change a value here, regenerate.
*
* Theme: light-dark() follows the OS by default; an explicit
* [data-theme="light"|"dark"] on pins it.
*/
:root {
color-scheme: light dark;
}
/* Explicit theme pin — wins over the OS preference */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* 2. Base Reset */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scrollbar-gutter: stable;
-webkit-text-size-adjust: 100%;
overflow-x: clip;
}
body {
background-color: var(--shell-bg);
color: var(--color-text-main);
font-family: var(--font-sans);
line-height: 1.5;
font-size: var(--font-size-base);
display: flex;
flex-direction: column;
min-height: 100dvh;
}
/* Mobile (<1024px): no rail/card chrome — the content plane is the page
itself, so page components sit on the white surface directly. Desktop gets
the floating white card in the @media block below. */
@media (max-width: 1023.98px) {
body:has(> app-header) > :not(app-header):not(app-loading-bar):not(app-nav-search):not(app-toast):not(div):not(dialog) {
background: var(--color-bg-surface);
flex: 1;
}
}
main {
width: min(100% - 2 * var(--s-24), var(--page-max-width));
margin: 0 auto;
padding: var(--s-16) 0;
}
/* Full-viewport app-shell layout — no centering, panes scroll independently */
main.app-shell {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
height: calc(100dvh - var(--app-header-height));
overflow: hidden;
}
@media (min-width: 1024px) {
/* NightOwl shell: fixed 52px ink topbar + fixed left icon rail; the page
content is the white card floating on the ink backdrop. app-header
renders both bars; body padding carves out their space. */
body {
padding-top: var(--shell-topbar-height);
/* Gutter + rail: the rail is fixed at left:var(--shell-gutter), so the
content plane starts past both it and the gutter it floats in. */
padding-left: calc(var(--shell-gutter) + var(--app-sidebar-width));
}
body > main, .app-layout > main {
flex: 1;
min-width: 0;
width: auto;
max-width: var(--page-max-width);
margin-inline: auto;
}
body > :not(app-header):not(app-loading-bar):not(main) {
flex: 1;
min-width: 0;
}
body > main.app-shell, .app-layout > main.app-shell {
max-width: none;
margin: 0;
height: calc(100dvh - var(--shell-topbar-height));
}
main {
width: min(100% - 2 * var(--s-24), var(--page-max-width));
margin: 0 auto;
padding: var(--s-16) 0;
}
main.app-shell {
height: 100dvh;
}
/* Content card — the page component floats as the single white r8 card on
the ink shell (floating chrome like toasts, dialogs, and the kb palette
are plain divs / dedicated tags and are opted out). */
body:has(> app-header) > :not(app-header):not(app-loading-bar):not(app-nav-search):not(app-toast):not(main):not(div):not(dialog),
body:has(> app-header) > main {
background: var(--color-bg-surface);
border: none;
border-radius: var(--r-8);
/* Even frame on left/right/bottom. Left was 0, which put the card's two
left corners flush against the rail — the 8px radius cut notches of ink
out of the edge instead of reading as a floating panel. Top stays 0: the
card butts the topbar by design. */
margin: 0 var(--shell-gutter) var(--shell-gutter);
min-height: calc(100dvh - var(--shell-topbar-height) - var(--s-12));
box-shadow: 0 8px 16px rgba(100, 116, 139, 0.12);
}
/* content pages keep their centered column inside the card */
body:has(> app-header) > main {
max-width: none;
padding: var(--card-content-pad);
}
body:has(> app-header) > main > * {
max-width: var(--page-max-width);
margin-inline: auto;
}
/*
SPA: the router mounts pages into , so the page is a
grandchild of body, not a child. The rule above centres a 's children
in a --page-max-width column — correct for an MPA content page, wrong for a
router-mounted one: it shrinks the whole page to a narrow centred strip
inside the card and leaves the module-nav gutter empty beside it.
The outlet is a passthrough. The card geometry above still applies to it,
but the page inside owns its own padding (styles/page-layout.css) and fills
the card edge to edge.
*/
body:has(> app-header) > main#outlet {
padding: 0;
}
body:has(> app-header) > main#outlet > * {
max-width: none;
margin-inline: 0;
}
body:has(> app-header) > main.app-shell {
height: calc(100dvh - var(--shell-topbar-height) - var(--s-12));
padding: 0;
}
body:has(> app-header) > main.app-shell > * {
max-width: none;
}
}
/*
The router's outlet is a passthrough, but it is also the box the mounted page
takes its height from. That used to be `min-height: 100%` on the page — a
percentage against an auto-height parent, which computes to `auto`, so the page
box was only ever as tall as its content. Anything the page pinned to its own
edges shrank with it: the module nav, pinned top and bottom inside the page,
rendered 212px tall with 228px of rows and grew a scrollbar on a full-height
card, because a short page (an error state, an empty list) left nothing to
stretch it. A flex column has no such ambiguity — the page fills the outlet,
and still grows past it when its content is taller.
*/
main#outlet {
display: flex;
flex-direction: column;
}
main#outlet > * {
flex: 1 0 auto;
}
/* Prevent media from overflowing their containers */
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
/* Inherit fonts for form controls */
input,
button,
textarea,
select {
font: inherit;
}
/* Opinionated resets for elements with notable browser defaults */
figure {
margin: 0;
}
fieldset {
border: none;
min-width: 0;
}
legend {
padding: 0;
}
address {
font-style: inherit;
}
/* Ensure the hidden attribute works across all browsers */
[hidden] {
display: none !important;
}
/* Accessibility utility — visually hidden but available to screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* h1 inside sectioning elements gets a reduced size in Chrome/Firefox;
keep it consistent with our type scale */
:is(article, section, aside, nav) h1 {
font-size: var(--font-size-4xl);
}
/* 3. Typography — DS: titles are Chivo Mono medium; h3 down stays Inter */
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: var(--s-16);
font-weight: 600;
line-height: 1.2;
color: var(--color-text-main);
}
h1,
h2 {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: 0.005em;
}
h3 {
font-weight: 700;
}
h1 {
font-size: var(--font-size-4xl);
}
h2 {
font-size: var(--font-size-3xl);
}
/* NightOwl page title — Chivo Mono 500 20/28 (+0.16px tracking). Lives here
(not styles/text.css) so it applies at first paint on pages that render
synchronously — the components.css @import chain arrives after paint. */
.title-page {
font-family: var(--font-display);
font-size: 20px;
line-height: 28px;
font-weight: 500;
letter-spacing: 0.16px;
color: var(--color-text-main);
margin: 0;
}
h3 {
font-size: var(--font-size-2xl);
}
h4 {
font-size: var(--font-size-xl);
}
h5 {
font-size: var(--font-size-lg);
}
h6 {
font-size: var(--font-size-base);
}
/* Top-level page title inside — use on the
of content pages */
.page-heading {
font-size: var(--font-size-3xl);
margin: 0 0 var(--s-24);
}
p {
margin: 0 0 var(--s-16) 0;
}
/* DS micro-tell: captions are italic with tight tracking */
caption,
figcaption,
.ts-caption {
font-style: italic;
font-size: var(--font-size-xs);
letter-spacing: -0.04em;
color: var(--color-text-muted);
}
a {
color: var(--color-primary);
text-decoration: none;
}
a:hover {
color: var(--color-primary-hover);
}
/* 4. Form Elements */
label {
display: block;
font-size: var(--font-size-sm);
font-weight: 500;
margin-bottom: var(--s-8);
color: var(--color-text-main);
}
/* Design-system components render their own