/* Shared styles for the example pages. Built only from ndl.css tokens. */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; background: var(--ndl-color-bg); color: var(--ndl-color-text);
  font-family: var(--ndl-font-text); font-size: var(--ndl-text-md); line-height: var(--ndl-text-md-line);
}
h1, h2, h3, h4 { font-family: var(--ndl-font-display); font-weight: 700; line-height: var(--ndl-heading-line); margin: 0; }
h1 { font-size: var(--ndl-heading-1); } h2 { font-size: var(--ndl-heading-2); } h3 { font-size: var(--ndl-heading-3); } h4 { font-size: var(--ndl-heading-4); }
p { margin: 0; }
a { color: var(--ndl-color-link); text-decoration: underline; }
a:visited { color: var(--ndl-color-link-visited); }
a.plain, .nav-item, .btn, .tab, .row { text-decoration: none; }
::selection { background: var(--ndl-color-selection); }
:focus-visible { outline: var(--ndl-focus-width) solid var(--ndl-color-focus); outline-offset: var(--ndl-focus-gap); }
.muted { color: var(--ndl-color-text-muted); } .small { font-size: var(--ndl-text-sm); line-height: var(--ndl-text-sm-line); }
.reading { font-size: var(--ndl-text-lg); line-height: var(--ndl-text-lg-line); max-width: var(--ndl-width-reading); }
.stack { display: flex; flex-direction: column; } .row-flex { display: flex; align-items: center; }
.gap-1 { gap: var(--ndl-space-1); } .gap-2 { gap: var(--ndl-space-2); } .gap-3 { gap: var(--ndl-space-3); } .gap-4 { gap: var(--ndl-space-4); } .gap-5 { gap: var(--ndl-space-5); }
.grow { flex: 1; min-width: 0; } .right { margin-left: auto; }
.ic { width: var(--ndl-icon-md); height: var(--ndl-icon-md); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: miter; flex: none; }
.ic-sm { width: var(--ndl-icon-sm); height: var(--ndl-icon-sm); } .ic-lg { width: var(--ndl-icon-lg); height: var(--ndl-icon-lg); } .ic-xl { width: var(--ndl-icon-xl); height: var(--ndl-icon-xl); }
.ic-fill { fill: currentColor; stroke: none; }
/* shell */
.topbar { height: var(--ndl-height-topbar); display: flex; align-items: center; gap: var(--ndl-space-3); padding: 0 var(--ndl-space-4); background: var(--ndl-color-surface); border-bottom: 1px solid var(--ndl-color-accent); position: sticky; top: 0; z-index: 5; }
.logo { display: inline-flex; align-items: center; gap: var(--ndl-space-2); font-family: var(--ndl-font-display); font-weight: 700; font-size: var(--ndl-text-lg); color: var(--ndl-color-text); text-decoration: none; }
.logo-mark { width: 24px; height: 24px; border-radius: var(--ndl-radius-2); background: var(--ndl-gradient-signature); }
.shell { display: flex; min-height: calc(100vh - var(--ndl-height-topbar)); }
.sidebar { width: var(--ndl-width-sidebar); flex: none; background: var(--ndl-color-surface); border-right: 1px solid var(--ndl-color-accent); padding: var(--ndl-space-2); }
.main { flex: 1; min-width: 0; padding: var(--ndl-space-5) var(--ndl-page-margin); }
.container { max-width: var(--ndl-width-content); margin: 0 auto; }
.nav-item { display: flex; align-items: center; gap: 10px; height: var(--ndl-size-md); padding: 0 10px; margin-bottom: 2px; border-radius: var(--ndl-radius-2); color: var(--ndl-color-text); }
.nav-item:hover { background: var(--ndl-color-accent); } .nav-item:active { background: var(--ndl-color-pressed); }
.nav-item[aria-current] { background: var(--ndl-color-primary); color: var(--ndl-color-on-primary); }
.nav-item[aria-current]:hover { background: var(--ndl-color-primary-hover); }
.nav-heading { font-size: var(--ndl-text-sm); line-height: var(--ndl-text-sm-line); color: var(--ndl-color-text-muted); padding: var(--ndl-space-2) 10px var(--ndl-space-1); }
.divider { height: 1px; background: var(--ndl-color-accent); margin: var(--ndl-space-2) var(--ndl-space-1); border: 0; }
.ibtn.menu-toggle { display: none; }
.stack > .tag { align-self: flex-start; }
@media (max-width: 1024px) { .sidebar { display: none; } .ibtn.menu-toggle { display: inline-flex; } .hide-tablet { display: none !important; } }
@media (max-width: 640px) { .hide-phone { display: none !important; } .split { flex-direction: column; } .split > * { width: auto !important; max-width: 100%; } .field.grow { max-width: none !important; } .tabs-auto { overflow-x: auto; max-width: 100% !important; } .row-flex.wrap-phone { flex-wrap: wrap; margin-left: 0; } .fmsg, .ftime { display: none; } .chan-name { flex: 1 1 120px; } }
/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ndl-space-2); height: var(--ndl-size-md); padding: 0 var(--ndl-space-4); border-radius: var(--ndl-radius-2); border: 1px solid var(--ndl-color-accent); background: var(--ndl-color-surface); color: var(--ndl-color-text); font: var(--ndl-weight-semibold) var(--ndl-text-md)/1 var(--ndl-font-text); cursor: pointer; white-space: nowrap; transition: background var(--ndl-duration-fast) var(--ndl-ease-enter); }
.btn:hover { background: var(--ndl-color-accent); } .btn:active { background: var(--ndl-color-pressed); }
.btn-primary { background: var(--ndl-color-primary); border-color: var(--ndl-color-primary); color: var(--ndl-color-on-primary); }
.btn-primary:hover { background: var(--ndl-color-primary-hover); border-color: var(--ndl-color-primary-hover); } .btn-primary:active { background: var(--ndl-color-primary-pressed); border-color: var(--ndl-color-primary-pressed); }
.btn-warn { border-color: var(--ndl-color-warning); color: var(--ndl-color-warning); } .btn-danger { border-color: var(--ndl-color-danger); color: var(--ndl-color-danger); }
.btn-sm { height: var(--ndl-size-sm); padding: 0 var(--ndl-space-3); font-size: var(--ndl-text-sm); } .btn-lg { height: var(--ndl-size-lg); padding: 0 20px; font-size: var(--ndl-text-lg); }
.btn-block { width: 100%; }
.ibtn { display: inline-flex; align-items: center; justify-content: center; width: var(--ndl-size-md); height: var(--ndl-size-md); border-radius: var(--ndl-radius-2); border: 0; background: transparent; color: var(--ndl-color-text); cursor: pointer; }
.ibtn:hover { background: var(--ndl-color-accent); } .ibtn:active { background: var(--ndl-color-pressed); }
.field { display: flex; align-items: center; gap: var(--ndl-space-2); height: var(--ndl-size-md); padding: 0 12px; border-radius: var(--ndl-radius-2); border: 1px solid var(--ndl-color-accent); background: var(--ndl-color-bg); color: var(--ndl-color-text); }
.field:focus-within { border-color: var(--ndl-color-primary); }
.field input, .field select { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; color: inherit; font: inherit; }
.field select { appearance: none; cursor: pointer; } .field select option { background: var(--ndl-color-surface); }
.field ::placeholder { color: var(--ndl-color-text-muted); } .field .ic { color: var(--ndl-color-text-muted); }
.label { font-size: var(--ndl-text-sm); line-height: var(--ndl-text-sm-line); margin-bottom: var(--ndl-space-1); display: block; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--ndl-color-accent); border-radius: var(--ndl-radius-2); background: var(--ndl-color-bg); height: var(--ndl-size-md); }
.stepper button { width: var(--ndl-size-md); height: 100%; border: 0; background: transparent; color: var(--ndl-color-text); cursor: pointer; border-radius: var(--ndl-radius-2); } .stepper button:hover { background: var(--ndl-color-accent); }
.stepper span { min-width: 32px; text-align: center; }
.check { appearance: none; width: 16px; height: 16px; margin: 0; border-radius: var(--ndl-radius-1); border: 1px solid var(--ndl-color-accent); background: var(--ndl-color-bg); cursor: pointer; position: relative; flex: none; }
.check:checked { background: var(--ndl-color-primary); border-color: var(--ndl-color-primary); }
.check:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid var(--ndl-color-on-primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.radio { appearance: none; width: 20px; height: 20px; margin: 0; border-radius: var(--ndl-radius-full); border: 1px solid var(--ndl-color-accent); background: var(--ndl-color-bg); cursor: pointer; position: relative; flex: none; }
.radio:checked::after { content: ""; position: absolute; inset: 4px; border-radius: var(--ndl-radius-full); background: var(--ndl-color-primary); }
.switch { appearance: none; width: 32px; height: 16px; margin: 0; border-radius: var(--ndl-radius-1); background: var(--ndl-color-accent); position: relative; cursor: pointer; flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: var(--ndl-radius-1); background: var(--ndl-color-text-muted); transition: left var(--ndl-duration-medium) var(--ndl-ease-enter); }
.switch:checked { background: var(--ndl-color-primary); } .switch:checked::after { left: 18px; background: var(--ndl-color-on-primary); }
/* surfaces */
.card { background: var(--ndl-color-surface); border: 1px solid var(--ndl-color-accent); border-radius: var(--ndl-radius-4); padding: var(--ndl-space-4); }
.card-media { margin: calc(var(--ndl-space-4) * -1) calc(var(--ndl-space-4) * -1) var(--ndl-space-4); border-radius: var(--ndl-radius-4) var(--ndl-radius-4) 0 0; overflow: hidden; }
.card-flush { padding: 0; overflow: hidden; }
.float { background: var(--ndl-color-surface); border: 1px solid var(--ndl-color-accent); border-radius: var(--ndl-radius-4); box-shadow: var(--ndl-shadow-floating); }
.media { display: block; background: var(--ndl-color-accent); } .r-4x3 { aspect-ratio: 4 / 3; } .r-16x9 { aspect-ratio: 16 / 9; } .r-1x1 { aspect-ratio: 1 / 1; } .r-3x2 { aspect-ratio: 3 / 2; }
.round-2 { border-radius: var(--ndl-radius-2); }
.photo { background: var(--ndl-gradient-full); } .photo-a { background: linear-gradient(135deg, var(--ndl-violet-700), var(--ndl-blue-500)); } .photo-b { background: linear-gradient(135deg, var(--ndl-orange-500), var(--ndl-red-pink-600)); } .photo-c { background: linear-gradient(135deg, var(--ndl-teal-600), var(--ndl-emerald-400)); } .photo-d { background: linear-gradient(135deg, var(--ndl-purple-600), var(--ndl-magenta-500)); } .photo-e { background: linear-gradient(135deg, var(--ndl-amber-600), var(--ndl-coral-500)); }
.tag { display: inline-flex; align-items: center; gap: 6px; height: var(--ndl-size-tag); padding: 0 10px; border-radius: var(--ndl-radius-full); border: 1px solid var(--ndl-color-accent); font-size: var(--ndl-text-sm); line-height: 1; white-space: nowrap; background: var(--ndl-color-surface); }
.tag[data-c]::before { content: ""; width: 8px; height: 8px; border-radius: var(--ndl-radius-full); background: var(--c); }
.tag[data-c="success"] { border-color: var(--ndl-color-success); --c: var(--ndl-color-success); } .tag[data-c="warning"] { border-color: var(--ndl-color-warning); --c: var(--ndl-color-warning); } .tag[data-c="danger"] { border-color: var(--ndl-color-danger); --c: var(--ndl-color-danger); } .tag[data-c="info"] { border-color: var(--ndl-color-info); --c: var(--ndl-color-info); }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--ndl-radius-full); background: var(--ndl-color-danger); color: #fff; font-size: 11px; font-weight: 600; margin-left: auto; }
.av { --s: var(--ndl-avatar-md); width: var(--s); height: var(--s); border-radius: calc(var(--s) / 3); background: var(--ndl-color-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: calc(var(--s) / 3 + 1px); flex: none; color: var(--ndl-color-text); }
.av-sm { --s: var(--ndl-avatar-sm); } .av-lg { --s: var(--ndl-avatar-lg); } .av-xl { --s: var(--ndl-avatar-xl); }
.progress { height: 4px; border-radius: var(--ndl-radius-full); background: var(--ndl-color-accent); overflow: hidden; } .progress > i { display: block; height: 100%; border-radius: var(--ndl-radius-full); background: var(--ndl-gradient-progress); }
.stars { color: var(--ndl-amber-500); display: inline-flex; gap: 2px; }
/* tabs */
.tabs { display: flex; align-items: stretch; border: 1px solid var(--ndl-color-accent); border-bottom: 0; border-radius: var(--ndl-radius-2) var(--ndl-radius-2) 0 0; background: var(--ndl-color-bg); }
.tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--ndl-space-2); height: var(--ndl-size-md); padding: 0 var(--ndl-space-4); color: var(--ndl-color-text-muted); position: relative; cursor: pointer; }
.tab + .tab::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--ndl-color-accent); }
.tab:hover { background: var(--ndl-color-accent); border-radius: var(--ndl-radius-2) var(--ndl-radius-2) 0 0; color: var(--ndl-color-text); }
.tab[aria-selected="true"] { background: var(--ndl-color-surface); color: var(--ndl-color-text); border-radius: var(--ndl-radius-2) var(--ndl-radius-2) 0 0; }
.tab[aria-selected="true"]::before, .tab[aria-selected="true"] + .tab::before { display: none; }
.tabs-auto .tab { flex: 0 0 auto; }
.tab-panel { border: 1px solid var(--ndl-color-accent); background: var(--ndl-color-surface); border-radius: 0 0 var(--ndl-radius-4) var(--ndl-radius-4); padding: var(--ndl-space-4); }
/* lists and tables */
.row { display: flex; align-items: center; gap: var(--ndl-space-3); min-height: var(--ndl-size-md); padding: 0 var(--ndl-space-3); border-radius: var(--ndl-radius-2); border-bottom: 1px solid var(--ndl-color-accent); color: var(--ndl-color-text); }
.row:hover { background: var(--ndl-color-accent); border-bottom-color: transparent; } .row:last-child { border-bottom-color: transparent; }
.row-2 { min-height: 56px; padding-top: var(--ndl-space-2); padding-bottom: var(--ndl-space-2); }
.row[aria-selected="true"] { background: var(--ndl-color-tint); box-shadow: inset 0 0 0 1px var(--ndl-color-primary); border-bottom-color: transparent; }
.row.unread .title { font-weight: 600; }
table { border-collapse: collapse; width: 100%; } th { text-align: left; font-size: var(--ndl-text-sm); line-height: var(--ndl-text-sm-line); font-weight: 600; color: var(--ndl-color-text-muted); padding: 0 var(--ndl-space-3); height: var(--ndl-size-md); border-bottom: 1px solid var(--ndl-color-accent); } td { padding: 0 var(--ndl-space-3); height: var(--ndl-size-md); border-bottom: 1px solid var(--ndl-color-accent); }
.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .crumbs a { color: var(--ndl-color-text-muted); text-decoration: none; } .crumbs a:hover { color: var(--ndl-color-text); } .crumbs b { color: var(--ndl-color-text); font-weight: 600; }
.pager { display: flex; gap: var(--ndl-space-1); align-items: center; } .pager a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--ndl-size-md); height: var(--ndl-size-md); padding: 0 6px; border-radius: var(--ndl-radius-2); color: var(--ndl-color-text-muted); text-decoration: none; } .pager a:hover { background: var(--ndl-color-accent); } .pager a[aria-current] { background: var(--ndl-color-primary); color: var(--ndl-color-on-primary); }
.banner { display: flex; align-items: center; gap: var(--ndl-space-3); padding: var(--ndl-space-2) var(--ndl-space-3); border: 1px solid var(--c); border-radius: var(--ndl-radius-3); background: var(--ndl-color-surface); } .banner .ic:first-child { color: var(--c); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--ndl-gap-cards); }
.split { display: flex; gap: var(--ndl-space-5); align-items: flex-start; }
.kbd { font-family: var(--ndl-font-mono); font-size: var(--ndl-text-sm); }
.mono { font-family: var(--ndl-font-mono); }
.stat-big { font-family: var(--ndl-font-display); font-size: var(--ndl-heading-3); font-weight: 700; line-height: var(--ndl-heading-line); }

.code { margin: 0; padding: var(--ndl-space-3) var(--ndl-space-4); border-radius: var(--ndl-radius-2); background: var(--ndl-color-surface); border: 1px solid var(--ndl-color-accent); overflow-x: auto; font-family: var(--ndl-font-mono); font-size: var(--ndl-text-sm); line-height: var(--ndl-text-md-line); max-width: 100%; }
.code code { font-family: inherit; }

.fname { width: 200px; flex: 0 0 auto; }
@media (max-width: 640px) { .fname { width: auto; } }
@media (max-width: 640px) { .logo-name { display: none; } }