/* Round 25a (SBR-1): shared chrome items. */

/* r.76: sidebar tables without frame or cell padding; panel-content-in provides the spacing. */
.siteclick-container .siteclick-table.siteclick-table-vertical.siteclick-table-sidebar {
    border: 0;
    border-radius: 0;
}
.siteclick-container .siteclick-table.siteclick-table-vertical.siteclick-table-sidebar table td {
    padding: 0.5rem 0;
}
.siteclick-container .siteclick-table.siteclick-table-vertical.siteclick-table-sidebar table td:first-child {
    padding-right: 0.75rem;
}
.siteclick-container .siteclick-table.siteclick-table-vertical.siteclick-table-sidebar table tr:first-child td {
    padding-top: 0;
}
.siteclick-container .siteclick-table.siteclick-table-vertical.siteclick-table-sidebar table tr:last-child td {
    padding-bottom: 0;
}
.siteclick-container .siteclick-table.siteclick-table-vertical.siteclick-table-sidebar table tr.siteclick-table-title td {
    background: transparent;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
@media screen and (max-width: 1024px) {
    .siteclick-container .siteclick-table.siteclick-table-vertical.siteclick-table-sidebar table td {
        padding: 0 !important;
    }
    .siteclick-container .siteclick-table.siteclick-table-vertical.siteclick-table-sidebar table td:first-child {
        padding-top: 0.75rem !important;
        padding-bottom: 0.25rem !important;
    }
    .siteclick-container .siteclick-table.siteclick-table-vertical.siteclick-table-sidebar table tr:first-child td:first-child {
        padding-top: 0 !important;
    }
}

/* r.62-69 (27a): title + status dot on one row, the url line carries a 16px favicon. */
.sc-card-head,
.sc-card-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.sc-card-head > .siteclick-card-title,
.sc-card-line > .sc-url {
    flex: 1 1 auto;
    min-width: 0;
}
.sc-url-favicon {
    display: inline-block;
    flex: none;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    border-radius: var(--sc-radius-sm);
    object-fit: cover;
    vertical-align: top;
}
.sc-status-dot:empty {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: var(--sc-radius-full);
    background: var(--sc-color-text-muted);
}
.sc-status-dot:is([data-sc-status="public"], [data-sc-status="external"]) {
    background: var(--sc-color-green);
}
.sc-status-dot[data-sc-status="demo"] {
    background: var(--sc-color-yellow);
}
.sc-card-meta {
    flex: none;
    font-size: 11px;
    line-height: 14px;
    color: var(--sc-color-text-muted);
}
/* r.358 (28a): room between title and url. Run 29a (r.2): 16px with and without favicon. */
.sc-card-line {
    height: 16px;
    margin-top: 4px;
}
.sc-card-line .sc-url,
.sc-row-sub > .sc-url {
    line-height: 16px;
}
/* r.346-352 (28a): the visit line under the url (site) or the plan (organisation).
   Run 31a (r.153-157): faint, 0.8rem, only for today/yesterday (VisitLabel::long). */
.sc-card-visit {
    display: block;
    margin-top: 2px;
    font-size: .8rem;
    line-height: 16px;
    color: var(--sc-color-text-faint);
}

/* Run 29a (r.3-7, r.25-29): one loop for every site/org block. The loop is its own container;
   a fixed ladder per kind sets the column count n, items fill the row exactly.
   Threshold(n) = ceil(max(2(t+g)(n-1)n/(2n-1) - g, n*min + (n-1)*g)), g = --sc-loop-gap-x (25):
   changing the gap token means recomputing the ladder. Sites t 170 / min 145 (item max 190, run 38a P24),
   step 5 lowered to 836 (= 4 x 190 + 3g + 1) so the row fills and the cap holds from n = 4; for n = 2, 3
   min 145 and max 190 cannot both fill the row, so the row fills there and the cap starts at 655 (FIX33 CSS-2),
   orgs t 300 / min 260 (--wide, the admin hubs, shares the orgs ladder). Run 32b (r.42): one ladder per kind. */
.sc-loop {
    container: sc-loop / inline-size;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-loop-gap-y) var(--sc-loop-gap-x);
}
/* 0,2,0: wins over siteclick-library.css `.np-loop` (grid) regardless of link order. */
.np-loop.sc-loop {
    display: flex;
    gap: var(--sc-loop-gap-y) var(--sc-loop-gap-x);
}
.sc-loop > * {
    --sc-loop-n: 1;
    --sc-loop-w: calc((100cqi - (var(--sc-loop-n) - 1) * var(--sc-loop-gap-x)) / var(--sc-loop-n) - .1px);
    flex: 0 0 var(--sc-loop-w);
    min-width: 0;
}
/* 0,2,0: beats shared.css `.siteclick-container .siteclick-tile { margin-bottom }`. */
.siteclick-container .sc-loop > * {
    margin: 0;
}
@container sc-loop (min-width: 315px) { .sc-loop--sites > * { --sc-loop-n: 2; } }
@container sc-loop (min-width: 485px) { .sc-loop--sites > * { --sc-loop-n: 3; } }
@container sc-loop (min-width: 655px) { .sc-loop--sites > * { --sc-loop-n: 4; } }
@container sc-loop (min-width: 836px) { .sc-loop--sites > * { --sc-loop-n: 5; } }
@container sc-loop (min-width: 1051px) { .sc-loop--sites > * { --sc-loop-n: 6; } }
@container sc-loop (min-width: 1266px) { .sc-loop--sites > * { --sc-loop-n: 7; } }
@container sc-loop (min-width: 1481px) { .sc-loop--sites > * { --sc-loop-n: 8; } }
@container sc-loop (min-width: 1696px) { .sc-loop--sites > * { --sc-loop-n: 9; } }
@container sc-loop (min-width: 1911px) { .sc-loop--sites > * { --sc-loop-n: 10; } }
@container sc-loop (min-width: 2126px) { .sc-loop--sites > * { --sc-loop-n: 11; } }
@container sc-loop (min-width: 2341px) { .sc-loop--sites > * { --sc-loop-n: 12; } }
@container sc-loop (min-width: 655px) { .sc-loop--sites > * { max-width: 190px; } }
@container sc-loop (min-width: 545px) { .sc-loop--orgs > *, .sc-loop--wide > * { --sc-loop-n: 2; } }
@container sc-loop (min-width: 830px) { .sc-loop--orgs > *, .sc-loop--wide > * { --sc-loop-n: 3; } }
@container sc-loop (min-width: 1115px) { .sc-loop--orgs > *, .sc-loop--wide > * { --sc-loop-n: 4; } }
@container sc-loop (min-width: 1420px) { .sc-loop--orgs > *, .sc-loop--wide > * { --sc-loop-n: 5; } }
@container sc-loop (min-width: 1748px) { .sc-loop--orgs > *, .sc-loop--wide > * { --sc-loop-n: 6; } }
@container sc-loop (min-width: 2075px) { .sc-loop--orgs > *, .sc-loop--wide > * { --sc-loop-n: 7; } }
@container sc-loop (min-width: 2402px) { .sc-loop--orgs > *, .sc-loop--wide > * { --sc-loop-n: 8; } }

