/* GENERATED by `make sync-design-system` from qazana-strata@2a37037
   Source: kits/base.css + kits/content.css — DO NOT EDIT HERE. Edit in the qazana repo and re-sync.
   After syncing, bump ASSET_VERSION in songid/version.py. */

@layer qazana {

/* ============================================================================
   Qazana Strata — BASE (universal foundation, imported by EVERY kit). Type-role
   utilities, numeric/ligature utilities, and layout primitives — all built on
   the shared tokens, so they're available on every page regardless of kit.
   Component CSS lives in the per-kit files (app/site/auth/content/media).
   ============================================================================ */

/* ---- type role utilities — each applies a role's size+weight+leading+tracking
   together (one source per role → no drift). --display is for .t-display only;
   the rest are the body face (inherited). ---- */
.t-display{font-family:var(--display);font-size:var(--fs-display);font-weight:var(--weight-black);line-height:var(--leading-tight);letter-spacing:var(--tracking-tighter)}
.t-h1{font-size:var(--fs-h1);font-weight:var(--weight-black);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}
.t-h2{font-size:var(--fs-h2);font-weight:var(--weight-black);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}
.t-h3{font-size:var(--fs-h3);font-weight:var(--weight-bold);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight)}
.t-h4{font-size:var(--fs-h4);font-weight:var(--weight-bold);line-height:var(--leading-snug);letter-spacing:var(--tracking-normal)}
.t-lead{font-size:var(--text-lg);font-weight:var(--weight-regular);line-height:var(--leading-normal);color:var(--text-2)}
.t-caption{font-size:var(--fs-caption);font-weight:var(--weight-medium);line-height:var(--leading-snug);letter-spacing:var(--tracking-xs);color:var(--muted)}

/* ---- numeric & ligature utilities — modern property + legacy font-feature-
   settings fallback. Each sets a single property, so don't stack two on one. ---- */
.nums-tabular{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.nums-proportional{font-variant-numeric:proportional-nums;font-feature-settings:"pnum"}
.zero-slashed{font-variant-numeric:slashed-zero;font-feature-settings:"zero"}
.ligatures-none{font-variant-ligatures:none}

/* ---- form controls (universal so every kit's inputs match) — one consistent
   size from the density tokens; states are canonical .is-error / .is-success. ---- */
input[type=text],input[type=url],input[type=email],input[type=password],
input[type=search],input[type=number],input[type=tel],input[type=date],input[type=time],
textarea,select{
  font-family:var(--body);font-size:var(--ctl-font);color:var(--text);width:100%;
  background:var(--surface);border:1px solid rgb(var(--border-rgb) / .14);border-radius:var(--radius);
  padding:var(--ctl-pad-y) var(--ctl-pad-x);outline:none;-webkit-appearance:none;appearance:none;
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
select:not([multiple]){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238c8c8c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-inline-end:34px}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:hover:not(:focus),textarea:hover:not(:focus),select:hover:not(:focus){border-color:rgb(var(--border-rgb) / .22)}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  border-color:var(--primary-bright);background:var(--surface-active);box-shadow:0 0 0 3px var(--primary-ring);caret-color:var(--primary-bright)}
input.invalid,input.is-error,textarea.is-error,select.is-error{border-color:var(--danger);box-shadow:0 0 0 3px rgb(var(--danger-rgb) / .18)}
input.is-success,textarea.is-success,select.is-success{border-color:var(--primary);box-shadow:0 0 0 3px rgb(var(--primary-rgb) / .14)}
input.is-error:focus,input.is-success:focus{box-shadow:0 0 0 3px rgb(var(--danger-rgb) / .22)}
input[readonly]{color:var(--text-2);background:var(--surface-2);cursor:default;border-style:dashed}
input:disabled,textarea:disabled,select:disabled{opacity:.5;cursor:not-allowed}

/* ---- field group: label + control + help + error. Put .is-error on the group
   to light up the control border, label, and error message together. ---- */
.form-field{display:flex;flex-direction:column;gap:var(--space-2)}
.form-field > label,.form-field .field-label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text)}
.field-req{color:var(--danger);margin-inline-start:2px}
.field-optional{color:var(--muted);font-weight:var(--weight-regular);font-size:var(--text-xs);margin-inline-start:6px}
.field-help{font-size:var(--text-xs);color:var(--muted)}
.field-error{font-size:var(--text-xs);color:var(--danger);display:flex;align-items:center;gap:5px}
.form-field.is-error :is(input,textarea,select){border-color:var(--danger);box-shadow:0 0 0 3px rgb(var(--danger-rgb) / .18)}
.form-field.is-error > label,.form-field.is-error .field-label{color:var(--danger)}
/* fieldset — group related fields under a legend */
.fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-4);margin:0;min-width:0;display:flex;flex-direction:column;gap:var(--space-4)}
.fieldset > legend{padding:0 var(--space-2);margin-inline-start:calc(var(--space-2) * -1);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-2)}

