/* Tre scenarier (#/scenarier). Screen layout plus an A4 landscape print layout:
   one section a page (front, what has happened, the result, the banks and the
   debt, the lines, new customers and reservations). The shell is hidden in
   print by feat-report.css.
   The three scenario colours carry identity on this page only; validated as a
   categorical set on both surfaces (all pairs, protan/deutan/tritan), and the
   first one is drawn dashed as well. */
:root{ --st-a:#b5651d; --st-b:#1f6fd0; --st-c:#0e8f6e }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --st-a:#c27a30; --st-b:#4189e6; --st-c:#14a27c }
}
:root[data-theme="dark"]{ --st-a:#c27a30; --st-b:#4189e6; --st-c:#14a27c }

.st{ display:flex; flex-direction:column; gap:16px }
.st-toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.st-toolbar .btn.primary{ display:inline-flex; gap:7px; align-items:center }
.st-toolbar .spacer{ flex:1 }
.st-saved{ font-size:12.5px }
.st-s{ display:flex; flex-direction:column; gap:14px; min-width:0 }
.st-h{ font-size:17px; letter-spacing:-.01em; margin:10px 2px 0 }
.st-head{ padding:2px 2px 0 }
.st-kicker{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3) }
.st-head h2{ font-size:26px; letter-spacing:-.02em; margin:4px 0 6px }
.st-head p{ margin:0; color:var(--ink-2); font-size:13px; max-width:960px; line-height:1.5 }

/* one card a scenario: its colour as a rule on top, never as text colour */
.st-card{ display:flex; flex-direction:column; gap:10px; border-top:3px solid var(--st-col); min-width:0 }
.st-card-top{ display:flex; gap:8px; align-items:baseline; font-size:15px; letter-spacing:-.01em }
/* a scenario's name is the administrator's: a long one wraps, it never widens the page */
.st-card-top b, .st-table td:first-child, .st .legend span{ overflow-wrap:anywhere; min-width:0 }
.st-mark{ display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--st-col); flex:none; margin-right:7px; vertical-align:baseline }
.st-card-top .st-mark{ margin-right:0 }
.st-desc{ margin:0; color:var(--ink-2); font-size:12.5px; line-height:1.5 }
.st-fig{ display:flex; flex-direction:column; gap:2px; margin-top:auto; padding-top:4px }
.st-big{ font-size:28px; font-weight:700; letter-spacing:-.025em; line-height:1.1; font-variant-numeric:tabular-nums; white-space:nowrap }
.st-big-l{ font-size:12px; color:var(--ink-2) }
.st-dl{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 14px; margin:0; font-size:13px;
  border-top:1px solid var(--hair); padding-top:10px }
.st-dl dt{ color:var(--ink-2) }
.st-dl dd{ margin:0; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap }

.st-list{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:7px; line-height:1.5; font-size:13.5px; max-width:1000px }
.st-list.st-small{ font-size:12.5px; gap:5px }
.st-comment{ margin:0; white-space:pre-wrap; line-height:1.55; font-size:14px }
.st-note{ margin:0; padding:8px 0 0; color:var(--ink-3); font-size:12px; line-height:1.45 }
.card.flush .st-note{ padding:8px 20px 12px }
.st-two{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start }
.st-col{ display:flex; flex-direction:column; gap:14px; min-width:0 }
.st-foot{ margin:0; color:var(--ink-3); font-size:12px }

.st-table td b{ font-weight:650 }
.st-table td.num, .st-table th.num{ white-space:nowrap }
.st-table th .st-mark{ margin-right:5px }
/* a table in half a page's width: the first column gives way, so the figures stay inside the card */
.st-fit th:first-child, .st-fit td:first-child{ white-space:normal; min-width:110px; line-height:1.35 }
.st-table tr.st-group td{ font-weight:650; color:var(--ink-2); background:var(--sunk); font-size:12px; text-align:left }
.st-table tr.st-group td:first-child{ background:var(--sunk) }
/* the lines: the first column carries the words and wraps */
.st-lines th:first-child, .st-lines td:first-child{ white-space:normal; min-width:260px; max-width:520px; line-height:1.35 }
.st-lines td:nth-child(2), .st-lines td:nth-child(3), .st-lines th:nth-child(2), .st-lines th:nth-child(3){ text-align:left; color:var(--ink-2) }
.st-why{ color:var(--ink-3); font-size:11.5px; line-height:1.4; margin-top:2px; font-weight:400 }

