/* ==========================================================================
   Fortify HR · Version 2 ("Clean")
   Loaded after tokens/base/components on v2 pages only, and every rule is
   scoped to body.v2, so v1 pages are unaffected. Tokens: see the .v2 block
   at the end of tokens.css.
   ========================================================================== */

/* ---- 1. Canvas ---------------------------------------------------------------- */
body.v2 { background-color: var(--v2-canvas); }
body.v2::before { opacity: 0.45; }
body.v2::after { display: none; }

/* ---- 2. Sidebar: solid navy ---------------------------------------------------- */
.v2 .sidebar {
  background: var(--v2-sidebar-bg);
  border: 0;
  box-shadow: var(--shadow-lg);
  color: var(--v2-sidebar-text);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.v2 .brand__name { color: var(--v2-sidebar-text-strong); }
.v2 .brand__name span { color: var(--v2-sidebar-accent); }
.v2 .sidebar .brand__short { color: var(--v2-sidebar-text-strong); }
.v2 .nav__heading { color: var(--v2-sidebar-muted); }
.v2 .nav__link { color: var(--v2-sidebar-text); }
.v2 .nav__link:hover { background: var(--v2-sidebar-hover); color: var(--v2-sidebar-text-strong); }
.v2 .nav__link[aria-current="page"] {
  background: var(--v2-sidebar-active);
  color: var(--v2-sidebar-text-strong);
  box-shadow: inset 0 0 0 var(--border-width) var(--v2-sidebar-border);
}
.v2 .nav__link[aria-current="page"]::before { background: var(--v2-sidebar-accent); }
.v2 .nav__link[aria-current="page"] svg { color: var(--v2-sidebar-accent); }
.v2 .nav__link[aria-disabled="true"]:hover { color: var(--v2-sidebar-text); }
.v2 .nav__soon { background: var(--v2-sidebar-hover); color: var(--v2-sidebar-muted); }
.v2 .sidebar__footer { border-top-color: var(--v2-sidebar-border); }
.v2 .company-chip { background: var(--v2-sidebar-hover); }
.v2 .company-chip__name { color: var(--v2-sidebar-text-strong); }
.v2 .company-chip__meta { color: var(--v2-sidebar-muted); }
.v2 .sidebar .icon-btn { color: var(--v2-sidebar-text); }
.v2 .sidebar .icon-btn:hover { background: var(--v2-sidebar-hover); color: var(--v2-sidebar-text-strong); }
.v2 .sidebar :focus-visible { outline-color: var(--v2-sidebar-accent); }

/* Help card with Forti peeking over the top */
.help-card {
  position: relative;
  margin: var(--space-8) 0 var(--space-1);
  padding: var(--space-8) var(--space-4) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--v2-sidebar-hover);
  box-shadow: inset 0 0 0 var(--border-width) var(--v2-sidebar-border);
  text-align: center;
}
.help-card__art { position: absolute; top: calc(var(--mascot-help-w) * -0.55); left: 50%; width: var(--mascot-help-w); margin-left: calc(var(--mascot-help-w) / -2); }
.help-card__title { color: var(--v2-sidebar-text-strong); font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.help-card__text { color: var(--v2-sidebar-muted); font-size: var(--fs-xs); line-height: var(--lh-normal); margin: var(--space-1) 0 var(--space-3); }
@container sidebar (max-width: 120px) { .help-card { display: none; } }
@media (max-height: 820px) { .help-card { display: none; } }

/* ---- 3. Top bar: solid card ------------------------------------------------------ */
.v2 .topbar {
  background: var(--v2-card);
  border-color: var(--v2-card-border);
  box-shadow: var(--v2-card-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---- 4. Cards ---------------------------------------------------------------------- */
.v2-card {
  position: relative;
  min-width: 0;
  padding: var(--v2-card-pad);
  border-radius: var(--radius-xl);
  background: var(--v2-card);
  border: var(--border-width) solid var(--v2-card-border);
  box-shadow: var(--v2-card-shadow);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.v2-card--hover:hover { box-shadow: var(--v2-card-shadow-hover); transform: translateY(var(--lift)); }
.v2-card--flush { padding: 0; }
.v2-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.v2-card__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.v2-card__sub { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: var(--space-0-5); }
.v2-card__link {
  width: var(--size-sm); height: var(--size-sm);
  display: inline-grid; place-items: center;
  border-radius: var(--radius-round);
  border: var(--border-width) solid var(--v2-card-border);
  color: var(--text-muted);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.v2-card__link svg { width: var(--icon-sm); height: var(--icon-sm); }
.v2-card__link:hover { background: var(--accent-solid); color: var(--text-on-accent); border-color: var(--accent-solid); }

/* ---- 5. Grid ---------------------------------------------------------------------- */
.v2-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; }
.v2-grid + .v2-grid { margin-top: var(--space-5); }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }
@media (max-width: 1180px) {
  .col-3, .col-4 { grid-column: span 6; }
  .col-5, .col-6, .col-8 { grid-column: span 12; }
}
@media (max-width: 720px) {
  .v2-grid { gap: var(--space-4); }
  .col-3, .col-4, .col-5, .col-6, .col-8 { grid-column: span 12; }
}

/* ---- 6. Welcome header + pill metrics ---------------------------------------------- */
.welcome { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-5) var(--space-8); margin-bottom: var(--space-6); }
.welcome__eyebrow { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-1); }
.welcome__eyebrow svg { width: var(--icon-sm); height: var(--icon-sm); }
.welcome__title { font-size: var(--v2-display); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tighter); line-height: var(--lh-tight); }
.welcome__title span { color: var(--accent); }

