/* ============================================================
   Ellm Tree v2 — Bulma 1.0 theme overrides ("Catalog" system)
   Maps the catalog tokens onto Bulma's CSS variable API.
   Loaded ONCE per page, AFTER bulma.min.css, BEFORE any kit.css.

   Mirrors the structure of v1's theme.css. Same role: every
   rule here targets a stock Bulma class. Bespoke widgets
   (.cat-masthead, .cat-plate, .cat-block, etc.) live in kit.css.

   Bulma 1.0 ref: https://bulma.io/documentation/features/css-variables/
   ============================================================ */
   @import url('./colors_and_type.css?v=1777478324674');

:root {
  /* --- Typography ---------------------------------------- */
  /* Bulma's primary = JetBrains Mono (UI face). Prose elements
     (.content, <p>) opt into IBM Plex Sans below. */
  --bulma-family-primary:   var(--font-mono);
  --bulma-family-secondary: var(--font-prose);
  --bulma-family-code:      var(--font-mono);
  --bulma-body-size:        var(--text-base);
  --bulma-body-line-height: var(--leading-normal);
  --bulma-body-font-size:   var(--text-base);

  /* --- Radii: resolutely rectangular --------------------- */
  --bulma-radius-small:   0;
  --bulma-radius:         0;
  --bulma-radius-medium:  0;
  --bulma-radius-large:   0;
  --bulma-radius-rounded: 0;

  /* --- Scheme (light, paper-on-ink) ---------------------- */
  /* v1's scheme was dark-on-green; v2 inverts to ink-on-paper.
     We ride Bulma's "light" lightness ramp and override the
     base surface colors directly. */
  --bulma-scheme-h:  142;                  /* green hue, kept */
  --bulma-scheme-s:  64%;
  --bulma-scheme-main-l:          96%;     /* paper lightness */
  --bulma-scheme-main-bis-l:      94%;
  --bulma-scheme-main-ter-l:      92%;
  --bulma-background-l:           94%;
  --bulma-border-weak-l:          88%;
  --bulma-border-l:               20%;     /* dark, for hairline rules */
  --bulma-text-weak-l:            42%;
  --bulma-text-l:                 14%;
  --bulma-text-strong-l:          10%;
  --bulma-text-title-l:           10%;
  --bulma-link-text-l:            32%;
  --bulma-link-text-weak-l:       42%;
  --bulma-link-text-strong-l:     20%;

  --bulma-scheme-main:           var(--paper);
  --bulma-scheme-main-bis:       var(--paper-2);
  --bulma-scheme-main-ter:       var(--paper-3);
  --bulma-background:            var(--paper-2);
  --bulma-body-background-color: var(--paper);
  --bulma-body-color:            var(--ink);
  --bulma-text:                  var(--ink);
  --bulma-text-weak:             var(--ink-2);
  --bulma-text-strong:           var(--ink);
  --bulma-text-title:            var(--ink);
  --bulma-border-weak:           var(--ink-glass-12);
  --bulma-border:                var(--ink);

  /* --- Primary (brand green) ----------------------------- */
  /* Same hue as v1, but tuned darker — green on paper needs
     more punch than green on dark green. */
  --bulma-primary-h:  142;
  --bulma-primary-s:  72%;
  --bulma-primary-l:  36%;                 /* = #16a34a, the catalog green */
  --bulma-primary-invert-l: 96%;           /* paper text on green CTAs */

  /* --- Info / Warning / Danger / Success ---------------- */
  --bulma-info-h:    199;
  --bulma-info-s:    89%;
  --bulma-info-l:    42%;

  --bulma-success-h: 142;
  --bulma-success-s: 72%;
  --bulma-success-l: 36%;

  --bulma-warning-h: 30;                   /* amber-600 */
  --bulma-warning-s: 88%;
  --bulma-warning-l: 38%;

  --bulma-danger-h:  0;
  --bulma-danger-s:  72%;
  --bulma-danger-l:  42%;

  /* --- Shadows disabled (we use offsets, not blur) ------- */
  --bulma-shadow: none;

  /* --- Focus ring ---------------------------------------- */
  --bulma-focus-h: var(--bulma-primary-h);
  --bulma-focus-s: var(--bulma-primary-s);
  --bulma-focus-l: 36%;
  --bulma-focus-style: solid;
  --bulma-focus-offset: 0;

  /* --- Control sizing — slightly tighter than v1 --------- */
  --bulma-control-border-width: 1.5px;
  --bulma-control-height: 2.5em;
  --bulma-control-padding-vertical:   0.55em;
  --bulma-control-padding-horizontal: 0.95em;
}

/* ============================================================
   Global body — paper + graph-paper grid on every page.
   v1's equivalent rule painted a dark-green dot grid; v2 paints
   faint ink hairlines on cream. Same approach, opposite mood.
   ============================================================ */
