/* zBizReport — Migdalor Ventures' portfolio reporting.
   Matched to migdalor.de: lime, navy, cream, lavender, ice blue.

   THREE RULES this sheet keeps, because the app looked bulky and uneven
   before they existed:

   1. ONLY the five brand colours. No greens, no reds, no greys. Where a
      lighter tone is needed it is one of the brand colours at a fixed
      opacity from the scale below — never a new hue, never an ad-hoc tint.
   2. ONE spacing scale (--s1…--s5) and ONE page gutter. Every card, band
      and row uses them, so edges line up down the whole page.
   3. LIGHT type. DM Sans 300/400/500 only. Nothing heavier than 500, and
      size + letter-spacing carry hierarchy instead of weight.
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&display=swap');

:root {
  /* FOUR brand colours, and nothing else. The ice blue that used to be a
     fifth is gone: it was the "light blue" showing up on every focus ring
     and button hover, and it is not part of the brand. */
  --lime:     #d7e044;
  --navy:     #1c194b;
  --cream:    #eeeeea;
  --lavender: #ccb2d6;

  /* the only permitted softenings — the brand colours at fixed opacities,
     never a new hue */
  --navy-70: rgba(28, 25, 75, 0.70);   /* secondary text */
  --navy-45: rgba(28, 25, 75, 0.45);   /* hints, empty states */
  --navy-12: rgba(28, 25, 75, 0.12);   /* hairlines */
  --lime-18: rgba(215, 224, 68, 0.18); /* a success wash */
  --lime-45: rgba(215, 224, 68, 0.45); /* focus ring */
  --lav-30:  rgba(204, 178, 214, 0.30);/* hover wash */

  /* one spacing scale */
  --s1: 0.35rem;
  --s2: 0.7rem;
  --s3: 1.15rem;
  --s4: 2rem;
  --s5: 3.25rem;

  --gutter: var(--s4);
  --radius: 0.5rem;
  --hair: 1px solid var(--navy-12);

  /* zbase tokens, pointed at the brand */
  --z-primary: #1c194b;
  --z-primary-contrast: #d7e044;
  --z-secondary: #ccb2d6;
  --z-bg: #eeeeea;
  --z-accent: #ccb2d6;

  /* ── the framework's own SEMANTIC colours ────────────────────────────
     zbase ships #52B788 for success and #5CA9FF for info, and uses them
     for every confirmation message, focus ring and hover. That is where
     the stray green and light blue were coming from — not from this
     sheet. Repointing the tokens fixes them everywhere at once, including
     components this app has not styled by hand. */
  --color-success:        var(--lime);
  --color-success-light:  var(--lime-18);
  --color-info:           var(--lavender);
  --color-info-light:     var(--lav-30);
  --color-warning:        var(--lavender);
  --color-warning-light:  var(--lav-30);
  /* an error still has to read as an error, so it takes the darkest brand
     colour rather than a red from outside the palette */
  --color-error:          var(--navy);
  --color-error-light:    var(--navy-12);
  --color-primary:        var(--navy);
  --color-primary-light:  var(--navy-12);
  --color-secondary:      var(--lavender);
  --color-secondary-light:var(--lav-30);
}

* { box-sizing: border-box; }