/* Headline KPIs: icon, number and label, split by dividers */
.kpis { display: flex; align-items: center; }
.kpi { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-6); }
.kpi:first-child { padding-left: 0; }
.kpi:last-child { padding-right: 0; }
.kpi + .kpi { border-left: var(--border-width) solid var(--divider); }
.kpi__icon { flex: none; width: var(--size-lg); height: var(--size-lg); display: grid; place-items: center; border-radius: var(--radius-round); background: var(--accent-soft); color: var(--accent); }
.kpi__icon svg { width: var(--icon-md); height: var(--icon-md); }
.kpi__text { display: grid; }
.kpi__num { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tighter); line-height: var(--lh-none); font-variant-numeric: tabular-nums; }
.kpi__label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-1); white-space: nowrap; }

/* At-a-glance strip: equal columns, one bar style */
.glance { display: grid; grid-template-columns: repeat(var(--glance-cols, 4), minmax(0, 1fr)); padding: var(--space-5) 0; margin-bottom: var(--space-5); }
.glance__item { min-width: 0; padding: 0 var(--space-6); }
.glance__item + .glance__item { border-left: var(--border-width) solid var(--divider); }
.glance__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2-5); }
.glance__label { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glance__label svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--accent); }
.glance__value { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; white-space: nowrap; }
.glance__note { margin-top: var(--space-1-5); font-size: var(--fs-xs); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1180px) {
  .welcome { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-5); }
  .glance__item:nth-child(odd) { border-left: 0; }
}
@media (max-width: 640px) {
  .kpis { justify-content: space-between; }
  .kpi { padding: 0 var(--space-3); gap: var(--space-2); }
  .kpi__icon { display: none; }
  .kpi__num { font-size: var(--fs-2xl); }
  .glance__item { padding: 0 var(--space-4); }
}

/* ---- 7. Hero card with Forti -------------------------------------------------------- */
.hero-card {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--mascot-hero-w);
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4) 0 var(--space-6);
  background: var(--hero-glow), var(--hero-gradient);
  border: 0;
  color: var(--on-hero);
}
.hero-card::before,
.hero-card::after {
  content: "";
  position: absolute;
  border-radius: var(--radius-round);
  border: var(--space-6) solid var(--hero-ring);
  pointer-events: none;
}
.hero-card::before { width: calc(var(--mascot-hero-w) * 1.5); height: calc(var(--mascot-hero-w) * 1.5); right: calc(var(--mascot-hero-w) * -0.45); top: calc(var(--mascot-hero-w) * -0.55); }
.hero-card::after { width: var(--size-4xl); height: var(--size-4xl); left: calc(var(--size-4xl) * -0.4); bottom: calc(var(--size-4xl) * -0.5); }
.hero-card__text { position: relative; z-index: 1; padding-bottom: var(--space-6); }
.hero-card__eyebrow { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-1) var(--space-2-5); border-radius: var(--radius-pill); background: var(--on-hero-btn-ghost); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.hero-card__eyebrow svg { width: var(--icon-xs); height: var(--icon-xs); }
.hero-card__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); margin: var(--space-3) 0 var(--space-1-5); line-height: var(--lh-heading); }
.hero-card__body { color: var(--on-hero-muted); font-size: var(--fs-md); max-width: var(--measure-body); }
.hero-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.hero-card__out { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--on-hero-muted); }
.hero-card__out .avatar-stack .avatar { box-shadow: 0 0 0 var(--border-width-strong) var(--mascot-rim); }
.hero-card__art { position: relative; z-index: 1; align-self: end; }
.hero-card__art .mascot { width: 100%; height: auto; display: block; }
.btn--on-hero { background: var(--white); color: var(--mascot-rim); }
.btn--on-hero:hover { background: var(--mascot-body-bottom); }
.btn--on-hero-ghost { background: var(--on-hero-btn-ghost); color: var(--on-hero); }
.btn--on-hero-ghost:hover { background: var(--hero-ring); }
.v2 .hero-card :focus-visible { outline-color: var(--white); }

.speech {
  position: absolute;
  z-index: 2;
  /* Centred over Forti's head, lifted clear of the crest, tail pointing down at him */
  bottom: calc(100% + var(--space-3));
  left: 50%;
  width: calc(var(--mascot-hero-w) * 0.95);
  transform: translateX(-50%);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--mascot-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  text-align: center;
  box-shadow: var(--shadow);
}
.speech::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: calc(var(--space-2) * -1);
  border: var(--space-2) solid transparent;
  border-top-color: var(--white);
}
.speech strong { color: var(--mascot-rim); }
@media (max-width: 1180px) and (min-width: 721px), (max-width: 560px) { .speech { display: none; } }
@media (max-width: 560px) {
  .hero-card { grid-template-columns: minmax(0, 1fr) calc(var(--mascot-hero-w) * 0.5); padding: var(--space-5) var(--space-3) 0 var(--space-5); }
  .hero-card__actions .btn { flex: 1; }
}