/* r.71-75 (27a): the organisation card in two columns on its own surface (28a r.361).
   Run 29a (r.10-24, V1): visual 65x65 without inset, the mark 30x30 centred on the pattern. */
.siteclick-card.sc-org-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    background: var(--sc-color-surface);
    border-radius: var(--sc-radius-md);
}
.sc-org-card .sc-org-visual {
    --sc-visual-inset: 0;
    --sc-visual-gap: 0px;
    flex: 0 0 65px;
    width: 65px;
    height: 65px;
    margin-bottom: 0;
    padding: 0;
    place-items: center;
}
.sc-org-card .sc-org-mark {
    --sc-avatar-size: 30px;
}
/* Text budget 4 lines of 16px (64 <= 65): title clamps at 2, meta one line, visit takes the rest
   (nested clamp, MEET-LOOP-0 P3). */
.sc-org-card .sc-org-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    flex: 1 1 auto;
    align-self: center;
    min-width: 0;
    max-height: 64px;
    overflow: hidden;
    font-family: var(--sc-font-sans);
    line-height: 16px;
}
.sc-org-card .sc-org-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    color: var(--sc-color-text);
}
.sc-org-card :is(.sc-org-meta, .sc-org-visit) {
    font-size: 11px;
    color: var(--sc-color-text-muted);
}
.sc-org-card .sc-org-visit {
    font-size: .8rem;
    color: var(--sc-color-text-faint);
}
.sc-org-card .sc-org-meta {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sc-org-personal {
    font-size: 11px;
    color: var(--sc-color-text-muted);
}

/* r.64 (27a): one url notation everywhere — Geist, 11/14, muted, one line. */
.sc-url,
.siteclick-container .sc-url,
.siteclick-container .siteclick-tile-component.siteclick-tile-text.sc-url {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--sc-font-sans);
    font-size: 11px;
    line-height: 14px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--sc-color-text-subtle);
}
/* Run 31a (r.157): the loop url rows in muted; 0,3,0 and after the block above (which has 0,2,0). */
.siteclick-container .sc-card-line .sc-url,
.sc-card-line .sc-url {
    color: var(--sc-color-text-muted);
}
.siteclick-container .siteclick-tile-text > span.sc-url {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
}
.siteclick-container .siteclick-nav-item-in-text .sc-url {
    margin-left: 0;
    font-size: 11px;
}