body {
  background: var(--cream);
  /* the last row of a page used to sit hard against the bottom of the
     window, with the card's own border as the final pixel — it read as
     though the page had been cut off rather than ended */
  padding-bottom: var(--s5);
  color: var(--navy);
  font-family: 'DM Sans', -apple-system, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* ── one shared page rhythm ───────────────────────────────────────────────
   ONE rule decides the left edge of everything: each visible band is inset
   from the window by the gutter, and NO container adds an inset of its own.

   The earlier version put the gutter on containers, which left every element
   that wasn't inside one — section headings, venture cards, report rows —
   sitting hard against the window edge while its neighbours were indented.
   Insetting the bands themselves means a heading lines up with the card
   below it no matter which block it happens to live in. */
.zbizreport-hero { padding-left: var(--gutter); padding-right: var(--gutter); }

.zbizreport-actions,
.zbizreport-nav,
.zbizreport-tiles,
.zbizreport-section-heading,
.zbizreport-completion,
.zbizreport-quarter-note,
.zbizreport-status-banner,
.zbizreport-selected-bar,
.zbizreport-venture-head,
.zbizreport-checklist,
.zbizreport-sc-head,
.zbizreport-sc-row,
.zbizreport-past-head,
.zbizreport-past-row,
.zbizreport-venture-card,
.zbizreport-attention-row,
.zbizreport-doc-row,
.zbizreport-comments,
.zbizreport-wizard-line {
  margin-left: var(--gutter);
  margin-right: var(--gutter);
}

/* containers now only carry vertical rhythm */
.zbizreport-scorecard,
.zbizreport-wizard-progress { padding-left: 0; padding-right: 0; }

/* ── headings everywhere, not just in the hero ────────────────────────────
   The hero rule alone left every heading OUTSIDE it (the sign-in title, for
   one) at the browser's bold default — heavy next to the light hero above
   it. Weight is set once, here, so nothing can drift back to bold. */
h1, h2, h3, h4, .zH1, .zH2, .zH3 {
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 var(--s2);
}
h1, .zH1 { font-size: 1.9rem; line-height: 1.15; }
h2, .zH2 { font-size: 1.3rem; }
h3, .zH3 { font-size: 1.05rem; font-weight: 400; }

/* ── standalone pages (sign in) ───────────────────────────────────────────
   A page that is only a form still needs the page gutter, or it sits a few
   pixels off from the hero band above it — and a login form stretched to
   the full window width reads as a wall, not an invitation.

   The gutter goes on the PAGE block only. Putting it on `form` as well
   indented the fields twice, so the title, the fields and the hero above
   them each sat at a different left edge.

   The real class is `.zDialog-container` — zLogin renders as a dialog, not
   as anything named "login". Measured in the browser rather than guessed:
   `.zLogin` matches nothing, so every rule hung on it did nothing. */
.zDialog-container {
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.zDialog-form { max-width: 26rem; }

/* inside a modal the same markup IS the frame: keep its card, drop the
   page gutter, and let it use the full width of the overlay */
.zModal-overlay .zDialog-container,
.zModal-card .zDialog-container {
  padding: var(--s3) !important;
  background: #fff !important;
}
.zModal-overlay .zDialog-form, .zModal-card .zDialog-form { max-width: none; }

/* ── hero: a quiet lime band, not a shout ─────────────────────────────── */
.zbizreport-hero {
  background: var(--lime);
  padding-top: var(--s4);
  padding-bottom: var(--s4);
  margin-bottom: var(--s5);
}
.zbizreport-hero h1,
.zbizreport-hero .zH1 {
  font-weight: 300;              /* was 900 — the single biggest cause of "bulky" */
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy) !important;
  margin: 0 0 var(--s1);
  text-transform: none;          /* was lowercase, which fought the brand name */
}
.zbizreport-hero .zbizreport-lead {
  color: var(--navy-70);
  font-size: 0.95rem;
  max-width: 46rem;
  margin: 0;
}

/* ── buttons: outline by default, one filled emphasis ─────────────────── */
.zbizreport-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.zBtn {
  font-family: inherit !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  border-radius: var(--radius) !important;   /* was a 999px pill — heavy at this size */
  padding: 0.5rem 0.9rem !important;
  border: 1px solid var(--navy-12) !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0.01em;
}
.zBtn-primary { background: var(--navy) !important; color: var(--lime) !important; border-color: var(--navy) !important; }
.zBtn-primary:hover { background: #262260 !important; }
.zBtn-secondary { background: transparent !important; color: var(--navy) !important; }
.zBtn-secondary:hover { background: var(--lav-30) !important; }

/* ── section headings: a rule and a word, not a filled band ───────────── */
.zbizreport-section-heading {
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-70);
  background: none;                       /* was a solid lavender block */
  border-bottom: 2px solid var(--lavender);
  border-radius: 0;
  /* a whole blank line above, and real air beneath the rule. A section is a
     separate thing from the one before it and has to LOOK separate — this
     gap is what makes a 42-row sheet scannable rather than a wall. */
  padding: 0 0 var(--s3);
  margin-top: 4rem;
  margin-bottom: var(--s4);
}
.zbizreport-scorecard > *:first-child .zbizreport-section-heading { margin-top: 0; }

/* ── the scorecard ────────────────────────────────────────────────────── */
.zbizreport-scorecard { padding-bottom: var(--s5); }

.zbizreport-quarter-note {
  display: inline-block;
  background: none;
  color: var(--navy);
  border: var(--hair);
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--s1) var(--s2);
  margin-bottom: var(--s2);
}
.zbizreport-completion {
  display: block;
  margin-bottom: var(--s3);
  font-size: 0.85rem;
  color: var(--navy-70);
}

