/* ==========================================================================
   ŽOGU FABRIKA — komponentu slānis
   ==========================================================================

   Why this file exists, and why it is separate from zf-tokens.css.

   The section chats wrote their templates against class names that were
   described but never implemented — `.zf-split`, `.zf-form-grid`,
   `.zf-picker`, `.zf-textarea` and fifteen others. A missing CSS class fails
   silently: the markup is correct, the browser ignores it, and the page
   renders as one unstyled column. That is what "the design is crowded" turned
   out to be.

   Everything here is ADDITIVE. No selector in zf-tokens.css or shell.css is
   changed or overridden, so the five sections already in production render
   exactly as they did. New class names only.

   Raw colours are forbidden here as everywhere else: every value is a token.
   A section that needs something not in this file asks for it rather than
   inventing a colour in a template.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. PAGE LAYOUT — the two-column form
   -------------------------------------------------------------------------- */

/* Work on the left, summary and the irreversible button on the right. The
   side column is sticky: the total a person is about to commit to should not
   be something they have to scroll back for. */
.zf-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--zf-space-5);
  align-items: start;
}
.zf-split__main { min-width: 0; }
.zf-split__side { position: sticky; top: calc(var(--zf-topbar-h) + var(--zf-space-5)); }

/* Below this the sidebar has already collapsed to a top strip; a 320px rail
   beside a narrow main column helps nobody. */
@media (max-width: 1100px) {
  .zf-split { grid-template-columns: minmax(0, 1fr); }
  .zf-split__side { position: static; }
}


/* --------------------------------------------------------------------------
   2. FORMS
   -------------------------------------------------------------------------- */

/* Auto-fitting field grid. Fields find their own number of columns rather
   than being assigned one, so the same markup works in a card, in a fold and
   in the narrow rail. */
.zf-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--zf-space-4);
}
.zf-form-grid > .zf-field { margin-bottom: 0; }
.zf-field--wide { grid-column: 1 / -1; }

.zf-textarea {
  width: 100%;
  background: var(--zf-bg-inset);
  color: var(--zf-text-primary);
  border: 1px solid var(--zf-border-default);
  border-radius: var(--zf-radius-md);
  padding: var(--zf-space-2) var(--zf-space-3);
  font: var(--zf-fw-regular) var(--zf-fs-14)/var(--zf-lh-14) var(--zf-font-sans);
  resize: vertical;
  min-height: 64px;
}
.zf-textarea::placeholder { color: var(--zf-text-muted); }
.zf-textarea:hover { border-color: var(--zf-border-strong); }
.zf-textarea:focus {
  outline: var(--zf-focus-ring-width) solid var(--zf-focus-ring);
  outline-offset: var(--zf-focus-ring-offset);
  border-color: var(--zf-border-accent);
}

/* The explanatory line under a field. Muted, but never below AA — a hint that
   cannot be read is decoration. */
.zf-hint {
  font-size: var(--zf-fs-12);
  line-height: var(--zf-lh-12);
  color: var(--zf-text-muted);
}
/* For a hint that carries a warning or a consequence rather than a tip. */
.zf-hint--rule {
  color: var(--zf-text-secondary);
  border-left: 2px solid var(--zf-border-strong);
  padding-left: var(--zf-space-3);
}

/* A field the browser-side helper could not make sense of. Never used to
   block a save — the server decides — only to show the person where to look. */
.zf-input[aria-invalid="true"],
.zf-textarea[aria-invalid="true"] { border-color: var(--zf-status-warning-text); }
.zf-date__echo:empty { display: none; }

.zf-input--sm, .zf-select--sm {
  height: 28px;
  padding: 0 var(--zf-space-2);
  font-size: var(--zf-fs-12);
}

/* An input that lives inside a table cell: no border of its own until it is
   touched, so a table of twenty rows does not read as a wall of boxes. */
.zf-input--cell {
  background: transparent;
  border-color: transparent;
  border-radius: var(--zf-radius-sm);
  padding: var(--zf-space-1) var(--zf-space-2);
  height: 28px;
}
.zf-input--cell:hover  { background: var(--zf-bg-inset); border-color: var(--zf-border-subtle); }
.zf-input--cell:focus  { background: var(--zf-bg-inset); border-color: var(--zf-border-accent); }

