/* ==========================================================================
   Teacher Timetable - design system
   Tailwind (CDN) handles layout utilities; this file owns the visual language:
   tokens, surfaces, the timetable grid and the print sheet.
   ========================================================================== */

:root {
  --paper:      #F7F6F1;
  --paper-2:    #FFFFFF;
  --paper-3:    #EFEEE7;
  --paper-sunk: #E9E8E0;

  --ink:        #0A0A08;
  --ink-2:      #3A3A35;
  --ink-3:      #76766F;
  --ink-4:      #A8A8A0;

  --rule:       #E5E4DD;
  --rule-2:     #CFCEC5;

  --accent:     #E04822;
  --accent-2:   #B83619;
  --accent-ink: #FFFFFF;
  --accent-wash:#FBEAE4;

  --forest:     #0F6B5A;
  --forest-wash:#E3F0EC;

  --shadow-sm:  0 1px 2px rgba(10, 10, 8, .05);
  --shadow-md:  0 2px 10px rgba(10, 10, 8, .07), 0 1px 2px rgba(10, 10, 8, .04);
  --shadow-lg:  0 12px 40px rgba(10, 10, 8, .14), 0 2px 8px rgba(10, 10, 8, .07);

  --radius:     14px;
  --radius-sm:  10px;

  /* Subject tones: wash / edge / ink */
  --tone-1: #E7EEF9; --tone-1-edge: #BBD0EE; --tone-1-ink: #1B4C86;
  --tone-2: #E6F1EC; --tone-2-edge: #B9DBCC; --tone-2-ink: #12604B;
  --tone-3: #FBEAE4; --tone-3-edge: #F0C4B4; --tone-3-ink: #A93A17;
  --tone-4: #F2EAF7; --tone-4-edge: #DCC7E9; --tone-4-ink: #6A3B8C;
  --tone-5: #FAF0DA; --tone-5-edge: #EBD6A6; --tone-5-ink: #85631A;
  --tone-6: #E6F0F2; --tone-6-edge: #B9D6DC; --tone-6-ink: #14606E;
  --tone-7: #F9E9EF; --tone-7-edge: #EDC2D3; --tone-7-ink: #96305A;
  --tone-8: #ECEDE6; --tone-8-edge: #CDCFC2; --tone-8-ink: #4B5240;
}

[data-theme="dark"] {
  --paper:      #101010;
  --paper-2:    #191918;
  --paper-3:    #202020;
  --paper-sunk: #0B0B0A;

  --ink:        #F4F3EE;
  --ink-2:      #D2D1C9;
  --ink-3:      #96958D;
  --ink-4:      #6C6B64;

  --rule:       #2B2B29;
  --rule-2:     #3A3A37;

  --accent:     #FF6A3D;
  --accent-2:   #FF8A63;
  --accent-ink: #180B06;
  --accent-wash:#33170E;

  --forest:     #4FC0A2;
  --forest-wash:#122924;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md:  0 2px 10px rgba(0, 0, 0, .45);
  --shadow-lg:  0 16px 48px rgba(0, 0, 0, .6);

  --tone-1: #14243A; --tone-1-edge: #24405F; --tone-1-ink: #9CC4F2;
  --tone-2: #10281F; --tone-2-edge: #1E4436; --tone-2-ink: #85D6B8;
  --tone-3: #331A11; --tone-3-edge: #55291B; --tone-3-ink: #F2A184;
  --tone-4: #241A31; --tone-4-edge: #3C2C4F; --tone-4-ink: #C7A5E0;
  --tone-5: #2C2413; --tone-5-edge: #4A3D1F; --tone-5-ink: #E0C280;
  --tone-6: #12262A; --tone-6-edge: #1F4149; --tone-6-ink: #8CCBD8;
  --tone-7: #2E1620; --tone-7-edge: #4C2537; --tone-7-ink: #EAA3C0;
  --tone-8: #1E211B; --tone-8-edge: #343830; --tone-8-ink: #B8BDAC;
}