/* the "there is no Save button, and that is fine" line. Quiet on purpose:
   it is reassurance, not an instruction, and it sits under the progress
   count where someone looks when wondering where they are. */
.zbizreport-saving-note {
  border-left: 3px solid var(--lavender);
  padding: var(--s1) 0 var(--s1) var(--s2);
  margin-left: var(--gutter);
  margin-right: var(--gutter);
  margin-bottom: var(--s3);
  font-size: 0.85rem;
  color: var(--navy-70);
  max-width: 52rem;
}
.zbizreport-saving-note p { margin: 0; }

/* row + header share one grid, so every column lines up all the way down */
.zbizreport-sc-head,
.zbizreport-sc-row {
  display: grid;
  /* seven tracks: label, four figures, comments, and the Fill in button.
     The button column is `auto` so it takes only what the button needs and
     the figures keep their width. */
  grid-template-columns: minmax(0, 2.4fr) repeat(4, minmax(0, 0.62fr)) minmax(0, 1.4fr) auto;
  gap: var(--s3);
  padding: var(--s3) var(--s3) calc(var(--s3) + 0.15rem);
  align-items: start;
}
/* the header is a single line of small caps and needs less height than a
   row carrying a label plus its definition */
.zbizreport-sc-head { padding: var(--s2) var(--s3); }
.zbizreport-sc-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--navy);
  color: var(--lime);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius);
  margin-bottom: var(--s2);
}
.zbizreport-sc-head > *:not(:first-child):not(:last-child) { text-align: right; }

.zbizreport-sc-row {
  background: #fff;
  border: var(--hair);
  border-radius: var(--radius);
  margin-bottom: var(--s2);
  box-shadow: none;                        /* the shadows made 42 rows feel heavy */
}
/* The per-row Fill in button exists ONLY while the quarter is still a
   Draft. Once it is handed in the rows are locked — for Migdalor too, not
   just for the venture — and `save_scorecard_entry_by_label` refuses the
   write. Showing a button that can only be refused is worse than showing
   none, so the default here is hidden and the DraftMarker turns them on,
   the same way PublishedMarker turns the print button on. Keyed off the
   marker rather than a per-row flag because the lock is a property of the
   whole REPORT, not of any one row. */
.zbizreport-sc-edit { display: none; }
body:has(.zbizreport-is-draft) .zbizreport-sc-edit { display: block; }

.zbizreport-sc-edit .zBtn {
  font-size: 0.75rem !important;
  padding: 0.3rem 0.7rem !important;
  white-space: nowrap;
}
.zbizreport-sc-label { font-weight: 500; }
.zbizreport-sc-note {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--navy-45);
  margin-top: var(--s2);
}
.zbizreport-sc-cell {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 400;
}
.zbizreport-sc-status {
  text-align: right;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--navy-70);
}
.zbizreport-sc-comment { font-size: 0.8rem; color: var(--navy-70); }

/* ── tiles: equal width, equal air, one accent edge ───────────────────── */
.zbizreport-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.zbizreport-tile {
  background: #fff;
  border: var(--hair);
  border-left: 3px solid var(--lavender);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  font-size: 0.85rem;
  font-weight: 500;
}
/* the only two tiles that carry meaning get the two brand accents */
.zbizreport-tile-ontrack { border-left-color: var(--lime); }
.zbizreport-tile-below   { border-left-color: var(--navy); }

/* ── attention list: emphasis by weight and edge, never by red ────────── */
.zbizreport-attention-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 0.6fr) minmax(0, 1.6fr);
  gap: var(--s3);
  align-items: baseline;
  background: #fff;
  border: var(--hair);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s1);
}
.zbizreport-attention-gap {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.zbizreport-attention-numbers { font-size: 0.8rem; color: var(--navy-70); }

/* ── comments ─────────────────────────────────────────────────────────── */
.zbizreport-comments {
  background: #fff;
  border: var(--hair);
  border-radius: var(--radius);
  padding: var(--s3);
  margin-bottom: var(--s3);
}
.zbizreport-comments-text { white-space: pre-wrap; }

/* the evaluation reads as TEXT but behaves as a button — clicking it opens
   the editor. Everything that makes a .zBtn look like a control is stripped
   back out, because a paragraph of prose in a button-shaped box reads as
   chrome rather than as the review itself. Only the hover and the focus
   ring survive, so it is still discoverable and still reachable by
   keyboard. */
.zbizreport-comments-btn {
  display: block !important;
  width: 100%;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-align: left !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.5;
  color: var(--navy) !important;
  white-space: pre-wrap;
  cursor: pointer;
}
.zbizreport-comments-btn:hover {
  background: transparent !important;
  text-decoration: underline;
  text-decoration-color: var(--lavender);
  text-underline-offset: 0.25em;
}

/* ── report status ────────────────────────────────────────────────────── */
.zbizreport-status-banner {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}
.zbizreport-status-pill {
  display: inline-block;
  background: var(--navy);
  color: var(--lime);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--s1) var(--s2);
  border-radius: var(--radius);
}