/* The row of buttons that ends a form. */
.zf-actions {
  display: flex;
  align-items: center;
  gap: var(--zf-space-3);
  flex-wrap: wrap;
  margin-top: var(--zf-space-5);
}
.zf-actions--stack { flex-direction: column; align-items: stretch; gap: var(--zf-space-2); }


/* --------------------------------------------------------------------------
   3. THE PARTY PICKER
   -------------------------------------------------------------------------- */

/* Positioning context for the results panel. */
.zf-picker { position: relative; }

.zf-picker__results {
  position: absolute;
  z-index: 30;
  left: 0; right: 0;
  margin-top: var(--zf-space-1);
  max-height: 18em;
  overflow-y: auto;
  background: var(--zf-bg-surface-raised);
  border: 1px solid var(--zf-border-strong);
  border-radius: var(--zf-radius-md);
  box-shadow: var(--zf-elev-2);
  padding: var(--zf-space-1);
}
.zf-picker__results[hidden] { display: none; }

.zf-picker__result {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--zf-radius-sm);
  padding: var(--zf-space-2) var(--zf-space-3);
  cursor: pointer;
  color: var(--zf-text-primary);
  font: var(--zf-fw-regular) var(--zf-fs-13)/var(--zf-lh-13) var(--zf-font-sans);
}
.zf-picker__result:hover,
.zf-picker__result[aria-selected="true"] { background: var(--zf-accent-wash); }
.zf-picker__result-name { font-weight: var(--zf-fw-semibold); display: block; }
.zf-picker__result-meta { font-size: var(--zf-fs-12); color: var(--zf-text-muted); display: block; }

.zf-picker__chosen { margin-top: var(--zf-space-1); font-size: var(--zf-fs-12); color: var(--zf-text-muted); }
.zf-picker__raw    { margin-top: var(--zf-space-1); }

/* The empty state matters as much as the results. "Not found" and "Kontakti
   unreachable" must never look alike — that is how a duplicate customer gets
   created. */
.zf-picker__empty  { padding: var(--zf-space-3); font-size: var(--zf-fs-12); color: var(--zf-text-muted); }
.zf-picker__error  { padding: var(--zf-space-3); font-size: var(--zf-fs-12); color: var(--zf-status-warning-text); }

/* A party once chosen: a name and an address, never an id. The manager's
   check that he picked the right customer is reading the address. */
.zf-party {
  display: flex;
  align-items: flex-start;
  gap: var(--zf-space-3);
  background: var(--zf-bg-inset);
  border: 1px solid var(--zf-border-default);
  border-radius: var(--zf-radius-md);
  padding: var(--zf-space-3);
}
.zf-party__mark {
  flex: none;
  width: 28px; height: 28px;
  border-radius: var(--zf-radius-sm);
  background: var(--zf-accent-wash-hi);
  color: var(--zf-accent);
  display: grid; place-items: center;
  font-size: var(--zf-fs-12); font-weight: var(--zf-fw-semibold);
}
.zf-party__body { min-width: 0; }
.zf-party__name { font-size: var(--zf-fs-14); font-weight: var(--zf-fw-semibold); color: var(--zf-text-primary); }
.zf-party__meta { font-size: var(--zf-fs-12); color: var(--zf-text-muted); margin-top: 2px; }
.zf-party__action { margin-left: auto; flex: none; }


/* --------------------------------------------------------------------------
   4. FOLDS — progressive disclosure
   -------------------------------------------------------------------------- */

/* Rarely-used fields, folded, with their current state shown on the summary
   row. The state is the point: a person must be able to see whether a fold
   matters without opening it. */
.zf-fold { border-top: 1px solid var(--zf-border-subtle); }
.zf-fold:first-child { border-top: 0; }