/* ---- layout primitives — composable building blocks. Gap is var-driven
   (`--gap`, default per primitive); set it inline or with a .gap-N helper.
   Prefixed .l-* so they never collide with consumer (Tailwind/Bootstrap/Ember)
   markup. ---- */
.l-container{width:100%;max-width:var(--container,72rem);margin-inline:auto;padding-inline:var(--gutter,var(--space-5))}
.l-stack{display:flex;flex-direction:column;gap:var(--gap,var(--space-4))}
.l-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,var(--space-3))}
/* auto-fit grid; min(--col,100%) keeps it from overflowing narrow viewports */
.l-grid{display:grid;gap:var(--gap,var(--space-4));grid-template-columns:repeat(auto-fit,minmax(min(var(--col,16rem),100%),1fr))}
.l-spacer{flex:1 1 auto}
/* row alignment modifiers */
.l-row.between{justify-content:space-between}
.l-row.center{justify-content:center}
.l-row.end{justify-content:flex-end}
.l-row.start{align-items:flex-start}
.l-row.baseline{align-items:baseline}
/* gap helpers → space scale */
.gap-1{--gap:var(--space-1)}.gap-2{--gap:var(--space-2)}.gap-3{--gap:var(--space-3)}
.gap-4{--gap:var(--space-4)}.gap-5{--gap:var(--space-5)}.gap-6{--gap:var(--space-6)}.gap-7{--gap:var(--space-7)}

/* ---- forced-colors / Windows High-Contrast Mode. Focus rings here are drawn
   with box-shadow, which the OS DROPS in forced-colors mode — so keyboard focus
   would become invisible. Restore a visible focus indicator with `outline`
   (which forced-colors keeps), using the system Highlight colour. Only active in
   forced-colors mode → zero effect on normal rendering. ---- */
@media (forced-colors: active){
  :focus-visible,
  a:focus-visible,button:focus-visible,
  input:focus-visible,select:focus-visible,textarea:focus-visible,
  [tabindex]:focus-visible,[data-tip]:focus-visible{
    outline:2px solid Highlight;
    outline-offset:2px;
  }
}

/* ---- print. The dark scheme is light-on-dark, and browsers don't print
   backgrounds by default → it would print as near-invisible light text on white
   paper. Force ink-on-paper colours (the one legitimate place literal #000/#fff
   beat theme tokens), drop decorative/interactive chrome, and keep blocks whole
   across page breaks. ---- */
@media print{
  body,.site,.auth,.kit{background:#fff !important;color:#000 !important}
  .bg-layer,.toast-host,[data-theme-toggle],[data-density-toggle]{display:none !important}
  *{box-shadow:none !important;text-shadow:none !important}
  .card,.field,input,select,textarea,pre,.prose pre{background:#fff !important;border:1px solid #999 !important;color:#000 !important}
  .card,figure,pre,blockquote,table,tr,.l-grid > *{break-inside:avoid}
  a{color:#000 !important;text-decoration:underline}
}

/* ---- RTL refinement: `background-position` has no logical form, so the native
   select chevron doesn't flip with the logical-property sweep — move it under
   dir=rtl so it matches the (now-flipped) padding. ---- */
[dir="rtl"] select:not([multiple]){background-position:left 13px center}

}

@layer qazana {

/* ============================================================================
   Qazana Strata — CONTENT KIT (blog + long-form / docs).
   Built on the shared tokens; themed by both schemes. Scoped under `.blog`
   (index/listing) and `.prose` (article body). Composes with the Site kit —
   a blog page loads site.css (nav/footer/buttons/container) + this file.
   ============================================================================ */

/* ---- blog index ---------------------------------------------------------- */
.blog .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.blog .post-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform var(--dur-2) var(--ease),border-color var(--dur-2)}
.blog .post-card:hover{transform:translateY(-4px);border-color:rgb(var(--primary-rgb) / .35)}
.blog .post-thumb{aspect-ratio:16/9;background:var(--surface-2);position:relative;overflow:hidden;display:grid;place-items:center;color:var(--primary-bright)}
.blog .post-thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 30% 20%,rgb(var(--primary-rgb) / .16),transparent 60%)}
.blog .post-thumb .glyph{font-size:1.8rem;opacity:.85;position:relative}
.blog .post-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog .post-card h3{font-family:var(--body);font-weight:700;letter-spacing:var(--tracking-tighter);font-size:var(--text-lg);line-height:1.25}
.blog .post-card p{color:var(--text-2);font-size:var(--text-md);flex:1}
.blog .post-tag{align-self:flex-start;font-family:var(--mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--primary-bright);background:rgb(var(--primary-rgb) / .12);padding:4px 9px;border-radius:var(--radius-pill)}
.blog .post-meta{display:flex;align-items:center;gap:9px;margin-top:6px;color:var(--muted);font-size:var(--text-sm)}
.blog .post-meta .av{width:26px;height:26px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:800;font-size:var(--text-xs);font-family:var(--body)}
.blog .post-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted)}