.st-edit{ display:flex; flex-direction:column; gap:12px; max-width:960px }
.st-picks{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.st-picks select{ width:100% }
.st-text{ width:100%; resize:vertical; line-height:1.5; font-size:13.5px; padding:10px 12px }

@media (max-width: 900px){
  .st-cards{ grid-template-columns:minmax(0,1fr) }
  .st-two{ grid-template-columns:minmax(0,1fr) }
  .st-picks{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width: 560px){
  .st-head h2{ font-size:21px }
  .st-big{ font-size:24px }
  .st-toolbar .spacer{ display:none }
  .st-table th:first-child, .st-table td:first-child{ white-space:normal; min-width:130px; max-width:190px; line-height:1.35 }
  .st-lines th:first-child, .st-lines td:first-child{ min-width:200px }
}

@media print{
  /* landscape for this page only: a named page */
  @page st-land{ size:A4 landscape; margin:10mm 11mm 10mm }
  .st{ page:st-land; gap:8px; font-size:11px }
  /* always the light steps on paper, whatever the screen theme */
  html:root, html:root[data-theme]{ --st-a:#b5651d; --st-b:#1f6fd0; --st-c:#0e8f6e }
  .st-noprint{ display:none !important }
  .st-s{ gap:9px }
  .st-s2, .st-s3, .st-s4, .st-s5, .st-s6{ break-before:page }
  .st-h{ font-size:16px; margin:0 0 2px; break-after:avoid }
  .st-head h2{ font-size:24px; margin:2px 0 4px }
  .st-head p{ font-size:11px; max-width:none }
  .st .card > header h2{ font-size:13.5px }
  .st .card > header p{ font-size:10.5px }
  .st-cards{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px }
  .st-card{ gap:8px; border-top:3px solid var(--st-col) !important }
  .st-card-top{ font-size:13.5px }
  .st-desc{ font-size:10.5px; line-height:1.45 }
  .st-big{ font-size:24px }
  .st-big-l{ font-size:10.5px }
  .st-dl{ font-size:11px; gap:4px 10px; padding-top:7px }
  .st-list{ font-size:11.5px; gap:5px; max-width:none }
  .st-list.st-small{ font-size:10.5px; gap:4px }
  .st-comment{ font-size:11.5px }
  .st-note{ font-size:9.5px; padding:5px 0 0 }
  .card.flush .st-note{ padding:5px 12px 7px }
  .st-two{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px }
  .st-col{ gap:9px }
  .st .legend{ font-size:10.5px }
  /* a sticky heading row is put at the wrong place on a named page: let it stand where it is */
  .st table.t thead th{ position:static; font-size:10px }
  .st table.t{ font-size:10.5px }
  .st table.t th, .st table.t td{ padding:4px 8px }
  .st table.t tr{ break-inside:avoid }
  /* the lines on one page: the reason runs on after the line's name */
  .st table.t.st-lines{ font-size:9.5px }
  .st table.t.st-lines th, .st table.t.st-lines td{ padding:3px 7px }
  .st-lines .st-why{ display:inline; font-size:8.5px; line-height:1.3; margin:0 0 0 5px }
  .st-lines th:first-child, .st-lines td:first-child{ max-width:none; line-height:1.3 }
  .st-s4 table.t th, .st-s4 table.t td{ padding:2.5px 8px }
  .st-foot{ font-size:9px }
  .st .card{ break-inside:avoid }
  /* a card that can grow with what the administrator writes or chooses (the lines, the lists) may run on to the
     next page rather than leave its heading alone; a row, a point and the three sums at the foot stay whole */
  .st .card.st-long{ break-inside:auto }
  .st-list li{ break-inside:avoid }
  .st-table tr.st-keep, .st-note{ break-before:avoid }
  .st .legend span{ white-space:normal }
  .st-table tr.st-group td{ background:#F1F0EC !important; font-size:10px }
}