/* ── portfolio ────────────────────────────────────────────────────────── */
.zbizreport-selected-bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  background: var(--navy);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s3);

  /* STICKY to the foot of the window. Picking a report cannot travel to it
     — a dialog never can — so the second press has to be findable from
     wherever you happen to be in the list. Parked above the rows it went
     off-screen the moment the list was long enough to scroll, and the whole
     interaction read as a dead button. */
  position: sticky;
  bottom: var(--s2);
  z-index: 5;
  box-shadow: 0 6px 20px rgba(28, 25, 75, 0.18);
}
/* the name that used to sit here is gone — the page title carries it now.
   The bar is a numbered path: step 1 opens the company, step 2 opens its
   scorecard, so they sit together at the left rather than being pushed to
   opposite ends by a label that no longer exists. */
.zbizreport-selected-name { color: var(--lime); font-weight: 500; }

.zbizreport-venture-card {
  display: grid;
  /* name · sector · the two years · open. Four columns, not three: the
     years went in as a FOURTH child, and with three tracks defined they
     wrapped the Open button onto a second row on every card. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.4fr) auto;
  gap: var(--s3);
  align-items: center;
  background: #fff;
  border: var(--hair);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s1);
}
/* every card's button the same width, whatever the company is called —
   "Open Musical Beings" and "Open Altneuland Press" are very different
   lengths, and ragged button edges down a list read as sloppy */
.zbizreport-venture-card .zBtn {
  width: 100%;
  min-width: 14rem;
  text-align: center;
}
.zbizreport-venture-card > *:last-child { min-width: 14rem; }

.zbizreport-venture-name { font-weight: 500; }
.zbizreport-venture-sector { color: var(--navy-70); font-size: 0.85rem; }

/* column three stacks the investment stage over the year it went in. It is
   a stack rather than a fifth grid track because five tracks pushed the
   Open button onto a second line at 1280px. */
.zbizreport-venture-stage {
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.zbizreport-venture-years { color: var(--navy-45); font-size: 0.8rem; }

/* The type-specific edit form is its OWN block (it has to be — it is
   shuttled over a type-filtered reel), so it lands as a second flex row
   below the venture panel's buttons with a full --s4 gap above it, reading
   as orphaned rather than as one more button. Pulling it up by the
   difference makes the two rows sit at the normal button gap, so they read
   as a single wrapped group. */
.zbizreport-actions-joined {
  margin-top: calc(var(--s2) - var(--s4));
}

/* the opened venture, as one continuous card: header + checklist */
.zbizreport-venture-head {
  background: var(--navy);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: var(--s3) var(--s3) var(--s2);
  margin-top: var(--s3);
}
.zbizreport-venture-headname {
  display: block;
  color: var(--lime);
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.zbizreport-venture-headmeta {
  display: block;
  color: var(--lavender);
  font-size: 0.85rem;
  margin-top: var(--s1);
}
.zbizreport-checklist {
  background: #fff;
  border: var(--hair);
  border-top: none;
  padding: var(--s2) var(--s3);
  font-size: 0.85rem;
}
.zbizreport-checklist:last-of-type {
  border-radius: 0 0 var(--radius) var(--radius);
  margin-bottom: var(--s4);
}

/* ── tables of reports ────────────────────────────────────────────────── */
.zbizreport-past-head,
.zbizreport-past-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  align-items: center;
}
.zbizreport-past-head {
  background: var(--navy);
  color: var(--lime);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius);
  margin-bottom: var(--s2);
}
.zbizreport-past-row {
  background: #fff;
  border: var(--hair);
  border-radius: var(--radius);
  margin-bottom: var(--s1);
  font-size: 0.88rem;
}
.zbizreport-past-row > *:first-child { font-weight: 500; }

/* ── documents ────────────────────────────────────────────────────────── */
.zbizreport-doc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.5fr);
  gap: var(--s3);
  align-items: baseline;
  background: #fff;
  border: var(--hair);
  border-left: 3px solid var(--lavender);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s1);
}
.zbizreport-doc-kind { font-weight: 500; font-size: 0.85rem; }
/* the filename is a link to the real file — brand navy, not browser blue */
.zbizreport-doc-row a {
  color: var(--navy);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--lavender);
  text-decoration-thickness: 2px;
}
.zbizreport-doc-row a:hover { text-decoration-color: var(--navy); }
.zbizreport-doc-when,
.zbizreport-doc-note { font-size: 0.8rem; color: var(--navy-70); }