/* ---- 8. Mascot artwork ---------------------------------------------------------------- */
.mascot { overflow: visible; }

/* Motion: gentle bob, blink, wave (all stopped by prefers-reduced-motion in base.css) */

@keyframes mascot-bob { 50% { transform: translateY(calc(var(--space-1) * -1)); } }
@keyframes mascot-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }

@keyframes mascot-twinkle { 50% { transform: scale(0.6); opacity: 0.6; } }

.empty__mascot { width: var(--mascot-empty-w); margin-bottom: var(--space-2); }
.empty__mascot .mascot { width: 100%; height: auto; display: block; }

/* ---- 9. Weekly attendance bars ------------------------------------------------------------- */
.bars-head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-1); }
.bars-head strong { font-size: var(--v2-num-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tighter); line-height: var(--lh-none); }
.bars-head span { font-size: var(--fs-sm); color: var(--text-muted); }
.bars-trend { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-xs); color: var(--success); font-weight: var(--fw-semibold); }
.bars-trend svg { width: var(--icon-xs); height: var(--icon-xs); }
.bars { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); margin-top: var(--space-5); }
.bars__axis { display: flex; flex-direction: column; justify-content: space-between; height: var(--bars-h); font-size: var(--fs-2xs); color: var(--text-subtle); text-align: right; font-variant-numeric: tabular-nums; }
.bars__plot { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; height: var(--bars-h); background: repeating-linear-gradient(to top, var(--divider) 0 var(--border-width), transparent var(--border-width) calc(var(--bars-h) / 4)); }
.bars__col { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 100%; }
.bars__bar { width: var(--bar-w); border-radius: var(--radius-pill); background: var(--accent-soft); box-shadow: inset 0 0 0 var(--border-width) var(--v2-card-border); transition: height var(--dur-slower) var(--ease); }
.bars__bar--on { background: var(--accent-gradient); box-shadow: none; }
.bars__bar--rest { background: var(--stripes-strong); }
.bars__tip { position: absolute; bottom: calc(100% + var(--space-1)); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-pill); background: var(--accent-solid); color: var(--text-on-accent); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.bars__days { grid-column: 2; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: var(--fs-xs); color: var(--text-subtle); text-align: center; }
.bars__days .is-today { color: var(--accent); font-weight: var(--fw-bold); }

/* ---- 10. Time tracker ring ----------------------------------------------------------------- */
.tracker { display: grid; justify-items: center; gap: var(--space-3); }
.ring { position: relative; width: var(--ring-size); height: var(--ring-size); }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--accent-soft); stroke-width: var(--ring-stroke); }
.ring__value { fill: none; stroke: var(--accent-solid); stroke-width: var(--ring-stroke); stroke-linecap: round; transition: stroke-dashoffset var(--dur-slower) var(--ease); }
.ring__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring__time { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; line-height: var(--lh-none); }
.ring__label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-1); }
.tracker__controls { display: flex; align-items: center; gap: var(--space-2); }
.tracker__meta { font-size: var(--fs-xs); color: var(--text-subtle); text-align: center; }
.round-btn {
  width: var(--size-lg); height: var(--size-lg);
  display: inline-grid; place-items: center;
  border-radius: var(--radius-round);
  background: var(--surface-sunken);
  color: var(--text);
  box-shadow: inset 0 0 0 var(--border-width) var(--v2-card-border);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.round-btn svg { width: var(--icon-md); height: var(--icon-md); }
.round-btn:hover { background: var(--accent-soft); color: var(--accent); }
.round-btn--primary { background: var(--accent-solid); color: var(--text-on-accent); box-shadow: var(--shadow-accent); }
.round-btn--primary:hover { background: var(--accent-solid-hover); color: var(--text-on-accent); }

/* ---- 11. Accordion ------------------------------------------------------------------------ */
.accordion { display: grid; gap: var(--space-2); }
.accordion details { border-radius: var(--radius); background: var(--surface-sunken); box-shadow: inset 0 0 0 var(--border-width) var(--v2-card-border); }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-md); font-weight: var(--fw-semibold);
  cursor: pointer; list-style: none;
  border-radius: var(--radius);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--text-subtle); transition: transform var(--dur) var(--ease); }
.accordion details[open] summary svg { transform: rotate(180deg); }
.accordion__body { padding: 0 var(--space-4) var(--space-4); font-size: var(--fs-sm); color: var(--text-muted); }
.accordion__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1-5) 0; }
.accordion__row strong { color: var(--text); font-weight: var(--fw-semibold); white-space: nowrap; }