html, body {
  background-color: var(--paper) !important;
  background-image:
    linear-gradient(to right,  var(--bg-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bg-grid) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  min-height: 100vh;
  color: var(--ink);
}

/* ============================================================
   Bulma component overrides Bulma doesn't expose as vars.
   Kept here (vs kit.css) because they tune *Bulma components*,
   not bespoke ones.
   ============================================================ */

/* Bulma .title / .subtitle — align with the heading scale defined
   in colors_and_type.css. By default Bulma uses its own font-size
   ramp on .title.is-1…is-6 which would override our heading sizes,
   so we re-state them here, mapping each step to a token + color. */
.title {
  font-family: var(--font-mono);
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  font-weight: var(--fw-black);
}
.title.is-1 {
  font-size: clamp(2.5rem, 6vw, var(--text-5xl));
  letter-spacing: -0.025em;
  color: var(--green-900);
}
.title.is-2 {
  font-size: clamp(1.875rem, 4vw, var(--text-4xl));
  color: var(--green-700);
}
.title.is-3 { font-size: var(--text-3xl); font-weight: var(--fw-bold); }
.title.is-4 { font-size: var(--text-2xl); font-weight: var(--fw-bold); }
.title.is-5 { font-size: var(--text-xl);  font-weight: var(--fw-semibold); }
.title.is-6 {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--meta);
}
.subtitle {
  font-family: var(--font-prose);
  color: var(--ink-2);
  font-weight: var(--fw-regular);
  line-height: var(--leading-relaxed);
}

/* Inputs / selects / textareas — bright field, ink hairline.
   Field color is lifted clearly above paper so inputs visually
   sit ON the page, not blend with it. */
.input, .textarea, .select select {
  background-color: #ffffff !important;
  color:            var(--ink) !important;
  border-color:     var(--ink) !important;
  box-shadow:       inset 0 0 0 1px var(--ink-glass-08), 2px 2px 0 var(--ink) !important;
  font-family:      var(--font-mono);
  height:           2.75em;
  padding:          0.65em 0.95em;
}
/* Textarea overrides single-line height — let it grow with rows */
.textarea {
  height:        auto !important;
  min-height:    6em;
  line-height:   var(--leading-normal);
  resize:        vertical;
}
/* Bulma wraps <select> in a div.select that controls the chevron.
   Make the wrapper full-height + full-width so it lines up with
   .input siblings inside grids and flex rows. */
.select,
.select:not(.is-multiple):not(.is-loading) {
  height: 2.75em;
  width: 100%;
  display: block;
}
.select select {
  height: 2.75em;
  width: 100%;
  padding-right: 2.5em;
}
.select:not(.is-multiple):not(.is-loading)::after {
  border-color: var(--green-700) !important;
  border-width: 0 1.5px 1.5px 0;
  right: 1.1em;
}
.input:focus, .textarea:focus, .select select:focus {
  border-color: var(--green-700) !important;
  box-shadow:   2px 2px 0 var(--green-700) !important;
  background-color: #ffffff !important;
}
.input::placeholder, .textarea::placeholder { color: var(--meta); opacity: 0.85; }

/* Labels — uppercase mono caps, cataloged */
.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--meta);
  font-weight: var(--fw-bold);
}

/* Buttons — substantial, ink-on-paper hairline default. Buttons
   are deliberately tall (3.25em) so they read as architecture,
   not chips. Tags occupy the small-pill role instead. */
.button {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: var(--text-sm);
  border-width: 1.5px;
  background-color: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
  height: auto;
  padding: 1em 1.75em;
  min-height: 3.25em;
  transition: background-color var(--dur-fast),
              border-color    var(--dur-fast),
              color           var(--dur-fast),
              box-shadow      var(--dur-fast),
              transform       var(--dur-fast);
}
.button:hover,
.button.is-hovered {
  background-color: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--green-glass-25);
}
.button.is-primary {
  background-color: var(--green-700);
  color:            var(--paper);
  border-color:     var(--green-700);
}
.button.is-primary:hover,
.button.is-primary.is-hovered {
  background-color: var(--green-600);
  color:            var(--paper);
  border-color:     var(--ink);
  box-shadow:       2px 2px 0 var(--ink);
}
/* Secondary — paper-tinted card, green hairline + green type.
   The "card" cousin to primary: still bordered, still substantial,
   but reversed out so primary stays the lead action. */
.button.is-secondary {
  background-color: var(--paper-2);
  color:            var(--green-700);
  border-color:     var(--green-700);
}
.button.is-secondary:hover,
.button.is-secondary.is-hovered {
  background-color: var(--green-200);
  color:            var(--ink);
  border-color:     var(--ink);
  box-shadow:       2px 2px 0 var(--ink);
}

