/* The shared UI's global stylesheet of design tokens, fonts and resets, transcribed from the design prototype in docs/design/ui/prototype/README.md. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/Fraunces.woff2') format('woff2');
}

:root {
  /* Brand */
  --kimio-orange-50:  #FFF3EC;
  --kimio-orange-100: #FFE0CC;
  --kimio-orange-200: #FFC096;
  --kimio-orange-300: #FF9A5E;
  --kimio-orange-400: #FA7733;
  --kimio-orange-500: #F35A1C;   /* primary */
  --kimio-orange-600: #D63D08;
  --kimio-orange-700: #A32E05;
  --kimio-orange-800: #6F2003;

  /* Roof Blue — the hat */
  --roof-blue-50:  #EFF6FF;
  --roof-blue-100: #D8E8FE;
  --roof-blue-200: #B2D2FD;
  --roof-blue-300: #82B6FB;
  --roof-blue-400: #4E9AF9;      /* secondary */
  --roof-blue-500: #2E7DE8;
  --roof-blue-600: #1F60BF;
  --roof-blue-700: #174689;

  /* Meadow — the grass */
  --meadow-50:  #EFF8F5;
  --meadow-100: #D6EEE6;
  --meadow-200: #ADDDCB;
  --meadow-300: #88CDB6;
  --meadow-400: #70BEAC;         /* tertiary / positive */
  --meadow-500: #4FA08D;
  --meadow-600: #3A7E6F;
  --meadow-700: #295A4F;

  /* Sun — the glasses */
  --sun-200: #FDEAB0;
  --sun-300: #FBD974;
  --sun-400: #F4C13A;
  --sun-500: #DDA419;            /* warning */
  /* The text weight of the warning hue, because --sun-500 on the soft warning fill is under the 4.5:1 WCAG 1.4.3 requires for small text. */
  --sun-700: #8a6300;

  /* Terracotta — critical / over-cap / under-insured states. */
  --terracotta-50:  #FAE9E4;
  --terracotta-400: #E66A4A;
  --terracotta-500: #D63D08;
  --terracotta-600: #C8421F;
  --terracotta-700: #9F2E0F;

  /* Cream surfaces */
  --cream-0:   #FFFFFF;
  --cream-50:  #FFFBF3;          /* default app bg */
  --cream-100: #FAF4E8;
  --cream-200: #F2EAD8;
  --cream-300: #E6DBC2;

  /* Indigo Ink — the pupil */
  --ink-900: #1A173C;            /* primary text */
  --ink-700: #34315A;
  --ink-500: #5E5B7C;
  --ink-400: #807DA0;
  --ink-300: #A6A4BE;
  --ink-200: #CFCEE0;
  --ink-100: #E7E6F0;
  --ink-50:  #F4F3F9;

  /* Indigo with alpha — overlays and hairlines on cream */
  --ink-04:  rgba(26, 23, 60, 0.04);
  --ink-08:  rgba(26, 23, 60, 0.08);
  --ink-12:  rgba(26, 23, 60, 0.12);
  --ink-24:  rgba(26, 23, 60, 0.24);
  --ink-40:  rgba(26, 23, 60, 0.40);
  --ink-60:  rgba(26, 23, 60, 0.60);

  /* Status (semantic) */
  --status-positive: var(--meadow-500);
  --status-warning:  var(--sun-500);
  --status-critical: #D24545;
  --status-info:     var(--roof-blue-500);

  --bg:              var(--cream-50);
  --bg-raised:       var(--cream-0);
  --bg-sunken:       var(--cream-100);
  --bg-hero:         linear-gradient(180deg, #E8F1FE 0%, var(--cream-50) 60%);
  --glass-bg:        rgba(255, 251, 243, 0.92);   /* frosted bars / tab bar */
  --scrim:           rgba(26, 23, 60, 0.32);       /* sheet & modal backdrop */

  --fg:              var(--ink-900);   /* body */
  --fg-muted:        var(--ink-500);   /* secondary text */
  --fg-faint:        var(--ink-400);   /* tertiary / captions */
  --fg-inverse:      var(--cream-50);

  --border:          var(--ink-12);
  --border-strong:   var(--ink-24);

  --accent:          var(--kimio-orange-500);
  --accent-hover:    var(--kimio-orange-600);
  --accent-soft:     var(--kimio-orange-50);
  --accent-fg:       #FFFFFF;

  /* Selection colour for active navigation, breadcrumbs, the primary + button and the "What it is" section. */
  --selected:        var(--accent);
  --selected-soft:   var(--accent-soft);

  /* The one unread dot every surface draws for "there is something new here", listed in ux-principles.md §5. It uses --accent rather than --selected so the dot keeps its colour between themes. */
  /* --unread-dot-ring is the halo around the dot and must match the surface the dot renders on, so a host on another surface overrides it on its own element. */
  --unread-dot:      var(--accent);
  --unread-dot-ring: var(--bg-raised);

  --link:            var(--roof-blue-500);
  --link-hover:      var(--roof-blue-600);

  --positive:        var(--meadow-500);
  --positive-soft:   var(--meadow-50);
  --warning:         var(--sun-500);
  --warning-soft:    #FFF6DB;

  /* Text weights of the accent and warning hues for small text on their own soft fill, which the full-strength hue would leave under the 4.5:1 WCAG 1.4.3 requires. */
  --accent-ink:      var(--kimio-orange-700);
  --warning-ink:     var(--sun-700);
  --positive-ink:    var(--meadow-700);

  --critical:        var(--status-critical);
  --critical-soft:   #FCEAEA;

  /* Danger and error messaging; --strong is the readable text colour and the rest track the critical scale. */
  --colour-danger:         var(--critical);
  --colour-danger-strong:  #8A1C1C;
  --colour-danger-soft:    var(--critical-soft);
  --colour-danger-surface: var(--critical-soft);

  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-text:    'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Type scale (rem-based, root = 16px) */
  --fs-10: 0.625rem;   --lh-10: 0.9375rem;
  --fs-12: 0.75rem;    --lh-12: 1.05rem;
  --fs-13: 0.8125rem;  --lh-13: 1.15rem;
  --fs-14: 0.875rem;   --lh-14: 1.25rem;
  --fs-16: 1rem;       --lh-16: 1.5rem;
  --fs-18: 1.125rem;   --lh-18: 1.625rem;
  --fs-20: 1.25rem;    --lh-20: 1.75rem;
  --fs-24: 1.5rem;     --lh-24: 2rem;
  --fs-32: 2rem;       --lh-32: 2.375rem;
  --fs-40: 2.5rem;     --lh-40: 2.875rem;
  --fs-56: 3.5rem;     --lh-56: 3.75rem;
  --fs-72: 4.5rem;     --lh-72: 4.75rem;

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

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.08em;

  --space-2:  2px;
  --space-4:  4px;
  --space-6:  6px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* The padding AppShell's .app-shell__body contributes on every side, so a page compensating for it reads this token rather than hard-coding --space-16. */
  --shell-body-inset: var(--space-16);

  /* The space between a field's caption and the value it labels, the Caption to Stated step in ux-principles.md §6. */
  --field-label-gap: var(--space-6);

  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  14px;   /* buttons, inputs, tiles */
  --radius-lg:  20px;   /* cards */
  --radius-xl:  28px;   /* hero cards, sheets */
  --radius-2xl: 36px;   /* modals */
  --radius-pill: 999px;

  /* The one tag pill size, shared by TagChip, SmartTagChip and TagPill so a mixed list does not look ragged. */
  --tag-pill-padding: 0.3rem 0.6rem;
  --tag-pill-gap: 0.35rem;
  --tag-pill-font-size: 0.82rem;
  --tag-pill-font-weight: 600;
  /* The leading glyph's box, which must be at least as tall as the tallest glyph any pill carries or that pill stretches. */
  --tag-pill-glyph: 13px;

  --shadow-1: 0 1px 2px rgba(26, 23, 60, .04),
              0 2px 8px rgba(243, 90, 28, .06);
  --shadow-2: 0 4px 12px rgba(26, 23, 60, .06),
              0 8px 24px rgba(243, 90, 28, .08);
  --shadow-3: 0 12px 32px rgba(26, 23, 60, .10),
              0 24px 64px rgba(243, 90, 28, .10);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .6);
  --shadow-focus: 0 0 0 2px var(--cream-50),
                  0 0 0 4px var(--roof-blue-400);

  --ease-out:    cubic-bezier(0.20, 0.80, 0.20, 1);
  --ease-in-out: cubic-bezier(0.40, 0.00, 0.20, 1);
  --ease-spring: cubic-bezier(0.20, 1.40, 0.30, 1);

  --dur-micro:   120ms;
  --dur-fast:    200ms;
  --dur-base:    320ms;
  --dur-slow:    600ms;

  --z-base:    1;
  --z-raised: 10;
  --z-sticky: 50;
  --z-overlay: 100;
  --z-modal:  200;
  --z-toast:  300;

  /* Device insets that bars add so content clears the system chrome. */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);

  /* Documentation only: an @media condition cannot read a custom property, so every phone-width media query repeats this value by hand. */
  /* It governs only "is this a phone?" and not a content-fit query, which keeps its own measured value in rem. */
  /* A C# constant standing for the same width names this token in its doc comment, as PartySelect's NarrowBreakpointPx does. */
  --breakpoint-mobile: 480px;

  /* The padding and gap for a page that stacks section cards, named per side so a shell-hosted page can compute the extra padding it needs on top of the shell's. */
  --section-stack-padding-top: 8px;
  --section-stack-padding-x: 16px;
  --section-stack-padding-bottom: 24px;
  --section-stack-padding:
    var(--section-stack-padding-top)
    var(--section-stack-padding-x)
    var(--section-stack-padding-bottom);
  --section-stack-gap: 12px;
  /* The card and row corner radius shared by ItemSection's card and the item-types catalogue row. */
  --section-stack-radius: 12px;

  /* The tile height shared by SplitAccessibilityScale and SplitEnvironmentGrid at both widths. */
  --split-tile-height: 90px;
  --split-tile-height-mobile: 38px;
}