* { -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  transition: background-color .25s ease, color .25s ease;
}

/* Soft washes so the page never reads as flat white */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
  background-image:
    radial-gradient(1100px 520px at 10% -10%, var(--accent-wash), transparent 62%),
    radial-gradient(900px 460px at 100% 0%, var(--forest-wash), transparent 60%);
}

#app { position: relative; z-index: 1; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- Scrollbars ---------- */
.scroll-thin { scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
.scroll-thin::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb {
  background: var(--rule-2);
  border: 2px solid var(--paper);
  border-radius: 99px;
}
.scroll-thin::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- Typography ---------- */
.font-display { font-family: "Bricolage Grotesque", system-ui, sans-serif; }
.font-mono,
.tnum { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.t-ink    { color: var(--ink); }
.t-ink-2  { color: var(--ink-2); }
.t-ink-3  { color: var(--ink-3); }
.t-ink-4  { color: var(--ink-4); }
.t-accent { color: var(--accent); }
.t-forest { color: var(--forest); }

/* ---------- Surfaces ---------- */
.card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.sunk {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.divide-rule > * + * { border-top: 1px solid var(--rule); }

.app-bar {
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--rule);
}

.monogram {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--ink);
  color: var(--paper);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.02em;
  box-shadow: var(--shadow-md);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  height: 36px;
  padding: 0 .8rem;
  border-radius: 999px;
  border: 1px solid var(--rule-2);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s ease, background-color .18s ease, color .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}
.btn:hover { color: var(--ink); border-color: var(--ink-4); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-icon { width: 36px; padding: 0; }

.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.btn-accent:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-ink); }

.btn-ink {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-weight: 600;
}
.btn-ink:hover { color: var(--paper); border-color: var(--ink); opacity: .9; }

.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--paper-3); border-color: var(--rule); }

.btn-danger { color: var(--accent); border-color: var(--rule-2); background: transparent; }
.btn-danger:hover { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }

.btn-sm { height: 30px; font-size: 12px; padding: 0 .6rem; }
.btn-sm.btn-icon { width: 30px; padding: 0; }

.monogram-sm { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; box-shadow: none; }

/* ---------- Teacher / school switcher ---------- */
.school-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  flex: none;
  box-shadow: 0 0 0 2px var(--paper-2);
}

.popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  width: 280px;
  max-height: 60vh;
  overflow-y: auto;
  padding: .35rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 420px) { .popover { width: min(280px, calc(100vw - 2rem)); } }

.pop-group + .pop-group { border-top: 1px solid var(--rule); margin-top: .35rem; padding-top: .35rem; }

.pop-teacher {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .45rem .5rem;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
}
.pop-teacher:hover { background: var(--paper-3); }
.pop-teacher.is-active { background: var(--paper-3); }

.pop-school {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .38rem .5rem .38rem 2.35rem;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}
.pop-school:hover { background: var(--paper-3); color: var(--ink); }
.pop-school.is-active {
  background: var(--accent-wash);
  color: var(--accent-2);
  font-weight: 600;
}

.pop-action {
  display: flex;
  align-items: center;
  gap: .45rem;
  width: 100%;
  margin-top: .35rem;
  padding: .5rem;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--ink-3);
  cursor: pointer;
}
.pop-action:hover { color: var(--ink); }

/* ---------- Segmented control ---------- */
.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 999px;
  background: var(--paper-3);
  border: 1px solid var(--rule);
}
.segmented button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  height: 30px;
  padding: 0 .85rem;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.segmented button:hover { color: var(--ink); }
.segmented button.is-active {
  background: var(--paper-2);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* ---------- Chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .16rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper-3);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}