/* ── the add-a-venture wizard's running summary ─────────────────────────
   Keyed on a class the .zolo puts there BY HAND, not on `.zText`. A zText
   renders as a bare <p> carrying no class of its own — measured in the
   browser — so every `.zText` selector here matched nothing, which is why
   these lines sat hard against the window edge with no card around them
   while the heading above them was correctly inset. */
.zbizreport-wizard-progress { padding-bottom: var(--s5); }
.zbizreport-wizard-line {
  display: block;
  background: #fff;
  border: var(--hair);
  border-left: 3px solid var(--lavender);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s1);
  font-size: 0.85rem;
  word-break: break-word;
}

/* Once the venture exists the held details are cleared, so the summary
   would show five "not given" lines ABOVE the "created" confirmation —
   reading as if the company had been added with nothing filled in. The
   moment the created block appears, the summary has done its job. */
.zbizreport-wizard-progress:has(.zbizreport-wizard-created) .zbizreport-wizard-line {
  display: none;
}
.zbizreport-wizard-created .zbizreport-checklist {
  border-left: 3px solid var(--lime);
  margin-bottom: var(--s3);
}

/* ── an opened company's quarters, as a row of chips ──────────────────────
   Wraps rather than scrolls: a company with twelve quarters should show all
   twelve, since the whole point is answering "where does this stand" in one
   look. The quarter reads first and the state sits under it, so scanning
   down the column of states is what tells you what needs you. */
.zbizreport-quarter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-left: var(--gutter);
  margin-right: var(--gutter);
  margin-bottom: var(--s5);
}
.zbizreport-quarter-chip {
  background: #fff;
  border: var(--hair);
  border-left: 3px solid var(--lavender);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  min-width: 9rem;
}
.zbizreport-quarter-chip-q {
  font-weight: 500;
  font-size: 0.9rem;
  margin: 0;
}
.zbizreport-quarter-chip-s {
  font-size: 0.8rem;
  color: var(--navy-70);
  margin: 0;
}

/* the SAME chip, as a real button — used where clicking it actually goes
   somewhere (the Scorecard's own past-quarters strip), as opposed to
   Home's identical-looking but purely informational one. Built on top of
   the base .zBtn rules, not replacing them, so it still gets a focus ring
   and the rest of the app's button behaviour for free. */
.zbizreport-quarter-chip-btn {
  background: #fff !important;
  border: var(--hair) !important;
  border-left: 3px solid var(--lavender) !important;
  min-width: 9rem;
  text-align: left !important;
  font-weight: 500 !important;
  color: var(--navy) !important;
  /* deliberately matched to .zbizreport-quarter-chip above, so the
     clickable strip on the Scorecard and the read-only one on Home read as
     the same object. The base .zBtn is smaller than a chip, so both the
     padding and the size have to be restated here to close the gap. */
  padding: var(--s2) var(--s3) !important;
  font-size: 0.9rem !important;
  line-height: 1.35;
}
.zbizreport-quarter-chip-btn:hover {
  background: var(--lav-30) !important;
  border-color: var(--navy-12) !important;
  border-left-color: var(--lavender) !important;
}

/* A read-only field is an EXPLANATION, not a box to type in. The KPI's
   definition rides in the row dialog as a readonly input (the zDialog
   grammar has no plain-text element), so it is stripped of everything that
   invites a cursor. */
.zModal-overlay input[readonly] {
  border: none !important;
  background: transparent !important;
  padding-left: 0 !important;
  color: var(--navy-70) !important;
  cursor: default;
}

/* ── the seam between an opened company and the portfolio below ───────────
   Everything above belongs to the ONE opened company; everything below is
   every company again. A section heading alone didn't say that — it read
   as one more heading in a list of headings. A visible line, with real air
   on both sides, marks it as a genuine break rather than the next section. */
