/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Inter_Tight","arguments":[{"subsets":["latin","cyrillic"],"variable":"--next-font-inter-tight","display":"swap"}],"variableName":"interTight"} ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/c95a17d6aa1ccc69-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/84792440f5374347-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/10735954b8957dce-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/69c8297e91a203ed-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/32ec8d161d520037-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/ceda3e828136e1b8-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/103fc5fac08dcb15-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Inter Tight Fallback';src: local("Arial");ascent-override: 100.51%;descent-override: 25.03%;line-gap-override: 0.00%;size-adjust: 96.39%
}.__className_0fdca1 {font-family: 'Inter Tight', 'Inter Tight Fallback';font-style: normal
}.__variable_0fdca1 {--next-font-inter-tight: 'Inter Tight', 'Inter Tight Fallback'
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Newsreader","arguments":[{"subsets":["latin","latin-ext"],"weight":["400","500"],"style":["normal","italic"],"variable":"--next-font-newsreader","display":"swap"}],"variableName":"newsreader"} ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/eb251072d3b5478c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/e92f802bb57ccffe-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/4b9bb515ce6d026f-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/eb251072d3b5478c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/e92f802bb57ccffe-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/4b9bb515ce6d026f-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/7088c2b12ccac062-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/665e920483964785-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/5611c55482296524-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/7088c2b12ccac062-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/665e920483964785-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/5611c55482296524-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Newsreader Fallback';src: local("Times New Roman");ascent-override: 69.68%;descent-override: 25.12%;line-gap-override: 0.00%;size-adjust: 105.48%
}.__className_25a962 {font-family: 'Newsreader', 'Newsreader Fallback'
}.__variable_25a962 {--next-font-newsreader: 'Newsreader', 'Newsreader Fallback'
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"JetBrains_Mono","arguments":[{"subsets":["latin"],"variable":"--next-font-jetbrains-mono","display":"swap"}],"variableName":"jetbrainsMono"} ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/886030b0b59bc5a7-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/0aa834ed78bf6d07-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/67957d42bae0796d-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/f911b923c6adde36-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/939c4f875ee75fbb-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/_next/static/media/bb3ef058b751a6ad-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'JetBrains Mono Fallback';src: local("Arial");ascent-override: 75.79%;descent-override: 22.29%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_3c557b {font-family: 'JetBrains Mono', 'JetBrains Mono Fallback';font-style: normal
}.__variable_3c557b {--next-font-jetbrains-mono: 'JetBrains Mono', 'JetBrains Mono Fallback'
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../libs/yori-foundation-shared/yori_foundation_shared/ui/tokens.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   YORI — design tokens
   Single source of truth. Do not introduce colors / sizes outside this file.
   Ported from argus-frontend/src/styles/tokens.css per
   docs/decisions/ADR-006-visual-design-system-port.md; re-skinned to the
   editorial-warm palette per docs/decisions/ADR-009-visual-restyle-editorial-warm.md.
   ========================================================================= */

:root {
  /* ---------- Color: paper & ink (warm neutrals) ---------------------- */
  /* Hue 78–80 = honey/amber; chroma bumped for real warmth. Brand hue lives in --color-brand. */
  --color-paper:        oklch(0.972 0.014 80);    /* page background, warm honey cream */
  --color-paper-sunk:   oklch(0.940 0.025 80);    /* sunken surface (rails, sidebars) */
  --color-paper-edge:   oklch(0.918 0.028 80);    /* card border on paper */
  --color-surface:      oklch(0.985 0.014 80);    /* cards, table body */
  --color-surface-alt:  oklch(0.952 0.022 80);    /* zebra rows, hover bg */

  --color-ink:          oklch(0.260 0.020 65);    /* primary text, warm charcoal */
  --color-ink-strong:   oklch(0.180 0.020 65);    /* headings */
  --color-ink-muted:    oklch(0.475 0.018 65);    /* secondary text */
  --color-ink-faint:    oklch(0.625 0.014 65);    /* tertiary, captions, timestamps */
  --color-ink-line:     oklch(0.880 0.012 70);    /* hairlines, dividers */
  --color-ink-line-soft:oklch(0.920 0.010 70);    /* hairline inside grouped surfaces */

  /* ---------- Color: accents ----------------------------------------- */
  /* Brand is the voice — primary CTA, headings, healthy state. Hue 150 = moss green. */
  --color-brand:        oklch(0.50 0.08 150);     /* primary accent — wordmark, headings, healthy */
  --color-brand-deep:   oklch(0.38 0.08 150);     /* deep brand — wordmark on paper */
  --color-brand-soft:   oklch(0.91 0.045 150);    /* brand tint for pills */
  --color-brand-ink:    oklch(0.34 0.07 150);     /* brand text on brand-soft */

  --color-alert:        oklch(0.55 0.09 35);      /* secondary accent — alert / danger / destructive */
  --color-alert-soft:   oklch(0.91 0.045 35);     /* alert tint for pills */
  --color-alert-ink:    oklch(0.34 0.07 35);      /* alert text on alert-soft */

  --color-amber:        oklch(0.78 0.16 78);      /* mid-trust indicator, true yellow */

  /* ---------- Color: functional indicators -------------------------- */
  --color-timeline-rail:    oklch(0.85 0.020 70);
  --color-timeline-dot:     var(--color-brand);
  --color-timeline-current: var(--color-alert);

  /* ---------- Color: semantic states (derived) ----------------------- */
  --status-healthy-bg:  var(--color-brand-soft);
  --status-healthy-fg:  var(--color-brand-ink);
  --status-unknown-bg:  oklch(0.93 0.005 85);
  --status-unknown-fg:  var(--color-ink-muted);
  --status-error-bg:    var(--color-alert-soft);
  --status-error-fg:    var(--color-alert-ink);
  --status-warn-bg:     oklch(0.92 0.05 85);
  --status-warn-fg:     oklch(0.38 0.06 75);

  --billing-positive-fg: var(--color-brand-deep);
  --billing-positive-bg: var(--color-brand-soft);
  --billing-negative-fg: var(--color-alert-ink);
  --billing-negative-bg: var(--color-alert-soft);

  --focus-ring:         oklch(0.55 0.09 150 / 0.45);

  /* ---------- Primary CTA — deep moss + warm cream ------------------ */
  --primary-bg:         oklch(0.34 0.072 150);
  --primary-bg-hover:   oklch(0.30 0.075 150);
  --primary-text:       oklch(0.975 0.020 95);

  /* ---------- Type ---------------------------------------------------- */
  /* `--next-font-*` variables come from `next/font/google` wiring in each
     app's root layout (`app/layout.tsx`). Family D goal-5 lands the
     wiring; the fallbacks below keep the cascade working pre-wire. */
  --font-sans:    var(--next-font-inter-tight, "Inter Tight"), "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif:   var(--next-font-newsreader, "Newsreader"), "Source Serif Pro", Georgia, serif;
  --font-mono:    var(--next-font-jetbrains-mono, "JetBrains Mono"), ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — compact, dashboard-first */
  --t-eyebrow:    0.6875rem;   /* 11px — CAPS micro-label */
  --t-micro:      0.75rem;     /* 12px — table head, meta */
  --t-small:      0.8125rem;   /* 13px — secondary body */
  --t-body:       0.875rem;    /* 14px — primary body, table cell */
  --t-body-lg:    0.9375rem;   /* 15px — comfortable body */
  --t-h6:         1rem;        /* 16px */
  --t-h5:         1.125rem;    /* 18px */
  --t-h4:         1.375rem;    /* 22px */
  --t-h3:         1.75rem;     /* 28px — page title */
  --t-h2:         2.25rem;     /* 36px — section hero */
  --t-h1:         3rem;        /* 48px — section display */
  --t-display:    4.5rem;      /* 72px — big numbers / KPI / editorial display */

  --lh-tight:     1.15;
  --lh-snug:      1.3;
  --lh-body:      1.5;
  --lh-loose:     1.65;

  --tracking-caps:  0.08em;
  --tracking-tight: -0.01em;
  --tracking-mono:  0.01em;

  /* Weights — Inter Tight */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ---------- Space (8px base, with 4px sub-step) -------------------- */
  --s-0:    0;
  --s-px:   1px;
  --s-1:    4px;
  --s-1-half: 6px;
  --s-2:    8px;
  --s-3:    12px;
  --s-4:    16px;
  --s-5:    20px;
  --s-6:    24px;
  --s-7:    32px;
  --s-8:    40px;
  --s-9:    48px;
  --s-10:   64px;
  --s-11:   80px;
  --s-12:   96px;

  /* ---------- Radius (sharp by default) ------------------------------ */
  --r-0:      0;
  --r-1:      2px;     /* default for structural elements */
  --r-2:      4px;     /* inputs, buttons */
  --r-3:      6px;     /* TMA buttons / inputs */
  --r-4:      8px;     /* TMA cards (tile, list row) */
  --r-5:     10px;     /* TMA KPI strip */
  --r-pill:   999px;   /* status pills, tag chips ONLY */

  /* ---------- Borders ------------------------------------------------- */
  --bw-hair:  1px;
  --bw-edge:  1px;
  --bw-emph:  2px;

  --border-default:  var(--bw-hair) solid var(--color-ink-line);
  --border-strong:   var(--bw-hair) solid oklch(0.78 0.010 70);

  /* ---------- Elevation (very restrained) ---------------------------- */
  /* No big blurry shadows. Use borders first, shadow only for floats. */
  --shadow-0:   none;
  --shadow-1:   0 1px 0 0 oklch(0.78 0.010 70 / 0.40);                /* card lift */
  --shadow-2:   0 1px 2px 0 oklch(0.20 0.010 70 / 0.06),
                0 0 0 1px oklch(0.78 0.010 70 / 0.50);                /* dropdown */
  --shadow-pop: 0 6px 24px -8px oklch(0.20 0.010 70 / 0.18),
                0 0 0 1px oklch(0.78 0.010 70 / 0.55);                /* modal/popover */

  /* ---------- Motion -------------------------------------------------- */
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;
  --ease-out:    cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.5, 1);

  /* ---------- Layout grid -------------------------------------------- */
  --layout-max:        1440px;
  --layout-gutter:     32px;
  --rail-width:        220px;     /* admin sidebar */
  --header-height:     64px;
  --row-height:        40px;      /* table row, compact */
  --row-height-cozy:   48px;
  --control-height:    32px;      /* button, input */
  --control-height-sm: 24px;

  /* ---------- Icon sizes (use via .icon / .icon--md / .icon--lg / .icon--xl) */
  --icon-size-sm:      14px;
  --icon-size-md:      16px;
  --icon-size-lg:      20px;
  --icon-size-xl:      24px;
}