.chip-accent { background: var(--accent-wash); border-color: transparent; color: var(--accent-2); }
.chip-forest { background: var(--forest-wash); border-color: transparent; color: var(--forest); }
.chip-solid  { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- Day pills ---------- */
.day-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 64px;
  padding: .5rem .35rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink-3);
  cursor: pointer;
  transition: all .18s ease;
}
.day-pill:hover { border-color: var(--ink-4); color: var(--ink); }
.day-pill .d-name { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.day-pill .d-num  { font-family: "Bricolage Grotesque", sans-serif; font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.05; }
.day-pill .d-meta { font-size: 10px; color: var(--ink-4); }
.day-pill.is-selected {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-md);
}
.day-pill.is-selected .d-num  { color: var(--paper); }
.day-pill.is-selected .d-meta { color: var(--ink-4); }
.day-pill.is-today:not(.is-selected) { border-color: var(--accent); }
.day-pill.is-today:not(.is-selected) .d-num { color: var(--accent); }

/* ---------- Timeline (day view) ---------- */
.tl-row { display: grid; grid-template-columns: 68px 1fr; gap: .8rem; }
@media (min-width: 640px) { .tl-row { grid-template-columns: 92px 1fr; gap: 1rem; } }

.tl-time {
  padding-top: .85rem;
  text-align: right;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.tl-time .t-start { display: block; font-size: 13px; font-weight: 500; color: var(--ink); }
.tl-time .t-end   { display: block; font-size: 11px; color: var(--ink-4); margin-top: 1px; }

.tl-rail { position: relative; padding-bottom: .7rem; }
.tl-rail::before {
  content: "";
  position: absolute;
  left: -.5rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}
.tl-row:last-child .tl-rail::before { bottom: auto; height: 1.2rem; }
@media (min-width: 640px) { .tl-rail::before { left: -.62rem; } }

.slot {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: .8rem .9rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--paper-2);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease, opacity .2s ease;
}
.slot:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--rule-2); }
.slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.slot-lesson { border-left: 3px solid var(--tone-edge, var(--rule-2)); }

.slot-free {
  background: transparent;
  border: 1px dashed var(--rule-2);
  box-shadow: none;
}
.slot-free:hover { border-color: var(--accent); background: var(--paper-2); }

.slot-break {
  background: repeating-linear-gradient(-45deg, var(--paper-3) 0 10px, transparent 10px 20px);
  border: 1px solid var(--rule);
  box-shadow: none;
  cursor: default;
}
.slot-break:hover { transform: none; box-shadow: none; border-color: var(--rule); }

.slot-now {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-wash), var(--shadow-md);
}
.slot-past { opacity: .5; }

/* Read-only: no affordances, no pointer */
.slot-static { cursor: default; }
.slot-static:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--rule); }
.slot-free.slot-static { box-shadow: none; }
.slot-free.slot-static:hover { border-color: var(--rule-2); background: transparent; }
.slot-dim  { opacity: .28; filter: saturate(.35); }

.now-dot {
  position: absolute;
  left: -.94rem;
  top: 1.15rem;
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
  animation: pulse 2.4s ease-in-out infinite;
}
@media (min-width: 640px) { .now-dot { left: -1.06rem; } }

@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.35); opacity: .6; }
}

/* Progress bar for the running period */
.progress {
  height: 3px;
  border-radius: 99px;
  background: var(--rule);
  overflow: hidden;
}
.progress > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
  transition: width .9s linear;
}

/* ---------- Now / next hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--paper-2);
  box-shadow: var(--shadow-md);
}
.hero-live::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(520px 220px at 100% 0%, var(--accent-wash), transparent 70%);
}
.hero > * { position: relative; z-index: 1; }

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}

/* ---------- Week grid ---------- */
.wk {
  display: grid;
  min-width: 760px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--rule);
  gap: 1px;
}
.wk-cell { background: var(--paper-2); padding: .45rem; min-height: 78px; }
.wk-head {
  background: var(--paper-3);
  padding: .55rem .6rem;
  position: sticky;
  top: 0;
  z-index: 3;
}
.wk-time {
  background: var(--paper-3);
  padding: .6rem .55rem;
  position: sticky;
  left: 0;
  z-index: 2;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink-3);
}
.wk-corner { position: sticky; left: 0; z-index: 4; }
.wk-col-today { background: var(--accent-wash); }
[data-theme="dark"] .wk-col-today { background: var(--paper-3); }