/* ---- 12. Week schedule --------------------------------------------------------------------- */
.week { display: grid; grid-template-columns: var(--cal-time-w) repeat(5, minmax(0, 1fr)); }
.week__corner { border-bottom: var(--border-width) solid var(--divider); }
.week__day { display: grid; justify-items: center; gap: var(--space-1); padding-bottom: var(--space-2); border-bottom: var(--border-width) solid var(--divider); font-size: var(--fs-xs); color: var(--text-subtle); }
.week__day strong { width: var(--size-sm); height: var(--size-sm); display: grid; place-items: center; border-radius: var(--radius-pill); font-size: var(--fs-md); color: var(--text); }
.week__day.is-today strong { background: var(--accent-solid); color: var(--text-on-accent); }
.week__times { display: grid; grid-auto-rows: var(--cal-hour-h); font-size: var(--fs-2xs); color: var(--text-subtle); }
.week__times span { transform: translateY(calc(var(--space-1-5) * -1)); }
.week__col { position: relative; min-height: calc(var(--cal-hour-h) * 4); border-left: var(--border-width) dashed var(--divider); background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--cal-hour-h) - var(--border-width)), var(--divider) calc(var(--cal-hour-h) - var(--border-width)) var(--cal-hour-h)); }
.week__col.is-today { background-color: var(--accent-soft); }
.event {
  position: absolute;
  left: var(--space-1); right: var(--space-1);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-1);
  padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  overflow: hidden;
  border-left: var(--indicator-w) solid currentColor;
}
.event__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; font-weight: var(--fw-semibold); color: var(--text); line-height: var(--lh-snug); }
.event__sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: var(--space-0-5); color: var(--text-muted); font-size: var(--fs-2xs); line-height: var(--lh-snug); }
.event--short .avatar-stack { display: none; }
.event .avatar-stack .avatar { box-shadow: 0 0 0 var(--border-width-strong) var(--v2-card); }
.event--accent { background: var(--accent-soft); color: var(--accent); }
.event--success { background: var(--success-soft); color: var(--success); }
.event--warning { background: var(--warning-soft); color: var(--warning); }
.event--info { background: var(--overtime-soft); color: var(--overtime); }
@media (max-width: 720px) {
  .week { grid-template-columns: var(--size-lg) repeat(5, minmax(0, 1fr)); }
  .event__sub, .event .avatar-stack { display: none; }
  .event { padding: var(--space-1); }
}