.zbizreport-venture-divider {
  margin: var(--s5) var(--gutter) var(--s4);
  border-top: 2px solid var(--lavender);
}

/* ── "handed in — here is what happens next" ──────────────────────────────
   Submitting locks the whole quarter, and until now the only sign it had
   worked was a small word flipping from DRAFT to SUBMITTED. For a move
   that consequential the page has to say so plainly, and point at the one
   thing that comes next. Lime, because this is a good outcome — the
   quarter is done and on its way — not a warning. */
.zbizreport-nextstep {
  background: var(--lime-18);
  border: 1px solid var(--lime);
  border-radius: var(--radius);
  margin: var(--s3) var(--gutter) var(--s4);
  padding: var(--s3);
}
.zbizreport-nextstep-text {
  margin: 0 0 var(--s3);
  font-size: 0.9rem;
  color: var(--navy);
  max-width: 60rem;
}
/* the action row inside the banner already has the page gutter from the
   shared rhythm rule; inside a padded card that doubles up */
.zbizreport-nextstep .zbizreport-actions {
  margin: 0;
}

/* ── the review queue: what is sitting in Migdalor's court ────────────────
   Lavender, the brand's attention colour — this is "someone is waiting on
   you", not a success (lime) and not a refusal (navy). It renders only
   when something is actually waiting, so it can afford to be loud. */
.zbizreport-awaiting-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) auto;
  gap: var(--s3);
  align-items: center;
  background: var(--lav-30);
  border: 1px solid var(--lavender);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  margin-left: var(--gutter);
  margin-right: var(--gutter);
  margin-bottom: var(--s2);
}
.zbizreport-awaiting-who { font-weight: 500; margin: 0; }
.zbizreport-awaiting-when { font-size: 0.85rem; color: var(--navy-70); margin: 0; }

@media (max-width: 860px) {
  .zbizreport-awaiting-row { grid-template-columns: 1fr; gap: var(--s1); }
}

/* ── which actions a quarter's STATE actually allows ──────────────────────
   Both rules key off the invisible markers (DraftMarker / PublishedMarker)
   the page already renders, so the buttons follow the report's real state
   rather than anyone's memory of it.

   Submit: only on a Draft. On a submitted or published quarter the server
   refuses it anyway, so offering it was a button that could only fail —
   and with nothing open there is nothing to submit either.

   Open a quarter: hidden once the open one is PUBLISHED — but only for a
   VENTURE account. A CFO looking at a finalised report is reading it. For
   Migdalor the same button is ordinary navigation between quarters, and
   hiding it for everyone left no way out of a published one at all. Safe
   for the CFO because "Open my company" now clears the quarter, so a blank
   slate is always one step away. */
.zbizreport-act-submit { display: none; }
body:has(.zbizreport-is-draft) .zbizreport-act-submit { display: inline-block; }
body:has(.zbizreport-is-venture):has(.zbizreport-is-published) .zbizreport-act-openquarter { display: none; }

/* attaching evidence is part of filling the quarter in, so the button is
   there only while it is a Draft — matching the row edits and the server,
   which refuses an attach to a handed-in quarter. */
.zbizreport-act-attachdoc { display: none; }
body:has(.zbizreport-is-draft) .zbizreport-act-attachdoc { display: flex; }

/* three is the limit, so once three are attached the button goes rather
   than staying to be refused. QuarterDocsFullMarker is what says "full" —
   a reel with offset 2 that only returns a row when a third exists, since
   CSS cannot count. */
body:has(.zbizreport-qdocs-full) .zbizreport-act-attachdoc { display: none; }

/* removing is the same permission as attaching: the venture's, while the
   quarter is a draft. Migdalor and the board read this list, never edit it.

   NOTE the selector: `_zClass` on a block whose only child is a zBtn lands
   the class ON the button, not on a wrapper — so this IS the button, and
   `.zbizreport-qdoc-remove button` would match nothing. */
.zbizreport-qdoc-remove { display: none; }
body:has(.zbizreport-is-venture):has(.zbizreport-is-draft) .zbizreport-qdoc-remove { display: block; }

/* the section that asks for them — the last thing before Submit */
.zbizreport-qdocs { margin-top: var(--s5); }
.zbizreport-qdocs-invite {
  margin: 0 var(--gutter) var(--s3);
  padding: var(--s2) 0 var(--s2) var(--s2);
  border-left: 3px solid var(--lavender);
  font-size: 0.88rem;
  color: var(--navy-70);
  max-width: 58rem;
}
.zbizreport-qdocs-invite p { margin: 0; }