.zf-fold > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--zf-space-2);
  padding: var(--zf-space-3) var(--zf-space-4);
  font-size: var(--zf-fs-13);
  color: var(--zf-text-secondary);
}
.zf-fold > summary::-webkit-details-marker { display: none; }
.zf-fold > summary::before {
  content: "";
  width: 0; height: 0; flex: none;
  border-left: 5px solid var(--zf-text-muted);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--zf-dur-fast) var(--zf-ease);
}
.zf-fold[open] > summary::before { transform: rotate(90deg); }
.zf-fold > summary:hover { background: var(--zf-bg-surface-hover); color: var(--zf-text-primary); }
.zf-fold > summary:focus-visible {
  outline: var(--zf-focus-ring-width) solid var(--zf-focus-ring);
  outline-offset: calc(var(--zf-focus-ring-offset) * -1);
}
.zf-fold__state { margin-left: auto; font-size: var(--zf-fs-12); color: var(--zf-text-muted); }
/* When the fold holds something, say so in the accent rather than in muted grey. */
.zf-fold__state--set { color: var(--zf-accent); font-weight: var(--zf-fw-medium); }
.zf-fold__body { padding: 0 var(--zf-space-4) var(--zf-space-4); }


/* --------------------------------------------------------------------------
   5. SEGMENTED CONTROL
   -------------------------------------------------------------------------- */

/* Three or four mutually exclusive options that change the whole page — the
   document kind. A select hides the alternatives; this does not. */
.zf-seg {
  display: inline-flex;
  background: var(--zf-bg-inset);
  border: 1px solid var(--zf-border-default);
  border-radius: var(--zf-radius-md);
  padding: 2px;
  gap: 2px;
}
.zf-seg__opt {
  appearance: none;
  background: none;
  border: 0;
  border-radius: var(--zf-radius-sm);
  color: var(--zf-text-secondary);
  font: var(--zf-fw-medium) var(--zf-fs-13)/var(--zf-lh-13) var(--zf-font-sans);
  padding: var(--zf-space-2) var(--zf-space-4);
  cursor: pointer;
  white-space: nowrap;
}
.zf-seg__opt:hover { color: var(--zf-text-primary); background: var(--zf-bg-surface-hover); }
.zf-seg__opt--on,
.zf-seg__opt[aria-pressed="true"] {
  background: var(--zf-accent);
  color: var(--zf-text-on-accent);
  font-weight: var(--zf-fw-semibold);
}
.zf-seg__opt:focus-visible {
  outline: var(--zf-focus-ring-width) solid var(--zf-focus-ring);
  outline-offset: var(--zf-focus-ring-offset);
}


/* --------------------------------------------------------------------------
   6. TOTALS
   -------------------------------------------------------------------------- */

.zf-sum__row {
  display: flex;
  justify-content: space-between;
  gap: var(--zf-space-4);
  padding: var(--zf-space-2) 0;
  font-size: var(--zf-fs-13);
  color: var(--zf-text-secondary);
}
.zf-sum__row > :last-child {
  font-family: var(--zf-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--zf-text-primary);
}
.zf-sum__row--total {
  border-top: 1px solid var(--zf-border-subtle);
  margin-top: var(--zf-space-2);
  padding-top: var(--zf-space-3);
  font-size: var(--zf-fs-16);
  font-weight: var(--zf-fw-semibold);
  color: var(--zf-text-primary);
}
/* Money already received, shown as a reduction. */
.zf-sum__row--credit > :last-child { color: var(--zf-status-good-text); }
/* What the customer actually has to pay — the one figure on the page that
   should be findable without reading. */
.zf-sum__row--due {
  border-top: 1px solid var(--zf-border-subtle);
  margin-top: var(--zf-space-2);
  padding-top: var(--zf-space-3);
  font-size: var(--zf-fs-20);
  font-weight: var(--zf-fw-semibold);
  color: var(--zf-text-primary);
}
.zf-sum__row--due > :last-child { color: var(--zf-accent); }


/* --------------------------------------------------------------------------
   7. EDITABLE LINE TABLE
   -------------------------------------------------------------------------- */

/* The invoice lines. This is where the time goes, so it gets the width and
   the alignment: figures right, tabular, and no box around every cell. */
