/*
 * portal.css — the product's visual identity on top of Bulma 1.0 (CSS only).
 *
 * Tokens come from the prototype input/proposal-1.html and are mapped onto
 * Bulma's --bulma-* variables so Bulma components inherit them. Portal
 * component classes (.portal-*) are the only markup the Latte components under
 * templates/components/ assemble; screens never style ad hoc.
 *
 * Load order: bulma.min.css, then this file.
 */

/* ------------------------------------------------------------------ */
/* Fonts (self-hosted, variable weight; latin + latin-ext for sk/cs/hu) */
/* ------------------------------------------------------------------ */
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ */
/* Themes: design tokens and their Bulma mapping                        */
/* ------------------------------------------------------------------ */
/*
 * A Theme (0.2.0 spec §3 decision 15) is the set of custom properties below:
 * Light on :root, Dark and High contrast under [data-theme] on <html>, which
 * the layouts render from the Person Account (AccountTheme). No attribute is
 * "Follow device": Light, or the Dark tokens under prefers-color-scheme. A
 * Theme changes colours, type and density only. The component rules further
 * down name tokens and never a literal colour, radius, shadow or type size,
 * so none of them knows which Theme is on. [data-theme="light"] carries the
 * Light tokens as well, so a swatch of Profile's Look can show Light inside a
 * dark page (components/theme-swatch.latte).
 *
 * Bulma computes most of its colours from --bulma-*-l lightness variables
 * (hsl(h, s, l)), so a Theme sets those as well as the hex values the portal
 * components read; and because Bulma derives them on :root, the attribute
 * has to be on <html> itself.
 *
 * WCAG AA (MVP §6 rule 14, 0.2.0 slice-1/01): every text colour below is
 * checked against the surfaces it is used on, 4.5:1 for text under 18.66px
 * bold / 24px, 3:1 for larger text, focus rings, control boundaries and the
 * status dots and stripes that carry meaning next to their label. The values
 * that had to move from their source are commented where they stand;
 * tests/browser/styleguide.mjs runs axe's contrast rules over every Theme.
 * Disabled controls (Bulma's opacity .5, the "coming soon" languages at .55)
 * are inactive components, which WCAG 1.4.3 and 1.4.11 exempt; they stay dim
 * in every Theme so they do not read as usable.
 */
:root,
[data-theme="light"] {
    color-scheme: light;

    /* Surfaces and ink (prototype input/proposal-1.html) */
    --bg: #f4f6f8;
    --card: #ffffff;
    --card-bis: #fbfcfd;              /* card and dialog feet, hovered rows, inputs */
    --ink: #0f2233;
    --ink-soft: #48586a;              /* a list row's second line: 7.3:1 on --card */
    --ink-label: #3c4d5c;             /* labels and resting chips: 8.7:1 on --card */
    /* prototype --muted is #6b7c8c (3.9:1 on --bg); darkened to reach WCAG AA for 12–13px text */
    --muted: #5d6f80;
    --line: #e7ecf1;                  /* decorative dividers only, never a control's boundary */
    --line-strong: #cfd8e0;           /* hovered chips, the list chevron */
    /* a control's boundary (inputs, selects): the prototype drew it in --line, 1.2:1 on --card; WCAG 1.4.11 wants 3:1, 3.4:1 here */
    --line-control: #7f8d99;

    /* Brand */
    --teal: #16b8a6;
    --teal-d: #0e9e8e;
    --teal-tint: #eefaf8;             /* the active filter chip */
    --on-teal: #062a26;               /* text on --teal: 6.2:1 */
    --brand-mark-from: var(--teal);
    --brand-mark-to: #0bd0b0;
    --brand-mark-ink: #062a26;
    --navy: #152436;

    /* The top bar, the sign-in hero and the month of a date block */
    --bar-bg: var(--navy);
    --bar-bg-to: #1c3a52;             /* the hero's gradient end */
    --bar-ink: #ffffff;
    --bar-ink-soft: #c7d2dd;          /* resting nav links: 10.2:1 on --bar-bg */
    --bar-ink-muted: #9fb0bd;         /* the language switcher: 7.1:1 on --bar-bg */
    --bar-ink-button: #dfe7ee;
    --bar-hover: rgba(255, 255, 255, .08);
    --bar-outline: rgba(255, 255, 255, .45); /* the "?" ring: 4.3:1 blended on --bar-bg */
    --bar-shadow: none;               /* a line under the bar, drawn inside it */
    --bar-focus: var(--teal);         /* focus ring on the bar: 6.3:1 */
    --bar-divider: rgba(255, 255, 255, .12);
    --tab-mark: var(--teal);         /* the active tab's underline: 6.3:1 on --bar-bg */
    --avatar-bg: #2c4257;
    --avatar-ink: #ffffff;

    /* A selected item: the current page, the created Timeline entry */
    --selected-bg: var(--navy);
    --selected-ink: #ffffff;

    /* Status fills (dots, stripes, accents) and their tints */
    --blue: #2f6bff;
    --blue-bg: #e7efff;
    --amber: #e8a400;
    --amber-bg: #fdf3d7;
    --green: #1a9d63;
    --green-bg: #dcf3e6;
    --green-tint: #e9f7f0;
    --grey: #8a97a3;
    --grey-bg: #eceff2;
    --red: #d64545;
    --red-bg: #fbe1e1;
    --slate-bg: #e6eef6;              /* the low priority */
    /* text-on-tint inks: same hues as the fills above, dark enough for AA (≥ 4.5:1) on their tints and on white */
    --teal-ink: #0a756a;
    --blue-ink: #1f56d6;
    --amber-ink: #7d5600;
    --green-ink: #11704a;
    --grey-ink: #5c6a75;
    --red-ink: #b53434;
    --slate-ink: #445566;
    --on-primary: #062a26;

    /* Focus: a ring outside the control, never only a colour change (WCAG 2.4.7) */
    --focus: var(--teal-ink);         /* 5.2:1 on --bg, 5.6:1 on --card */
    --focus-width: 2px;
    --focus-offset: 2px;
    --focus-shadow: none;             /* a second ring, for a Theme whose ring colour alone is too light */

    /* Radii */
    --r: 14px;
    --r-control: 10px;
    --r-small: 8px;
    --r-tile: 12px;                   /* the brand mark, a date block, the empty-state icon */
    --r-stripe: 4px;
    --r-pill: 999px;
    --r-round: 50%;

    /* Shadows */
    --shadow: 0 1px 2px rgba(16, 34, 51, .06), 0 8px 24px rgba(16, 34, 51, .05);
    --shadow-dialog: 0 24px 60px rgba(16, 34, 51, .25);
    --backdrop: rgba(15, 34, 51, .45);

    /* Type */
    --portal-font: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --portal-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --text-body: 16px;
    --text-2xs: 11px;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-md: 14px;
    --text-base: 15px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 22px;
    --text-3xl: 26px;
    --text-4xl: 32px;
    --text-5xl: 40px;
    --link-decoration: none;          /* links inside prose and beside forms, where the Theme underlines them */

    /* Density */
    --target-min: 0px;                /* the least height and width of a control; Bulma's controls already reach 24px (WCAG 2.5.8) */
    --help-size: 30px;
    --portal-content-max: 1180px;
    --portal-topbar-height: 64px;
    --portal-tabrow-height: 46px;
    --portal-tabbar-height: 58px;
    --portal-safe-top: env(safe-area-inset-top, 0px);
    --portal-safe-bottom: env(safe-area-inset-bottom, 0px);
    --portal-safe-left: env(safe-area-inset-left, 0px);
    --portal-safe-right: env(safe-area-inset-right, 0px);

    /* Bulma scheme: hue/saturation drive borders, backgrounds and text shades */
    --bulma-scheme-h: 210;
    --bulma-scheme-s: 22%;
    --bulma-scheme-main: var(--card);
    --bulma-scheme-main-bis: var(--card-bis);
    --bulma-scheme-main-ter: var(--bg);
    --bulma-background: var(--bg);
    --bulma-border: var(--line);
    --bulma-border-weak: var(--line);
    --bulma-body-background-color: var(--bg);
    --bulma-body-color: var(--ink);
    --bulma-body-size: var(--text-body);
    --bulma-text: var(--ink);
    --bulma-text-h: 208deg;
    --bulma-text-s: 55%;
    --bulma-text-l: 13%;
    --bulma-text-strong: var(--ink);
    --bulma-text-title: var(--ink);
    --bulma-text-weak: var(--muted);
    --bulma-family-primary: var(--portal-font);
    --bulma-family-secondary: var(--portal-font);
    --bulma-family-code: var(--portal-font-mono);
    --bulma-body-line-height: 1.5;
    --bulma-radius-small: var(--r-small);
    --bulma-radius: var(--r-control);
    --bulma-radius-medium: var(--r-control);
    --bulma-radius-large: var(--r);
    --bulma-radius-rounded: var(--r-pill);
    --bulma-shadow: var(--shadow);
    --bulma-duration: 160ms;

    /* Bulma palette: teal is primary, dark teal is link, navy is dark */
    --bulma-primary-h: 173deg;
    --bulma-primary-s: 79%;
    --bulma-primary-l: 40%;
    --bulma-primary-invert-l: 8%;
    --bulma-link-h: 174deg;
    --bulma-link-s: 84%;
    --bulma-link-l: 25%;
    --bulma-link-on-scheme-l: 25%;
    --bulma-link-invert-l: 100%;
    --bulma-info-h: 223deg;
    --bulma-info-s: 100%;
    --bulma-info-l: 59%;
    --bulma-success-h: 153deg;
    --bulma-success-s: 72%;
    --bulma-success-l: 36%;
    --bulma-warning-h: 42deg;
    --bulma-warning-s: 100%;
    --bulma-warning-l: 45%;
    --bulma-warning-invert-l: 20%;
    /* prototype red #d64545 stays the --red fill; buttons use a darker shade so white text reaches AA */
    --bulma-danger-h: 0deg;
    --bulma-danger-s: 64%;
    --bulma-danger-l: 48%;
    --bulma-danger-invert-l: 100%;
    --bulma-dark-h: 213deg;
    --bulma-dark-s: 44%;
    --bulma-dark-l: 15%;
    --bulma-dark-invert-l: 100%;

    /* Bulma component variables */
    --bulma-card-radius: var(--r);
    --bulma-card-shadow: var(--shadow);
    --bulma-card-header-shadow: none;
    --bulma-card-header-padding: 18px 20px;
    --bulma-card-content-padding: 0;
    --bulma-card-footer-border-top: 1px solid var(--line);
    --bulma-box-radius: var(--r);
    --bulma-box-shadow: var(--shadow);
    --bulma-control-radius: var(--r-control);
    --bulma-control-height: 2.75em;
    --bulma-input-border-color: var(--line-control);
    --bulma-input-background-color: var(--card-bis);
    --bulma-input-color: var(--ink);
    --bulma-input-placeholder-color: var(--muted);
    --bulma-input-focus-border-color: var(--teal);
    --bulma-input-focus-shadow-alpha: 0.15;
    --bulma-input-shadow: none;
    --bulma-label-color: var(--ink-label);
    --bulma-label-weight: 600;
    --bulma-button-weight: 700;
    --bulma-button-padding-horizontal: 1.1em;
    --bulma-tag-radius: var(--r-pill);
    --bulma-tag-weight: 700;
    --bulma-table-cell-border-color: var(--line);
    --bulma-table-head-cell-color: var(--muted);
    --bulma-pagination-item-border-color: var(--line);
    --bulma-pagination-item-radius: var(--r-control);
    --bulma-menu-item-radius: var(--r-control);
    --bulma-menu-item-active-background-color: var(--selected-bg);
    --bulma-notification-radius: var(--r);
    --bulma-code: var(--navy);
    --bulma-code-background: var(--bg);
    --bulma-modal-card-head-radius: var(--r);
    --bulma-modal-card-foot-radius: var(--r);
}

