/* Shared tab-strip primitive (`.platform-tabs`) — a server-rendered, active-aware strip of navigation
   links that reads unmistakably as a TAB SWITCHER, not two side-by-side links. Promoted to the platform
   layer from the směrnice module, which happened to need it first (M-207, coding-standards §3): nothing
   about it is domain-specific — a flex row of link tabs, a shared bottom rule, and an ACTIVE tab marked by
   a solid accent underline that overlaps that rule (the classic "selected tab" indicator) plus a lifted
   accent surface and bolder accent text, visually distinct at a glance from the muted inactive tabs.

   The tabs are NAVIGATION links (each `<a href>` targets a different route, so this is a `<nav>` with
   `aria-current="page"` on the active one — NOT an ARIA tablist, which would imply same-page panel
   switching). Active state is set server-side (the caller adds `.is-active`); no client tab JS, no inline
   styles (§4/§12). Every colour is a platform token (tokens.css), so the accent, surfaces and hover all
   follow the theme and stay dark-mode-aware. Mobile-first: the strip wraps on a narrow viewport rather
   than overflowing its container. Pairs with <x-platform::tabbed-card> to sit tabs + content in one card. */
.platform-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--platform-space-xs, 0.25rem);
    border-bottom: 1px solid var(--platform-color-border, #cfd8dc);
    margin-block-end: var(--platform-space-md, 1rem);
}

.platform-tabs__tab {
    padding: var(--platform-space-sm, 0.5rem) var(--platform-space-md, 1rem);
    color: var(--platform-color-text-muted, #57606a);
    font-weight: 500;
    text-decoration: none;
    /* Overlap the strip's 1px rule so the active tab's accent underline sits ON it, not below it. */
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    border-top-left-radius: var(--platform-radius-sm, 0.25rem);
    border-top-right-radius: var(--platform-radius-sm, 0.25rem);
    transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

/* Inactive tab hover: a muted surface + full text colour so it plainly reads as a clickable tab. */
.platform-tabs__tab:hover,
.platform-tabs__tab:focus-visible {
    color: var(--platform-color-text, #24292f);
    background-color: var(--platform-color-surface-muted, #ecf0f1);
}

.platform-tabs__tab.is-active {
    color: var(--platform-color-accent, #16a085);
    background-color: var(--platform-color-accent-surface, #d1f2eb);
    border-bottom-color: var(--platform-color-accent, #16a085);
    font-weight: 700;
}