/* ---------- Dark theme ---------------------------------------------
   Toggle by setting `data-theme="dark"` on `<html>`. The pre-paint
   bootstrap (`public/theme-bootstrap.js`, wired in Family D goal-5)
   reads `localStorage.yori_theme` and applies the attribute before
   first paint to eliminate FOUC. */

[data-theme="dark"] {
  --color-paper:        oklch(0.165 0.010 60);
  --color-paper-sunk:   oklch(0.255 0.013 60);
  --color-paper-edge:   oklch(0.310 0.013 60);
  --color-surface:      oklch(0.215 0.012 60);
  --color-surface-alt:  oklch(0.245 0.013 60);

  --color-ink:          oklch(0.955 0.006 80);
  --color-ink-strong:   oklch(0.985 0.005 80);
  --color-ink-muted:    oklch(0.745 0.010 70);
  --color-ink-faint:    oklch(0.580 0.012 70);
  --color-ink-line:     oklch(0.310 0.013 60);
  --color-ink-line-soft:oklch(0.255 0.012 60);

  --color-brand:        oklch(0.78 0.105 150);
  --color-brand-deep:   oklch(0.86 0.085 150);
  --color-brand-soft:   oklch(0.305 0.055 150);
  --color-brand-ink:    oklch(0.92 0.045 150);

  --color-alert:        oklch(0.78 0.150 35);
  --color-alert-soft:   oklch(0.320 0.080 35);
  --color-alert-ink:    oklch(0.95 0.040 35);

  --status-healthy-bg:  var(--color-brand-soft);
  --status-healthy-fg:  var(--color-brand-ink);
  --status-error-bg:    var(--color-alert-soft);
  --status-error-fg:    var(--color-alert-ink);
  --status-warn-bg:     oklch(0.34 0.07 78);
  --status-warn-fg:     oklch(0.94 0.05 78);
  --status-unknown-bg:  oklch(0.245 0.013 60);
  --status-unknown-fg:  var(--color-ink-muted);

  --primary-bg:         oklch(0.38 0.082 150);
  --primary-bg-hover:   oklch(0.43 0.085 150);
  --primary-text:       oklch(0.975 0.025 95);

  --focus-ring:         oklch(0.75 0.10 150 / 0.45);
}