/* ---- 13. Ink card (approvals checklist) ----------------------------------------------------- */
.ink-card { background: var(--v2-ink-card); color: var(--v2-on-ink); border: 0; }
.ink-card .v2-card__sub { color: var(--v2-on-ink-muted); }
.ink-card__count { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.ink-card__count span { color: var(--v2-on-ink-muted); font-size: var(--fs-lg); }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.checklist__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2-5) 0; border-bottom: var(--border-width) solid var(--v2-ink-divider); }
.checklist__item:last-child { border-bottom: 0; }
.checklist__icon { flex: none; width: var(--size-md); height: var(--size-md); display: grid; place-items: center; border-radius: var(--radius-round); background: var(--v2-ink-chip); color: var(--v2-sidebar-accent); }
.checklist__icon svg { width: var(--icon-sm); height: var(--icon-sm); }
.checklist__main { flex: 1; min-width: 0; }
.checklist__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.checklist__meta { font-size: var(--fs-xs); color: var(--v2-on-ink-muted); }
.check-toggle {
  flex: none;
  width: var(--icon-xl); height: var(--icon-xl);
  display: grid; place-items: center;
  border-radius: var(--radius-round);
  box-shadow: inset 0 0 0 var(--border-width-strong) var(--v2-on-ink-muted);
  color: transparent;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.check-toggle svg { width: var(--icon-xs); height: var(--icon-xs); }
.check-toggle:hover { box-shadow: inset 0 0 0 var(--border-width-strong) var(--v2-on-ink); }
.check-toggle[aria-pressed="true"] { background: var(--accent-solid); box-shadow: none; color: var(--white); }
.ink-card :focus-visible { outline-color: var(--v2-sidebar-accent); }
.ink-card .link { color: var(--v2-sidebar-accent); }
.ink-card .progress { background: var(--v2-ink-chip); margin: var(--space-2) 0 var(--space-3); }

/* ---- 14. Segmented usage bar + horizontal bars ----------------------------------------------- */
.usage-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.usage-head strong { font-size: var(--v2-num-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tighter); line-height: var(--lh-none); }
.segbar { display: flex; gap: var(--space-1); margin-top: var(--space-4); }
.segbar__seg { position: relative; min-width: var(--segbar-min-w); border-radius: var(--radius-sm); cursor: default; }
.segbar__seg::after {
  content: attr(data-tip);
  position: absolute;
  z-index: var(--z-tooltip);
  bottom: calc(100% + var(--space-2));
  left: 50%;
  padding: var(--space-1-5) var(--space-2-5);
  border-radius: var(--radius-sm);
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, var(--space-1));
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.segbar__seg:first-child::after { left: 0; transform: translateY(var(--space-1)); }
.segbar__seg:last-child::after { left: auto; right: 0; transform: translateY(var(--space-1)); }
.segbar__seg:hover::after, .segbar__seg:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.segbar__seg:first-child:hover::after, .segbar__seg:first-child:focus-visible::after,
.segbar__seg:last-child:hover::after, .segbar__seg:last-child:focus-visible::after { transform: none; }
.segbar__label { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--space-1-5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.segbar__fill { height: var(--size-lg); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; padding: 0 var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-on-accent); white-space: nowrap; }
.segbar__fill--accent { background: var(--accent-solid); }
.segbar__fill--ink { background: var(--mascot-ink); }
[data-theme="dark"] .v2 .segbar__fill--ink { background: var(--text-subtle); }
.segbar__fill--muted { background: var(--stripes-strong), var(--surface-sunken); color: var(--text-muted); }

.hbars { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.hbars li { display: grid; grid-template-columns: var(--cal-label-w) minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); }
.hbars__track { height: var(--progress-h); border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.hbars__fill { display: block; height: 100%; border-radius: inherit; background: var(--accent-gradient); }
.hbars strong { font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .hbars li { grid-template-columns: var(--size-4xl) minmax(0, 1fr) auto; } }

/* ---- 15. People page ------------------------------------------------------------------------ */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-btn {
  height: var(--control-h-sm);
  padding: 0 var(--space-3-5);
  border-radius: var(--radius-pill);
  background: var(--v2-card);
  box-shadow: inset 0 0 0 var(--border-width) var(--v2-card-border), var(--shadow-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip-btn:hover { color: var(--text); }
.chip-btn[aria-pressed="true"] { background: var(--accent-solid); color: var(--text-on-accent); box-shadow: var(--shadow-accent); }
.chip-btn span { opacity: 0.7; margin-left: var(--space-1); font-variant-numeric: tabular-nums; }

.people-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.people-bar .input-icon { flex: 1 1 var(--search-min-w); max-width: var(--search-w); }
.people-bar .input, .people-bar .select { background: var(--v2-card); }
.people-bar .select { width: auto; }

.people-table-card { overflow: hidden; }
.people-table tbody tr, .table--selectable tbody tr { cursor: pointer; }
.people-table tbody tr.is-selected, .table--selectable tbody tr.is-selected { background: var(--accent-soft); }
.people-table tbody tr.is-selected td:first-child, .table--selectable tbody tr.is-selected td:first-child { box-shadow: inset var(--indicator-w) 0 0 var(--accent-solid); }
.row-select { display: flex; align-items: center; gap: var(--space-3); min-width: 0; text-align: left; border-radius: var(--radius-sm); }
.row-select:hover .person__name { color: var(--accent); }
.people-table td[data-label="Role"] .person__name { font-weight: var(--fw-medium); white-space: normal; }
@media (max-width: 640px) {
  .people-table tbody tr.is-selected td:first-child { box-shadow: none; }
  .people-table tbody tr.is-selected { box-shadow: inset var(--indicator-w) 0 0 var(--accent-solid); }
}

.peek { position: sticky; top: calc(var(--topbar-h) + var(--shell-gap) * 2 + var(--space-2)); overflow: hidden; }
.peek__cover { height: var(--peek-cover-h); background: var(--hero-glow), var(--hero-gradient); }
.peek__body { padding: 0 var(--v2-card-pad) var(--v2-card-pad); margin-top: calc(var(--size-4xl) / -2); display: grid; gap: var(--space-4); }
.peek__who { display: grid; justify-items: center; text-align: center; gap: var(--space-1); }
.peek__who .avatar--xl { box-shadow: 0 0 0 var(--space-1) var(--v2-card), var(--shadow); }
.peek__name { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); margin-top: var(--space-2); }
.peek__role { color: var(--text-muted); font-size: var(--fs-sm); }
.salary-pill {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 var(--border-width) var(--v2-card-border);
}
.salary-pill__value { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.salary-pill__label { display: block; font-size: var(--fs-2xs); color: var(--text-subtle); font-weight: var(--fw-medium); }
.peek__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); margin: 0; }
.peek__facts dt { font-size: var(--fs-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.peek__facts dd { margin: var(--space-0-5) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.peek__ids { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.peek__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 1180px) { .peek { position: static; } }
.people-table th, .people-table td { padding-left: var(--space-3); padding-right: var(--space-3); }
.people-table th:first-child, .people-table td:first-child { padding-left: var(--space-5); }
.people-table th:last-child, .people-table td:last-child { padding-right: var(--space-5); }

/* ---- 16. Mascot, "bot" style (v3) ------------------------------------------------------ */

.bot__shell { fill: var(--bot-fill, var(--bot-shell-b)); }

.bot__gloss { fill: none; stroke: var(--bot-glow); stroke-width: var(--bot-stroke-thin); stroke-linecap: round; opacity: 0.16; }
.bot__glow { fill: var(--bot-glow); filter: drop-shadow(0 0 var(--space-1) var(--bot-glow-halo)); }
.bot__stroke { fill: none; stroke: var(--bot-glow); stroke-width: var(--bot-stroke-w); stroke-linecap: round; filter: drop-shadow(0 0 var(--space-1) var(--bot-glow-halo)); }
.bot__stroke--thin { stroke-width: var(--bot-stroke-thin); }
.bot__ring { fill: none; stroke: var(--bot-glow); stroke-width: var(--border-width-strong); }
.bot__cheek { fill: var(--bot-cheek); opacity: 0.55; }
.bot__heart { fill: var(--bot-heart); }
.bot__spark { fill: var(--bot-spark); }
.bot__spark--alt { fill: var(--bot-spark-alt); }
.bot__confetti--a { fill: var(--bot-confetti-a); }
.bot__confetti--b { fill: var(--bot-confetti-b); }
.bot__confetti--c { fill: var(--bot-confetti-c); }
.bot__card { fill: var(--bot-card); stroke: var(--bot-lanyard); stroke-width: var(--border-width-strong); }
.bot__card-photo { fill: var(--bot-shell-a); }
.bot__card-line { fill: none; stroke: var(--bot-card-ink); stroke-width: var(--border-width-strong); stroke-linecap: round; }
.bot__lanyard { fill: none; stroke: var(--bot-lanyard); stroke-width: var(--border-width-strong); stroke-linecap: round; }
.bot__bubble { fill: var(--bot-bubble); filter: drop-shadow(0 var(--space-0-5) var(--space-1) var(--bot-shadow)); }
.bot__dot { fill: var(--bot-shell-b); }
.bot__z { fill: none; stroke: var(--bot-z); stroke-width: var(--border-width-strong); stroke-linecap: round; stroke-linejoin: round; }

/* Motion (stopped by prefers-reduced-motion in base.css) */
.bot__figure { animation: mascot-bob var(--mascot-bob-dur) var(--ease) infinite; }
.bot__eyes { transform-box: fill-box; transform-origin: center; animation: mascot-blink var(--mascot-blink-dur) infinite; }
 /* shoulder, SVG units */
.bot__spark, .bot__confetti { transform-box: fill-box; transform-origin: center; animation: mascot-twinkle var(--mascot-twinkle-dur) var(--ease) infinite; }
.bot__spark--alt, .bot__confetti--b { animation-delay: calc(var(--mascot-twinkle-dur) / 3); }
.bot__thought .bot__dot { animation: bot-dots var(--mascot-twinkle-dur) var(--ease) infinite; }
.bot__thought .bot__dot:nth-of-type(2) { animation-delay: calc(var(--mascot-twinkle-dur) / 6); }
.bot__thought .bot__dot:nth-of-type(3) { animation-delay: calc(var(--mascot-twinkle-dur) / 3); }
.bot__zzz { animation: bot-float var(--mascot-bob-dur) var(--ease) infinite; }
.bot__heart--float { transform-box: fill-box; transform-origin: center; animation: bot-beat var(--mascot-wave-dur) var(--ease) infinite; }

@keyframes bot-dots { 50% { opacity: 0.25; } }
@keyframes bot-float { 50% { transform: translateY(calc(var(--space-1-5) * -1)); opacity: 0.7; } }
@keyframes bot-beat { 20% { transform: scale(1.15); } 40% { transform: scale(1); } }

/* ---- 17. Character sheet page ---------------------------------------------------------- */
.sheet { max-width: var(--content-max); margin: 0 auto; padding: var(--space-7) var(--space-5) var(--space-9); }
.sheet__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-7); }
.sheet__hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-7); margin-bottom: var(--space-7); }
.sheet__hero .mascot { width: calc(var(--bot-sheet-art) * 1.4); height: auto; }
.sheet__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--dropdown-w-wide), 1fr)); gap: var(--space-5); }
.sheet__card { display: grid; justify-items: center; gap: var(--space-2); text-align: center; }
.sheet__art { width: var(--bot-sheet-art); aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-xl); background: var(--surface-sunken); margin-bottom: var(--space-2); }
.sheet__art .mascot { width: 88%; height: auto; }
.sheet__name { font-size: var(--fs-lg); font-weight: var(--fw-bold); text-transform: capitalize; }
.sheet__use { font-size: var(--fs-sm); color: var(--text-muted); max-width: var(--measure-body); }
.sheet__swatches { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.swatch { display: grid; gap: var(--space-1); font-size: var(--fs-xs); color: var(--text-muted); }
.swatch span:first-child { width: var(--size-2xl); height: var(--size-2xl); border-radius: var(--radius); box-shadow: inset 0 0 0 var(--border-width) var(--v2-card-border); }
.swatch--shell span:first-child { background: linear-gradient(135deg, var(--bot-shell-a), var(--bot-shell-b)); }
.swatch--visor span:first-child { background: var(--bot-visor); }
.swatch--glow span:first-child { background: var(--bot-glow); }

.swatch--spark span:first-child { background: var(--bot-spark); }

.sheet__sizes { display: flex; align-items: flex-end; gap: var(--space-6); }
.sheet__sizes .mascot { height: auto; }
@media (max-width: 720px) {
  .sheet__hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .sheet__swatches { justify-content: center; }
}
.help-card__link { display: inline-block; margin-top: var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--v2-sidebar-accent); }
.help-card__link:hover { text-decoration: underline; text-underline-offset: var(--space-1); }