/* r.32 (26a): a visible hairline under the search row of every sidebar head. */
.siteclick-sidebar-footer,
.siteclick-ve-linkpick-search,
.sc-ps-head {
    box-shadow: inset 0 -1px 0 var(--sc-search-line);
}
.siteclick-sidebar-footer {
    border-bottom: 0;
}

/* r.21 (27a, V2): a neutral card; the level shows only in the icon. These rules beat
   shared.css' white `.notification *` rule (2933-2970) on specificity. */
/* Above .siteclick-modal (2147483646, sc-brand.css): a failed action's message stays readable.
   Browsers clamp z-index to int32, so both values stay within it and differ. */
.siteclick-container .siteclick-notifications {
    z-index: 2147483647;
}
.siteclick-container .siteclick-notifications .notification {
    background: var(--sc-notify-bg) !important;
    color: var(--sc-notify-text);
    padding: 12px 14px;
    font-size: 12px;
}
.siteclick-container .siteclick-notifications .notification * {
    color: inherit !important;
}
.siteclick-container .siteclick-notifications .notification .notification-title {
    font-size: 13px !important;
}
.siteclick-container .siteclick-notifications .notification .notification-text,
.siteclick-container .siteclick-notifications .notification .notification-close i {
    color: var(--sc-color-text-muted) !important;
}
.siteclick-container .siteclick-notifications .notification .notification-icon i {
    color: var(--sc-color-text-subtle) !important;
}
.siteclick-container .siteclick-notifications .notification.notification-success .notification-icon i {
    color: var(--sc-color-green) !important;
}
.siteclick-container .siteclick-notifications .notification.notification-error .notification-icon i {
    color: var(--sc-color-danger) !important;
}
.siteclick-container .siteclick-notifications .notification.notification-warning .notification-icon i {
    color: var(--sc-color-orange) !important;
}

/* r.47-48 (26a): one stack bottom-left on the NTF-1 DOM contract. The newest card (last
   .notification in the DOM) is in front; at most two older cards peek out behind it without text. */
.siteclick-container .siteclick-notifications {
    --sc-ntf-w: 320px;
    display: grid;
    width: var(--sc-ntf-w);
    max-width: none;
    padding: 0;
    left: 16px;
    bottom: 16px;
}
.siteclick-container .siteclick-notifications .notification {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) 16px;
    column-gap: 10px;
    align-items: start;
    margin: 0;
    border-radius: var(--sc-radius-md);
    box-shadow: var(--sc-shadow-pop);
    transform-origin: 50% 0;
    transition: transform var(--sc-dur-slow) var(--sc-ease-out), opacity var(--sc-dur-slow) var(--sc-ease-out);
    animation: sc-ntf-in var(--sc-dur-slow) var(--sc-ease-out);
}
.siteclick-container .siteclick-notifications .notification-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.4em;
}
.siteclick-container .siteclick-notifications .notification-title {
    font-weight: 500;
}
.siteclick-container .siteclick-notifications .notification-close {
    position: static;
    border: 0;
    background: transparent;
    border-radius: var(--sc-radius-sm);
}
.siteclick-container .siteclick-notifications:not([data-sc-ntf-open]) .notification:not(:nth-last-child(1 of .notification)) {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.siteclick-container .siteclick-notifications:not([data-sc-ntf-open]) .notification:not(:nth-last-child(1 of .notification)) > * {
    visibility: hidden;
}
.siteclick-container .siteclick-notifications:not([data-sc-ntf-open]) .notification:nth-last-child(2 of .notification) {
    transform: translateY(-6px) scale(.96);
}
.siteclick-container .siteclick-notifications:not([data-sc-ntf-open]) .notification:nth-last-child(3 of .notification) {
    transform: translateY(-12px) scale(.92);
}
.siteclick-container .siteclick-notifications:not([data-sc-ntf-open]) .notification:nth-last-child(n+4 of .notification) {
    opacity: 0;
}

/* Unfolded: a list, newest at the bottom, scrolling within 60vh. */
.siteclick-container .siteclick-notifications[data-sc-ntf-open] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 60vh;
    overflow-y: auto;
}

/* Count chip ('+2') on the front card and 'Alles sluiten' under the unfolded list. */
.siteclick-container .siteclick-notifications :is(.sc-ntf-more, .sc-ntf-clear) {
    padding: 0 8px;
    border: 0;
    border-radius: var(--sc-radius-full);
    background: var(--sc-color-white);
    color: var(--sc-color-black);
    box-shadow: var(--sc-shadow-pop);
    font: 500 11px/18px var(--sc-font-sans);
    cursor: pointer;
}
.siteclick-container .siteclick-notifications .sc-ntf-more {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 2;
}
/* Both buttons come before the cards and toggle with [hidden] (NTF-1): no display here. */
.siteclick-container .siteclick-notifications .sc-ntf-clear {
    order: 1;
    align-self: flex-start;
}