.zf-lines { width: 100%; border-collapse: collapse; font-size: var(--zf-fs-13); }
.zf-lines thead th {
  font-size: var(--zf-fs-11);
  line-height: var(--zf-lh-11);
  font-weight: var(--zf-fw-semibold);
  letter-spacing: var(--zf-ls-wide);
  text-transform: uppercase;
  color: var(--zf-text-muted);
  text-align: left;
  padding: var(--zf-space-2) var(--zf-space-3);
  background: var(--zf-bg-inset);
  border-bottom: 1px solid var(--zf-border-subtle);
  white-space: nowrap;
}
.zf-lines tbody td {
  padding: var(--zf-space-1) var(--zf-space-2);
  border-bottom: 1px solid var(--zf-border-subtle);
  vertical-align: middle;
}
.zf-lines tbody tr:last-child td { border-bottom: 0; }
.zf-lines th.zf-num, .zf-lines td.zf-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.zf-lines td.zf-num { font-family: var(--zf-font-mono); color: var(--zf-text-primary); }
.zf-lines .zf-input--cell.zf-num { text-align: right; font-family: var(--zf-font-mono); }
.zf-lines__no { color: var(--zf-text-disabled); font-family: var(--zf-font-mono); font-size: var(--zf-fs-12); width: 28px; }

.zf-addrow {
  display: flex; align-items: center; gap: var(--zf-space-2);
  width: 100%;
  background: none; border: 0;
  padding: var(--zf-space-3) var(--zf-space-4);
  color: var(--zf-accent);
  font: var(--zf-fw-medium) var(--zf-fs-13)/var(--zf-lh-13) var(--zf-font-sans);
  cursor: pointer;
  border-radius: 0 0 var(--zf-radius-lg) var(--zf-radius-lg);
}
.zf-addrow:hover { background: var(--zf-accent-wash); }


/* --------------------------------------------------------------------------
   8. ODDS AND ENDS THE SECTIONS ALREADY REFERENCE
   -------------------------------------------------------------------------- */

.zf-alert--warning {
  color: var(--zf-status-warning-text);
  border-color: rgba(250, 178, 25, .35);
  background: rgba(250, 178, 25, .10);
}
.zf-badge--info { color: var(--zf-accent); }
.zf-badge--info::before { background: var(--zf-accent); }

/* A secondary line under a table row — a comment on an invoice line, a
   contact under a party. */
.zf-row-sub { font-size: var(--zf-fs-12); color: var(--zf-text-muted); }

/* A card with no padding, for one that is entirely a table or entirely folds.
   Saves every section inventing `style="padding:0"`.

   `.zf-card__header` carries no padding of its own — it sits inside the card's
   padding. Remove that and the title goes flush against the border, which is
   what the first render of this file did. So a flush card gives the header its
   own inset and a rule to separate it from the table below. */
.zf-card--flush { padding: 0; }
.zf-card--flush > .zf-card__header {
  padding: var(--zf-space-4) var(--zf-space-4) var(--zf-space-3);
  margin-bottom: 0;
  border-bottom: 1px solid var(--zf-border-subtle);
}
/* A padded region inside an otherwise flush card. */
.zf-card__body { padding: var(--zf-space-4); }


/* --------------------------------------------------------------------------
   9. CONVERSATION THREAD AND ATTACHMENTS
   -------------------------------------------------------------------------- */

/* `.zf-thread` and `.zf-comment` were referenced by the drawings section from
   the day it was written and defined nowhere — the same silent failure as the
   nineteen classes above. */
.zf-thread { display: flex; flex-direction: column; gap: var(--zf-space-3); }

.zf-comment {
  background: var(--zf-bg-inset);
  border: 1px solid var(--zf-border-subtle);
  border-radius: var(--zf-radius-md);
  padding: var(--zf-space-3);
}
.zf-comment__meta {
  font-size: var(--zf-fs-12);
  color: var(--zf-text-muted);
  margin-bottom: var(--zf-space-1);
}
/* Whitespace is preserved: people paste measurements and short lists into
   these, and reflowing them loses the meaning. */