.wk-break {
  background: repeating-linear-gradient(-45deg, var(--paper-3) 0 9px, var(--paper-2) 9px 18px);
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem;
  min-height: 0;
}

.wk-lesson {
  height: 100%;
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--tone-edge, var(--rule));
  background: var(--tone-bg, var(--paper-3));
  color: var(--tone-ink, var(--ink));
  padding: .45rem .55rem;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .14s ease, box-shadow .18s ease;
}
.wk-lesson:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.wk-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  min-height: 68px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--rule-2);
  color: var(--ink-4);
  font-size: 11px;
  cursor: pointer;
  transition: all .16s ease;
}
.wk-empty:hover { border-color: var(--accent); color: var(--accent); background: var(--paper-3); }
.wk-now { box-shadow: 0 0 0 2px var(--accent); }

.wk-lesson-static { cursor: default; }
.wk-lesson-static:hover { transform: none; box-shadow: none; }

.wk-empty-static { border-style: solid; border-color: var(--rule); cursor: default; }
.wk-empty-static:hover { border-color: var(--rule); color: var(--ink-4); background: transparent; }

/* ---------- Stat tiles ---------- */
.stat {
  padding: .7rem .8rem;
  border-radius: var(--radius-sm);
  background: var(--paper-3);
  border: 1px solid var(--rule);
}
.stat .s-val {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

/* ---------- Forms ---------- */
.field-label {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .32rem;
}
.input, .select, .textarea {
  width: 100%;
  padding: .5rem .65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule-2);
  background: var(--paper-2);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.input-sm { padding: .3rem .45rem; font-size: 12.5px; }

.select {
  appearance: none;
  cursor: pointer;
  padding-right: 1.9rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376766F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .55rem center;
  background-size: 15px;
}
.select.input-sm { padding-right: 1.6rem; background-size: 13px; }

.swatch {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--rule-2);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .16s ease;
}
.swatch:hover { transform: scale(1.08); }
.swatch.is-active { box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 4px var(--ink); }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(10, 10, 8, .45);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 640px) { .modal-backdrop { align-items: center; padding: 1.5rem; } }

.modal {
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 640px) { .modal { border-radius: var(--radius); max-height: 88vh; } }
.modal-wide { max-width: 820px; }

.modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  padding: .9rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.modal-body { padding: 1.1rem; }
.modal-foot {
  position: sticky;
  bottom: 0;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  padding: .8rem 1.1rem;
  display: flex;
  gap: .5rem;
  align-items: center;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 80;
  padding: .6rem 1.05rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
}

/* ---------- Transitions ---------- */
.fade-enter-active, .fade-leave-active { transition: opacity .18s ease; }
.fade-enter, .fade-leave-to { opacity: 0; }

.pop-enter-active { transition: transform .22s cubic-bezier(.2, .9, .3, 1), opacity .22s ease; }
.pop-leave-active { transition: transform .16s ease, opacity .16s ease; }
.pop-enter, .pop-leave-to { transform: translateY(14px) scale(.985); opacity: 0; }

.icon { width: 16px; height: 16px; flex: none; }
.icon-sm { width: 13px; height: 13px; }

/* ---------- Print ---------- */
@media print {
  @page { size: landscape; margin: 12mm; }
  body { background: #fff; }
  body::before { display: none; }
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  .wk { min-width: 0; }
  .print-flat { overflow: visible !important; max-height: none !important; }
  .card, .hero { box-shadow: none; }
}
.print-only { display: none; }