/*
 * Dark (variant E "Noc", palette only). The same block twice: once for the
 * chosen Theme and once for "Follow device" on a dark device. Keep them equal;
 * tests/browser/styleguide.mjs compares the two.
 * Checked against --card and --card-bis: --muted 6.7:1 (6.3:1 on --card-bis), --teal-ink 9.4:1,
 * every status ink ≥ 7:1 on its tint over --card, --line-control 3.1:1.
 * Moved from E: its #6f7889 for the language switcher and quiet labels is
 * 3.9:1 on --card, so --bar-ink-muted is --muted; its focus ring had none, so
 * --focus is --teal-ink; control boundaries (--line-control) are new; link
 * lightness is 84% rather than E's 80%, for 4.5:1 on --card-bis as on --card.
 */
[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0b0d12;
    --card: #141821;
    --card-bis: #1a1f2a;
    --ink: #e8ebf2;
    --ink-soft: #c9cfdb;
    --ink-label: #c9cfdb;
    --muted: #97a0b0;
    --line: #262c38;
    --line-strong: #3a4254;
    --line-control: #5d6678;
    --teal: #8c9bff;
    --teal-d: #7b8cff;
    --teal-tint: rgba(140, 155, 255, .14);
    --on-teal: #0b0d12;
    --brand-mark-from: #8c9bff;
    --brand-mark-to: #c08cff;
    --brand-mark-ink: #0b0d12;
    --navy: #0b0d12;
    --bar-bg: #141821;
    --bar-bg-to: #1a1f2a;
    --bar-ink: #ffffff;
    --bar-ink-soft: #97a0b0;
    --bar-ink-muted: #97a0b0;
    --bar-ink-button: #e8ebf2;
    --bar-hover: rgba(140, 155, 255, .14);
    --bar-outline: #5d6678;
    --bar-shadow: inset 0 -1px 0 #262c38;
    --bar-focus: #aeb8ff;
    --bar-divider: #262c38;
    --tab-mark: var(--teal);         /* the active tab's underline: 7.0:1 on --bar-bg */
    --avatar-bg: #1a1f2a;
    --avatar-ink: #e8ebf2;
    --selected-bg: #e8ebf2;
    --selected-ink: #0b0d12;
    --blue: #7b93ff;
    --blue-bg: rgba(110, 140, 255, .16);
    --amber: #f5b428;
    --amber-bg: rgba(245, 180, 40, .15);
    --green: #34d399;
    --green-bg: rgba(52, 211, 153, .14);
    --green-tint: rgba(52, 211, 153, .14);
    --grey: #6b7485;
    --grey-bg: rgba(160, 170, 190, .14);
    --red: #f87171;
    --red-bg: rgba(248, 113, 113, .15);
    --slate-bg: rgba(160, 170, 190, .14);
    --teal-ink: #aeb8ff;
    --blue-ink: #aebdff;
    --amber-ink: #f6c65b;
    --green-ink: #74e3b5;
    --grey-ink: #b3bccb;
    --red-ink: #fca5a5;
    --slate-ink: #b3bccb;
    --on-primary: #0b0d12;
    --focus: #aeb8ff;
    --shadow: none;
    --shadow-dialog: 0 24px 60px rgba(0, 0, 0, .6);
    --backdrop: rgba(0, 0, 0, .6);

    /* Bulma's own dark scheme (bulma.css 1.0.4, prefers-color-scheme block), on variant E's hue */
    --bulma-scheme-h: 222;
    --bulma-scheme-s: 24%;
    --bulma-scheme-brightness: dark;
    --bulma-scheme-main-l: 10%;
    --bulma-scheme-main-bis-l: 13%;
    --bulma-scheme-main-ter-l: 6%;
    --bulma-scheme-invert-l: 100%;
    --bulma-scheme-invert-bis-l: 98%;
    --bulma-scheme-invert-ter-l: 96%;
    --bulma-soft-l: 20%;
    --bulma-bold-l: 90%;
    --bulma-soft-invert-l: 90%;
    --bulma-bold-invert-l: 20%;
    --bulma-background-l: 13%;
    --bulma-border-weak-l: 18%;
    --bulma-border-l: 38%;
    --bulma-text-h: 222deg;
    --bulma-text-s: 30%;
    --bulma-text-l: 93%;
    --bulma-text-weak-l: 65%;
    --bulma-text-strong-l: 93%;
    --bulma-text-title-l: 100%;
    --bulma-hover-background-l-delta: 5%;
    --bulma-active-background-l-delta: 10%;
    --bulma-hover-border-l-delta: 10%;
    --bulma-active-border-l-delta: 20%;
    --bulma-hover-color-l-delta: 5%;
    --bulma-active-color-l-delta: 10%;
    --bulma-shadow-h: 0deg;
    --bulma-shadow-s: 0%;
    --bulma-shadow-l: 100%;
    --bulma-light-l: 20%;
    --bulma-light-invert-l: 90%;
    --bulma-dark-l: 90%;
    --bulma-dark-invert-l: 8%;
    --bulma-primary-h: 232deg;
    --bulma-primary-s: 100%;
    --bulma-primary-l: 77%;
    --bulma-primary-invert-l: 8%;
    --bulma-link-h: 232deg;
    --bulma-link-s: 100%;
    --bulma-link-l: 84%;
    --bulma-link-on-scheme-l: 84%;
    --bulma-link-invert-l: 8%;
    --bulma-info-on-scheme-l: 80%;
    --bulma-success-on-scheme-l: 70%;
    --bulma-warning-on-scheme-l: 65%;
    --bulma-danger-on-scheme-l: 80%;
    --bulma-code: var(--ink);
    --bulma-code-background: var(--card-bis);
    /* .is-light tags: a dark tint with a light ink, not Bulma's light tint */
    --bulma-primary-light-invert-l: 80%;
    --bulma-link-light-invert-l: 84%;
    --bulma-info-light-invert-l: 84%;
    --bulma-success-light-invert-l: 75%;
    --bulma-warning-light-invert-l: 70%;
    --bulma-danger-light-invert-l: 84%;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;

        --bg: #0b0d12;
        --card: #141821;
        --card-bis: #1a1f2a;
        --ink: #e8ebf2;
        --ink-soft: #c9cfdb;
        --ink-label: #c9cfdb;
        --muted: #97a0b0;
        --line: #262c38;
        --line-strong: #3a4254;
        --line-control: #5d6678;
        --teal: #8c9bff;
        --teal-d: #7b8cff;
        --teal-tint: rgba(140, 155, 255, .14);
        --on-teal: #0b0d12;
        --brand-mark-from: #8c9bff;
        --brand-mark-to: #c08cff;
        --brand-mark-ink: #0b0d12;
        --navy: #0b0d12;
        --bar-bg: #141821;
        --bar-bg-to: #1a1f2a;
        --bar-ink: #ffffff;
        --bar-ink-soft: #97a0b0;
        --bar-ink-muted: #97a0b0;
        --bar-ink-button: #e8ebf2;
        --bar-hover: rgba(140, 155, 255, .14);
        --bar-outline: #5d6678;
        --bar-shadow: inset 0 -1px 0 #262c38;
        --bar-focus: #aeb8ff;
        --bar-divider: #262c38;
        --tab-mark: var(--teal);         /* the active tab's underline: 7.0:1 on --bar-bg */
        --avatar-bg: #1a1f2a;
        --avatar-ink: #e8ebf2;
        --selected-bg: #e8ebf2;
        --selected-ink: #0b0d12;
        --blue: #7b93ff;
        --blue-bg: rgba(110, 140, 255, .16);
        --amber: #f5b428;
        --amber-bg: rgba(245, 180, 40, .15);
        --green: #34d399;
        --green-bg: rgba(52, 211, 153, .14);
        --green-tint: rgba(52, 211, 153, .14);
        --grey: #6b7485;
        --grey-bg: rgba(160, 170, 190, .14);
        --red: #f87171;
        --red-bg: rgba(248, 113, 113, .15);
        --slate-bg: rgba(160, 170, 190, .14);
        --teal-ink: #aeb8ff;
        --blue-ink: #aebdff;
        --amber-ink: #f6c65b;
        --green-ink: #74e3b5;
        --grey-ink: #b3bccb;
        --red-ink: #fca5a5;
        --slate-ink: #b3bccb;
        --on-primary: #0b0d12;
        --focus: #aeb8ff;
        --shadow: none;
        --shadow-dialog: 0 24px 60px rgba(0, 0, 0, .6);
        --backdrop: rgba(0, 0, 0, .6);

        /* Bulma's own dark scheme (bulma.css 1.0.4, prefers-color-scheme block), on variant E's hue */
        --bulma-scheme-h: 222;
        --bulma-scheme-s: 24%;
        --bulma-scheme-brightness: dark;
        --bulma-scheme-main-l: 10%;
        --bulma-scheme-main-bis-l: 13%;
        --bulma-scheme-main-ter-l: 6%;
        --bulma-scheme-invert-l: 100%;
        --bulma-scheme-invert-bis-l: 98%;
        --bulma-scheme-invert-ter-l: 96%;
        --bulma-soft-l: 20%;
        --bulma-bold-l: 90%;
        --bulma-soft-invert-l: 90%;
        --bulma-bold-invert-l: 20%;
        --bulma-background-l: 13%;
        --bulma-border-weak-l: 18%;
        --bulma-border-l: 38%;
        --bulma-text-h: 222deg;
        --bulma-text-s: 30%;
        --bulma-text-l: 93%;
        --bulma-text-weak-l: 65%;
        --bulma-text-strong-l: 93%;
        --bulma-text-title-l: 100%;
        --bulma-hover-background-l-delta: 5%;
        --bulma-active-background-l-delta: 10%;
        --bulma-hover-border-l-delta: 10%;
        --bulma-active-border-l-delta: 20%;
        --bulma-hover-color-l-delta: 5%;
        --bulma-active-color-l-delta: 10%;
        --bulma-shadow-h: 0deg;
        --bulma-shadow-s: 0%;
        --bulma-shadow-l: 100%;
        --bulma-light-l: 20%;
        --bulma-light-invert-l: 90%;
        --bulma-dark-l: 90%;
        --bulma-dark-invert-l: 8%;
        --bulma-primary-h: 232deg;
        --bulma-primary-s: 100%;
        --bulma-primary-l: 77%;
        --bulma-primary-invert-l: 8%;
        --bulma-link-h: 232deg;
        --bulma-link-s: 100%;
        --bulma-link-l: 84%;
        --bulma-link-on-scheme-l: 84%;
        --bulma-link-invert-l: 8%;
        --bulma-info-on-scheme-l: 80%;
        --bulma-success-on-scheme-l: 70%;
        --bulma-warning-on-scheme-l: 65%;
        --bulma-danger-on-scheme-l: 80%;
        --bulma-code: var(--ink);
        --bulma-code-background: var(--card-bis);
        /* .is-light tags: a dark tint with a light ink, not Bulma's light tint */
        --bulma-primary-light-invert-l: 80%;
        --bulma-link-light-invert-l: 84%;
        --bulma-info-light-invert-l: 84%;
        --bulma-success-light-invert-l: 75%;
        --bulma-warning-light-invert-l: 70%;
        --bulma-danger-light-invert-l: 84%;
    }
}