.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-56);
  line-height: var(--lh-56);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  font-variation-settings: "opsz" 96;
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-40);
  line-height: var(--lh-40);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  font-variation-settings: "opsz" 72;
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-32);
  line-height: var(--lh-32);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  font-variation-settings: "opsz" 48;
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-24);
  color: var(--fg);
  font-variation-settings: "opsz" 36;
}
.t-h4 {
  font-family: var(--font-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-18);
  line-height: var(--lh-18);
  color: var(--fg);
}
.t-body {
  font-family: var(--font-text);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--fg);
}
.t-body-strong {
  font-family: var(--font-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--fg);
}
.t-small {
  font-family: var(--font-text);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  color: var(--fg-muted);
}
.t-caption {
  font-family: var(--font-text);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--fg-faint);
}
.t-eyebrow {
  font-family: var(--font-text);
  font-weight: var(--fw-semibold);
  font-size: 0.6875rem;        /* 11px */
  line-height: 1rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.t-link {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.t-link:hover { border-bottom-color: var(--link); color: var(--link-hover); }

/* Truncates a single-line path at the start so its leaf stays visible. */
/* The caller supplies white-space: nowrap, overflow: hidden and text-overflow: ellipsis. */
/* Every caller must wrap its text in a <bdi>, because the rtl flip would otherwise move a trailing bracket or full stop to the left edge of a user-authored name. */
.truncate-start {
  direction: rtl;
  text-align: left;
}

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Both variable fonts carry the full weight axis, so a faux bold is never needed. */
  font-synthesis: none;
  font-optical-sizing: auto;
}

/* The hover shared by every bordered input zone, global so one rule reaches these controls across every component. Borderless title fields such as .domain-details__name are excluded. */
.item-page__field input:not([type="checkbox"]):not([type="radio"]),
.item-page__field select,
.item-page__field textarea,
.currency-picker__trigger,
.icon-picker__trigger,
.item-type-picker__trigger,
.kimio-select__trigger,
.fault-table__trigger {
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.item-page__field input:not([type="checkbox"]):not([type="radio"]):hover,
.item-page__field select:hover,
.item-page__field textarea:hover,
.currency-picker__trigger:hover,
.icon-picker__trigger:hover,
.item-type-picker__trigger:hover,
.kimio-select__trigger:hover,
.fault-table__trigger:hover {
  border-color: var(--fg-muted);
  box-shadow: inset 0 0 0 1px var(--fg-muted);
}

/* The dark theme, applied by `.is-dark` on the document root, redefines the primitive tokens so every component flips with it. */
.is-dark {
  color-scheme: dark;

  /* Cream surfaces → deep indigo, elevation reads lighter */
  --cream-0:   #232046;
  --cream-50:  #16142C;
  --cream-100: #1E1B3A;
  --cream-200: #2B2854;
  --cream-300: #393466;

  /* Indigo ink scale → inverted to light text on dark */
  --ink-900: #F3F1FB;
  --ink-700: #D5D2E8;
  --ink-500: #A6A2C4;
  --ink-400: #8884A8;
  --ink-300: #6E6A90;
  --ink-200: #4D496F;
  --ink-100: #393557;
  --ink-50:  #29264A;

  /* Ink alphas → light hairlines & overlays on dark surfaces */
  --ink-04:  rgba(255, 255, 255, 0.045);
  --ink-08:  rgba(255, 255, 255, 0.08);
  --ink-12:  rgba(255, 255, 255, 0.12);
  --ink-24:  rgba(255, 255, 255, 0.22);
  --ink-40:  rgba(255, 255, 255, 0.38);
  --ink-60:  rgba(255, 255, 255, 0.62);

  /* Ultra-light brand tints → low-alpha so soft fills sit on dark */
  --kimio-orange-50:  rgba(250, 119, 51, 0.16);
  --kimio-orange-100: rgba(250, 119, 51, 0.20);
  --kimio-orange-200: rgba(250, 119, 51, 0.32);
  --roof-blue-50:     rgba(78, 154, 249, 0.16);
  --roof-blue-100:    rgba(78, 154, 249, 0.22);
  --roof-blue-600:    #6BA6FA;
  --roof-blue-700:    #82B6FB;
  --meadow-50:        rgba(112, 190, 172, 0.16);
  --meadow-100:       rgba(112, 190, 172, 0.22);
  --meadow-300:       rgba(112, 190, 172, 0.42);
  --meadow-600:       #74D6B6;
  --meadow-700:       #7FE0C0;
  --sun-100:          rgba(244, 193, 58, 0.14);
  --sun-200:          rgba(244, 193, 58, 0.18);
  --sun-700:          #F4C13A;

  /* Terracotta must brighten on dark or the "Condition & value" accent reads as muddy brick red. */
  --terracotta-50:    rgba(214, 61, 8, 0.17);
  --terracotta-600:   #F0805E;
  --terracotta-700:   #F0805E;

  /* Brand primaries — nudge brighter so they pop on the dark base */
  --kimio-orange-500: #FA7733;
  --kimio-orange-600: #FF9A5E;
  /* The light-mode ink --kimio-orange-700 disappears on the translucent orange fill. */
  --accent-ink:       var(--kimio-orange-600);

  /* Selection reads as roof-blue on dark rather than orange. */
  --selected: var(--roof-blue-400);
  --selected-soft: var(--roof-blue-50);

  /* Semantic tokens carrying hardcoded hex need explicit dark values */
  --bg-hero:       linear-gradient(180deg, #1F2A4A 0%, var(--cream-50) 62%);
  --glass-bg:      rgba(22, 20, 44, 0.86);
  --scrim:         rgba(7, 6, 18, 0.58);
  --warning-soft:  rgba(221, 164, 25, 0.18);
  --critical-soft: rgba(210, 69, 69, 0.20);

  /* Danger messaging inverts to a light red because the light-mode deep red is near-unreadable on deep indigo. */
  --colour-danger:        #F0716B;
  --colour-danger-strong: #FF9E9E;

  /* Links a touch brighter for legibility on dark */
  --link:        var(--roof-blue-300);
  --link-hover:  var(--roof-blue-200);

  /* Shadows → real depth needs black, not warm tint, on dark */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .40),
              0 2px 8px rgba(0, 0, 0, .30);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, .45),
              0 10px 30px rgba(0, 0, 0, .35);
  --shadow-3: 0 16px 40px rgba(0, 0, 0, .55),
              0 28px 70px rgba(0, 0, 0, .45);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* The one shape every tag wears (TagChip, SmartTagChip, TagPill), global because scoped CSS cannot be shared between components. */
/* Each component adds only its colours. */
.k-tag-pill {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  gap: var(--tag-pill-gap);
  padding: var(--tag-pill-padding);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;   /* the colour is the component's; the WIDTH is shared */
  font-family: var(--font-text);
  font-size: var(--tag-pill-font-size);
  font-weight: var(--tag-pill-font-weight);
  line-height: 1;
  letter-spacing: 0;
  /* Names render exactly as typed and are never forced to upper case. */
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  max-width: 100%;
}

/* The leading glyph's box is fixed so every pill is the same height whichever glyph it carries. */
.k-tag-pill__glyph {
  flex: 0 0 var(--tag-pill-glyph);
  width: var(--tag-pill-glyph);
  height: var(--tag-pill-glyph);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The label itself: it, not the pill, is what may be truncated. */
.k-tag-pill__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A development, alpha or beta build keeps production's top bar and adds a line of its colour along the bar's bottom edge; the colours are in docs/architecture/build-flavours.md, "One colour language, two surfaces". AppShell stamps `data-build-flavour` on its root for those builds only, and BuildFlavourBadge takes the badge tone of the same hue. */
[data-build-flavour="development"] .top-bar {
  --flavour-line: var(--ink-500);
}

[data-build-flavour="alpha"] .top-bar {
  --flavour-line: var(--meadow-400);
}

[data-build-flavour="beta"] .top-bar {
  --flavour-line: var(--sun-400);
}

[data-build-flavour] .top-bar {
  box-shadow: inset 0 -3px 0 var(--flavour-line);
}

/* The layout of the Welcome journey (StartupJourney): one centred panel with a heading, a line of text, an error line and footer links. */
.startup {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem;
}

.startup__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  max-width: 28rem;
  width: 100%;
}

/* An opened published document's tables need more room than the other startup screens' single column (TermsAndConditionsAcceptanceForm). */
.startup__panel:has(.terms-acceptance__document-body) {
  max-width: 44rem;
}

.startup__heading {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
}

.startup__message {
  margin: 0;
  color: var(--fg-muted);
  line-height: 1.4;
}

.startup__enter-error {
  margin: 0.1rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--terracotta-600);
  text-align: center;
}

.startup__footer-link {
  padding: 0.35rem 0.5rem;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  color: var(--fg-muted);
  text-decoration: underline;
  cursor: pointer;
}

.startup__footer-link:hover:not(:disabled) {
  color: var(--fg);
}

.startup__footer-link:disabled {
  opacity: 0.55;
  cursor: default;
}

#blazor-error-ui {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  background: var(--scrim);
}

.unhandled-error__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: min(24rem, calc(100% - 2rem));
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  color: var(--fg);
  box-shadow: var(--shadow-3);
  border-top: 4px solid var(--colour-danger);
}

.unhandled-error__title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  color: var(--colour-danger-strong);
}

.unhandled-error__panel p {
  margin: 0 0 1.25rem;
}

#blazor-error-ui .reload {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--colour-danger-strong);
  border-radius: var(--radius-md);
  color: var(--colour-danger-strong);
  font-weight: 600;
  text-decoration: none;
}