/* "Stationery" skin for the in-app tender page (html[data-skin="stationery"]).
   Borrowed from the landing mockup (design-mockups/landing-hero-v2/brand.css + daybreak.css): Daybreak's white
   bond paper and Quink type, marked with the office inks and instruments of a sarkari file.
     red tape      #E5431F (text #C2361A, fields #D23C1B)    the deadline ribbon, things to check
     stamp violet  #6236C4                                   the Deep analysis chapter, the reading seal
     green ink     #0E7A4E                                   the Documents chapter, "meets"
     haldi         #F5B81C                                   the highlighter, the one action
     carbon blue   #2447C9                                   the Tender chapter, page references, links
     Quink         #141A33                                   type, filled buttons
   Type (revised 2026-10-07 after a readability study, font-study/): Noto Sans for everything you read, one family
   with a matched Devanagari; Martian Mono only for the stamp marks and page slips. Eczar and Mukta are retired.
   Each tab owns one ink (its "chapter"): tab underline, stamps, icons and small marks take it. */

:root[data-skin="stationery"] {
  --font-roboto: "Noto Sans";
  --font-roboto-flex: "Noto Sans";
  --font-roboto-mono: "Martian Mono";

  --tape: #E5431F; --tape-t: #C2361A; --tape-f: #D23C1B; --stamp: #6236C4; --green: #0E7A4E;
  --haldi: #F5B81C; --carbon: #2447C9; --quink: #141A33;
  --haldi-wash: #FFF3CC; --tape-wash: #FDE8E2; --stamp-wash: #EFEAFB; --green-wash: #DFF2E8; --carbon-wash: #E6EBFB;
  --ch: var(--carbon);
  --paper: #FFFFFF; --fill-bg: var(--quink); --fill-fg: #FFFFFF;
  --warn-row: #FFF8E6; --quote-bg: #FBFCFF; --quote-ink: #23284A; --attn-ink: #5E1B0C;
  --rule: rgba(36, 71, 201, .1); --margin: rgba(229, 67, 31, .55); --band-iqr: #C8D1F6;
  --hl-mark: #F5B81C; --blend: multiply;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.4 2.25'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Daybreak paper */
  --md-sys-color-surface: #FFFFFF;
  --md-sys-color-background: #FFFFFF;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F7F8FB;
  --md-sys-color-surface-container: #F1F3F7;
  --md-sys-color-surface-container-high: #E9ECF2;
  --md-sys-color-surface-container-highest: #E2E6ED;
  --md-sys-color-on-surface: #141A33;
  --md-sys-color-on-surface-variant: #4B5168;
  --md-sys-color-outline: #868CA2;
  --md-sys-color-outline-variant: #E0E3EA;
  --md-sys-color-primary: #141A33;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: var(--carbon-wash);
  --md-sys-color-on-primary-container: #1B2E86;
  --md-sys-color-primary-fixed-dim: #C8D1F6;
  --md-sys-color-secondary-container: var(--haldi-wash);
  --md-sys-color-on-secondary-container: #4A3600;
  --md-sys-color-tertiary: var(--tape-t);
  --md-sys-color-tertiary-container: var(--tape-wash);
  --md-sys-color-on-tertiary-container: #7A2310;
  --md-sys-color-error: var(--tape-t);
  --md-sys-color-error-container: var(--tape-wash);
  --md-sys-color-on-error-container: #7A2310;
  --md-sys-color-inverse-surface: #141A33;
  --md-sys-color-inverse-on-surface: #FFFFFF;
  --ds-status-won: var(--green);
  --ds-status-won-container: var(--green-wash);

  /* Noto Sans: tall x-height (0.536 em), so the MD3 sizes stay; weights step up one for titles */
  --md-sys-typescale-body-large: 400 1rem/1.55rem var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium: 400 0.875rem/1.35rem var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small: 400 0.78125rem/1.15rem var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large: 500 0.875rem/1.25rem var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium: 500 0.78125rem/1.05rem var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small: 600 0.71875rem/1rem var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small: 600 0.90625rem/1.3rem var(--md-ref-typeface-plain);
  --md-sys-typescale-title-medium: 600 1rem/1.45rem var(--md-ref-typeface-plain);
  --md-sys-typescale-title-large: 600 1.3125rem/1.75rem var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small: 600 1.4375rem/1.9rem var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium: 600 1.6875rem/2.2rem var(--md-ref-typeface-brand);
  --md-sys-shape-corner-large: 20px;
  font-synthesis: weight;
}
:root[data-skin="stationery"] ::selection { background: #F5B81C; color: #141A33; }

/* chapter inks: one per tab */
[data-skin="stationery"] .tab[data-tab="tender"], [data-skin="stationery"] #panel[data-tab="tender"] { --ch: var(--carbon); }
[data-skin="stationery"] .tab[data-tab="deep"], [data-skin="stationery"] #panel[data-tab="deep"] { --ch: var(--stamp); }
[data-skin="stationery"] .tab[data-tab="docs"], [data-skin="stationery"] #panel[data-tab="docs"] { --ch: var(--green); }
[data-skin="stationery"] .tab[data-tab="ai"], [data-skin="stationery"] #panel[data-tab="ai"] { --ch: var(--tape-t); }

/* the form label: short uppercase captions in Noto Sans semibold (readable at 11px, unlike a mono) */
[data-skin="stationery"] :is(.factLabel, .kvKey, .g-k, .ans-label, .keyLabel, .sec-n, .sb-label, .moneyLabel, .foot-row > span, .check-head, .tbl th, .signal dt, .verdict-who, .metaText, .filePaneHead p, .band-cap, .band-scale, .result-head, .sideTitle small) {
  font-family: var(--md-ref-typeface-plain); font-weight: 600; font-size: 11px; line-height: 1.4; letter-spacing: .055em; text-transform: uppercase;
}
[data-skin="stationery"] :is(.count, .filterCount, .usedChip, .tocn) { font-family: var(--md-ref-typeface-plain); font-weight: 600; font-size: 11px; letter-spacing: .02em; }
[data-skin="stationery"] .ans-label { color: var(--md-sys-color-on-surface-variant); padding-top: 3px; }
[data-skin="stationery"] .ans-label .status { font-family: var(--md-ref-typeface-mono); font-variation-settings: "wdth" 86; letter-spacing: .08em; font-size: 9.5px; }

/* values: the same face, one weight heavier, tabular figures */
[data-skin="stationery"] :is(.factValue, .g-v, .ans-head, .keyValue, .moneyValue, .bidder .amt, .stat b, .kvValMono) { font-family: var(--md-ref-typeface-plain); font-weight: 600; letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
[data-skin="stationery"] .factValue { font-size: 16px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-skin="stationery"] .g-v { font-size: 17px; }
[data-skin="stationery"] .ans-head { font-size: 16px; }
[data-skin="stationery"] :is(.moneyValue, .bidder .amt) { font-size: 14px; }
[data-skin="stationery"] :is(.h1, .sectionTitle, .df-title, .verdict h2, .empty h2, .sb-title) { font-family: var(--md-ref-typeface-brand); font-weight: 600; letter-spacing: -.015em; }
[data-skin="stationery"] .h1 { max-width: 46ch; }

/* ── shell ── */
[data-skin="stationery"] .sb-item[data-active="true"] { background: var(--haldi-wash); }
[data-skin="stationery"] .sb-item[data-active="true"] .md-icon { color: var(--md-sys-color-on-surface); }
[data-skin="stationery"] .rail-item[data-active="true"] { background: var(--haldi-wash); }
[data-skin="stationery"] .plan-chip { border-radius: 999px; border-color: transparent; background: var(--haldi); color: var(--quink); font-weight: 600; }
[data-skin="stationery"] .plan-chip[data-paid] { background: var(--fill-bg); color: var(--fill-fg); }
[data-skin="stationery"] .plan-chip[data-paid] .md-icon { color: var(--haldi); }
[data-skin="stationery"] .allow { border-radius: 16px; }
[data-skin="stationery"] .meter-row > span:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; vertical-align: 0; background: var(--sq); }
[data-skin="stationery"] .meter-row[data-g="deep"] { --sq: var(--stamp); }
[data-skin="stationery"] .meter-row[data-g="docs"] { --sq: var(--green); }
[data-skin="stationery"] .meter-row[data-g="ai"] { --sq: var(--tape); }
[data-skin="stationery"] .meter-row .mfill { background: var(--sq); }
[data-skin="stationery"] .meter-row[data-out] .mfill { background: var(--tape); }

/* ── buttons: Quink pills with a haldi icon; red tape on hover. Tonal is the haldi pill. ── */
[data-skin="stationery"] .btn { border-radius: 999px; font-weight: 600; }
[data-skin="stationery"] .btn-filled { background: var(--fill-bg); color: var(--fill-fg); }
[data-skin="stationery"] .btn-filled .md-icon { color: var(--haldi); }
[data-skin="stationery"] .btn-filled:hover { background: var(--tape-f); filter: none; }
[data-skin="stationery"] .btn-filled:hover .md-icon { color: #FFFFFF; }
[data-skin="stationery"] .btn-tonal { background: var(--haldi); color: var(--quink); box-shadow: inset 0 -2px 0 rgba(20, 26, 51, .14); }
[data-skin="stationery"] .btn-tonal:hover { background: #FFC93D; filter: none; }
[data-skin="stationery"] .btn-outlined { color: var(--md-sys-color-on-surface); border-color: var(--md-sys-color-outline); }
[data-skin="stationery"] :is(.btn-text, .textAction, .anchorLink, .quoteOpen, .authority a, .attn a) { color: var(--carbon); }

/* ── header ── */
[data-skin="stationery"] :is(.chip, .portal-chip) { border-radius: 999px; background: var(--paper); border: 1px solid var(--md-sys-color-outline-variant); }
[data-skin="stationery"] .portal-fav { background: var(--carbon); border-radius: 999px; }
[data-skin="stationery"] .lifeChip[data-tone="warning"] { background: var(--tape-wash); color: var(--tape-t); }
[data-skin="stationery"] .idChip { background: var(--paper); border: 1px dashed var(--md-sys-color-outline); border-radius: 6px; }

/* the deadline is tied in red tape: a ribbon with stitched edges */
[data-skin="stationery"] .lifeBanner { position: relative; border-radius: 4px; background: var(--tape-f); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(0, 0, 0, .06), inset 0 -1px 0 rgba(0, 0, 0, .1); }
[data-skin="stationery"] .lifeBanner::before, [data-skin="stationery"] .lifeBanner::after { content: ""; position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255, 244, 236, .55); }
[data-skin="stationery"] .lifeBanner::before { top: 4px; }
[data-skin="stationery"] .lifeBanner::after { bottom: 4px; }
[data-skin="stationery"] .lifeBanner .md-icon { color: var(--haldi); }
[data-skin="stationery"] .lifeBanner b { color: #FFFFFF; }
[data-skin="stationery"] .lifeCopy .left { color: var(--haldi); font-weight: 700; }

[data-skin="stationery"] .facts { border-radius: 20px; }
[data-skin="stationery"] .factLabel .md-icon { color: var(--carbon); filter: drop-shadow(1.2px 1.1px 0 rgba(245, 184, 28, .9)); }

/* tabs: each tab writes in its chapter ink */
[data-skin="stationery"] .tab[data-active="true"] { color: var(--ch); }
[data-skin="stationery"] .tab[data-active="true"]::after { background: var(--ch); height: 4px; }
[data-skin="stationery"] .tab .count::before { content: ""; width: 6px; height: 6px; margin-right: 2px; background: var(--ch); }
[data-skin="stationery"] .tab[data-active="true"] .count { background: color-mix(in srgb, var(--ch) 12%, var(--paper)); color: var(--ch); }
[data-skin="stationery"] .count[data-tone="out"] { background: var(--tape-wash); color: var(--tape-t); }

/* ── the rubber stamp: section names are stamped in their chapter ink ── */
[data-skin="stationery"] :is(.sec-head h3, .stamp) {
  display: inline-flex; align-items: center; gap: 8px; width: max-content;
  padding: 7px 11px 6px; border: 1.5px solid var(--ch); border-radius: 6px; outline: 1px solid var(--ch); outline-offset: -5px;
  font: 600 11px/1 var(--md-ref-typeface-mono); font-variation-settings: "wdth" 86; letter-spacing: .12em; text-transform: uppercase; color: var(--ch);
  -webkit-mask-image: var(--grain); mask-image: var(--grain);
}
[data-skin="stationery"] .sec-head { background: color-mix(in srgb, var(--ch) 8%, var(--paper)); border-bottom-color: color-mix(in srgb, var(--ch) 22%, var(--paper)); padding: 14px 20px; }
[data-skin="stationery"] .sec-head > .md-icon { color: var(--ch); filter: drop-shadow(1.6px 1.4px 0 rgba(245, 184, 28, .95)); }
[data-skin="stationery"] .tier { background: none; border: 1.5px solid var(--ch); outline: 1px solid var(--ch); outline-offset: -4px; border-radius: 5px; color: var(--ch); padding: 4px 8px 3px; font: 600 10px/1 var(--md-ref-typeface-mono); font-variation-settings: "wdth" 86; letter-spacing: .12em; text-transform: uppercase; -webkit-mask-image: var(--grain); mask-image: var(--grain); }

/* ── Deep analysis ── */
[data-skin="stationery"] .da-top { position: relative; }
[data-skin="stationery"] .da-short mark { background: linear-gradient(100deg, rgba(245, 184, 28, 0) 0 .4%, var(--hl-mark) 1% 98.8%, rgba(245, 184, 28, 0) 99.4%) 0 88% / 100% 40% no-repeat; color: inherit; padding: 0 .05em; }
[data-skin="stationery"] .glance { background: var(--paper); }
[data-skin="stationery"] .glance a:hover { background: var(--haldi-wash); }
[data-skin="stationery"] .attn { background: var(--tape-wash); color: var(--attn-ink); }
[data-skin="stationery"] .attn > .md-icon { color: var(--tape-t); }
[data-skin="stationery"] .toc a[data-active] { background: color-mix(in srgb, var(--stamp) 10%, var(--paper)); color: var(--stamp); }
[data-skin="stationery"] .toc a[data-active] .md-icon { color: var(--stamp); }
[data-skin="stationery"] .tocdot { background: var(--tape); border-radius: 0; }
[data-skin="stationery"] .ans[data-warn] { background: var(--warn-row); }
[data-skin="stationery"] .ans-label .status-tertiary { background: none; border: 1px solid var(--tape-t); color: var(--tape-t); }
[data-skin="stationery"] .flagline { color: var(--tape-t); }
[data-skin="stationery"] .flagline[data-info] { color: var(--md-sys-color-on-surface-variant); }
[data-skin="stationery"] .pageLink { background: var(--paper); border: 1px solid color-mix(in srgb, var(--carbon) 35%, var(--paper)); color: var(--carbon); font-family: var(--md-ref-typeface-mono); font-variation-settings: "wdth" 86; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; }
[data-skin="stationery"] .pageLink:hover, [data-skin="stationery"] .pageLink[aria-expanded="true"] { background: var(--carbon-wash); color: var(--carbon); }
/* the quote is a carbon copy on a ruled note sheet */
[data-skin="stationery"] .quote { border-left: 0; border-radius: 10px; padding: 10px 14px 10px 26px; position: relative; color: var(--quote-ink);
  background: repeating-linear-gradient(to bottom, rgba(36, 71, 201, 0) 0 19px, var(--rule) 19px 20px), var(--quote-bg); background-position: 0 6px; }
[data-skin="stationery"] .quote::before { content: ""; position: absolute; top: 0; bottom: 0; left: 12px; width: 3px; border-left: 1px solid var(--margin); border-right: 1px solid var(--margin); }

/* the reading seal: pressed on the deep analysis like an office date stamp */
.seal { display: none; }
[data-skin="stationery"] .seal { display: block; position: absolute; right: 150px; top: 8px; width: 128px; height: 128px; color: var(--stamp); opacity: .86; transform: rotate(-11deg); mix-blend-mode: var(--blend); pointer-events: none;
  -webkit-mask-image: var(--grain); mask-image: var(--grain); -webkit-mask-size: 160px 80px; mask-size: 160px 80px; animation: press .62s cubic-bezier(.3, 1.35, .45, 1) both; }
[data-skin="stationery"] .seal svg { width: 100%; height: 100%; overflow: visible; }
[data-skin="stationery"] .seal .m { font-family: var(--md-ref-typeface-mono); font-variation-settings: "wdth" 86; }
[data-skin="stationery"] .seal .h { font-family: var(--md-ref-typeface-brand); font-weight: 700; }
@keyframes press { 0% { opacity: 0; transform: rotate(-3deg) scale(1.5); } 52% { opacity: .95; transform: rotate(-11deg) scale(.965); } 100% { opacity: .86; transform: rotate(-11deg) scale(1); } }

/* ── Tender tab ── */
[data-skin="stationery"] .coverNum { background: var(--carbon); }
[data-skin="stationery"] .dates li[data-past]::before { background: var(--carbon); }
[data-skin="stationery"] .dates .dot { border-color: var(--carbon); }
[data-skin="stationery"] .dates li[data-past] .dot { background: var(--carbon); }
[data-skin="stationery"] .dates li[data-key] .dot { border-color: var(--tape); background: var(--haldi); }
[data-skin="stationery"] .dates b .today { background: var(--tape-f); border-radius: 3px; }
[data-skin="stationery"] .band-iqr { background: var(--band-iqr); }
[data-skin="stationery"] .band-med { background: var(--quink); }
[data-skin="stationery"] .band-this { color: var(--tape-t); }
[data-skin="stationery"] .band-this i { background: var(--tape); }
[data-skin="stationery"] .unlock { background: var(--haldi-wash); color: var(--md-sys-color-on-surface); }
[data-skin="stationery"] .unlock-row { background: var(--haldi-wash); color: var(--md-sys-color-on-surface); }
[data-skin="stationery"] .unlock-row[data-open] { background: var(--md-sys-color-surface-container-low); }
[data-skin="stationery"] :is(.unlock[data-out], .unlock-row[data-out]) { background: var(--tape-wash); color: var(--attn-ink); }
[data-skin="stationery"] .status-won { background: none; border: 1px solid var(--green); color: var(--green); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }

/* ── Documents ── */
[data-skin="stationery"] .segment[data-active] { background: color-mix(in srgb, var(--green) 12%, var(--paper)); color: var(--green); }
[data-skin="stationery"] .fileRow[data-active] { background: color-mix(in srgb, var(--green) 10%, var(--paper)); color: var(--md-sys-color-on-surface); }
[data-skin="stationery"] .fileIcon { color: var(--green); background: var(--paper); border: 1px solid var(--md-sys-color-outline-variant); }
[data-skin="stationery"] .fileIcon .md-icon { filter: drop-shadow(1.4px 1.3px 0 rgba(245, 184, 28, .95)); }
[data-skin="stationery"] .docWorkspace { border-radius: 20px; }
/* "Documents to prepare" is a ruled register sheet with the red double margin */
[data-skin="stationery"] .prep { border-top: 0; padding-left: 40px; position: relative; background: repeating-linear-gradient(to bottom, rgba(36, 71, 201, 0) 0 calc(100% - 1px), rgba(36, 71, 201, .14) calc(100% - 1px) 100%); }
[data-skin="stationery"] .prep::before { content: ""; position: absolute; top: 0; bottom: 0; left: 26px; width: 3px; border-left: 1px solid var(--margin); border-right: 1px solid var(--margin); }
[data-skin="stationery"] .prep-n { position: absolute; left: -6px; background: none; color: var(--tape-t); font-family: var(--md-ref-typeface-mono); font-variation-settings: "wdth" 86; }

/* ── AI analysis ── */
[data-skin="stationery"] .verdict { position: relative; }
[data-skin="stationery"] .verdict h2 { display: flex; align-items: center; gap: 18px; }
[data-skin="stationery"] .verdict-stamp { transform: rotate(-6deg); --ch: var(--green); font-size: 12px !important; padding: 8px 13px 7px !important; animation: stamp .62s cubic-bezier(.3, 1.35, .45, 1) both; }
@keyframes stamp { 0% { opacity: 0; transform: rotate(-1deg) scale(1.5); } 52% { opacity: 1; transform: rotate(-6deg) scale(.965); } 100% { transform: rotate(-6deg) scale(1); } }
.verdict-stamp { display: none; }
[data-skin="stationery"] .verdict-stamp { display: inline-flex; }
[data-skin="stationery"] .todo { background: var(--haldi-wash); color: var(--md-sys-color-on-surface); }
[data-skin="stationery"] .todo ol li::marker { color: var(--tape-t); }
[data-skin="stationery"] .tbl th { background: var(--paper); }
[data-skin="stationery"] .status-primary { background: var(--carbon-wash); color: var(--carbon); }
[data-skin="stationery"] .status-tertiary { background: var(--tape-wash); color: var(--tape-t); }

@media (prefers-reduced-motion: reduce) { [data-skin="stationery"] :is(.seal, .verdict-stamp) { animation: none; } }

/* every verdict chip is a small outlined stamp in its ink */
[data-skin="stationery"] :is(.tbl .status, .tally .status, .ans-head .status) { background: none; border: 1px solid currentColor; font-family: var(--md-ref-typeface-mono); font-variation-settings: "wdth" 86; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
[data-skin="stationery"] :is(.tbl, .tally) .status-won { color: var(--green); }
[data-skin="stationery"] :is(.tbl, .tally) .status-primary { color: var(--carbon); }
[data-skin="stationery"] :is(.tbl, .tally) .status-tertiary { color: var(--tape-t); }
[data-skin="stationery"] :is(.tbl, .tally, .ans-head) .status-neutral { color: var(--md-sys-color-on-surface-variant); }

/* ── Night: Quink paper, the inks brightened so they still read ── */
:root[data-skin="stationery"][data-theme="dark"] {
  --paper: #161C31; --fill-bg: #ECEEF7; --fill-fg: #141A33;
  --tape: #FF6B4A; --tape-t: #FF8A6E; --tape-f: #C93A1C; --stamp: #A98DFF; --green: #4BC994; --carbon: #8EA6FF;
  --haldi-wash: #352C14; --tape-wash: #3A1F1A; --stamp-wash: #29234A; --green-wash: #14332A; --carbon-wash: #1D2752;
  --warn-row: #261F12; --quote-bg: #11172B; --quote-ink: #D5D9EA; --attn-ink: #FFD9CF;
  --rule: rgba(142, 166, 255, .14); --margin: rgba(255, 107, 74, .5); --band-iqr: #36427E;
  --hl-mark: rgba(245, 184, 28, .5); --blend: screen;
  --md-sys-color-surface: #10152A;
  --md-sys-color-background: #10152A;
  --md-sys-color-surface-container-lowest: #161C31;
  --md-sys-color-surface-container-low: #161C31;
  --md-sys-color-surface-container: #1B2238;
  --md-sys-color-surface-container-high: #222A43;
  --md-sys-color-surface-container-highest: #2A334E;
  --md-sys-color-on-surface: #ECEEF7;
  --md-sys-color-on-surface-variant: #A9AFC7;
  --md-sys-color-outline: #6D7493;
  --md-sys-color-outline-variant: #2C3452;
  --md-sys-color-primary: #ECEEF7;
  --md-sys-color-on-primary: #141A33;
  --md-sys-color-on-primary-container: #CBD5FF;
  --md-sys-color-primary-fixed-dim: #36427E;
  --md-sys-color-on-secondary-container: #FFE7A3;
  --md-sys-color-on-tertiary-container: #FFD9CF;
  --md-sys-color-on-error-container: #FFD9CF;
  --md-sys-color-inverse-surface: #ECEEF7;
  --md-sys-color-inverse-on-surface: #141A33;
}

/* ── Hybrid (?skin=hybrid → data-ground="production"): production's grounds and hairlines, light and dark;
   type, inks and instruments stay Stationery. Every property here is restated in the dark block. ── */
:root[data-skin="stationery"][data-ground="production"] {
  --md-sys-color-surface: #FFF8F4;
  --md-sys-color-background: #FFF8F4;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #FCF2EA;
  --md-sys-color-surface-container: #F6ECE4;
  --md-sys-color-surface-container-high: #F1E6DF;
  --md-sys-color-surface-container-highest: #EBE1D9;
  --md-sys-color-outline: #80756C;
  --md-sys-color-outline-variant: #D1C4B9;
  --paper: #FFFFFF; --quote-bg: #FCF2EA; --warn-row: #FFF1D2;
}
:root[data-skin="stationery"][data-ground="production"][data-theme="dark"] {
  --md-sys-color-surface: #17130E;
  --md-sys-color-background: #17130E;
  --md-sys-color-surface-container-lowest: #110D09;
  --md-sys-color-surface-container-low: #1F1B16;
  --md-sys-color-surface-container: #231F1A;
  --md-sys-color-surface-container-high: #2E2924;
  --md-sys-color-surface-container-highest: #39342F;
  --md-sys-color-outline: #9A8F85;
  --md-sys-color-outline-variant: #4E453D;
  --paper: #1F1B16; --quote-bg: #1A1612; --warn-row: #2A2214;
}

/* the deadline card is tied with red tape */
[data-skin="stationery"] .closeCard { border-radius: 20px; background: var(--paper); }
[data-skin="stationery"] .cc-head { background: var(--tape-f); color: #FFFFFF; padding: 12px 16px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1); font-weight: 600; letter-spacing: .02em; }
[data-skin="stationery"] .cc-head::before, [data-skin="stationery"] .cc-head::after { content: ""; position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255, 244, 236, .55); }
[data-skin="stationery"] .cc-head::before { top: 4px; }
[data-skin="stationery"] .cc-head::after { bottom: 4px; }
[data-skin="stationery"] .cc-head .md-icon { color: var(--haldi); }
[data-skin="stationery"] .cc-left { background: var(--haldi); color: var(--quink); font-weight: 600; }
[data-skin="stationery"] .cc-track i { background: var(--tape); }
[data-skin="stationery"] .cc-actions .btn-text { color: var(--carbon); }