/* featured post — spans the row, horizontal on wide screens */
.blog .post-card.featured{grid-column:1 / -1;flex-direction:row}
.blog .post-card.featured .post-thumb{flex:0 0 48%;aspect-ratio:auto}
.blog .post-card.featured .post-body{padding:34px;gap:14px;justify-content:center}
.blog .post-card.featured h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.blog .post-card.featured p{font-size:var(--text-base)}
@media (max-width:880px){.blog .post-grid{grid-template-columns:1fr}.blog .post-card.featured{flex-direction:column}.blog .post-card.featured .post-thumb{flex:auto;aspect-ratio:16/9}}

/* category chips + pagination */
.blog .cats{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:36px}
.blog .cat{font-size:var(--text-md);color:var(--text-2);text-decoration:none;border:1px solid var(--line);border-radius:var(--radius-pill);padding:7px 15px;transition:all var(--dur-1)}
.blog .cat:hover{color:var(--text);border-color:var(--line-strong)}
.blog .cat.on{color:var(--on-primary);background:var(--primary);border-color:var(--primary)}
.blog .pager{display:flex;justify-content:center;gap:6px;margin-top:44px}
.blog .pager a{min-width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--radius);color:var(--text-2);text-decoration:none;font-size:var(--text-md);transition:all var(--dur-1)}
.blog .pager a:hover{color:var(--text);border-color:var(--line-strong)}
.blog .pager a.on{color:var(--on-primary);background:var(--primary);border-color:var(--primary)}

/* newsletter band */
.blog .newsletter{margin-top:56px;padding:44px;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface);text-align:center}
.blog .newsletter h3{font-family:var(--body);font-weight:800;font-size:1.6rem;letter-spacing:var(--tracking-tighter);margin-bottom:8px}
.blog .newsletter p{color:var(--text-2);margin-bottom:20px}
.blog .news-form{display:flex;gap:10px;max-width:440px;margin:0 auto}
.blog .news-form input{flex:1;background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  padding:13px 18px;color:var(--text);font-family:var(--body);font-size:var(--text-base);outline:0;transition:border-color var(--dur-1),box-shadow var(--dur-1)}
.blog .news-form input:focus{border-color:var(--primary-bright);box-shadow:0 0 0 3px var(--primary-ring)}
@media (max-width:560px){.blog .news-form{flex-direction:column}}

/* ---- text-only post list (no thumbnails, Medium-style reading list) ------ */
.blog .post-list{max-width:720px;margin:0 auto}
.blog .post-list .post-row{display:block;text-decoration:none;color:inherit;padding:30px 0;border-bottom:1px solid var(--line)}
.blog .post-list .post-row:first-child{padding-top:0}
.blog .post-list .post-row:hover h3{color:var(--primary-bright)}
.blog .post-list h3{font-family:var(--body);font-weight:800;letter-spacing:var(--tracking-tighter);font-size:1.55rem;line-height:1.22;margin:10px 0;transition:color var(--dur-1)}
.blog .post-list p{color:var(--text-2);font-size:var(--text-base);line-height:1.6}
.blog .post-list .post-meta{margin-top:14px}

/* ---- article / prose ----------------------------------------------------- */
.article{max-width:740px;margin:0 auto;padding:0 24px}
.article-head{text-align:center;padding:56px 24px 24px;max-width:780px;margin:0 auto}
.article-head .post-tag{display:inline-block}
.article-head h1{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(2rem,4.5vw,3.2rem);margin:16px 0}
.article-head .article-meta{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:var(--text-md)}
.article-head .article-meta .av{width:34px;height:34px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:800;font-family:var(--body)}
.article-hero{max-width:980px;margin:24px auto 0;padding:0 24px}
.article-hero .ph{aspect-ratio:21/9;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface-2);
  display:grid;place-items:center;color:var(--primary-bright);position:relative;overflow:hidden}