.zf-comment__body {
  font-size: var(--zf-fs-14);
  line-height: var(--zf-lh-14);
  color: var(--zf-text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.zf-attach {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zf-space-2);
  margin-top: var(--zf-space-3);
}

/* A photo. Fixed height, natural width, so a row of portrait and landscape
   shots from a phone lines up instead of stair-stepping. */
.zf-attach__thumb {
  display: block;
  border: 1px solid var(--zf-border-default);
  border-radius: var(--zf-radius-md);
  overflow: hidden;
  background: var(--zf-bg-sunken);
  line-height: 0;
}
.zf-attach__thumb img { height: 128px; width: auto; max-width: 260px; object-fit: cover; }
.zf-attach__thumb:hover { border-color: var(--zf-border-accent); }
.zf-attach__thumb:focus-visible {
  outline: var(--zf-focus-ring-width) solid var(--zf-focus-ring);
  outline-offset: var(--zf-focus-ring-offset);
}

/* Anything without a preview — a PDF, or a photo the converter could not
   read. A line you click, with its size, because the size is what tells you
   whether it is the scan or the thumbnail somebody meant to send. */
.zf-attach__file {
  display: inline-flex;
  align-items: baseline;
  gap: var(--zf-space-2);
  max-width: 100%;
  background: var(--zf-bg-surface);
  border: 1px solid var(--zf-border-default);
  border-radius: var(--zf-radius-md);
  padding: var(--zf-space-2) var(--zf-space-3);
  color: var(--zf-text-primary);
  text-decoration: none;
  font-size: var(--zf-fs-13);
}
.zf-attach__file:hover { border-color: var(--zf-border-accent); color: var(--zf-accent); }
.zf-attach__name { overflow-wrap: anywhere; }
.zf-attach__size { font-size: var(--zf-fs-12); color: var(--zf-text-muted); flex: none; }


/* --------------------------------------------------------------------------
   10. PRINT
   -------------------------------------------------------------------------- */

@media print {
  .zf-split { display: block; }
  .zf-split__side { position: static; }
  .zf-fold { border-top: 0; }
  .zf-fold > summary { display: none; }
  .zf-fold__body { padding: 0; }
  .zf-addrow, .zf-actions { display: none; }
}

/* ---------------------------------------------------------------------- */
/* DC20 journal components — 25.08.2026.                                   */
/* Fifteen of the sixteen zf- classes used by sections/razosana templates  */
/* had no definition anywhere, so those pages rendered as unstyled text.   */
/* Same silent failure as --zf-chart-1..4, fifteen more times.             */

/* The system already ships a categorical scale.  Point the chart slots at */
/* it rather than at ramp steps picked by hand. */
:root{
  --zf-chart-1: var(--zf-series-1);
  --zf-chart-2: var(--zf-series-2);
  --zf-chart-3: var(--zf-series-3);
  --zf-chart-4: var(--zf-series-4);
}

.zf-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
           gap:var(--zf-space-3); margin:var(--zf-space-4) 0; }
.zf-tile{ background:var(--zf-bg-surface); border:1px solid var(--zf-border-subtle);
          border-radius:var(--zf-radius-md); padding:var(--zf-space-3) var(--zf-space-4);
          display:flex; flex-direction:column; gap:var(--zf-space-1); }
.zf-tile-label{ font-size:var(--zf-fs-11); letter-spacing:var(--zf-ls-wide);
                text-transform:uppercase; color:var(--zf-text-muted); }
.zf-tile-value{ font-size:var(--zf-fs-24); font-weight:var(--zf-fw-semibold);
                color:var(--zf-text-primary); font-variant-numeric:tabular-nums;
                line-height:1.1; }

.zf-filters{ display:flex; flex-wrap:wrap; align-items:end; gap:var(--zf-space-3);
             padding:var(--zf-space-3) 0; margin-bottom:var(--zf-space-4);
             border-top:1px solid var(--zf-border-subtle);
             border-bottom:1px solid var(--zf-border-subtle); }
.zf-date{ font-family:var(--zf-font-mono); font-size:var(--zf-fs-13); }

.zf-freshness{ font-size:var(--zf-fs-13); color:var(--zf-text-secondary);
               margin:var(--zf-space-2) 0 var(--zf-space-4); }
.zf-note{ font-size:var(--zf-fs-13); color:var(--zf-text-muted); }

.zf-list{ list-style:none; padding:0; margin:var(--zf-space-3) 0;
          display:flex; flex-direction:column; gap:var(--zf-space-2); }