/* ---------- Surface boundary: Telegram Mini App ---------------------
   `[data-surface="tg"]` is set by `tg-theme-bootstrap.js` on the TMA
   when Telegram theme params are present. Per
   `docs/decisions/ADR-007-tma-palette-policy.md` the TMA is
   Telegram-native: surface colors resolve through the `--tg-*`
   variables the bootstrap sets, with a yori oklch fallback for the
   desktop-browser preview (no Telegram context). The brand accent
   (`--color-brand*`) is deliberately NOT overridden here — it stays
   the one fixed hue (moss) in both surfaces. */

:where([data-surface="tg"]) {
  --color-paper:        var(--tg-bg, oklch(0.972 0.014 80));
  --color-paper-sunk:   var(--tg-bg-soft, oklch(0.940 0.025 80));
  --color-paper-edge:   var(--tg-section, oklch(0.918 0.028 80));
  --color-surface:      var(--tg-section, oklch(0.985 0.014 80));
  --color-surface-alt:  var(--tg-bg-soft, oklch(0.952 0.022 80));

  --color-ink-strong:   var(--tg-text, oklch(0.180 0.020 65));
  --color-ink:          var(--tg-text, oklch(0.260 0.020 65));
  --color-ink-muted:    var(--tg-hint, oklch(0.475 0.018 65));

  --primary-bg:         var(--tg-btn, var(--color-brand-deep));
  --primary-bg-hover:   var(--tg-btn, var(--color-brand));
  --primary-text:       var(--tg-btn-text, var(--color-paper));
}

