/* =============================================================================
   layout.css: the app shell (spec B4 Top bar / Bottom tab bar / Rail, D).
   Desktop (>= 56.25rem): rail + top bar. Phone: top bar + bottom tab bar.
   ========================================================================== */
@layer layout {

/* ---------------------------------------------------------------- skip link */
.skip-link {
  position: absolute; left: var(--space-3); top: -100px; z-index: 100;
  background: var(--color-surface); color: var(--color-text);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-control);
  border: 2px solid var(--color-focus); font-weight: var(--weight-semibold); text-decoration: underline;
}
.skip-link:focus { top: var(--space-3); }

/* ---------------------------------------------------------------- frame */
.shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.shell__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- rail */
.rail {
  display: none;
  position: sticky; top: 0; align-self: flex-start;
  width: var(--rail-w); flex: 0 0 var(--rail-w);
  height: 100vh; height: 100dvh; overflow-y: auto;
  background: var(--color-surface); border-right: 0;
  padding: var(--space-4) var(--space-3) var(--space-4);
  flex-direction: column; gap: var(--space-4);
}
@media (min-width: 56.25rem) { .rail { display: flex; } }
.rail__wordmark {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-h-min); padding: 0 var(--space-3);
  color: var(--color-brand); text-decoration: none; /* Kuusi letters; the i-dot is the logo red */
}
.rail__logo { display: block; height: 1.5rem; width: auto; aspect-ratio: 10000 / 2446; }
.rail__context { padding: var(--space-1) var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-subtle); }
.rail__context-name { display: block; font-weight: var(--weight-semibold); line-height: var(--leading-tight); overflow-wrap: anywhere; text-wrap: balance; }
.rail__context-sub { display: block; font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
.rail__nav { display: flex; flex-direction: column; gap: var(--space-1); }
.rail__group { display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--color-border-subtle); }
.rail__group-name { padding: var(--space-1) var(--space-3); }
.rail__bottom { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--color-border-subtle); }
.rail__link {
  position: relative;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--control-h); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  color: var(--color-text); text-decoration: none; font-weight: 500;
  line-height: var(--leading-tight);
}
.rail__link .icon { width: 1.375rem; height: 1.375rem; flex: none; color: var(--color-text-muted); stroke-width: 1.75; }
.rail__link:hover { background: var(--color-surface-sunken); }
.rail__link:hover .rail__label { text-decoration: underline; }
/* Current page: a filled row (12 px corners) with Kuusi text, no marker. */
.rail__link[aria-current="page"] { font-weight: var(--weight-semibold); background: var(--color-surface-selected); color: var(--color-action); }
.rail__link[aria-current="page"] .icon { color: var(--color-action); }
.rail__label { flex: 1 1 auto; min-width: 0; }
.rail__badge { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.rail__link--quiet { font-weight: var(--weight-regular); color: var(--color-text-muted); min-height: var(--control-h-min); }

/* ---------------------------------------------------------------- top bar */
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--topbar-h); min-height: var(--topbar-h);
  padding: 0 var(--gutter);
  background: var(--color-canvas); border-bottom: 0;
  justify-content: flex-start;
}
@media (display-mode: standalone) {
  .topbar { padding-top: env(safe-area-inset-top); height: calc(var(--topbar-h) + env(safe-area-inset-top)); }
}
.topbar__start { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1 1 auto; }
.topbar__end { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.topbar__title {
  min-width: 0; margin: 0;
  font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-tight);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The yhtiö name keeps its width and the search field shrinks first; a very
   long name still ends in an ellipsis at half the bar. */
.topbar__yhtio { font-size: var(--text-md); font-weight: var(--weight-bold); flex: 0 0 auto; max-width: 50%; }
.topbar__back {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-h-min); height: var(--control-h-min); margin-left: calc(var(--space-2) * -1);
  border-radius: var(--radius-control); color: var(--color-text); flex: none;
}
.topbar__back:hover { background: var(--color-surface-sunken); }
.topbar__btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-h-min); padding: 0 var(--space-3);
  border: var(--border-w-control) solid transparent; border-radius: var(--radius-control); background: transparent;
  color: var(--color-text); font: inherit; font-weight: var(--weight-semibold); font-size: var(--text-sm);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.topbar__btn .icon { width: 1.375rem; height: 1.375rem; flex: none; }
.topbar__btn:hover { background: var(--color-surface-sunken); }
.topbar__find {
  flex: 0 1 26rem; min-width: 0; justify-content: flex-start;
  border-color: var(--color-border-control); background: var(--color-surface); color: var(--color-text-muted);
  font-weight: var(--weight-regular); font-size: var(--text-base); min-height: var(--control-h);
}
.topbar__find span { overflow: hidden; text-overflow: ellipsis; }
.topbar__find kbd {
  margin-left: auto; font: inherit; font-size: var(--text-xs); color: var(--color-text-muted);
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-tile); padding: 0 .4rem;
}
.topbar__chip {
  display: inline-flex; align-items: center; gap: var(--space-2); max-width: 22rem;
  min-height: var(--control-h-min); padding: 0 var(--space-3);
  border: var(--border-w-control) solid var(--color-border-control); border-radius: var(--radius-control);
  background: var(--color-surface); color: var(--color-text); font-weight: var(--weight-semibold);
  text-decoration: none; cursor: pointer;
}
.topbar__chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__chip .icon { width: 1.125rem; height: 1.125rem; flex: none; }
.topbar__menu-btn .topbar__initials {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--color-surface-selected); color: var(--color-action-active); font-size: var(--text-xs); font-weight: var(--weight-bold);
}