.zf-list > li{ padding:var(--zf-space-2) var(--zf-space-3);
               background:var(--zf-bg-surface); border:1px solid var(--zf-border-subtle);
               border-radius:var(--zf-radius-sm); }

.zf-raw{ font-family:var(--zf-font-mono); font-size:var(--zf-fs-12);
         color:var(--zf-text-secondary); background:var(--zf-bg-inset);
         border:1px solid var(--zf-border-subtle); border-radius:var(--zf-radius-sm);
         padding:var(--zf-space-3); overflow-x:auto; white-space:pre; }

/* Package F: the ink and ground were --zf-status-neutral-text on -fill, 1.45:1
   light and 1.68:1 dark. Now the badge's ground and the secondary ink:
   6.3:1 light, 8.7:1 dark (shell/tests/test_stili_f.py computes both). */
.zf-tag{ display:inline-flex; align-items:center; padding:2px var(--zf-space-2);
         border-radius:var(--zf-radius-pill); font-size:var(--zf-fs-11);
         font-weight:var(--zf-fw-medium); background:var(--zf-bg-inset);
         border:1px solid var(--zf-border-subtle);
         color:var(--zf-text-secondary); }

.zf-warning{ display:flex; gap:var(--zf-space-2); padding:var(--zf-space-3);
             margin:var(--zf-space-3) 0; border-radius:var(--zf-radius-md);
             border:1px solid var(--zf-border-default);
             background:var(--zf-status-warning-fill);
             color:var(--zf-status-warning-text); font-size:var(--zf-fs-13); }

.zf-evidence{ display:flex; flex-wrap:wrap; gap:var(--zf-space-3); margin:var(--zf-space-3) 0; }
.zf-evidence img{ max-width:min(100%,320px); height:auto;
                  border:1px solid var(--zf-border-default);
                  border-radius:var(--zf-radius-md); }

/* A flagged row must be findable without relying on colour alone. */
.zf-row-flagged{ background:var(--zf-status-warning-fill); }
.zf-row-flagged > td:first-child{ box-shadow:inset 3px 0 0 var(--zf-status-warning-text); }
.zf-row-superseded{ color:var(--zf-text-disabled); }
.zf-row-superseded td{ text-decoration:line-through; text-decoration-thickness:1px; }

/* Correction, same day: --zf-status-warning-fill is a badge fill and expects
   --zf-status-warning-text on top of it.  Used as a row background it left
   light text on amber.  A tint and a left rule instead — the flag stays
   findable without colour alone, and the row stays readable. */
.zf-row-flagged{ background:var(--zf-accent-2-wash); }
.zf-row-flagged > td:first-child{ box-shadow:inset 3px 0 0 var(--zf-accent-2); }

/* Same correction for the callout.  A status *fill* expects its paired status
   *text* colour, and anything nested inside brings its own — so a wash plus a
   left rule, and children inherit rather than fight it. */
.zf-warning{
  background:var(--zf-accent-2-wash);
  color:var(--zf-text-primary);
  border:1px solid var(--zf-border-default);
  border-left:3px solid var(--zf-accent-2);
}
.zf-warning *{ color:inherit; }

/* Section sub-navigation — names agreed with the DC20 chat, 25.08.2026. */
.zf-subnav{ display:flex; flex-wrap:wrap; gap:var(--zf-space-4);
            padding:var(--zf-space-3) 0; margin-bottom:var(--zf-space-4);
            border-bottom:1px solid var(--zf-border-subtle);
            font-size:var(--zf-fs-14); }
.zf-subnav a{ color:var(--zf-text-secondary); text-decoration:none; }
.zf-subnav a:hover{ color:var(--zf-accent); }
.zf-subnav-current{ color:var(--zf-text-primary); font-weight:var(--zf-fw-semibold);
                    box-shadow:inset 0 -2px 0 var(--zf-accent); padding-bottom:2px; }
.zf-back{ display:inline-block; margin-bottom:var(--zf-space-3);
          font-size:var(--zf-fs-13); color:var(--zf-text-secondary); }
.zf-back:hover{ color:var(--zf-accent); }