/* ---- 18. Mascot, "guardian" style (v4) -------------------------------------------------- */
.guard__stop-accent-a { stop-color: var(--bot-shell-a); }
.guard__stop-accent-b { stop-color: var(--bot-shell-b); }
.guard__stop-shell-a { stop-color: var(--guard-shell-a); }
.guard__stop-shell-b { stop-color: var(--guard-shell-b); }
.guard__shell { fill: var(--guard-shell, var(--guard-shell-a)); stroke: var(--guard-shell-edge); stroke-width: var(--border-width-strong); stroke-linejoin: round; }
.guard__visor { fill: var(--guard-visor); stroke: var(--guard-visor-rim); stroke-width: var(--guard-visor-rim-w); stroke-linejoin: round; }

.guard__nub { fill: var(--bot-fill, var(--bot-shell-b)); }
.guard__nub-core { fill: var(--guard-nub-core); filter: drop-shadow(0 0 var(--space-1) var(--bot-glow-halo)); }

/* ---- 19. Mascot, "hover" style (v5) ------------------------------------------------------ */

.hover__shadow { fill: var(--hover-shadow); transform-box: fill-box; transform-origin: center; animation: hover-shadow var(--hover-dur) var(--ease) infinite; }
.hover .bot__figure { animation: hover-rise var(--hover-dur) var(--ease) infinite; }