/* Tertiary (Bulma's is-light slot) — ghost / link-grade.
   No border, no fill — just type that hits an underline on hover.
   Used for low-stakes inline actions next to a primary/secondary. */
.button.is-primary.is-light,
.button.is-tertiary {
  background-color: transparent;
  color:            var(--ink);
  border-color:     transparent;
  padding:          1em 0.5em;
  box-shadow:       none;
}
.button.is-primary.is-light:hover,
.button.is-tertiary:hover,
.button.is-tertiary.is-hovered {
  background-color: transparent;
  color:            var(--green-700);
  border-color:     transparent;
  box-shadow:       inset 0 -2px 0 var(--green-700);
}

/* Notifications — hairline border, paper tint, no blur */
.notification {
  border: 1.5px solid var(--ink);
  background-color: var(--paper-2);
  color: var(--ink);
  padding: 14px 18px;
  font-family: var(--font-prose);
  box-shadow: var(--shadow-paper);
}
.notification.is-warning {
  border-color: var(--amber-600);
  background-color: #fdf3e3;
  color: var(--amber-700);
}
.notification.is-danger {
  border-color: #b91c1c;
  background-color: #fbeaea;
  color: #7f1d1d;
}
.notification.is-success {
  border-color: var(--green-700);
  background-color: var(--green-200);
  color: var(--green-900);
}
.notification.is-info {
  border-color: var(--sky-600);
  background-color: #e0f2fe;
  color: #0c4a6e;
}

/* Tags — small inline label. Tinted background + colored type,
   no border, low height. Designed to look like a CATALOG INDEX
   MARKER, not a button. */
.tag:not(body) {
  border: 0;
  background-color: var(--ink-glass-08);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: 0.6875rem;            /* 11px — deliberately under --text-xs */
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 2px 8px;
  height: 20px;
  line-height: 16px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
}
/* Leading dot for index-marker feel, only on default tag */
.tag:not(body):not(.is-success):not(.is-warning):not(.is-danger):not(.is-info)::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--ink);
  display: inline-block;
}
.tag.is-success {
  background-color: var(--green-200);
  color: var(--green-900);
}
.tag.is-success::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--green-700);
  display: inline-block;
}
.tag.is-warning {
  background-color: #fdf3e3;
  color: var(--amber-700);
}
.tag.is-warning::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--amber-600);
  display: inline-block;
}
.tag.is-danger {
  background-color: #fbeaea;
  color: #7f1d1d;
}
.tag.is-danger::before {
  content: '';
  width: 5px; height: 5px;
  background: #b91c1c;
  display: inline-block;
}
.tag.is-info {
  background-color: #e0f2fe;
  color: #0c4a6e;
}
.tag.is-info::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--sky-600);
  display: inline-block;
}

/* Tables — hairline rules, mono headers in caps, hover paper-tint */
.table {
  background-color: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
}
.table thead th {
  background-color: transparent;
  color: var(--meta);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  padding: 10px 16px;
}
.table tbody td {
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--ink-glass-12);
  padding: 10px 16px;
}
.table.is-hoverable tbody tr:hover {
  background-color: var(--paper-3) !important;
}
.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
  background-color: var(--paper-3);
}

/* Navbar — paper top bar, ink hairline below */
.navbar {
  background-color: var(--paper);
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  min-height: 64px;
  padding: 0 var(--sp-2);
  box-shadow: none;
}
.navbar-item, .navbar-link {
  color: var(--ink) !important;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
}
.navbar-item:hover {
  background-color: transparent !important;
  color: var(--green-700) !important;
}
.navbar-item.is-active {
  background-color: transparent !important;
  color: var(--green-700) !important;
  border-bottom: 2px solid var(--green-600);
}
.navbar-burger { color: var(--ink); }
.navbar-burger span { background-color: var(--ink); }

/* Catalog admin shell is desktop-first. Bulma collapses .navbar to a
   stacked mobile layout below 1024px which we never want. Force the
   desktop layout at all widths so .navbar-brand and .navbar-menu sit
   on a single row, and hide the burger entirely. Pages that don't
   want this can override with .navbar.is-mobile-allowed. */
.navbar:not(.is-mobile-allowed) {
  display: flex;
  align-items: stretch;
  min-height: 3.25rem;
}
.navbar:not(.is-mobile-allowed) .navbar-brand {
  flex-shrink: 0;
  align-items: stretch;
}
.navbar:not(.is-mobile-allowed) .navbar-burger { display: none !important; }
.navbar:not(.is-mobile-allowed) .navbar-menu {
  display: flex !important;
  flex-grow: 1;
  align-items: stretch;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}