.article-hero .ph::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 90% at 70% 10%,rgb(var(--accent-rgb) / .16),transparent 60%)}

/* prose typography — the reading column */
.prose{font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text);max-width:var(--measure)}
.prose > * + *{margin-top:1.2em}
.prose .lead{font-size:var(--text-xl);line-height:1.6;color:var(--text-2)}
.prose h2{font-family:var(--body);font-weight:800;letter-spacing:var(--tracking-tighter);font-size:1.7rem;line-height:1.2;margin-top:1.9em}
.prose h3{font-family:var(--body);font-weight:700;font-size:var(--text-xl);line-height:1.25;margin-top:1.6em}
.prose h4{font-weight:700;font-size:var(--text-lg);margin-top:1.4em}
.prose p,.prose ul,.prose ol{color:var(--text)}
.prose a{color:var(--primary-bright);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose strong{font-weight:700}
.prose ul,.prose ol{padding-inline-start:1.3em}
.prose li{margin-top:.5em}
.prose ul li::marker{color:var(--primary-bright)}
.prose blockquote{border-inline-start:3px solid var(--primary);padding:4px 0;padding-inline-start:22px;margin-inline-start:0;color:var(--text-2);font-size:var(--text-lg);font-style:italic}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--surface-sunken);border:1px solid var(--line);border-radius:5px;padding:2px 6px}
.prose pre{background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;overflow-x:auto;font-size:var(--text-md);line-height:1.6}
.prose pre code{background:none;border:0;padding:0;font-size:inherit;color:var(--text-2)}
.prose figure{margin-inline-start:0;margin-inline-end:0}
.prose figure .ph{aspect-ratio:16/9;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface-2);display:grid;place-items:center;color:var(--primary-bright)}
.prose figcaption{margin-top:10px;text-align:center;color:var(--muted);font-size:var(--text-md)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.prose table{width:100%;border-collapse:collapse;font-size:var(--text-base)}
.prose th,.prose td{text-align:start;padding:11px 14px;border-bottom:1px solid var(--line)}
.prose th{font-weight:700;color:var(--text)}
.prose td{color:var(--text-2)}
/* callouts */
.prose .callout{border:1px solid var(--line);border-inline-start-width:3px;border-radius:var(--radius);padding:16px 18px;background:var(--surface);font-size:var(--text-base)}
.prose .callout.note{border-inline-start-color:var(--info);background:var(--info-soft)}
.prose .callout.tip{border-inline-start-color:var(--primary);background:var(--primary-soft)}
.prose .callout.warn{border-inline-start-color:var(--warning);background:var(--warning-soft)}
.prose .callout b{display:block;margin-bottom:4px}

/* article footer — tags, share, author bio */
.article-foot{max-width:740px;margin:48px auto 0;padding:0 24px}
.article-foot .tags{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.author-bio{display:flex;gap:16px;align-items:center;padding:28px 0}
.author-bio .av{width:56px;height:56px;flex:0 0 56px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:800;font-size:var(--text-xl);font-family:var(--body)}
.author-bio b{display:block;font-size:var(--text-base)}
.author-bio p{color:var(--text-2);font-size:var(--text-md);margin-top:2px}


/* ---- table of contents (docs scrollspy) ---- */
.toc{position:sticky;top:84px;font-size:var(--text-md);align-self:start}
.toc .toc-h{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--muted);margin-bottom:8px}
.toc a{display:block;padding:5px 12px;color:var(--text-2);text-decoration:none;border-inline-start:2px solid var(--line)}
.toc a:hover{color:var(--text)}
.toc a.active{color:var(--primary-bright);border-inline-start-color:var(--primary-bright)}

/* docs layout: prose + a sticky TOC rail (collapses to one column on narrow) */
.doc-layout{max-width:1040px;margin:0 auto;padding:0 24px;display:grid;gap:40px}
@media (min-width:920px){.doc-layout{grid-template-columns:1fr 220px}.doc-layout .toc{order:2}}
/* grid hygiene: let columns shrink below content min-size, break long words/URLs
   so prose never forces horizontal page overflow on phones */
.doc-layout > *{min-width:0}
.prose{overflow-wrap:break-word}
}