@keyframes hover-rise { 50% { transform: translateY(var(--hover-rise)); } }
@keyframes hover-shadow { 50% { transform: scaleX(0.8); opacity: 0.6; } }
@keyframes hover-pulse { 50% { transform: scale(0.85); opacity: 0.65; } }

/* Flat treatment for the hover mascot: solid fills, no outlines, no glows */
.hover .guard__shell { fill: var(--bot-fill, var(--flat-shell)); stroke: none; } /* v3 gradient */
.hover .guard__visor { fill: var(--flat-visor); stroke: none; }
.hover .bot__shell { fill: var(--bot-fill, var(--flat-shell)); }
.hover .guard__nub { fill: var(--flat-accent); }

.hover .bot__bubble { filter: none; } /* eyes and rivets keep the v3 glow */
.hover .bot__gloss { display: none; }

.hover .bot__card { stroke: none; }
.hover .bot__cheek { opacity: 0.45; }

.swatch--flat-accent span:first-child { background: var(--flat-accent); }
.swatch--flat-band span:first-child { background: var(--flat-band); }

/* ---- 20. Mascot, "reach" style (v6): long floating arms ---------------------------------- */
.reach__arm, .reach__body { fill: var(--bot-fill, var(--flat-shell)); }
.reach__cap { fill: var(--flat-accent); }
.reach__body-light { fill: none; stroke: var(--bot-glow); stroke-width: var(--bot-stroke-thin); stroke-linecap: round; opacity: 0.35; }
.reach__thruster { fill: var(--flat-light); filter: drop-shadow(0 0 var(--space-1-5) var(--bot-glow-halo)); transform-box: fill-box; transform-origin: center; animation: hover-pulse var(--hover-dur) var(--ease) infinite; }
.reach__wave { transform-box: view-box; animation: reach-wave var(--mascot-wave-dur) var(--ease) infinite; }
@keyframes reach-wave { 0%, 60%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-16deg); } 40% { transform: rotate(8deg); } }