/*
 * High contrast (variant I "Prístupný"): black on white, blue links, a yellow
 * focus marker, 19px type and controls of at least 44px. Status inks are
 * GOV.UK's tag colours, each ≥ 6:1 on its tint; links 5.2:1
 * and --muted 9.0:1 on white, white on the green primary button 6.2:1.
 */
[data-theme="contrast"] {
    color-scheme: light;

    --bg: #ffffff;
    --card: #ffffff;
    --card-bis: #f3f2f1;
    --ink: #0b0c0c;
    --ink-soft: #0b0c0c;
    --ink-label: #0b0c0c;
    --muted: #484949;
    --line: #b1b4b6;
    --line-strong: #0b0c0c;
    --line-control: #0b0c0c;
    --teal: #1d70b8;
    --teal-d: #003078;
    --teal-tint: #ffffff;
    --on-teal: #ffffff;
    --brand-mark-from: #ffffff;
    --brand-mark-to: #ffffff;
    --brand-mark-ink: #0b0c0c;
    --navy: #0b0c0c;
    --bar-bg: #0b0c0c;
    --bar-bg-to: #0b0c0c;
    --bar-ink: #ffffff;
    --bar-ink-soft: #ffffff;
    --bar-ink-muted: #ffffff;
    --bar-ink-button: #ffffff;
    --bar-hover: #383f43;
    --bar-outline: #ffffff;
    --bar-shadow: inset 0 -5px 0 #1d70b8;
    --bar-focus: #ffdd00;
    --bar-divider: #383f43;
    --tab-mark: #ffffff;            /* the active tab's underline: 19.6:1 on --bar-bg, white over the bar's blue edge */
    --avatar-bg: #ffffff;
    --avatar-ink: #0b0c0c;
    --selected-bg: #0b0c0c;
    --selected-ink: #ffffff;
    --blue: #1d70b8;
    --blue-bg: #d2e2f1;
    --amber: #f47738;
    --amber-bg: #fcd6a4;
    --green: #00703c;
    --green-bg: #cce2d8;
    --green-tint: #cce2d8;
    --grey: #505a5f;
    --grey-bg: #e5e6e7;
    --red: #d4351c;
    --red-bg: #f4cdc6;
    --slate-bg: #e5e6e7;
    --teal-ink: #1d70b8;
    --blue-ink: #0c2d4a;
    --amber-ink: #4a2700;
    --green-ink: #005a30;
    --grey-ink: #282d30;
    --red-ink: #2a0b06;
    --slate-ink: #282d30;
    --on-primary: #ffffff;
    /* the yellow marker alone is 1.4:1 on white; the black ring around it makes the pair 19.6:1 on white and 14.6:1 against the yellow */
    --focus: #ffdd00;
    --focus-width: 3px;
    --focus-offset: 0px;
    --focus-shadow: 0 0 0 6px #0b0c0c;
    --r: 0px;
    --r-control: 0px;
    --r-small: 0px;
    --r-tile: 0px;
    --r-stripe: 0px;
    --r-pill: 0px;
    --shadow: none;
    --shadow-dialog: none;
    --backdrop: rgba(11, 12, 12, .7);

    /* Type: 19px body, as public-service design systems set it */
    --text-body: 19px;
    --text-2xs: 14px;
    --text-xs: 16px;
    --text-sm: 16px;
    --text-md: 19px;
    --text-base: 19px;
    --text-lg: 19px;
    --text-xl: 24px;
    --text-2xl: 32px;
    --text-3xl: 32px;
    --text-4xl: 36px;
    --text-5xl: 48px;
    --link-decoration: underline;

    /* Density: every control at least 44px */
    --target-min: 44px;
    --help-size: 44px;
    --portal-topbar-height: 68px;
    --portal-tabrow-height: 52px;
    --portal-tabbar-height: 64px;

    --bulma-scheme-h: 0;
    --bulma-scheme-s: 0%;
    --bulma-border-l: 30%;
    --bulma-text-h: 180deg;
    --bulma-text-s: 4%;
    --bulma-text-l: 4%;
    --bulma-text-weak-l: 28%;
    --bulma-primary-h: 153deg;
    --bulma-primary-s: 100%;
    --bulma-primary-l: 22%;
    --bulma-primary-invert-l: 100%;
    --bulma-link-h: 208deg;
    --bulma-link-s: 73%;
    --bulma-link-l: 42%;
    --bulma-link-on-scheme-l: 42%;
    --bulma-link-invert-l: 100%;
    --bulma-info-h: 208deg;
    --bulma-info-s: 73%;
    --bulma-info-l: 42%;
    --bulma-success-h: 153deg;
    --bulma-success-s: 100%;
    --bulma-success-l: 22%;
    --bulma-warning-h: 20deg;
    --bulma-warning-s: 90%;
    --bulma-warning-l: 58%;
    --bulma-warning-invert-l: 4%;
    --bulma-danger-h: 8deg;
    --bulma-danger-s: 77%;
    --bulma-danger-l: 47%;
    --bulma-danger-invert-l: 100%;
    --bulma-dark-h: 180deg;
    --bulma-dark-s: 4%;
    --bulma-dark-l: 4%;
    --bulma-control-height: 2.4em;
    --bulma-input-focus-shadow-alpha: 0;
}

html {
    background: var(--bg);
    font-size: var(--text-body);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--portal-font);
    color: var(--ink);
    background: var(--bg);
    min-height: 100vh;
    min-height: 100dvh;
}

/* Focus: the Theme's ring on everything focusable. !important because Bulma
   removes the outline of some controls (select) and draws its own shadows. */
:focus-visible {
    outline: var(--focus-width) solid var(--focus) !important;
    outline-offset: var(--focus-offset) !important;
    box-shadow: var(--focus-shadow) !important;
}

.portal-topbar,
.portal-auth__hero {
    --focus: var(--bar-focus);
}

/* Links inside prose and the small text links beside forms: underlined where the Theme says so. */
.content a:not(.button),
.portal-footer a,
.portal-auth__footer a,
.portal-row-between a,
.portal-card__action {
    text-decoration-line: var(--link-decoration);
}

/* Density: the Theme's least target size (0 in Light and Dark, 44px in High contrast). */
.button,
.input,
.select select,
.checkbox,
.radio,
.tabs a,
.pagination-link,
.pagination-previous,
.pagination-next,
.portal-skip,
.portal-nav__link,
.portal-lang__link,
.portal-user__button,
.portal-user__menu a,
.portal-user__menu button,
.portal-tabbar__link,
.portal-card__action,
.portal-profile-index__link,
.portal-app__details summary,
.portal-filter-chip,
.portal-focus__option,
.portal-focus__toggle,
.portal-event-row__actions a,
.portal-event-row__actions button,
.portal-notice__more,
.portal-removable-chip__remove {
    min-height: var(--target-min);
}

/* A standing notification in the status tints and inks, like the badges. The class
   doubled outranks Bulma's .notification.is-<colour>.is-light, which writes its own lightness. */
.notification.notification.is-light {
    background: var(--note-bg);
    color: var(--note-ink);
}

.notification.is-info { --note-bg: var(--blue-bg); --note-ink: var(--blue-ink); }
.notification.is-success { --note-bg: var(--green-bg); --note-ink: var(--green-ink); }
.notification.is-warning { --note-bg: var(--amber-bg); --note-ink: var(--amber-ink); }
.notification.is-danger { --note-bg: var(--red-bg); --note-ink: var(--red-ink); }

.portal-toast .delete {
    --bulma-delete-dimensions: max(1.25rem, var(--target-min));
}

/* ------------------------------------------------------------------ */
/* App shell                                                           */
/* ------------------------------------------------------------------ */
.portal-wrap {
    max-width: var(--portal-content-max);
    margin: 0 auto;
    padding-inline: calc(24px + var(--portal-safe-left)) calc(24px + var(--portal-safe-right));
}

.portal-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.portal-skip {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 100;
    padding: 8px 14px;
    background: var(--teal);
    color: var(--on-teal);
    border-radius: var(--r-control);
    font-weight: 700;
}

.portal-skip:focus {
    top: 12px;
}

.portal-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bar-bg);
    box-shadow: var(--bar-shadow);
    color: var(--bar-ink);
    padding-top: var(--portal-safe-top);
}

.portal-topbar__inner {
    display: flex;
    align-items: center;
    gap: 28px;
    height: var(--portal-topbar-height);
}

.portal-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--bar-ink);
    text-decoration: none;
    white-space: nowrap;
}

.portal-brand:hover,
.portal-brand:focus {
    color: var(--bar-ink);
}

.portal-brand__mark {
    width: 34px;
    height: 34px;
    border-radius: var(--r-tile);
    background: linear-gradient(135deg, var(--brand-mark-from), var(--brand-mark-to));
    display: grid;
    place-items: center;
    color: var(--brand-mark-ink);
    font-weight: 900;
    font-size: var(--text-md);
}

/* The tab row (0.2.0 spec §3 decision 9): below the top bar, on the bar's own
   colours, so its ink keeps the contrast recorded for the bar in every Theme.
   It had shared the bar's row, where between 861 and ~1000 px (and below
   1280 px in High contrast) the tabs left the Perspective switcher no label. */
.portal-tabrow {
    box-shadow: inset 0 1px 0 var(--bar-divider);
}

.portal-nav {
    display: flex;
    gap: 28px;
    height: var(--portal-tabrow-height);
    align-items: stretch;
}

.portal-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--bar-ink-soft);
    text-decoration: none;
    font-size: var(--text-md);
    font-weight: 500;
    padding: 6px 0;
}

.portal-nav__link:hover,
.portal-nav__link:focus {
    color: var(--bar-ink);
}

.portal-nav__link.is-active {
    color: var(--bar-ink);
}

.portal-nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--tab-mark);
    border-radius: var(--r-stripe);
}

/* Below a wide screen the avatar alone stands for the account, which leaves the
   Perspective switcher its label (High contrast's larger type needs it most). */
@media (max-width: 1100px) {
    .portal-user__button > span:not(.portal-avatar) {
        display: none;
    }
}

/* The open Issues beside "Issues": plain text, not a badge (spec §2, ticket 4-03). */
.portal-nav__count {
    font-weight: 600;
    opacity: 0.75;
    margin-left: 6px;
}

.portal-removable-chip {
    gap: 6px;
}

.portal-removable-chip__remove {
    color: inherit;
    font-size: var(--text-lg);
    line-height: 1;
    text-decoration: none;
    padding: 0 2px;
}

.portal-removable-chip__remove:hover,
.portal-removable-chip__remove:focus-visible {
    color: var(--ink);
}

.portal-public-badge {
    margin-left: 6px;
    vertical-align: middle;
}

/* The bar's end keeps its size; the Perspective switcher before it is what shortens. */
.portal-topbar__end {
    margin-left: auto;
    display: flex;
    flex: none;
    align-items: center;
    gap: 18px;
    white-space: nowrap;
}