/* ---------- Base reset that bakes the system in -------------------- */

html, body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--color-brand-soft);
  color: var(--color-brand-deep);
}

/* Eyebrow / CAPS micro-label utility */
.eyebrow {
  font: var(--fw-medium) var(--t-eyebrow)/1 var(--font-sans);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* Mono technical label — ids, versions, sums */
.mono {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mono);
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../libs/yori-foundation-shared/yori_foundation_shared/ui/foundations/typography.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   YORI — typography foundation
   Global reset for text-bearing elements + project label utilities.
   Ported from argus-frontend/src/styles/foundations/typography.css.
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

body {
  min-height: 100vh;
}

/* Editorial headings — Newsreader serif (ADR-009). Eyebrows, meta, mono,
   table heads, and form labels deliberately stay on --font-sans. */
h1, h2, h3,
.page-header__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--s-1) var(--focus-ring);
}

.eyebrow,
.panel-kicker {
  margin: 0 0 var(--s-2);
  font: var(--fw-medium) var(--t-eyebrow) / 1 var(--font-sans);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.hero-copy {
  max-width: 60ch;
  margin: var(--s-1) 0 0;
  color: var(--color-ink-muted);
  font-size: var(--t-body-lg);
}

.meta,
.mono {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mono);
}

.meta {
  color: var(--color-ink-faint);
}