/* ---- 21. v6 look for the shared components (Attendance, Leave, Payroll, Profile) --------- */
.v2 .panel,
.v2 .card--glass {
  background: var(--v2-card);
  border: var(--border-width) solid var(--v2-card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--v2-card-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.v2 .card--hover:hover { box-shadow: var(--v2-card-shadow-hover); }
.v2 .page-header h1 { font-size: var(--v2-display); letter-spacing: var(--tracking-tighter); line-height: var(--lh-tight); }
.v2 .page-header h1 span { color: var(--accent); }
.v2 .profile-hero__cover { background: var(--hero-glow), var(--hero-gradient); opacity: 1; }
.v2 .profile-hero__cover::after { display: none; }
.v2 .profile-hero__body .avatar--xl { box-shadow: 0 0 0 var(--space-1) var(--v2-card), var(--shadow); }
.v2 .clock::before { display: none; }

/* ---- 22. Sign-in page, v6 look ------------------------------------------------------------ */
.v2 .auth__brand {
  background: var(--hero-glow), var(--hero-gradient);
  color: var(--on-hero);
  border: 0;
  box-shadow: var(--v2-card-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.v2 .auth__brand::before {
  content: "";
  position: absolute;
  width: calc(var(--mascot-hero-w) * 2);
  height: calc(var(--mascot-hero-w) * 2);
  right: calc(var(--mascot-hero-w) * -0.6);
  bottom: calc(var(--mascot-hero-w) * -0.7);
  border-radius: var(--radius-round);
  border: var(--space-7) solid var(--hero-ring);
  pointer-events: none;
}
.v2 .auth__brand > :not(.auth__forti) { position: relative; }
.v2 .auth__brand .brand__name { color: var(--white); }
.v2 .auth__brand .brand__name span { color: var(--v2-sidebar-accent); }
.v2 .auth__headline span { background: none; color: var(--v2-sidebar-accent); }
.v2 .auth__lede { color: var(--on-hero-muted); }
.v2 .auth__features .stat__icon { background: var(--on-hero-btn-ghost); color: var(--white); }
.v2 .auth__brand :focus-visible { outline-color: var(--white); }
.auth__forti { position: absolute; right: var(--space-7); bottom: var(--space-5); width: var(--mascot-hero-w); }
.auth__forti .mascot { width: 100%; height: auto; display: block; }
@media (max-width: 1180px) { .auth__forti { width: calc(var(--mascot-hero-w) * 0.75); } .auth__forti .speech { display: none; } }

/* Dropdowns: solid card surface in the v6 look */
.v2 .dropdown__menu { background: var(--v2-card); border-color: var(--v2-card-border); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- 23. Employee portal ------------------------------------------------------------------ */
.my-icon { background: var(--accent-soft); color: var(--accent); }
.news { align-items: flex-start; }
.news__body { margin: var(--space-1) 0 var(--space-1-5); font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-normal); }
.payslips-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.slip-panel { position: sticky; top: calc(var(--topbar-h) + var(--shell-gap) * 2 + var(--space-2)); }
@media (max-width: 1280px) { .slip-panel .payslip__cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1180px) {
  .payslips-layout { grid-template-columns: minmax(0, 1fr); }
  .slip-panel { position: static; }
}
/* Print only the open payslip */
@media print {
  body[data-page="my-payslips"] * { visibility: hidden; }
  body[data-page="my-payslips"] #slip-panel, body[data-page="my-payslips"] #slip-panel * { visibility: visible; }
  body[data-page="my-payslips"] #slip-panel { position: absolute; inset: 0; box-shadow: none; border: 0; }
  body[data-page="my-payslips"] #slip-print { display: none; }
}

/* ---- 24. Sign-in portal choice -------------------------------------------------------------- */
.portal-switch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-5); }
.portal-switch__option {
  display: flex; align-items: center; gap: var(--space-2-5);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 var(--border-width) var(--v2-card-border);
  text-align: left;
  color: var(--text-muted);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.portal-switch__option svg { flex: none; width: var(--icon-lg); height: var(--icon-lg); }
.portal-switch__option span { display: grid; min-width: 0; line-height: var(--lh-snug); }
.portal-switch__option strong { font-size: var(--fs-md); color: var(--text); }
.portal-switch__option small { font-size: var(--fs-xs); color: var(--text-subtle); }
.portal-switch__option:hover { color: var(--text); }
.portal-switch__option[aria-checked="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 var(--border-width-strong) var(--accent-solid); color: var(--accent); }
@media (max-width: 400px) { .portal-switch__option small { display: none; } }

/* Sign-in layout: panel and card sit together, centred; panel content centred vertically */
.v2 .auth {
  grid-template-columns: minmax(0, 1fr) calc(var(--auth-card-w) + var(--space-8) * 2);
  max-width: var(--content-max);
  margin: 0 auto;
}
.v2 .auth__main { padding-inline: 0; }
.v2 .auth__brand { justify-content: flex-start; }
.v2 .auth__brand > div:not(.auth__forti) { margin-block: auto; padding-bottom: var(--space-8); }
@media (max-width: 960px) { .v2 .auth { grid-template-columns: minmax(0, 1fr); } }
/* Sign-in: form card matches the brand panel's height */
.v2 .auth__main { align-items: stretch; padding-block: 0; }
.v2 .auth__card { display: flex; flex-direction: column; justify-content: center; height: 100%; width: 100%; }
.v2 .auth__theme { top: var(--space-4); right: var(--space-4); z-index: 1; }
@media (max-width: 960px) { .v2 .auth__card { height: auto; } }

/* Latest payslip card (employee Home) */
.slip-card { display: flex; flex-direction: column; }
.slip-card__net { display: grid; gap: var(--space-0-5); padding: var(--space-4); border-radius: var(--radius); background: var(--surface-sunken); box-shadow: inset 0 0 0 var(--border-width) var(--v2-card-border); }
.slip-card__label { font-size: var(--fs-xs); color: var(--text-muted); }
.slip-card__amount { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; line-height: var(--lh-tight); }
.slip-card__bar { display: flex; gap: var(--space-0-5); height: var(--progress-h); margin: var(--space-4) 0 var(--space-2); border-radius: var(--radius-pill); overflow: hidden; }
.slip-card__lines { margin: 0 0 var(--space-5); }
.slip-card__line { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--divider); font-size: var(--fs-sm); }
.slip-card__line:last-child { border-bottom: 0; }
.slip-card__line dt { color: var(--text-muted); }
.slip-card__line dd { margin: 0; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.slip-card__line--gross dt, .slip-card__line--gross dd { color: var(--text); font-weight: var(--fw-bold); }
.slip-card__cta { margin-top: auto; }

/* ---- 25. Mobile: dropdowns become full-width sheets; scrollable tabs show a fade ---------- */
@media (max-width: 768px) {
  .v2 .dropdown__menu,
  .v2 .dropdown__menu--wide {
    position: fixed;
    top: calc(var(--topbar-h) + var(--shell-gap) * 2 + var(--space-1));
    left: var(--shell-gap);
    right: var(--shell-gap);
    width: auto;
    min-width: 0;
    max-height: calc(100dvh - var(--topbar-h) - var(--shell-gap) * 4);
    overflow-y: auto;
    transform-origin: top center;
  }
  .v2 .notif-list { max-height: none; }
  .v2 .tabs__list {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--space-8)), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--space-8)), transparent);
    padding-right: var(--space-8);
  }
  .v2 .tabs__list.is-scrolled-end { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 560px) {
  .glance__top { flex-direction: column; align-items: flex-start; gap: var(--space-0-5); }
  .glance__label { white-space: normal; }
  .glance__value { font-size: var(--fs-lg); }
  .glance__note { white-space: normal; }
}