/* The "?" of a screen's header (spec §4.14 decision 11): opens the screen's Journey of the Manual. */
.portal-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--help-size);
    height: var(--help-size);
    border-radius: var(--r-round);
    border: 1.5px solid var(--bar-outline);
    color: var(--bar-ink-button);
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.portal-help:hover,
.portal-help:focus-visible {
    background: var(--bar-hover);
    border-color: var(--bar-ink);
    color: var(--bar-ink);
}

.portal-auth__help {
    display: flex;
    justify-content: flex-end;
    margin: -16px -16px 4px 0;
}

.portal-auth__help .portal-help {
    border-color: var(--line);
    color: var(--muted);
}

.portal-auth__help .portal-help:hover,
.portal-auth__help .portal-help:focus-visible {
    background: var(--bg);
    border-color: var(--muted);
    color: var(--ink);
}

.portal-lang {
    display: flex;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--bar-ink-muted);
    list-style: none;
    margin: 0;
    padding: 0;
}

.portal-lang__item + .portal-lang__item::before {
    content: "·";
    margin-right: 6px;
}

.portal-lang-form {
    display: contents;
}

.portal-lang__link {
    color: var(--bar-ink-muted);
    text-decoration: none;
    /* SK/EN are submit buttons of the language form; look like the links of the prototype */
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.portal-lang__link:hover,
.portal-lang__link:focus {
    color: var(--bar-ink);
}

.portal-lang__link.is-active {
    color: var(--bar-ink);
    font-weight: 700;
}

.portal-lang__link.is-disabled {
    opacity: .55;
    cursor: not-allowed;
}

.portal-user {
    position: relative;
}

.portal-user__button {
    display: flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: var(--text-md);
    color: var(--bar-ink-button);
    background: none;
    border: 0;
    padding: 4px 6px;
    border-radius: var(--r-control);
    cursor: pointer;
}

.portal-user__button:hover,
.portal-user__button:focus-visible {
    background: var(--bar-hover);
    color: var(--bar-ink);
}

.portal-avatar {
    width: 30px;
    height: 30px;
    border-radius: var(--r-round);
    background: var(--avatar-bg);
    display: grid;
    place-items: center;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--avatar-ink);
}

.portal-user__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 200px;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-control);
    box-shadow: var(--shadow);
    padding: 6px;
    z-index: 40;
}

.portal-user__menu a,
.portal-user__menu button {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: var(--text-md);
    color: var(--ink);
    background: none;
    border: 0;
    padding: 8px 10px;
    border-radius: var(--r-small);
    text-decoration: none;
    cursor: pointer;
}

.portal-user__menu a:hover,
.portal-user__menu a:focus,
.portal-user__menu button:hover,
.portal-user__menu button:focus {
    background: var(--bg);
}

/* Between the account menu's links and its Sign out button (0.2.0 spec §3 decision 13). */
.portal-user__divider {
    margin: 6px 0;
    height: 1px;
    background: var(--line);
    border: 0;
}

/*
 * The Perspective switcher (0.2.0 spec §3 decision 2, ADR-0014): first after
 * the brand, "Manager · <organisation>" or "Resident · <address>, <Units>".
 * One Perspective is plain text; several a dropdown of one form per choice.
 * The label shortens with an ellipsis rather than pushing the bar's end off a
 * phone.
 */
.portal-perspective {
    position: relative;
    min-width: 0;
    color: var(--bar-ink-button);
    font-size: var(--text-md);
}

.portal-perspective__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-perspective--single {
    display: flex;
}

.portal-perspective__button {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    font: inherit;
    color: inherit;
    background: none;
    border: 1.5px solid var(--bar-outline);
    padding: 4px 10px;
    border-radius: var(--r-control);
    cursor: pointer;
}

.portal-perspective__button:hover,
.portal-perspective__button:focus-visible {
    background: var(--bar-hover);
    color: var(--bar-ink);
}

.portal-perspective__menu {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    min-width: 260px;
    max-width: min(420px, calc(100vw - 32px));
    list-style: none;
    margin: 0;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-control);
    box-shadow: var(--shadow);
    padding: 6px;
    z-index: 40;
}

.portal-perspective__item {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: var(--text-md);
    color: var(--ink);
    background: none;
    border: 0;
    padding: 8px 10px;
    border-radius: var(--r-small);
    cursor: pointer;
}

.portal-perspective__menu button.portal-perspective__item:hover,
.portal-perspective__menu button.portal-perspective__item:focus-visible {
    background: var(--bg);
}

.portal-perspective__item.is-current {
    font-weight: 700;
    cursor: default;
}

.portal-main {
    flex: 1;
    padding-block: 8px calc(40px + var(--portal-safe-bottom));
}

.portal-footer {
    color: var(--muted);
    font-size: var(--text-xs);
    text-align: center;
    padding-block: 24px calc(12px + var(--portal-safe-bottom));
}

.portal-footer a {
    color: var(--muted);
}

/* Mobile bottom tab bar: at most five tabs (0.2.0 spec §3 decisions 10–11). The cells
   share the width equally, but an unbreakable label keeps its cell at least as wide
   as itself (the flex item's automatic minimum), so a long one ("Nehnuteľnosti")
   takes room from the short ones rather than overflowing; with the 2px inset five
   Slovak labels fit 360px in every Theme, High contrast's 14px included (measured:
   333px of labels). */
.portal-tabbar {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 30;
    background: var(--card);
    border-top: 1px solid var(--line);
    padding-bottom: var(--portal-safe-bottom);
}

.portal-tabbar__link {
    flex: 1;
    padding-inline: 2px;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: var(--portal-tabbar-height);
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
}

.portal-tabbar__link.is-active {
    color: var(--teal-ink);
}

.portal-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.button .portal-icon {
    width: 18px;
    height: 18px;
}

@media (max-width: 860px) {
    .portal-tabrow,
    .portal-lang {
        display: none;
    }

    :root {
        --portal-topbar-height: 56px;
        --portal-tabrow-height: 0px;
    }

    .portal-topbar__inner {
        gap: 12px;
    }

    /* The mark and the avatar alone leave the Perspective the room it needs on a phone. */
    .portal-topbar .portal-brand > span:not(.portal-brand__mark),
    .portal-user__button > span:not(.portal-avatar) {
        display: none;
    }

    .portal-tabbar {
        display: flex;
    }

    .portal-main {
        padding-bottom: calc(var(--portal-tabbar-height) + 24px + var(--portal-safe-bottom));
    }

    .portal-footer {
        padding-bottom: calc(var(--portal-tabbar-height) + 12px + var(--portal-safe-bottom));
    }

    .portal-wrap {
        padding-inline: calc(16px + var(--portal-safe-left)) calc(16px + var(--portal-safe-right));
    }
}

/* Auth layout: centred card with hero + form, as the prototype login strip */
.portal-auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: calc(24px + var(--portal-safe-top)) 16px calc(24px + var(--portal-safe-bottom));
}

.portal-auth__card {
    width: 100%;
    max-width: 900px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.portal-auth__hero {
    background: linear-gradient(150deg, var(--bar-bg), var(--bar-bg-to));
    color: var(--bar-ink);
    padding: 40px;
}

.portal-auth__hero .portal-brand__mark {
    width: 44px;
    height: 44px;
    border-radius: var(--r-tile);
    margin-bottom: 20px;
}

.portal-auth__hero h1,
.portal-auth__hero-title {
    font-size: var(--text-3xl);
    margin: 0 0 10px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--bar-ink);
}

.portal-auth__hero p {
    color: var(--bar-ink-soft);
    font-size: var(--text-md);
    max-width: 320px;
}

.portal-auth__form {
    padding: 40px;
}

.portal-auth__form h2 {
    margin: 0 0 4px;
    font-size: var(--text-xl);
    font-weight: 700;
}

.portal-auth__sub {
    color: var(--muted);
    font-size: var(--text-sm);
    margin-bottom: 20px;
}

.portal-auth__waiting {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.portal-auth__waiting li {
    padding: 10px 0;
    border-top: 1px solid var(--line);
    font-size: var(--text-md);
}

.portal-auth__waiting small {
    color: var(--muted);
}

.portal-auth__footer {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--muted);
    margin-top: 16px;
}

.portal-auth__footer a {
    color: var(--teal-ink);
    font-weight: 700;
}

.portal-auth__legal {
    margin-top: 18px;
    font-size: var(--text-xs);
    color: var(--muted);
    text-align: center;
}

@media (max-width: 760px) {
    .portal-auth__card {
        grid-template-columns: 1fr;
    }

    .portal-auth__hero,
    .portal-auth__form {
        padding: 28px 22px;
    }
}

/* Plain layout */
.portal-plain {
    max-width: 720px;
    margin: 0 auto;
    padding: calc(40px + var(--portal-safe-top)) 24px calc(40px + var(--portal-safe-bottom));
}

/* The privacy notice (ticket 7-07): long addresses and setting names wrap at 390 px */
.portal-notice {
    overflow-wrap: anywhere;
}

.portal-notice h2 a {
    color: inherit;
}

.portal-notice__operator dt {
    font-weight: 600;
}

.portal-notice__operator dd {
    margin: 0 0 12px;
}

/* ------------------------------------------------------------------ */
/* Components                                                          */
/* ------------------------------------------------------------------ */

/* page-header */
.portal-page-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 24px 0 14px;
}

.portal-page-header__title {
    font-size: var(--text-2xl);
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
}

.portal-page-header__subtitle {
    color: var(--muted);
    font-size: var(--text-sm);
}

.portal-page-header__actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.portal-section-label {
    font-size: var(--text-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 26px 0 12px;
    font-weight: 700;
}

/* card */
.portal-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.portal-card + .portal-card,
.portal-public-issues + .portal-public-issues {
    margin-top: 18px;
}

/*
 * "Affects me too" under a Public Issue (0.2.0 spec §10 decisions 1 and 2):
 * the count on the left, the button on the right, under the row itself. The
 * row gives up its divider to it, so one Issue is one band whether it carries
 * the line or not.
 */
.portal-list-item:has(+ .portal-affected) {
    border-bottom: 0;
    padding-bottom: 8px;
}

.portal-affected {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 0 20px 16px;
    border-bottom: 1px solid var(--line);
}

.portal-list > :last-child > .portal-affected {
    border-bottom: 0;
}

.portal-affected__count {
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 760px) {
    .portal-affected {
        padding: 0 16px 14px;
    }
}

.portal-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.portal-card__title {
    font-size: var(--text-lg);
    margin: 0;
    font-weight: 700;
}

.portal-card__action {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--teal-ink);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.portal-card__body {
    padding: 20px;
}

.portal-card__body.is-flush {
    padding: 0;
}

.portal-card__foot {
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: var(--card-bis);
}

/* stat-card (KPI) */
.portal-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 22px;
}

.portal-stat-card {
    display: block;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 22px;
    box-shadow: var(--shadow);
    color: inherit;
    text-decoration: none;
}

/* Stat cards inside a panel (the styleguide): a grid row, not a stack of cards. */
.portal-stats > .portal-card + .portal-card,
.portal-card__body > .portal-stats:first-child {
    margin-top: 0;
}

.portal-stats + .portal-table-wrap {
    margin-top: 18px;
}