/* --- DC20 chart classes, restored 30.08.2026 -------------------------------
   These three lived in zf-tokens.css v1. pkg-tema-1 swapped that file for the
   design system's v2, which kept the DESCENDANT forms (.zf-chart .grid,
   .zf-chart .tick) and dropped the flat aliases — and dc20_charts.py emits
   flat class names. v1's own comment said why both were carried:

     "dc20_charts.py emits flat class names; the rules above expect descendants
      (.zf-chart .grid, .tick). Support both — cheaper than a section redeploy
      to rename classes, and the next section will guess one or the other too."

   That reasoning is unchanged, so the aliases come back rather than the
   section being rewritten. Definitions are v1 verbatim: every value was
   already a token, so there was no raw colour to convert.

   They live here rather than in shell.css because they are components, not
   chrome, and here rather than in zf-tokens.css because that file is the
   design system's and gets replaced wholesale — which is precisely how they
   were lost. zf-components.css loads last, so nothing overrides them.
   -------------------------------------------------------------------------- */
.zf-chart-grid  { stroke: var(--zf-chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.zf-chart-label { fill: var(--zf-chart-label); font-size: var(--zf-fs-12); }
.zf-tukss       { color: var(--zf-text-muted); }


/* --------------------------------------------------------------------------
   status_banner — shell/komponenti.html (BRIEF-ui-uzlabojumi P1.4, 14.09.2026)
   Built on .zf-alert, which already carried --error and --warning. info is
   the accent: there is no info status token, and none was added.
   -------------------------------------------------------------------------- */
.zf-alert--info   { color: var(--zf-accent); border-color: var(--zf-accent);
                    background: var(--zf-accent-wash); }
.zf-banner__body  { flex: 1; min-width: 0; }
.zf-banner__title { font-weight: var(--zf-fw-semibold); margin-bottom: 4px; }
.zf-banner__action{ margin-top: var(--zf-space-2); }


/* --------------------------------------------------------------------------
   Global search — shell/base.html + portal/static/zf-meklet.js
   (BRIEF-ui-uzlabojumi P1.1, 14.09.2026). The result list reuses the picker's
   dropdown (.zf-picker__results / __result); these are only what it lacks.
   -------------------------------------------------------------------------- */
.zf-meklet            { position: relative; flex: 0 1 520px; min-width: 0; }
.zf-meklet__ievade    { width: 100%; }
.zf-meklet__rezultati { max-height: 70vh; overflow-y: auto; }
.zf-meklet a.zf-picker__result { text-decoration: none; color: inherit; }
.zf-meklet__grupa     { padding: var(--zf-space-2) var(--zf-space-3) 2px;
                        font-size: var(--zf-fs-11); color: var(--zf-text-muted);
                        text-transform: uppercase; letter-spacing: var(--zf-ls-wide); }
.zf-meklet__stavoklis { padding: var(--zf-space-3); font-size: var(--zf-fs-13);
                        color: var(--zf-text-secondary); }


/* --------------------------------------------------------------------------
   Journal groups — sections/gates/templates/zurnals.html
   (rasējumu žurnāls pa statusiem, 17.09.2026)

   A <details> per group: the browser owns open and closed, so there is no
   JavaScript here and none is wanted. The marker is the only thing worth
   restyling — a summary with display:flex loses the default triangle, so it
   is drawn back with the same token set as everything else (rule 9: no raw
   colours, ever).
   -------------------------------------------------------------------------- */
.zf-grupa             { margin-bottom: var(--zf-space-4); }
.zf-grupa__galva      { display: flex; align-items: center; gap: var(--zf-space-2);
                        padding: var(--zf-space-2) 0; cursor: pointer;
                        list-style: none; user-select: none; }
.zf-grupa__galva::-webkit-details-marker { display: none; }
.zf-grupa__galva::before { content: "›"; display: inline-block;
                        font-size: var(--zf-fs-16); color: var(--zf-text-muted);
                        transition: transform .12s ease; }
.zf-grupa[open] > .zf-grupa__galva::before { transform: rotate(90deg); }
.zf-grupa__galva:hover .zf-grupa__nosaukums { color: var(--zf-accent); }
.zf-grupa__nosaukums  { margin: 0; font-size: var(--zf-fs-16);
                        font-weight: var(--zf-fw-semibold); color: var(--zf-text-primary); }