.num {
  text-align: right;
  font-feature-settings: tabular-nums lining-nums;
  font-variant-numeric: tabular-nums lining-nums;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../libs/yori-foundation-shared/yori_foundation_shared/ui/foundations/buttons.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   YORI — buttons foundation
   .btn is the only button system. Variants pick visual via modifiers.
   Ported from argus-frontend/src/styles/foundations/buttons.css.
   ========================================================================= */

.btn {
  height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  border-radius: var(--r-2);
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.btn--sm {
  height: var(--control-height-sm);
  padding: 0 var(--s-2);
  font-size: var(--t-micro);
}

.btn--lg {
  min-height: var(--s-8);
  padding: 0 var(--s-4);
  font-size: var(--t-body);
  font-weight: var(--fw-semibold);
}

.btn--icon {
  width: var(--control-height);
  padding: 0;
}

.btn--icon.btn--sm {
  width: var(--control-height-sm);
}

.btn--icon svg {
  width: var(--s-4);
  height: var(--s-4);
}

.btn--primary {
  border: none;
  background: var(--primary-bg);
  color: var(--primary-text);
}

.btn--primary:hover {
  background: var(--primary-bg-hover);
}

.btn--secondary {
  border: var(--border-default);
  background: var(--color-surface);
  color: var(--color-ink);
}

.btn--secondary:hover {
  background: var(--color-surface-alt);
}

.btn--ghost {
  border: none;
  background: transparent;
  color: var(--color-ink-muted);
}

.btn--ghost:hover {
  background: var(--color-surface-alt);
  color: var(--color-ink);
}

.btn--danger {
  border: var(--bw-hair) solid var(--color-alert);
  background: var(--color-surface);
  color: var(--color-alert-ink);
}

.btn--danger:hover {
  background: var(--status-error-bg);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn.is-active {
  background: var(--color-paper-sunk);
  border-color: var(--color-ink-faint);
}

/* Loading state — small spinner ring next to label */
.btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  width: var(--s-3);
  height: var(--s-3);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin var(--dur-slow) linear infinite;
  color: var(--color-ink);
}

.btn--primary.is-loading::after {
  color: var(--primary-text);
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../libs/yori-foundation-shared/yori_foundation_shared/ui/foundations/forms.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   YORI — forms foundation
   Inputs, labels, form rows, inline form helpers.
   Ported from argus-frontend/src/styles/foundations/forms.css.
   ========================================================================= */

.text-input,
.text-area {
  width: 100%;
  border: var(--border-default);
  border-radius: var(--r-2);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--t-body);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.text-input {
  height: var(--control-height);
  padding: 0 var(--s-3);
}

.text-area {
  min-height: calc(var(--s-10) + var(--s-8));
  padding: var(--s-2) var(--s-3);
  resize: vertical;
}

.text-area--autosize {
  field-sizing: content;
}

.text-input:focus,
.text-area:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 var(--s-1) var(--focus-ring);
}

.text-input--invalid,
.text-area--invalid {
  border-color: var(--color-alert);
}

.text-input--invalid:focus,
.text-area--invalid:focus {
  box-shadow: 0 0 0 var(--s-1) oklch(0.55 0.09 35 / 0.45);
}

.stack-form {
  display: grid;
  grid-gap: var(--s-4);
  gap: var(--s-4);
}

.form-row,
.checkbox-row {
  display: grid;
  grid-gap: var(--s-1);
  gap: var(--s-1);
}

.form-row > span,
.checkbox-row > span {
  font: var(--fw-medium) var(--t-eyebrow) / 1 var(--font-sans);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.checkbox-row {
  min-height: var(--control-height);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--color-ink);
  font-size: var(--t-small);
}

.form-row-inline {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.form-row-inline .text-input {
  min-width: 0;
}

.form-label {
  display: block;
  margin-bottom: var(--s-1);
  font: var(--fw-medium) var(--t-eyebrow) / 1 var(--font-sans);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.field-error {
  color: var(--status-error-fg);
  font-size: var(--t-small);
}

.field-hint,
.form-hint {
  color: var(--color-ink-faint);
  font-size: var(--t-small);
}

.form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../libs/yori-foundation-shared/yori_foundation_shared/ui/foundations/status.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   YORI — status foundation
   Pills, banners, inline status states. All visual values come from tokens.css
   (--status-*-bg / --status-*-fg).
   Ported from argus-frontend/src/styles/foundations/status.css.
   ========================================================================= */

.status-pill {
  height: var(--control-height-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  background: var(--status-unknown-bg);
  color: var(--status-unknown-fg);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--tracking-mono);
  white-space: nowrap;
}

.status-ok,
.status-healthy,
.status-done,
.status-published,
.status-ready,
.status-active,
.status-processing,
.status-running,
.status-delivered,
.status-paid {
  background: var(--status-healthy-bg);
  color: var(--status-healthy-fg);
}

.status-warn,
.status-degraded,
.status-paused,
.status-review,
.status-needs_review,
.status-pending,
.status-overdue {
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
}

.status-unknown,
.status-missing,
.status-disabled,
.status-draft,
.status-closed,
.status-archived,
.status-cancelled {
  background: var(--status-unknown-bg);
  color: var(--status-unknown-fg);
}

.status-error,
.status-unhealthy,
.status-invalid,
.status-rejected,
.status-failed,
.status-stopped {
  background: var(--status-error-bg);
  color: var(--status-error-fg);
}

.save-state {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  font: var(--fw-medium) var(--t-micro) / 1 var(--font-sans);
}

.save-state--clean {
  color: var(--color-brand-ink);
  background: var(--color-brand-soft);
}

.save-state--dirty {
  color: var(--color-alert-ink);
  background: var(--color-alert-soft);
}

.signal-banner {
  margin: var(--s-3) 0;
  padding: var(--s-3);
  border: var(--bw-hair) solid var(--color-alert);
  background: var(--color-alert-soft);
  color: var(--color-alert-ink);
  font-size: var(--t-small);
}

.signal-banner--brand {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  color: var(--color-brand-ink);
}

.notice-card {
  padding: var(--s-3) var(--s-4);
  border: var(--bw-hair) solid var(--color-brand);
  border-radius: var(--r-1);
  background: var(--status-healthy-bg);
  color: var(--status-healthy-fg);
  font-size: var(--t-body);
}

.error-card {
  padding: var(--s-3) var(--s-4);
  border: var(--bw-hair) solid var(--color-alert);
  border-radius: var(--r-1);
  background: var(--status-error-bg);
  color: var(--status-error-fg);
  font-size: var(--t-body);
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../libs/yori-foundation-shared/yori_foundation_shared/ui/foundations/tables.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   YORI — tables foundation
   .data-table is the long-form list table.
   Ported from argus-frontend/src/styles/foundations/tables.css.
   ========================================================================= */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-body);
}

.data-table th {
  padding: var(--s-2) var(--s-4);
  text-align: left;
  background: var(--color-paper-sunk);
  color: var(--color-ink-faint);
  border-bottom: var(--border-default);
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.data-table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--border-default);
  vertical-align: top;
  color: var(--color-ink);
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background: var(--color-surface-alt);
}

.data-table tr.row--system > td:first-child {
  box-shadow: inset 2px 0 0 var(--color-alert);
}

.data-table-dense {
  font-size: var(--t-small);
}

.data-table-dense th,
.data-table-dense td {
  padding: var(--s-1) var(--s-2);
}

.table-wrap {
  overflow-x: auto;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../libs/yori-foundation-shared/yori_foundation_shared/ui/foundations/layout.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   YORI — layout foundation
   Generic grid + stack utilities used by the AppShell and page modules.
   Yori's AppShell-specific styles live in src/shared/ui/app-shell.module.css.
   ========================================================================= */

/* Page container — bounded width centered in the viewport. */
.page-container {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 0 var(--layout-gutter);
}

/* Vertical stack with token gaps. */
.stack { display: grid; grid-gap: var(--s-4); gap: var(--s-4); }
.stack--tight { gap: var(--s-2); }
.stack--snug { gap: var(--s-3); }
.stack--loose { gap: var(--s-6); }
.stack--xl { gap: var(--s-8); }

/* Horizontal row. */
.row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.row--snug { gap: var(--s-2); }
.row--loose { gap: var(--s-5); }
.row--wrap { flex-wrap: wrap; }
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; }

/* Cluster — like a row but with wrap by default. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

/* Page header — eyebrow + title + description + actions. */
.page-header {
  display: grid;
  grid-gap: var(--s-2);
  gap: var(--s-2);
  padding-bottom: var(--s-5);
  border-bottom: var(--border-default);
}

.page-header__title {
  margin: 0;
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink-strong);
  font-weight: var(--fw-semibold);
}

.page-header__description {
  max-width: 60ch;
  color: var(--color-ink-muted);
  font-size: var(--t-body-lg);
}

.page-header__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* Section divider. */
.section-divider {
  border: none;
  border-top: var(--border-default);
  margin: var(--s-5) 0;
}

/* Hairline divider — softer than section-divider. */
.hairline {
  border: none;
  border-top: var(--bw-hair) solid var(--color-ink-line-soft);
  margin: var(--s-3) 0;
}

/* KPI strip — equal columns of KPI cards. */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: var(--s-3);
  gap: var(--s-3);
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../libs/yori-foundation-shared/yori_foundation_shared/ui/utilities.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   YORI — utility classes
   Small one-off helpers. Use sparingly — most layout should compose from
   the foundations layer.
   ========================================================================= */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.muted { color: var(--color-ink-muted); }
.faint { color: var(--color-ink-faint); }
.strong { color: var(--color-ink-strong); }
.brand { color: var(--color-brand-deep); }
.alert { color: var(--color-alert-ink); }

.text-right { text-align: right; }
.text-center { text-align: center; }
.text-nowrap { white-space: nowrap; }
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flex-grow { flex: 1 1 auto; }
.flex-shrink-0 { flex-shrink: 0; }

/* Surface card — generic container with hairline border and a small lift. */
.card {
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--r-2);
  padding: var(--s-4);
}