.portal-stat-card.is-accented {
    box-shadow: inset 4px 0 0 var(--stat-accent, var(--blue)), var(--shadow);
}

.portal-stat-card__value {
    font-size: var(--text-5xl);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
}

.portal-stat-card .portal-status,
.portal-stat-card__label {
    margin-top: 14px;
}

.portal-stat-card__label {
    display: block;
    font-size: var(--text-sm);
    color: var(--muted);
    font-weight: 600;
}

@media (max-width: 860px) {
    .portal-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .portal-stat-card {
        padding: 16px;
    }

    .portal-stat-card__value {
        font-size: var(--text-4xl);
    }
}

/* two-column grid (both Homes) */
.portal-cols {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 18px;
    margin-top: 14px;
}

.portal-cols > * {
    min-width: 0;
}

.portal-cols > .portal-card + .portal-card {
    margin-top: 0;
}

.portal-cols--sidebar {
    grid-template-columns: 260px 1fr;
    align-items: start;
}

@media (max-width: 860px) {
    .portal-cols,
    .portal-cols--sidebar {
        grid-template-columns: 1fr;
    }
}

/* the Resident's Notice Board (ticket 5-07): its two columns, Notice cards, Documents and the collapsed past Events */
.portal-board__column {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.portal-board__column > * > .portal-card,
.portal-board__column .portal-card + .portal-card {
    margin-top: 0;
}

/* the Resident's Home (0.2.0 slice-2/02): the compact Entrance card, one column when nothing is on the side, each item with its Seen ✓ */
.portal-home__entrance-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.portal-home__entrance-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.portal-home__entrance-text p + p {
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--text-sm);
}

.portal-home__single {
    margin-top: 14px;
    max-width: 760px;
}

.portal-home__entrance > .portal-card {
    margin-top: 0;
}

.portal-home__kind {
    font-size: var(--text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 4px;
}

/* a Manager's Home (0.2.0 slice-2/04): a pending request with its Approve, "What residents see" and its linked titles */
.portal-home__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 12px 18px;
}

.portal-home__row + .portal-home__row {
    border-top: 1px solid var(--line);
}

.portal-home__row-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.portal-home__meta {
    color: var(--muted);
    font-size: var(--text-sm);
}

.portal-home__heading {
    font-size: var(--text-lg);
    margin: 0;
}

.portal-home__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.portal-home__links li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    overflow-wrap: anywhere;
}

.portal-home__item .portal-document {
    padding: 0;
}

.portal-seen {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.portal-page-header__actions .portal-seen {
    margin-top: 0;
}

.portal-board__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.portal-notices {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.portal-notices > * + * {
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.portal-notice__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.portal-notice__title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
}

.portal-notice__body {
    margin: 6px 0 0;
    overflow-wrap: anywhere;
}

.portal-notice__body.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}

.portal-notice__more {
    background: none;
    border: 0;
    padding: 0;
    margin-top: 4px;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--teal-ink);
    cursor: pointer;
}

.portal-notice__meta,
.portal-document__meta {
    font-size: var(--text-sm);
    color: var(--muted);
    margin: 6px 0 0;
}

/* A Poll with its results (§4.8 decision 5): totals as native <progress> bars, never a Unit's answer */
.portal-polls {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.portal-polls > * + * {
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

/* The Board's lately closed Polls under its open ones (ticket 6-05) */
.portal-polls__group {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--muted);
    margin: 20px 0 12px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.portal-poll__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.portal-poll__title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
}

.portal-poll__description {
    margin: 6px 0 0;
    font-size: var(--text-md);
    overflow-wrap: anywhere;
}

.portal-poll__meta {
    font-size: var(--text-sm);
    color: var(--muted);
    margin: 6px 0 0;
}

.portal-poll__results {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.portal-poll__option-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--text-md);
}

.portal-poll__label {
    overflow-wrap: anywhere;
}

.portal-poll__count {
    color: var(--muted);
    white-space: nowrap;
}

.portal-poll__results .progress {
    margin: 4px 0 0;
}

.portal-poll__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.portal-poll__form-note {
    margin-bottom: 16px;
    color: var(--muted);
}

/* A Poll as a Resident's card (§4.8 decision 7, ticket 6-04): the privacy line, one form per Unit, the marked answer once closed. */
.portal-poll__privacy {
    font-size: var(--text-sm);
    color: var(--muted);
    margin: 6px 0 0;
}

.portal-poll__warning {
    margin: 12px 0 0;
}

.portal-poll__unit {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.portal-poll__unit fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.portal-poll__unit-label {
    font-size: var(--text-md);
    font-weight: 600;
    padding: 0;
}

.portal-poll__answered {
    font-size: var(--text-sm);
    color: var(--muted);
    margin: 2px 0 8px;
}

.portal-poll__choices {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* A radio list in an ordinary form field (components/form/field.latte): one
   choice per line, each with room to be tapped, as the Poll's choices are. */
.portal-field .control > .portal-radio {
    display: flex;
    gap: 8px;
    align-items: baseline;
    overflow-wrap: anywhere;
}

.portal-field .control > .portal-radio + .portal-radio {
    margin-top: 6px;
    margin-left: 0;
}

.portal-poll__choices .radio + .radio {
    margin-left: 0;
}

.portal-poll__choice {
    display: flex;
    gap: 8px;
    align-items: baseline;
    overflow-wrap: anywhere;
}

.portal-poll__option-head .tag {
    margin-right: auto;
}

.portal-poll__option.is-marked .portal-poll__label {
    font-weight: 700;
}

.portal-event-row__description {
    margin: 6px 0 0;
    font-size: var(--text-md);
    overflow-wrap: anywhere;
}

.portal-document {
    display: flex;
    flex-direction: column;
    padding: 12px 20px;
}

.portal-document + .portal-document {
    border-top: 1px solid var(--line);
}

.portal-document__title {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.portal-document__meta {
    margin-top: 2px;
    overflow-wrap: anywhere;
}

/* The "new" beside an item on a Resident's Oznámenia list (0.2.0 slice-2/05):
   the ink and tint of the New Issue status, AA in every Theme as that badge is. */
.portal-new {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.4;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--blue-bg);
    color: var(--blue-ink);
    white-space: nowrap;
}

/* A Contact on the Resident's Building tab (0.2.0 spec §8 decision 4): the name,
   its kind beside it, and the ways of reaching them under one another, each big
   enough to tap on a phone. The office card's details use the same reach block. */
.portal-contact,
.portal-register__duty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 20px;
}

.portal-contact + .portal-contact,
.portal-register__duty + .portal-register__duty {
    border-top: 1px solid var(--line);
}

.portal-contact__name,
.portal-register__label {
    font-size: var(--text-md);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.portal-contact__reach {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-wrap: anywhere;
}

.portal-contact__reach a,
.portal-register__report {
    /* the phone, the email and the report are what a Resident came for: a comfortable target on a phone */
    display: inline-block;
    padding: 2px 0;
}

.portal-contact__hours {
    color: var(--ink-soft);
}

.portal-contact__lines {
    white-space: pre-line;
}

/* An Inspection Duty on the same tab (0.2.0 spec §9 decision 5): its label with
   the state beside it, then the kind, the next due date and the last inspection
   under one another, and the report where it was made visible. A row is built
   like a Contact's and shares its rules above; only what is its own is here. */
.portal-register__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.portal-register__meta {
    color: var(--ink-soft);
}

.portal-document__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.portal-past {
    margin-top: 18px;
}

.portal-past__summary {
    cursor: pointer;
    font-weight: 700;
    margin-bottom: 12px;
}

/* status and priority badges */
.portal-status,
.portal-priority,
.portal-kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    border-radius: var(--r-pill);
    white-space: nowrap;
    line-height: 1.4;
}

.portal-status {
    font-size: var(--text-xs);
    padding: 4px 11px;
}

.portal-status--new {
    background: var(--blue-bg);
    color: var(--blue-ink);
}

.portal-status--in_progress {
    background: var(--amber-bg);
    color: var(--amber-ink);
}

.portal-status--resolved {
    background: var(--green-bg);
    color: var(--green-ink);
}

.portal-status--rejected {
    background: var(--grey-bg);
    color: var(--grey-ink);
}

/* Residency statuses (ticket 3-06); `rejected` is shared with the Issue one above. */
.portal-status--pending {
    background: var(--amber-bg);
    color: var(--amber-ink);
}

.portal-status--approved {
    background: var(--green-bg);
    color: var(--green-ink);
}

.portal-status--revoked {
    background: var(--grey-bg);
    color: var(--grey-ink);
}

.portal-priority {
    font-size: var(--text-2xs);
    padding: 1px 8px;
}

.portal-priority--low {
    background: var(--slate-bg);
    color: var(--slate-ink);
}

.portal-priority--medium {
    background: var(--amber-bg);
    color: var(--amber-ink);
}

.portal-priority--high {
    background: var(--red-bg);
    color: var(--red-ink);
}

.portal-kind {
    font-size: var(--text-2xs);
    padding: 2px 9px;
    background: var(--grey-bg);
    color: var(--grey-ink);
}

.portal-kind--inspection {
    background: var(--blue-bg);
    color: var(--blue-ink);
}

.portal-kind--repair,
.portal-kind--maintenance {
    background: var(--green-tint);
    color: var(--green-ink);
}

.portal-kind--meeting {
    background: var(--amber-bg);
    color: var(--amber-ink);
}

.portal-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--r-round);
    background: var(--dot-color, var(--blue));
    flex: none;
}

.portal-dot--new { --dot-color: var(--blue); }
.portal-dot--in_progress { --dot-color: var(--amber); }
.portal-dot--resolved { --dot-color: var(--green); }
.portal-dot--rejected { --dot-color: var(--grey); }

/* list-item (issue row) */
.portal-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
}

.portal-list > :last-child > .portal-list-item,
.portal-list-item:last-child {
    border-bottom: 0;
}

a.portal-list-item:hover,
a.portal-list-item:focus-visible {
    background: var(--card-bis);
    color: inherit;
}

.portal-list-item__stripe {
    width: 4px;
    align-self: stretch;
    border-radius: var(--r-stripe);
    flex: none;
    background: var(--grey);
}

.portal-list-item__stripe--new { background: var(--blue); }
.portal-list-item__stripe--in_progress { background: var(--amber); }
.portal-list-item__stripe--resolved { background: var(--green); }
.portal-list-item__stripe--rejected { background: var(--grey); }

.portal-list-item__body {
    flex: 1;
    min-width: 0;
}