/* the row gains a fourth cell for Remove */
.zbizreport-qdocs .zbizreport-doc-row {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr) minmax(0, 1fr) auto;
}

/* ── the archive ──────────────────────────────────────────────────────────
   Deliberately quieter than a venture card: this is a record of what is no
   longer being reported on, not something to work in. Muted ground, no
   white card, so it reads as a footnote to the portfolio above it. */
.zbizreport-archived-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) auto;
  gap: var(--s3);
  align-items: center;
  background: none;
  border: 1px dashed var(--navy-12);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  margin-left: var(--gutter);
  margin-right: var(--gutter);
  margin-bottom: var(--s1);
}
.zbizreport-archived-name { font-weight: 500; color: var(--navy-70); margin: 0; }
.zbizreport-archived-meta { font-size: 0.82rem; color: var(--navy-45); margin: 0; }

@media (max-width: 860px) {
  .zbizreport-archived-row { grid-template-columns: 1fr; gap: var(--s1); }
}

/* ── modals ───────────────────────────────────────────────────────────── */
.zModal-overlay { background: rgba(28, 25, 75, 0.5) !important; }
.zModal-card, .zModal-content {
  border-radius: var(--radius) !important;
  border: var(--hair) !important;
  box-shadow: 0 12px 40px rgba(28, 25, 75, 0.18) !important;
}
.zModal-header, .zModal-title {
  background: var(--navy) !important;
  color: var(--lime) !important;
  font-weight: 400 !important;
  font-size: 1.05rem !important;
  letter-spacing: -0.01em;
}
/* ── form fields ──────────────────────────────────────────────────────────
   The BACKGROUND is the important line here. zbase ships dark inputs; this
   sheet previously restyled their border and type but never their fill, so
   every field showed as a near-black box that belongs to no brand colour.
   White field on cream page, navy text — nothing outside the palette. */
.zForm-label, label {
  display: block;
  font-size: 0.8rem !important;
  color: var(--navy-70) !important;
  font-weight: 400 !important;
  margin-bottom: var(--s1) !important;
  letter-spacing: 0.01em;
}
.zForm-control,
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="date"], input[type="search"],
select, textarea {
  background: #fff !important;
  color: var(--navy) !important;
  border-radius: var(--radius) !important;
  border: var(--hair) !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  padding: var(--s2) !important;
  width: 100%;
}
.zForm-control:focus,
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px var(--lime-45) !important;
}
input::placeholder, textarea::placeholder { color: var(--navy-45) !important; }

/* ── room to breathe between fields, and before the submit ────────────────
   Every field is its own block with the same gap beneath it, and the submit
   sits a full step below the last one — it was landing tight under the
   password box, reading as part of the field rather than as an action. */
.zForm-group, .zForm-field, .zDialog-field, .zForm-row {
  margin-bottom: var(--s3) !important;
}
.zForm-control, input, select, textarea { margin-bottom: var(--s3); }
.zForm-group:last-of-type, .zForm-field:last-of-type { margin-bottom: 0 !important; }

form button[type="submit"],
.zForm-submit, .zDialog-submit, .zBtn-submit {
  margin-top: var(--s3) !important;
}

/* a dialog's body needs the same air as the page does */
.zModal-body, .zDialog-body, .zModal-content > form { padding: var(--s3) !important; }

/* ── narrow windows: stack, don't squeeze ─────────────────────────────── */
@media (max-width: 900px) {
  :root { --gutter: var(--s3); }
  .zbizreport-sc-head, .zbizreport-past-head { display: none; }
  .zbizreport-sc-row,
  .zbizreport-past-row,
  .zbizreport-attention-row,
  .zbizreport-doc-row,
  .zbizreport-venture-card { grid-template-columns: 1fr; gap: var(--s1); }
  .zbizreport-venture-card .zBtn { min-width: 0; }
  .zbizreport-sc-cell, .zbizreport-sc-status, .zbizreport-attention-gap { text-align: left; }
  .zbizreport-hero h1, .zbizreport-hero .zH1 { font-size: 1.75rem; }
}