.card--lifted {
  box-shadow: var(--shadow-1);
}

.card--sunk {
  background: var(--color-paper-sunk);
  border-color: var(--color-ink-line-soft);
}

/* Icon size modifiers — apply to inline SVGs. */
.icon { width: var(--icon-size-md); height: var(--icon-size-md); }
.icon--sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.icon--md { width: var(--icon-size-md); height: var(--icon-size-md); }
.icon--lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }
.icon--xl { width: var(--icon-size-xl); height: var(--icon-size-xl); }

/* Tag chip — small inline label. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0 var(--s-2);
  height: var(--control-height-sm);
  border-radius: var(--r-pill);
  background: var(--color-paper-sunk);
  color: var(--color-ink-muted);
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-mono);
}

.tag--brand {
  background: var(--color-brand-soft);
  color: var(--color-brand-ink);
}

.tag--alert {
  background: var(--color-alert-soft);
  color: var(--color-alert-ink);
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../libs/yori-foundation-shared/yori_foundation_shared/ui/primitives.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   YORI — shared CSS package aggregator
   Imported by both Next.js apps' globals.css.

   Order matters: tokens → typography (reset) → buttons / forms / status /
   tables → layout → utilities. Primitives' .module.css files reference
   these as authoritative sources.
   ========================================================================= */

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/* Shared design tokens from libs/yori-foundation-shared/.../ui/.
   See docs/decisions/ADR-006-visual-design-system-port.md. The TG-
   surface palette policy lands later in Family E goal-3 (ADR-007);
   for now the TMA uses the same brand cascade as the web. */