.portal-list-item__title {
    font-size: var(--text-base);
    font-weight: 700;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.portal-list-item__text {
    font-size: var(--text-sm);
    color: var(--ink-soft);
    margin-top: 3px;
}

.portal-list-item__meta {
    font-size: var(--text-xs);
    color: var(--muted);
    margin-top: 3px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.portal-list-item__chevron {
    color: var(--line-strong);
    font-size: var(--text-xl);
    flex: none;
}

@media (max-width: 760px) {
    .portal-list-item {
        flex-wrap: wrap;
        gap: 10px 12px;
        padding: 14px 16px;
    }

    .portal-list-item__stripe {
        align-self: auto;
        width: 100%;
        height: 4px;
        order: -1;
    }

    .portal-list-item__body {
        flex-basis: 100%;
    }

    .portal-list-item__meta {
        flex-direction: column;
        gap: 2px;
    }

    .portal-list-item__chevron {
        display: none;
    }
}

/* event-row (date block + text) */
.portal-events {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.portal-event-row {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding: 18px 20px;
}

.portal-event-row__date {
    width: 64px;
    flex: none;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: var(--r-tile);
    overflow: hidden;
}

.portal-event-row__month,
.portal-event-row__day {
    display: block;
}

.portal-event-row__month {
    background: var(--bar-bg);
    color: var(--bar-ink);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 0;
    letter-spacing: .08em;
}

.portal-event-row__day {
    font-size: var(--text-3xl);
    font-weight: 800;
    padding: 6px 0;
    line-height: 1;
}

/* Wide enough to read a title on one line, or the actions beside it go to a
   line of their own: the row stands in the full-width lists and in the narrow
   side column of a Manager's Home alike, where "Add to calendar" beside a
   title would otherwise squeeze it into three lines. */
.portal-event-row__body {
    flex: 1 1 260px;
    min-width: 0;
}

.portal-event-row__title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0;
}

.portal-event-row__meta {
    font-size: var(--text-sm);
    color: var(--muted);
    margin-top: 4px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.portal-event-row__actions {
    display: flex;
    gap: 16px;
    flex: none;
}

.portal-event-row__actions a,
.portal-event-row__actions button {
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    color: var(--teal-ink);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.portal-event-row__actions .is-danger {
    color: var(--red-ink);
}

@media (max-width: 760px) {
    .portal-event-row {
        padding: 16px;
    }

    .portal-event-row__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* The Month view of the Events sub-tab (0.2.0 spec §11 decision 1, ticket
   slice-5/03). Every bar is placed by class — its column, how many columns it
   spans and which lane it was given — because the strict Content-Security
   Policy allows no inline style to place one with (spec §6 rule 8), and
   MonthGrid draws no more lanes than there are classes here. */
.portal-month {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 16px;
}

.portal-month__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.portal-month__step {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--r-tile);
    font-size: var(--text-lg);
    line-height: 1;
    text-decoration: none;
    color: var(--ink);
}

.portal-month__step:hover {
    background: var(--grey-bg);
}

.portal-month__label {
    flex: 1;
    margin: 0;
    text-align: center;
    font-size: var(--text-lg);
    font-weight: 700;
}

.portal-month__today {
    flex: none;
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    color: var(--teal-ink);
}

.portal-month__weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.portal-month__weekday {
    text-align: center;
    padding: 2px 0 6px;
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}

/* The day numbers stand in the first row and each lane of bars in one of its
   own; the last row takes whatever is left, so a week of few Events is still
   as tall as a day cell should be and one of four bars simply grows. */
.portal-month__week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: 24px 1fr;
    min-height: 68px;
    column-gap: 2px;
    row-gap: 2px;
}

.portal-month__week--lanes-1 {
    grid-template-rows: 24px 20px 1fr;
}

.portal-month__week--lanes-2 {
    grid-template-rows: 24px 20px 20px 1fr;
}

.portal-month__week--lanes-3 {
    grid-template-rows: 24px 20px 20px 20px 1fr;
}

.portal-month__week--lanes-4 {
    grid-template-rows: 24px 20px 20px 20px 20px 1fr;
}

.portal-month__day {
    grid-row: 1 / -1;
    border: 1px solid var(--line);
    border-radius: var(--r-tile);
    padding: 3px 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: flex-start;
}

.portal-month__day.is-outside {
    background: var(--grey-bg);
    color: var(--muted);
}

.portal-month__day.is-today {
    border-color: var(--teal-ink);
    box-shadow: inset 0 0 0 1px var(--teal-ink);
}

.portal-month__day--col-1 { grid-column: 1; }
.portal-month__day--col-2 { grid-column: 2; }
.portal-month__day--col-3 { grid-column: 3; }
.portal-month__day--col-4 { grid-column: 4; }
.portal-month__day--col-5 { grid-column: 5; }
.portal-month__day--col-6 { grid-column: 6; }
.portal-month__day--col-7 { grid-column: 7; }

.portal-month__number {
    font-size: var(--text-xs);
    font-weight: 700;
}

.portal-month__more {
    margin-top: auto;
    font-size: var(--text-2xs);
    color: var(--muted);
}

.portal-month__bar {
    align-self: center;
    min-width: 0;
    margin: 0 3px;
    padding: 1px 6px;
    border-radius: var(--r-pill);
    background: var(--grey-bg);
    color: var(--grey-ink);
    font-size: var(--text-2xs);
    font-weight: 600;
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.portal-month__bar:hover {
    text-decoration: underline;
}

.portal-month__bar--inspection {
    background: var(--blue-bg);
    color: var(--blue-ink);
}

.portal-month__bar--repair,
.portal-month__bar--maintenance {
    background: var(--green-tint);
    color: var(--green-ink);
}

.portal-month__bar--meeting {
    background: var(--amber-bg);
    color: var(--amber-ink);
}

.portal-month__bar.is-from-before {
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.portal-month__bar.is-into-next {
    margin-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.portal-month__bar--col-1 { grid-column-start: 1; }
.portal-month__bar--col-2 { grid-column-start: 2; }
.portal-month__bar--col-3 { grid-column-start: 3; }
.portal-month__bar--col-4 { grid-column-start: 4; }
.portal-month__bar--col-5 { grid-column-start: 5; }
.portal-month__bar--col-6 { grid-column-start: 6; }
.portal-month__bar--col-7 { grid-column-start: 7; }

.portal-month__bar--span-1 { grid-column-end: span 1; }
.portal-month__bar--span-2 { grid-column-end: span 2; }
.portal-month__bar--span-3 { grid-column-end: span 3; }
.portal-month__bar--span-4 { grid-column-end: span 4; }
.portal-month__bar--span-5 { grid-column-end: span 5; }
.portal-month__bar--span-6 { grid-column-end: span 6; }
.portal-month__bar--span-7 { grid-column-end: span 7; }

.portal-month__bar--lane-1 { grid-row: 2; }
.portal-month__bar--lane-2 { grid-row: 3; }
.portal-month__bar--lane-3 { grid-row: 4; }
.portal-month__bar--lane-4 { grid-row: 5; }

@media (max-width: 760px) {
    .portal-month {
        padding: 10px;
    }

    .portal-month__week {
        min-height: 60px;
    }

    .portal-month__day {
        padding: 2px 3px;
    }

    .portal-month__bar {
        margin: 0 1px;
        padding: 1px 3px;
    }
}

/* toolbar and filter chips */
.portal-toolbar {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 12px 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.portal-toolbar__end {
    margin-left: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.portal-toolbar .select,
.portal-toolbar .select select {
    height: 2.5em;
}

.portal-filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.portal-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: var(--r-pill);
    padding: 7px 14px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-label);
    text-decoration: none;
}

.portal-filter-chip:hover,
.portal-filter-chip:focus-visible {
    border-color: var(--line-strong);
    color: var(--ink);
}

.portal-filter-chip.is-active {
    border-color: var(--teal);
    background: var(--teal-tint);
    color: var(--teal-ink);
}

.portal-filter-chip__count {
    background: var(--grey-bg);
    border-radius: var(--r-pill);
    font-size: var(--text-2xs);
    font-weight: 800;
    padding: 0 7px;
    color: var(--grey-ink);
}

/* The object id of an audit entry: there so the Owner can quote it, not so it
   competes with the sentence beside it (spec §4.13). */
.portal-audit__object {
    color: var(--grey-ink);
    font-family: var(--portal-font-mono);
    font-size: var(--text-2xs);
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .portal-toolbar__end {
        margin-left: 0;
        width: 100%;
    }

    .portal-toolbar__end .select,
    .portal-toolbar__end .select select {
        width: 100%;
    }
}

/* The Focus combobox (components/focus-picker.latte, ADR-0011): one row above
   the content, a label and a type-ahead input, the listbox below it grouped by
   Building. The active option (keyboard or pointer) takes the hover tint and a
   ring in the focus colour, the selected one the weight, so the two never look
   alike; both stay AA in every Theme because they reuse its tokens. */
.portal-focus {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

/* Its own display rules would otherwise outrank the hidden attribute that
   swaps the native select for the combobox and filters the options. */
.portal-focus [hidden] {
    display: none !important;
}

.portal-focus__plain,
.portal-focus__combo {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    width: min(100%, 420px);
}

.portal-focus__label {
    flex: none;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    font-weight: 700;
}

.portal-focus__row,
.portal-focus__field {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 0;
    position: relative;
}

.portal-focus__row .select,
.portal-focus__row .select select {
    width: 100%;
}

.portal-focus__input.input {
    padding-right: 2.25em;
}

.portal-focus__toggle {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 2em;
    height: calc(100% - 4px);
    border: 0;
    background: none;
    color: var(--ink-label);
    font: inherit;
    cursor: pointer;
}

.portal-focus__listbox {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    width: 100%;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line-control);
    border-radius: var(--r-control);
    box-shadow: var(--shadow);
    z-index: 30;
}

.portal-focus__listbox ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.portal-focus__group-label {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 700;
    padding: 10px 10px 4px;
}

.portal-focus__option {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--r-small);
    font-size: var(--text-md);
    color: var(--ink);
    cursor: pointer;
}

.portal-focus__option--building {
    color: var(--ink-label);
    font-style: italic;
}

.portal-focus__option:hover,
.portal-focus__option.is-active {
    background: var(--bg);
    box-shadow: inset 0 0 0 var(--focus-width) var(--focus);
}

.portal-focus__option[data-current="true"] {
    font-weight: 700;
}

.portal-focus__option[data-current="true"]::after {
    content: "✓";
    margin-left: auto;
    padding-left: 10px;
}

.portal-focus__empty {
    padding: 8px 10px;
    color: var(--muted);
    font-size: var(--text-md);
}

/* Audience mode: a Publication form's field, its label above and the full
   width of the form, as the other fields are. */
.portal-focus--field {
    display: block;
    margin-bottom: 0;
}

.portal-focus--field .portal-focus__plain,
.portal-focus--field .portal-focus__combo {
    display: block;
    width: 100%;
}

/* Its open list reaches past the bottom of a short form's card, which would clip it. */
.portal-card:has(.portal-focus--field) {
    overflow: visible;
}

@media (max-width: 860px) {
    .portal-focus {
        justify-content: stretch;
    }

    .portal-focus__plain,
    .portal-focus__combo {
        width: 100%;
    }
}

/* empty state */
.portal-empty-state {
    text-align: center;
    padding: 36px 24px;
    color: var(--muted);
}

.portal-empty-state__icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    border-radius: var(--r-tile);
    background: var(--bg);
    display: grid;
    place-items: center;
    color: var(--grey);
}

.portal-empty-state__title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
}

.portal-empty-state__text {
    font-size: var(--text-sm);
    margin: 0;
}

.portal-empty-state__actions {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* buttons: Bulma .button with prototype weights and radius */
.button {
    border-radius: var(--r-control);
}

.button.is-primary {
    color: var(--on-primary);
}

.button.is-primary:hover,
.button.is-primary:focus {
    color: var(--on-primary);
}

.button.is-dark {
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: var(--text-sm);
}

.button.is-fullwidth {
    display: flex;
}

/*
 * Sign out (0.2.0 spec §3 decision 13): outlined, with the exit icon, in the
 * red ink every Theme already holds to AA on --card and on its --red-bg tint
 * (the danger notification's pair), so hover and focus only fill the tint.
 * Written against the account menu's plain-button rule as well, which would
 * otherwise strip its border and left-align it.
 */
.button.is-signout,
.portal-user__menu .button.is-signout {
    display: flex;
    justify-content: center;
    gap: 6px;
    text-align: center;
    color: var(--red-ink);
    background: transparent;
    border: 1px solid var(--red-ink);
    border-radius: var(--r-control);
    font-weight: 600;
}

.button.is-signout:hover,
.button.is-signout:focus-visible,
.portal-user__menu .button.is-signout:hover,
.portal-user__menu .button.is-signout:focus-visible {
    color: var(--red-ink);
    background: var(--red-bg);
    border-color: var(--red-ink);
}

/* form field */
.portal-field .label {
    font-size: var(--text-xs);
    margin-bottom: 6px;
}

.portal-field .input,
.portal-field .textarea,
.portal-field .select select {
    font-size: var(--text-md);
}

.portal-field .help {
    font-size: var(--text-xs);
}

.portal-field__required {
    color: var(--red);
    margin-left: 2px;
}

.portal-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--text-xs);
    margin: 4px 0 18px;
}

.portal-row-between a {
    color: var(--teal-ink);
}

/* pagination: Bulma .pagination in a card foot */
.portal-pagination .pagination-link.is-current {
    background: var(--selected-bg);
    border-color: var(--selected-bg);
    color: var(--selected-ink);
}

.portal-pagination__summary {
    font-size: var(--text-sm);
    color: var(--muted);
}

/* toast */
.portal-toasts {
    position: fixed;
    top: calc(var(--portal-topbar-height) + var(--portal-tabrow-height) + 12px + var(--portal-safe-top));
    right: calc(12px + var(--portal-safe-right));
    left: calc(12px + var(--portal-safe-left));
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

@media (min-width: 761px) {
    .portal-toasts {
        left: auto;
        width: 360px;
    }
}

.portal-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 4px solid var(--toast-accent, var(--teal));
    border-radius: var(--r-control);
    box-shadow: var(--shadow);
    padding: 12px 14px;
    font-size: var(--text-md);
}

.portal-toast--success { --toast-accent: var(--green); }
.portal-toast--danger { --toast-accent: var(--red); }
.portal-toast--warning { --toast-accent: var(--amber); }
.portal-toast--info { --toast-accent: var(--blue); }

.portal-toast__body {
    flex: 1;
}

.portal-toast__title {
    font-weight: 700;
    display: block;
}

.portal-toast .delete {
    flex: none;
}

/* dialog: native <dialog> styled as a modal card */
.portal-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-dialog);
    background: var(--card);
    color: var(--ink);
}