/* ── print: the actual deliverable ────────────────────────────────────── */
@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .zbizreport-hero { background: none; border-bottom: 2px solid var(--lavender); }
  .zbizreport-sc-row, .zbizreport-past-row, .zbizreport-doc-row,
  .zbizreport-attention-row, .zbizreport-tile {
    border: var(--hair);
    break-inside: avoid;
  }
  .zbizreport-sc-head, .zbizreport-past-head,
  .zbizreport-section-heading, .zbizreport-status-pill {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ── the print button ─────────────────────────────────────────────────────
   Fixed, but the body carries matching bottom padding so it can never sit
   on top of the last row — it used to overlap content at narrow widths. */
/* ── the print button ─────────────────────────────────────────────────────
   NOT fixed any more. Floating, it sat on top of whatever happened to be
   under it — a venture's Open button, a report row — which is worse than
   an extra scroll.

   And it is HIDDEN until the open report is Published: a PDF is the
   deliverable of a finished report, so offering it over a half-filled
   draft invites sending the board something unready. The page renders an
   empty marker when the report is published; this keys off that. */
#zbizreport-print-btn {
  display: none;
  margin: var(--s4) var(--gutter) var(--s5);
  background: var(--navy);
  color: var(--lime);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  font-family: inherit;
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: none;
}
body:has(.zbizreport-is-published) #zbizreport-print-btn { display: inline-block; }
#zbizreport-print-btn:hover { background: #262260; }

/* ── the back/forward nav row ─────────────────────────────────────────────
   Same gutter and gap as the action bar. Without a layout class it sat
   flush against the window edge while every other band was inset — the
   most visible misalignment on the page. Sits tight under the hero, since
   it belongs to it. */
.zbizreport-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  /* the hero already ends with its own padding; pull up only half a step
     so the buttons sit close to their heading without touching it */
  margin-top: calc(var(--s4) * -1);
  margin-bottom: var(--s5);

  /* STICKY, so the way back is reachable from anywhere on the page. The
     scorecard is 42 rows long and the review page longer; a back button
     only at the top means scrolling all the way up to leave, which is what
     made it feel like there was no way back at all. Sticky rather than
     fixed so it still occupies its own space in the flow and nothing has
     to be padded to sit under it. */
  position: sticky;
  top: 0;
  z-index: 20;
  /* it now sits over content as it scrolls, so it needs its own ground */
  background: var(--cream);
  padding-top: var(--s3);
  padding-bottom: var(--s3);
  /* the page gutter is a MARGIN on this element (see the shared rhythm
     block), so a full-width background would stop short of the window
     edges and show a seam. The shadow spreads it back out. */
  box-shadow: 0 0 0 var(--gutter) var(--cream), 0 1px 0 var(--gutter) var(--navy-12);
}

/* ── messages the app says back ───────────────────────────────────────────
   "Welcome back Yael", "Attached to LowSwing Records", a refusal — all of
   these render through zSignal/zAlert/zToast. Left alone they arrive in
   zbase's own green (#52B788), which belongs to no brand.

   Repointing the tokens above fixes the accent, but a message also has to
   be READABLE: lime type on cream is nearly invisible. So the colour goes
   into a wash and a left edge, and the words stay navy. */
.zSignal, .zAlert, .zToast {
  background: #fff;
  border: var(--hair);
  border-left: 3px solid var(--lavender);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  color: var(--navy) !important;
  font-size: 0.9rem;
}
.zSignal-success, .zAlert-success, .zToast-success {
  background: var(--lime-18);
  border-left-color: var(--lime);
  color: var(--navy) !important;
}
.zSignal-error, .zAlert-error, .zToast-error {
  background: #fff;
  border-left-color: var(--navy);
  color: var(--navy) !important;
}
.zSignal-info, .zSignal-warning,
.zAlert-info, .zAlert-warning { border-left-color: var(--lavender); }
.zSignal-close { color: var(--navy); }

/* zbase colours some text by semantic name too */
.zText-success { color: var(--navy) !important; }
.zBadge-success { color: var(--navy) !important; background: var(--lime-18) !important; }

/* ── downloading the finished report ──────────────────────────────────────
   A filled navy button, not a text link: this is the thing most people open
   a published quarter to do, and it should look like the primary action on
   the page rather than a footnote under the rows. */
.zbizreport-download {
  margin: var(--s4) var(--gutter) var(--s2);
}
a.zbizreport-download-link,
.zbizreport-download a {
  display: inline-block;
  background: var(--navy);
  color: var(--lime) !important;
  text-decoration: none;
  padding: var(--s2) var(--s4);
  border-radius: var(--radius);
  font-size: 0.92rem;
}
.zbizreport-download a:hover { background: #2a2668; }