@media (max-width: 22rem) {
  .topbar { gap: var(--space-1); }
  .topbar__btn { padding: 0 var(--space-2); }
}

/* segmented control inside a yhtiö (portfolio, phone) */
.segments {
  position: sticky; top: var(--topbar-h); z-index: calc(var(--z-topbar) - 1);
  display: flex; gap: var(--space-1); padding: var(--space-2) var(--gutter);
  background: var(--color-canvas); border-bottom: 0;
  overflow-x: auto;
}
.segments__eyebrow { display: block; padding: var(--space-2) var(--gutter) 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-2); background: var(--color-canvas); }
.segments__link {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--control-h-min); padding: 0 var(--space-3);
  border-radius: var(--radius-control); border: 0; background: var(--color-surface); box-shadow: var(--shadow-raised);
  color: var(--color-text); text-decoration: none; font-weight: var(--weight-semibold); font-size: var(--text-sm);
}
.segments__link[aria-current="page"] { background: var(--color-action); color: var(--color-on-action); box-shadow: none; }
@media (min-width: 56.25rem) { .segments, .segments__eyebrow { display: none; } }

/* ---------------------------------------------------------------- main */
.main {
  flex: 1 0 auto;
  padding: var(--space-5) var(--gutter) calc(var(--space-7) + var(--tabbar-h) + env(safe-area-inset-bottom));
  outline: none;
}
@media (min-width: 56.25rem) { .main { padding-bottom: var(--space-7); } }
.main__inner { max-width: var(--content-max); margin: 0 auto; min-width: 0; }
.main__inner--wide { max-width: var(--content-max-wide); }
/* Wide screens: the column stays centred while the free space is modest, then
   keeps at most --content-shift-max from the rail instead of drifting into the
   middle of a very wide main area (Joel 2026-10-13: on a big monitor the round
   page sat far right with an empty band between it and the navigation). */
@media (min-width: 56.25rem) {
  .main__inner { margin-left: clamp(0px, (100% - var(--content-max)) / 2, var(--content-shift-max)); margin-right: auto; }
  .main__inner--wide { margin-left: clamp(0px, (100% - var(--content-max-wide)) / 2, var(--content-shift-max)); }
}
.main:focus-visible { outline: none; }

/* Legacy views keep their old spacing scale while the legacy layer loads. */
.legacy-view { --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --text-sm: .9375rem; font-size: var(--text-base); }
.legacy-view .content__header { flex-wrap: wrap; gap: var(--space-3); }

.banners:empty { display: none; }
.banners { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }

/* ---------------------------------------------------------------- tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar);
  container: tabbar / inline-size;
  background: var(--color-surface); border-top: 0; box-shadow: 0 -1px 2px rgb(26 34 37/.08), 0 -4px 12px -4px rgb(26 34 37/.10);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar__list { display: flex; margin: 0; padding: 0; list-style: none; min-height: var(--tabbar-h); }
.tabbar__list > li { flex: 1 1 0; min-width: 0; display: flex; }
.tabbar__item {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem;
  padding: var(--space-2) .125rem;
  color: var(--color-text-muted); text-decoration: none; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.15;
  text-align: center;
}
.tabbar__icon { position: relative; display: inline-flex; }
.tabbar__icon .icon { width: 1.5rem; height: 1.5rem; }
.tabbar__label { display: block; overflow-wrap: anywhere; hyphens: auto; }
.tabbar__badge {
  position: absolute; top: -.35rem; left: calc(100% - .35rem);
  min-width: 1.375rem; padding: 0 .3rem; border-radius: var(--radius-tile);
  background: var(--color-text); color: var(--color-text-inverse);
  font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1.375rem; text-align: center; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tabbar__item[aria-current="page"] { color: var(--color-action-active); font-weight: var(--weight-bold); }
.tabbar__item[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--color-action);
}
.tabbar__item[aria-current="page"] .icon { stroke-width: 2.5; }
.tabbar__item:hover { color: var(--color-text); }
@container tabbar (max-width: 359px) { .tabbar__li--reports { display: none !important; } }
html[data-text-size="large"] .tabbar__li--reports { display: none !important; }
html.kb-open .tabbar { display: none; }
@media (min-width: 56.25rem) { .tabbar { display: none; } }

/* ---------------------------------------------------------------- print */
@media print {
  .rail, .topbar, .tabbar, .segments, .segments__eyebrow, .skip-link, #toasts, dialog, .banner__close { display: none !important; }
  .main { padding: 0; }
  .main__inner { max-width: none; margin: 0; }
  body { background: #fff; }
}

}