/* Legacy alias layer — to be removed when downstream selectors migrate
   to `--color-*` per Family D goal-2 foundations port. */
:root {
  color-scheme: light;
  --bg:             var(--color-paper);
  --surface:        var(--color-surface);
  --surface-strong: var(--color-surface);
  --text:           var(--color-ink);
  --muted:          var(--color-ink-muted);
  --line:           var(--color-ink-line);
  --brand:          var(--color-brand);
  --brand-dark:     var(--color-brand-deep);
  --blue:           var(--color-brand);
  --amber:          var(--color-amber);
  --danger:         var(--color-alert);
  --shadow:         var(--shadow-1);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

.miniapp-shell {
  width: min(100%, 460px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 14px 14px 28px;
}

.hero {
  min-height: 196px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  border-radius: 0 0 24px 24px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(20, 81, 64, 0.94), rgba(47, 111, 189, 0.82)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='220' viewBox='0 0 360 220'%3E%3Cpath d='M0 164 58 130l62 22 68-66 64 30 108-88v192H0Z' fill='%23ffffff' opacity='.13'/%3E%3Cpath d='M20 58h54v106H20zM94 24h72v140H94zM190 78h58v86h-58zM270 42h52v122h-52z' fill='%23ffffff' opacity='.11'/%3E%3C/svg%3E");
  background-size: cover;
  box-shadow: var(--shadow);
}

.hero-topline,
.profile-lockup,
.panel-head,
.home-row,
.button,
.icon-button {
  display: flex;
  align-items: center;
}

.hero-topline,
.panel-head {
  justify-content: space-between;
  gap: 12px;
}

.brand-mark,
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-weight: 800;
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
}

.runtime-pill,
.count-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.runtime-pill {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}

.count-pill {
  color: var(--brand-dark);
  background: #e7f4ee;
}

.profile-lockup {
  gap: 14px;
}

.avatar {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  color: var(--brand-dark);
  background: #fff;
  font-size: 20px;
}

.eyebrow {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  max-width: 280px;
  font-size: 26px;
  line-height: 1.08;
}

h2 {
  font-size: 18px;
  line-height: 1.25;
}

.stack {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
  margin-top: 14px;
}

.panel,
.notice,
.action-tile {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(31, 59, 48, 0.08);
}

.panel {
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
}

.stack .panel {
  margin-top: 0;
}

.link-panel {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.notice {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
}

.notice-error {
  color: var(--danger);
  background: #fff7f6;
  border-color: #f1c4bd;
}

.notice-ok {
  color: var(--brand-dark);
  background: #eefaf4;
  border-color: #bddfce;
}

.notice-warn {
  color: var(--amber);
  background: #fff8eb;
  border-color: #f2d2a3;
}

.profile-grid,
.quick-grid {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 14px;
}

.profile-grid {
  grid-template-columns: 1fr;
}

.quick-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.info-tile,
.action-tile {
  min-width: 0;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.info-tile {
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface-strong);
}

.info-tile strong {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
  font-size: 15px;
}

.tile-icon {
  color: var(--brand);
}

.tile-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.mono {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.home-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 14px;
}

.content-stack,
.content-group,
.content-detail {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 12px;
}

.content-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 800;
}

.content-detail {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.content-detail p {
  margin: 0;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
}

.home-row {
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface-strong);
}

.home-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--blue);
  background: #e9f0fb;
}