/* Unfolded the chip leaves the clipped corner and closes the list from below. */
.siteclick-container .siteclick-notifications[data-sc-ntf-open] .sc-ntf-more {
    position: static;
    order: 1;
    align-self: flex-end;
}

/* Repeat counter of a merged card ('×3'). */
.siteclick-container .siteclick-notifications .notification:not([data-sc-ntf-repeat="1"])::after {
    content: '×' attr(data-sc-ntf-repeat);
    position: absolute;
    right: 12px;
    bottom: 8px;
    font-size: 11px;
    opacity: .85;
}
.siteclick-container .siteclick-notifications:not([data-sc-ntf-open]) .notification:not(:nth-last-child(1 of .notification))::after {
    visibility: hidden;
}

@keyframes sc-ntf-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@media screen and (max-width: 767px) {
    .siteclick-container .siteclick-notifications {
        --sc-ntf-w: calc(100vw - 32px);
    }
}

/* Reduced motion: only opacity, no movement. */
@media (prefers-reduced-motion: reduce) {
    .siteclick-container .siteclick-notifications .notification {
        transition: opacity var(--sc-dur-slow) linear;
        animation-name: sc-ntf-fade;
    }
}
@keyframes sc-ntf-fade {
    from {
        opacity: 0;
    }
}

/* r.78-79 (30a): hover never clips the screen. The frame was the visual itself (shared.css .sc-visual
   overflow:hidden); the pattern moves to ::before, which keeps the rounded corners, so the tilted and
   scaled .sc-visual-screen may leave the box. Specificity (0,2,0) beats shared.css .sc-visual (0,1,0)
   and .sc-visual--sm (0,1,0); loaded later in the same layouts. */
.sc-loop {
    isolation: isolate;
}
.sc-loop .sc-visual,
.siteclick-card .sc-visual {
    overflow: visible;
}
.sc-loop .sc-visual::before,
.siteclick-card .sc-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    overflow: hidden;
}
.sc-loop .sc-visual-screen,
.siteclick-card .sc-visual-screen {
    overflow: hidden;
}
.siteclick-card:hover {
    z-index: 1;
}

/* ── Counts and the '…' toggle (run 31a, TGL-2, D2/D6) ──────────────────
   The one count round (Inbox, AI, '…'): a fixed 16 × 16 round without text metrics (height + text-size-adjust, no
   aspect-ratio; padding 2px so two digits stay 16 wide, run 40a NAV-M); only '99+' grows into a pill; blue ground and white ink in both themes. Absolute in a corner (top right; the right rail moves it
   to top left in toggles.css), --inline right after the dots of the '…' toggle. The only source, also for the
   marketing and embed rail (every layout loads this file). */
.sc-count {
    position: absolute;
    top: 2px;
    right: 2px;
    display: none;
    box-sizing: border-box;
    height: 16px;
    min-width: 16px;
    aspect-ratio: auto;
    padding: 0 2px;
    border-radius: var(--sc-radius-full);
    background: var(--sc-count-bg);
    color: var(--sc-count-ink);
    font-size: 9px;
    font-weight: var(--sc-font-weight-ui);
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    pointer-events: none;
}
.sc-count.is-on {
    display: grid;
    place-items: center;
}
.sc-count--inline {
    position: static;
    display: none;
    margin-left: 4px;
}
.sc-count--inline.is-on {
    display: inline-grid;
}

/* The '…' toggle of the right rail: a button, no switch; on = the active bar ink (html.sc-rail-on from 768 px,
   html.sc-rail-m below it, as in S/20b-rail.js). */
.sc-rail-toggle {
    display: inline-flex;
    vertical-align: top;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sc-color-bar-ink);
    font: inherit;
    cursor: pointer;
}
/* Run 36a1 (KLN-1, r.2): with a count the button keeps the logo margin (12px) to the viewport edge. */
.sc-rail-toggle:has(.sc-count.is-on) {
    padding-inline: 12px;
}
@media (hover: hover) {
    .sc-rail-toggle:hover {
        color: var(--sc-color-bar-ink-active);
    }
}
@media (min-width: 768px) {
    html.sc-rail-on .sc-rail-toggle {
        color: var(--sc-color-bar-ink-active);
    }
}
@media (max-width: 767px) {
    html.sc-rail-m .sc-rail-toggle {
        color: var(--sc-color-bar-ink-active);
    }
}