.portal-dialog::backdrop {
    background: var(--backdrop);
}

.portal-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.portal-dialog__title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0;
}

.portal-dialog__body {
    padding: 20px;
    font-size: var(--text-md);
}

.portal-dialog__foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: var(--card-bis);
}

/* table: rows collapse to cards below tablet (Bulma "md" = 769px) */
.portal-table-wrap {
    overflow-x: auto;
}

.portal-table {
    width: 100%;
}

.portal-table thead th {
    font-size: var(--text-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom-width: 1px;
}

.portal-table td,
.portal-table th {
    vertical-align: middle;
    padding: 12px 16px;
}

@media (max-width: 768px) {
    .portal-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .portal-table,
    .portal-table tbody,
    .portal-table tr,
    .portal-table td {
        display: block;
    }

    .portal-table tr {
        border: 1px solid var(--line);
        border-radius: var(--r);
        margin: 0 16px 12px;
        padding: 6px 0;
        background: var(--card);
    }

    .portal-table td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        border: 0;
        padding: 7px 14px;
        font-size: var(--text-md);
    }

    .portal-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: var(--text-xs);
        font-weight: 600;
        flex: none;
    }
}

/* Alpine: hide x-cloak-ed elements until Alpine has initialised */
[x-cloak] {
    display: none !important;
}

/* htmx request indicator */
.htmx-indicator {
    opacity: 0;
    transition: opacity 160ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------------ */
/* Install prompt on Home (PWA, components/install-prompt.latte)        */
/* ------------------------------------------------------------------ */
.portal-install-prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 10px 14px;
    margin-bottom: 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
}

.portal-install-prompt__icon {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--r-small);
}

.portal-install-prompt__text {
    flex: 1 1 12rem;
    margin: 0;
    font-size: var(--text-md);
    color: var(--ink);
}

.portal-install-prompt__text a {
    font-weight: 600;
    text-decoration-line: var(--link-decoration);
}

/* ------------------------------------------------------------------ */
/* Profile in sections (0.2.0 spec §5, screens/Accounts/Profile)        */
/* ------------------------------------------------------------------ */
.portal-profile-index {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.portal-profile-index__link {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid var(--line-control);
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--ink-label);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
}

.portal-profile-index__link:hover {
    border-color: var(--ink-label);
    color: var(--ink);
}

.portal-profile-section {
    margin-top: 28px;
    /* reached by its anchor, the section clears the sticky top bar */
    scroll-margin-top: calc(var(--portal-topbar-height) + var(--portal-tabrow-height) + 16px + var(--portal-safe-top));
}

.portal-profile-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.portal-profile-section__title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--ink);
}

.portal-profile-section__head .portal-help {
    border-color: var(--line-control);
    color: var(--ink-label);
}

.portal-profile-section__head .portal-help:hover,
.portal-profile-section__head .portal-help:focus-visible {
    background: var(--card);
    border-color: var(--ink-label);
    color: var(--ink);
}

/* Sign out at the bottom of Profile, on a phone only: a computer has it in the account menu within reach. */
.portal-profile-signout {
    display: none;
    margin-top: 28px;
}

@media (max-width: 860px) {
    .portal-profile-signout {
        display: block;
    }
}

/* Push on this device and the person's devices (0.2.0 spec §7 decision 3), above the grid */
.portal-push__state {
    margin: 0;
}

.portal-push__state form {
    margin-top: 12px;
}

.portal-push__on {
    font-weight: 700;
    color: var(--green-ink);
}

.portal-push__devices-title {
    margin: 20px 0 0;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--ink-label);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.portal-push__none {
    margin: 8px 0 0;
    color: var(--muted);
}

.portal-list-item.portal-push__device {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding-inline: 0;
}

.portal-push__device-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.portal-push__remove {
    margin: 0;
}

/* A secret address the person copies and keeps: the Calendar Feed's link (0.2.0 spec §11 decision 3) */
.portal-secret-link {
    margin-top: 12px;
}

.portal-secret-link__url {
    font-family: var(--portal-font-mono);
    font-size: var(--text-sm);
}

.portal-secret-link__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 8px;
}

.portal-secret-link__copied {
    color: var(--green);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* The dates and the note under it, in the Calendar Feed section of Profile */
.portal-feed__meta {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

.portal-feed__forms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 16px;
}

.portal-feed__forms form {
    margin: 0;
}

/* Notifications: a row per category, a checkbox per channel; stays a grid at phone width */
.portal-notification-grid__text {
    margin-bottom: 12px;
    color: var(--ink-label);
}

.portal-notification-grid-wrap {
    overflow-x: auto;
}

.portal-notification-grid {
    width: 100%;
    margin-bottom: 8px;
    background: transparent;
}

.portal-notification-grid th,
.portal-notification-grid td {
    vertical-align: middle;
    border-color: var(--line);
}

.portal-notification-grid thead th:not(:first-child),
.portal-notification-grid__cell {
    width: 4.5rem;
    text-align: center;
    white-space: nowrap;
}

.portal-notification-grid__group th {
    padding-top: 18px;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--ink-label);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.portal-notification-grid__category {
    font-weight: 600;
    color: var(--ink);
}

.portal-notification-grid__reason {
    display: block;
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--muted);
}

.portal-notification-grid__cell input {
    width: max(1rem, calc(var(--target-min) / 2));
    height: max(1rem, calc(var(--target-min) / 2));
    margin: 0;
    accent-color: var(--teal-d);
}

.portal-notification-grid__cell input:disabled {
    cursor: not-allowed;
}

.portal-notification-grid__note {
    margin-bottom: 12px;
}

/* Look: a radio per Theme with its swatch */
.portal-theme-choice {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.portal-theme-choice__options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 12px;
}

.portal-theme-option {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line-control);
    border-radius: var(--r-control);
    background: var(--card);
    cursor: pointer;
}

.portal-theme-option:has(:checked) {
    border-color: var(--teal-d);
    outline: 1px solid var(--teal-d); /* the border doubled without moving the content */
}

.portal-theme-option__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--ink);
}

.portal-theme-option__input {
    flex: none;
    width: max(1rem, calc(var(--target-min) / 2));
    height: max(1rem, calc(var(--target-min) / 2));
    margin: 0;
    accent-color: var(--teal-d);
}

.portal-theme-option__help {
    font-size: var(--text-sm);
    color: var(--muted);
}

.portal-theme-swatch {
    display: flex;
    flex-direction: column;
    height: 64px;
    overflow: hidden;
    border: 1px solid var(--line-control);
    border-radius: var(--r-small);
    background: var(--bg);
}

.portal-theme-swatch.is-split {
    flex-direction: row;
}

.portal-theme-swatch__half {
    display: flex;
    flex: 1 1 50%;
    flex-direction: column;
    min-width: 0;
    background: var(--bg);
}

.portal-theme-swatch__bar {
    flex: none;
    height: 12px;
    background: var(--bar-bg);
}

.portal-theme-swatch__card {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    margin: 7px;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-small);
}

.portal-theme-swatch__line {
    width: 70%;
    height: 4px;
    border-radius: var(--r-pill);
    background: var(--ink);
}

.portal-theme-swatch__line.is-short {
    width: 45%;
    background: var(--muted);
}

.portal-theme-swatch__accent {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 10px;
    height: 10px;
    border-radius: var(--r-round);
    background: var(--teal);
}

/* App: the state pwa-install.js picks, and the removal steps */
.portal-app__state > :first-child {
    margin-top: 0;
}

.portal-app__state > p + .button {
    margin-top: 12px;
}

.portal-app__steps {
    margin: 8px 0 0 1.5em;
    list-style: decimal;
}

.portal-app__installed {
    margin: 0 0 8px;
    font-weight: 700;
    color: var(--green-ink);
}

.portal-app__details summary {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}

.portal-app__details summary::before {
    content: "▸";
    margin-right: 6px;
    color: var(--muted);
}

.portal-app__details[open] summary::before {
    content: "▾";
}

.portal-app__details summary::-webkit-details-marker {
    display: none;
}

.portal-app__details > p,
.portal-app__platforms {
    margin: 10px 0 0;
}

.portal-app__platforms dt {
    margin-top: 8px;
    font-weight: 600;
    color: var(--ink);
}

.portal-app__platforms dd {
    margin: 2px 0 0;
    color: var(--ink-soft);
}