.navbar:not(.is-mobile-allowed) .navbar-start,
.navbar:not(.is-mobile-allowed) .navbar-end {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.navbar:not(.is-mobile-allowed) .navbar-end { margin-left: auto; flex-shrink: 0; }
.navbar:not(.is-mobile-allowed) .navbar-item { display: inline-flex; align-items: center; }

/* Breathing room between brand lockup and the first nav item. Bulma
   doesn't add any by default — items butt up against the brand. */
.navbar:not(.is-mobile-allowed) .navbar-start { margin-left: var(--sp-6); }

/* Constrain the navbar to its parent so a long subnav or wide content
   never forces horizontal page scroll. */
.navbar { max-width: 100%; }
html, body { overflow-x: hidden; max-width: 100%; }
.et-app { max-width: 100%; overflow-x: hidden; }

/* Links inside navbars shouldn't carry the body underline */
.navbar a, .navbar a:hover { text-decoration: none; }

/* Bulma-style text-color utilities mapped onto our token palette.
   .has-text-grey already ships with Bulma; we add meta/ink/brand
   so callers don't reach for inline `color:` styles. */
.has-text-meta  { color: var(--meta) !important; }
.has-text-ink   { color: var(--ink) !important; }
.has-text-ink-2 { color: var(--ink-2) !important; }
.has-text-brand { color: var(--green-700) !important; }

/* Box — generic surface, paper-on-paper plate */
.box {
  background-color: var(--paper-2);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow-paper);
  padding: var(--sp-6);
}

/* Cards — same plate treatment as box */
.card {
  background-color: var(--paper-2);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow-paper);
}
.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--ink);
  box-shadow: none;
}
.card-header-title {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* Modal — paper sheet on dim ink backdrop */
.modal-background { background-color: rgba(10, 40, 23, 0.55); backdrop-filter: blur(2px); }
.modal-card {
  border: 1.5px solid var(--ink);
  background-color: var(--paper);
  box-shadow: 6px 6px 0 var(--ink-glass-20);
  max-width: 540px;
  width: 100%;
}
.modal-card-head {
  background-color: var(--paper-2);
  border-bottom: 1.5px solid var(--ink);
  padding: 16px 20px;
  border-radius: 0;
}
.modal-card-title {
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.modal-card-body {
  background-color: var(--paper);
  color: var(--ink);
  padding: 22px;
}
.modal-card-foot {
  background-color: var(--paper-2);
  border-top: 1.5px solid var(--ink);
  padding: 14px 20px;
  justify-content: flex-end;
  gap: 10px;
  border-radius: 0;
}

/* Pagination — hairline mono, ink-on-paper */
.pagination { font-family: var(--font-mono); }
.pagination-previous, .pagination-next, .pagination-link {
  background-color: var(--paper);
  border: 1px solid var(--ink);
  color: var(--ink);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  min-width: 2.25em;
  height: 2.25em;
}
.pagination-previous:hover, .pagination-next:hover, .pagination-link:hover {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.pagination-link.is-current {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.pagination-ellipsis { color: var(--meta); }

/* Dropdown — paper sheet, hairline rule */
.dropdown-menu { padding-top: 4px; }
.dropdown-content {
  background-color: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink-glass-12);
  border-radius: 0;
  padding: 4px 0;
}
.dropdown-item {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 8px 16px;
}
.dropdown-item:hover {
  background-color: var(--paper-3);
  color: var(--green-700);
}
.dropdown-item.is-danger, .dropdown-item.has-text-danger {
  color: #b91c1c !important;
}
.dropdown-item.is-danger:hover, .dropdown-item.has-text-danger:hover {
  background-color: #fbeaea;
  color: #7f1d1d !important;
}
.dropdown-divider {
  background-color: var(--ink-glass-12);
  border: 0;
  height: 1px;
  margin: 4px 0;
}

/* Bulma .help — form helper text reads like a sentence, so prose face */
.help {
  font-family: var(--font-prose);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--meta);
}

/* Checkbox / Radio — refresh ink hairline */
.checkbox input[type="checkbox"],
.radio input[type="radio"] {
  accent-color: var(--green-700);
}

/* ============================================================
   Prose container — Bulma .content uses IBM Plex Sans for
   running text. Headings inside .content stay on JetBrains Mono
   (the brand voice). Code/pre/kbd also stay mono.
   ============================================================ */
.content {
  font-family: var(--font-prose);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--ink);
}
.content p,
.content li,
.content blockquote,
.content dd {
  font-family: var(--font-prose);
  line-height: var(--leading-relaxed);
}
.content h1, .content h2, .content h3,
.content h4, .content h5, .content h6 {
  font-family: var(--font-mono);
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
  text-shadow: none;
}
.content code,
.content pre,
.content kbd,
.content samp {
  font-family: var(--font-mono);
}
.content blockquote {
  border-left: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  padding: 0.5rem 0 0.5rem 1.25rem;
  margin-left: 0;
  font-style: italic;
}