.home-title {
  font-weight: 800;
}

.home-subtitle,
.empty-state {
  color: var(--muted);
  font-size: 13px;
}

.empty-state {
  margin-top: 14px;
  padding: 18px;
  border-radius: 14px;
  background: var(--surface-strong);
  text-align: center;
}

.action-tile {
  min-height: 100px;
  padding: 12px;
  border-radius: 16px;
}

.action-tile span:not(.tile-icon) {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.action-tile strong {
  font-size: 15px;
}

.field {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 13px;
  color: var(--text);
  background: var(--surface-strong);
  outline: none;
}

.textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 13px;
  color: var(--text);
  background: var(--surface-strong);
  outline: none;
}

.input:focus,
.textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(31, 122, 98, 0.13);
}

.button,
.icon-button {
  justify-content: center;
  border: 0;
  cursor: pointer;
}

.button {
  min-height: 48px;
  gap: 8px;
  border-radius: 15px;
  padding: 0 16px;
  color: #fff;
  background: var(--brand);
  font-weight: 800;
}

.button.secondary {
  color: var(--brand-dark);
  background: #e7f4ee;
}

.button:disabled,
.icon-button:disabled {
  cursor: default;
  opacity: 0.56;
}

.button.ghost {
  width: 100%;
  color: var(--brand-dark);
  background: #e7f4ee;
}

.icon-button {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--brand-dark);
  background: #e7f4ee;
}

.request-list,
.request-detail,
.message-list,
.inline-form {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 14px;
}

.request-card {
  width: 100%;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 12px;
  color: var(--text);
  background: var(--surface-strong);
  text-align: left;
}

.request-card-active {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(31, 122, 98, 0.1);
}

.request-card-top,
.button-row,
.rating-row,
.message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
}

.status-chip-ok {
  color: var(--brand-dark);
  background: #e7f4ee;
}

.status-chip-info {
  color: var(--blue);
  background: #e9f0fb;
}

.status-chip-warn {
  color: var(--amber);
  background: #fff3df;
}

.status-chip-danger {
  color: var(--danger);
  background: #fff0ee;
}

.status-chip-muted {
  color: var(--muted);
  background: #eef2ef;
}

.message-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px;
  background: var(--surface-strong);
}

.message-meta {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 30px;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--brand-dark);
  background: #eef7f2;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.attachment-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rating-row {
  align-items: flex-end;
}

.rating-row .field {
  flex: 1 1;
}

@media (min-width: 430px) {
  .miniapp-shell {
    padding-top: 22px;
  }

  .hero {
    border-radius: 24px;
  }
}

/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[3]!./src/shared/ui/tg/tg-app-shell.module.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
.tg-app-shell_shell__Fwq_H {
  min-height: 100vh;
  background: var(--color-paper);
  color: var(--color-ink);
}

.tg-app-shell_header__EnqeD {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  padding: calc(var(--s-3) + env(safe-area-inset-top)) var(--s-4) var(--s-3);
  background: var(--color-surface);
  border-bottom: var(--border-default);
  display: grid;
  grid-gap: var(--s-2);
  gap: var(--s-2);
}

.tg-app-shell_headerMain__AhDab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.tg-app-shell_titleStack__C83GQ {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  min-width: 0;
}

.tg-app-shell_title__5dCiA {
  font-size: var(--t-h5);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-strong);
  line-height: var(--lh-tight);
}

.tg-app-shell_meta__Da2im {
  font-size: var(--t-micro);
  color: var(--color-ink-muted);
}

.tg-app-shell_actions__Rq2t5 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

.tg-app-shell_chips__ZRbx5 {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  overflow-x: auto;
}

.tg-app-shell_body__W0CTc {
  padding: var(--s-4) var(--s-4) calc(var(--s-8) + env(safe-area-inset-bottom));
}