/* Your flats and organisations */
.portal-place {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.portal-place__meta {
    font-size: var(--text-sm);
    color: var(--muted);
}

/* print-sheet, print-actions, entrance-choice: a Notice or an Event printed
   for one stairwell (0.2.0 spec §12, ticket slice-5/05). On screen the sheet
   is a page of paper on the plain layout's column, so a Manager sees what will
   come out of the printer before pressing Print; the rules under @media print
   at the end of this file are what actually goes on the paper. */
.portal-print-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.portal-print-actions--after {
    margin: 16px 0 0;
}

.portal-print-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.portal-print {
    padding: 24px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #ffffff;
    color: #000000;
}

.portal-print p {
    margin: 0;
}

.portal-print__header {
    padding-bottom: 12px;
    border-bottom: 2px solid #000000;
}

.portal-print__organisation {
    font-size: var(--text-md);
    font-weight: 700;
}

/* The office is the same reach block the Resident's Building tab shows, so it
   reads the same everywhere; on paper its links are plain black text. */
.portal-print .portal-contact__reach {
    font-size: var(--text-sm);
}

.portal-print .portal-contact__reach a {
    color: inherit;
    text-decoration: none;
}

.portal-print__entrance {
    margin-top: 16px !important;
    font-size: var(--text-lg);
    font-weight: 700;
}

.portal-print__kind {
    margin-top: 4px !important;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.portal-print .portal-print__title {
    margin: 8px 0 0;
    font-size: var(--text-2xl);
    line-height: 1.2;
    color: inherit;
}

.portal-print__body {
    margin-top: 16px;
    font-size: var(--text-md);
}

.portal-print__when {
    font-weight: 700;
}

.portal-print__meta {
    margin-top: 4px !important;
    font-size: var(--text-sm);
}

/* The text a Manager typed keeps the line breaks they typed it with, as the Notice card does. */
.portal-print__text {
    margin-top: 12px !important;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.portal-print__footer {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-top: 28px;
    padding-top: 12px;
    border-top: 1px solid #000000;
}

/* The code is drawn by www/assets/js/qr-code.js into this box; 45 mm is what a
   phone camera reads comfortably at arm's length from a wall, and the padding
   is the quiet zone the encoder is told to leave out. */
.portal-print__qr {
    flex: 0 0 auto;
    width: 45mm;
    height: 45mm;
    padding: 3mm;
    background: #ffffff;
}

.portal-print__qr svg {
    display: block;
    width: 100%;
    height: 100%;
}

.portal-print__reference {
    flex: 1 1 auto;
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
}

.portal-print__url {
    font-family: var(--portal-font-mono);
}

.portal-print__published {
    margin-top: 4px !important;
}

/* code-sheet, code-slip: the Invitation Code sheet of an Entrance (spec §4.3
   decision 12). Two slips a row fit the plain layout's column on screen and an
   A4 page on paper; a dashed border is the cutting line. In print only the grid
   is left and no slip is split across pages, so every one can be cut out whole. */
.portal-slips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0;
    margin-top: 16px;
}

.portal-slip {
    padding: 16px 18px;
    border: 1px dashed var(--grey);
    background: var(--card);
    color: var(--ink);
    break-inside: avoid;
    page-break-inside: avoid;
}

.portal-slip p {
    margin: 0;
}

.portal-slip__unit {
    font-size: var(--text-md);
    font-weight: 700;
}

.portal-slip__address {
    font-weight: 400;
    color: var(--muted);
}

.portal-slip__label {
    margin-top: 10px !important;
    font-size: var(--text-xs);
    color: var(--muted);
}

.portal-slip__code {
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.portal-slip__steps {
    margin: 8px 0 8px 1.2em;
    font-size: var(--text-sm);
    line-height: 1.4;
}

.portal-slip__url {
    font-size: var(--text-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* issue-summary: the facts at the head of an Issue's detail (ticket 4-04) */
.portal-issue-summary__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.portal-issue-summary__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin: 16px 0;
}

.portal-issue-summary__facts dt {
    font-size: var(--text-xs);
    color: var(--muted);
    font-weight: 600;
}

.portal-issue-summary__facts dd {
    margin: 2px 0 0;
}

.portal-issue-summary__description {
    margin: 0;
    overflow-wrap: anywhere;
}

/* gallery: an Issue's photos, thumbnails linking to the full photo (ticket 4-07) */
.portal-gallery {
    margin-bottom: 12px;
}

.portal-gallery__photo {
    display: block;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--bulma-radius);
}

.portal-gallery__photo img {
    object-fit: cover;
}

.portal-gallery__remove {
    margin-top: 6px;
}

/* timeline: the Issue Timeline, creation first, then the Comments (ticket 4-04) */
.portal-timeline {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    border-left: 2px solid var(--line);
}

.portal-timeline__entry {
    position: relative;
    padding: 0 0 18px 18px;
}

.portal-timeline__entry::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: var(--r-round);
    background: var(--teal);
}

.portal-timeline__entry--created::before {
    background: var(--selected-bg);
}

.portal-timeline__head {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
}

.portal-timeline__time {
    font-size: var(--text-xs);
    color: var(--muted);
}

.portal-timeline__text {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* The Manual (spec §4.14, ticket 8-01)                                */
/* ------------------------------------------------------------------ */

/* The public shell: no tab row or tab bar, and the language switcher stays at phone width,
   where a visitor has no profile to choose a language in. */
.portal-manual-shell {
    --portal-tabrow-height: 0px;
}

.portal-manual-shell__home,
.portal-manual-shell__back {
    color: var(--bar-ink-soft);
    font-size: var(--text-md);
    font-weight: 500;
    white-space: nowrap;
}

.portal-manual-shell__home:hover,
.portal-manual-shell__back:hover {
    color: var(--bar-ink);
}

@media (max-width: 860px) {
    .portal-manual-shell .portal-lang {
        display: flex;
    }

    .portal-manual-shell .portal-main,
    .portal-manual-shell .portal-footer {
        padding-bottom: calc(24px + var(--portal-safe-bottom));
    }

    .portal-manual-shell .portal-brand > span:not(.portal-brand__mark) {
        display: none;
    }
}

.portal-manual-home__intro {
    max-width: 68ch;
    margin-bottom: 24px;
}

.portal-manual-home__heading {
    font-size: var(--text-xl);
    font-weight: 700;
    margin: 28px 0 12px;
}

.portal-manual-home__starts,
.portal-manual-home__parts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px;
}

.portal-manual-home__starts > .box,
.portal-manual-home__parts > .box {
    margin: 0;
}

.portal-manual-start {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-left: 4px solid var(--teal);
}

.portal-manual-start__label {
    color: var(--ink);
    font-size: var(--text-lg);
}

.portal-manual-start__text {
    color: var(--muted);
}

.portal-manual-part__list {
    margin: 0;
    padding-left: 1.4em;
}

.portal-manual-part__list li + li {
    margin-top: 6px;
}

.portal-manual-home__beside {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

/* A Journey: the prose and its Part side by side, the Part below at phone width. */
.portal-manual {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 40px;
    align-items: start;
    padding-top: 24px;
}

@media (max-width: 860px) {
    .portal-manual {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

.portal-manual__article {
    max-width: 72ch;
    overflow-wrap: anywhere;
    counter-reset: manual-step;
}

.portal-manual__part {
    color: var(--teal-ink);
    font-weight: 600;
    margin-bottom: 4px !important;
}

.portal-manual__section {
    margin-top: 32px;
}

/* A heading reached by its anchor clears the sticky top bar. */
.portal-manual__section h2 {
    scroll-margin-top: calc(var(--portal-topbar-height) + var(--portal-tabrow-height) + 16px + var(--portal-safe-top));
}

.portal-manual__side {
    position: sticky;
    top: calc(var(--portal-topbar-height) + var(--portal-tabrow-height) + 16px + var(--portal-safe-top));
    background: var(--card);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 16px;
}

@media (max-width: 860px) {
    .portal-manual__side {
        position: static;
    }
}

.portal-manual-step {
    position: relative;
    padding-left: 44px;
    margin-bottom: 20px;
    counter-increment: manual-step;
}

.portal-manual-step::before {
    content: counter(manual-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--r-round);
    background: var(--teal);
    color: var(--on-teal);
    font-weight: 800;
    display: grid;
    place-items: center;
}

.portal-manual-step__title {
    margin: 3px 0 6px !important;
}

.portal-manual-name {
    color: var(--ink);
}

.portal-manual-warning__label {
    font-weight: 700;
    margin-bottom: 4px !important;
}

.portal-manual-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: 40px;
}

.portal-manual-pager .button {
    height: auto;
    white-space: normal;
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
}

.portal-manual-pager__next {
    margin-left: auto;
    align-items: flex-end !important;
    text-align: right;
}

.portal-manual-pager__label {
    font-size: var(--text-xs);
    color: var(--muted);
}

/* A generated screenshot inside a Journey (ticket 8-03): the image's own width at most, never wider than the article. */
.content .portal-manual-shot {
    margin: 0 0 1em;
    text-align: left;
}

.portal-manual-shot img {
    display: block;
    height: auto;
    border: 1px solid var(--line);
    border-radius: var(--r);
}

/* Pojmy and Čo portál nerobí (ticket 8-08): prose at reading width; an entry reached by its anchor clears the sticky top bar and is marked. */
.portal-manual-page {
    max-width: 72ch;
    overflow-wrap: anywhere;
    padding-top: 24px;
}

.portal-manual-page [id] {
    scroll-margin-top: calc(var(--portal-topbar-height) + var(--portal-tabrow-height) + 16px + var(--portal-safe-top));
}

.content .portal-manual-terms dt {
    margin-top: 1.5em;
    font-weight: 600;
}

.content .portal-manual-terms dd {
    margin-left: 0;
}

.portal-manual-page :target {
    color: var(--teal-ink);
}

@media print {
    @page {
        margin: 12mm;
    }

    .portal-plain:has(.portal-slips) {
        max-width: none;
        padding: 0;
    }

    .portal-plain:has(.portal-slips) > :not(.portal-slips) {
        display: none;
    }

    .portal-slips {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 0;
    }

    .portal-slip {
        background: #fff;
        color: #000;
    }

    .portal-slip__address,
    .portal-slip__label {
        color: #000;
    }

    /* The printable Notice or Event (0.2.0 spec §12): the sheet alone on the
       paper — the Print button and the way back are screen furniture — and
       black on white whatever Theme the person is in, because a Dark Theme
       printed is a page of ink. */
    /* The page behind the sheet as well: a Dark Theme printed with backgrounds
       on would put a black rectangle under it and on the sheets after it. */
    html:has(.portal-print),
    body:has(.portal-print),
    .portal-plain:has(.portal-print) {
        max-width: none;
        padding: 0;
        background: #fff;
    }

    .portal-plain:has(.portal-print) > :not(.portal-print) {
        display: none;
    }

    /* On paper the sheet is read from a doorway rather than from a desk, so it
       is set in points against the page rather than in the screen's scale. */
    .portal-print {
        padding: 0;
        border: 0;
        background: #fff;
        color: #000;
        font-size: 12pt;
    }

    .portal-print .portal-print__entrance {
        font-size: 16pt;
    }

    .portal-print .portal-print__title {
        font-size: 28pt;
    }

    .portal-print .portal-print__body {
        font-size: 13pt;
    }

    .portal-print .portal-print__reference {
        font-size: 9pt;
    }

    /* Everything on the sheet in one ink: the office hours are --muted, the
       title is `.content h1`'s --ink, and a sheet is printed black on white
       whatever Theme the person is in. */
    .portal-print,
    .portal-print * {
        color: #000;
    }
}