/* Lawia: the Glow style.
   Brand blue (#0078EF) does the work and sunrise orange (#FF7A02) marks what matters.
   Jewels are glossy, saturated cards for the main area of a page, glow tiles are their
   light tint, and forms and longer text sit on calm surfaces.
   Text on a jewel is either large (3:1 or better) or sits on glass (4.5:1 or better). */

:root {
    /* Type (the faces are in fonts.css) */
    --font-display: "Plus Jakarta Sans", "Readex Pro", system-ui, sans-serif;
    --font-sans: "Plus Jakarta Sans", "Readex Pro", system-ui, "Segoe UI", Roboto, sans-serif;
    --display-spacing: -0.02em;

    /* Surfaces and text */
    --bg: #F4F7FC;
    --surface: #FFFFFF;
    --line: #E2E8F1;
    --line-strong: #C1CCD9;
    --fg: #0E1825;
    --fg-2: #4B596C;
    --fg-3: #637185;
    --primary: #0465CA;
    --primary-soft: #E2EEFF;
    --bad-fg: #AC262A;
    --bad-soft: #FFF4F3;
    --topbar-bg: rgba(255, 255, 255, 0.78);
    --topbar-line: rgba(14, 24, 37, 0.07);
    --input-bg: #FFFFFF;
    --ring: 0 0 0 4px rgba(0, 120, 239, 0.22);
    --shadow-sm: 0 1px 2px rgba(16, 34, 66, 0.06), 0 2px 6px -1px rgba(16, 34, 66, 0.07);
    --shadow-xl: 0 8px 16px -6px rgba(16, 34, 66, 0.08), 0 28px 56px -12px rgba(16, 34, 66, 0.24);

    /* Glow layer: sparkles, the Dawn backdrop, glass, and each hue's light tint */
    --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 8.2 15.8 11.1 24 12C15.8 12.9 12.9 15.8 12 24C11.1 15.8 8.2 12.9 0 12C8.2 11.1 11.1 8.2 12 0Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
    --sparkle-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 8.2 15.8 11.1 24 12C15.8 12.9 12.9 15.8 12 24C11.1 15.8 8.2 12.9 0 12C8.2 11.1 11.1 8.2 12 0Z' fill='%23FF9A3D'/%3E%3C/svg%3E");
    --sparkle-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 8.2 15.8 11.1 24 12C15.8 12.9 12.9 15.8 12 24C11.1 15.8 8.2 12.9 0 12C8.2 11.1 11.1 8.2 12 0Z' fill='%235DA3FF'/%3E%3C/svg%3E");
    --dawn:
        radial-gradient(55% 70% at 6% 0%, rgba(255, 180, 140, 0.55) 0%, rgba(255, 180, 140, 0) 70%),
        radial-gradient(45% 60% at 96% 6%, rgba(140, 195, 255, 0.55) 0%, rgba(140, 195, 255, 0) 70%),
        radial-gradient(55% 60% at 55% 105%, rgba(255, 160, 210, 0.38) 0%, rgba(255, 160, 210, 0) 70%),
        linear-gradient(180deg, #FFF7F2 0%, #F7F4FF 55%, #F0F6FF 100%);
    --dawn-soft:
        radial-gradient(60% 50% at 0% 0%, rgba(255, 190, 150, 0.3), rgba(255, 190, 150, 0) 70%),
        radial-gradient(50% 45% at 100% 0%, rgba(150, 200, 255, 0.32), rgba(150, 200, 255, 0) 70%),
        #F4F7FC;
    --dawn-dot: rgba(255, 255, 255, 0.95);
    --bokeh: rgba(255, 255, 255, 0.42);
    --glass: rgba(255, 255, 255, 0.62);
    --glass-line: rgba(255, 255, 255, 0.88);
    --glass-hi: rgba(255, 255, 255, 0.9);
    --tint-line: rgba(255, 255, 255, 0.8);
    --tint-rim: rgba(255, 255, 255, 0.95);
    --tint-sheen: rgba(255, 255, 255, 0.6);
    --hl-a: #DB6806;
    --hl-b: #C93A6E;
    --sky-t1: #F0F7FF;
    --sky-t2: #D9EBFF;
    --sun-t1: #FFF5EB;
    --sun-t2: #FFE2C6;
    --aqua-t1: #EAFCFB;
    --aqua-t2: #C6F3F0;
    --berry-t1: #FFF0F7;
    --berry-t2: #FFD6EA;
    --violet-t1: #F4F0FF;
    --violet-t2: #E2D8FF;
    --leaf-t1: #EEFBF0;
    --leaf-t2: #D2F2D7;
    --coral-t1: #FFF1EE;
    --coral-t2: #FFDAD3;

    /* 1 on left-to-right pages, -1 on right-to-left pages: flips horizontal offsets */
    --dir: 1;
}

/* Dark: from the device setting, unless the person chose Light (data-theme on <html>) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0A1220;
        --surface: #101A2B;
        --line: #24354E;
        --line-strong: #34496A;
        --fg: #EAF0F8;
        --fg-2: #AEBBCD;
        --fg-3: #8A9AB0;
        --primary: #5DA3FF;
        --primary-soft: #0A2445;
        --bad-fg: #F97770;
        --bad-soft: #4B1D1B;
        --topbar-bg: rgba(16, 26, 43, 0.8);
        --topbar-line: rgba(255, 255, 255, 0.08);
        --input-bg: #0D1626;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px -2px rgba(0, 0, 0, 0.4);
        --shadow-xl: 0 10px 20px -6px rgba(0, 0, 0, 0.45), 0 32px 64px -12px rgba(0, 0, 0, 0.65);
        --dawn:
            radial-gradient(55% 70% at 6% 0%, rgba(255, 122, 2, 0.22) 0%, rgba(255, 122, 2, 0) 70%),
            radial-gradient(45% 60% at 96% 6%, rgba(0, 120, 239, 0.36) 0%, rgba(0, 120, 239, 0) 70%),
            radial-gradient(55% 60% at 55% 105%, rgba(238, 74, 155, 0.2) 0%, rgba(238, 74, 155, 0) 70%),
            linear-gradient(180deg, #0C1428 0%, #0E1431 55%, #0A1220 100%);
        --dawn-soft:
            radial-gradient(60% 50% at 0% 0%, rgba(255, 122, 2, 0.12), rgba(255, 122, 2, 0) 70%),
            radial-gradient(50% 45% at 100% 0%, rgba(0, 120, 239, 0.2), rgba(0, 120, 239, 0) 70%),
            #0A1220;
        --dawn-dot: rgba(255, 255, 255, 0.9);
        --bokeh: rgba(120, 170, 255, 0.1);
        --glass: rgba(16, 26, 43, 0.55);
        --glass-line: rgba(255, 255, 255, 0.14);
        --glass-hi: rgba(255, 255, 255, 0.12);
        --tint-line: rgba(255, 255, 255, 0.07);
        --tint-rim: rgba(255, 255, 255, 0.1);
        --tint-sheen: rgba(255, 255, 255, 0.06);
        --hl-a: #FFA766;
        --hl-b: #FF85BF;
        --sky-t1: #0F2B52;
        --sky-t2: #0B2042;
        --sun-t1: #3A2310;
        --sun-t2: #2B1A0C;
        --aqua-t1: #0A393B;
        --aqua-t2: #072A2C;
        --berry-t1: #3D1530;
        --berry-t2: #2D0F24;
        --violet-t1: #261D52;
        --violet-t2: #1C163E;
        --leaf-t1: #10361C;
        --leaf-t2: #0B2914;
        --coral-t1: #3E1A17;
        --coral-t2: #2E1311;
    }
}

/* Dark chosen in Profile and appearance */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0A1220;
    --surface: #101A2B;
    --line: #24354E;
    --line-strong: #34496A;
    --fg: #EAF0F8;
    --fg-2: #AEBBCD;
    --fg-3: #8A9AB0;
    --primary: #5DA3FF;
    --primary-soft: #0A2445;
    --bad-fg: #F97770;
    --bad-soft: #4B1D1B;
    --topbar-bg: rgba(16, 26, 43, 0.8);
    --topbar-line: rgba(255, 255, 255, 0.08);
    --input-bg: #0D1626;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px -2px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 10px 20px -6px rgba(0, 0, 0, 0.45), 0 32px 64px -12px rgba(0, 0, 0, 0.65);
    --dawn:
        radial-gradient(55% 70% at 6% 0%, rgba(255, 122, 2, 0.22) 0%, rgba(255, 122, 2, 0) 70%),
        radial-gradient(45% 60% at 96% 6%, rgba(0, 120, 239, 0.36) 0%, rgba(0, 120, 239, 0) 70%),
        radial-gradient(55% 60% at 55% 105%, rgba(238, 74, 155, 0.2) 0%, rgba(238, 74, 155, 0) 70%),
        linear-gradient(180deg, #0C1428 0%, #0E1431 55%, #0A1220 100%);
    --dawn-soft:
        radial-gradient(60% 50% at 0% 0%, rgba(255, 122, 2, 0.12), rgba(255, 122, 2, 0) 70%),
        radial-gradient(50% 45% at 100% 0%, rgba(0, 120, 239, 0.2), rgba(0, 120, 239, 0) 70%),
        #0A1220;
    --dawn-dot: rgba(255, 255, 255, 0.9);
    --bokeh: rgba(120, 170, 255, 0.1);
    --glass: rgba(16, 26, 43, 0.55);
    --glass-line: rgba(255, 255, 255, 0.14);
    --glass-hi: rgba(255, 255, 255, 0.12);
    --tint-line: rgba(255, 255, 255, 0.07);
    --tint-rim: rgba(255, 255, 255, 0.1);
    --tint-sheen: rgba(255, 255, 255, 0.06);
    --hl-a: #FFA766;
    --hl-b: #FF85BF;
    --sky-t1: #0F2B52;
    --sky-t2: #0B2042;
    --sun-t1: #3A2310;
    --sun-t2: #2B1A0C;
    --aqua-t1: #0A393B;
    --aqua-t2: #072A2C;
    --berry-t1: #3D1530;
    --berry-t2: #2D0F24;
    --violet-t1: #261D52;
    --violet-t2: #1C163E;
    --leaf-t1: #10361C;
    --leaf-t2: #0B2914;
    --coral-t1: #3E1A17;
    --coral-t2: #2E1311;
}

html[dir="rtl"] {
    --dir: -1;
}

/* Arabic pages use Readex Pro throughout. Arabic letters join, so spacing is never tightened. */
html:lang(ar) {
    --font-display: "Readex Pro", system-ui, sans-serif;
    --font-sans: "Readex Pro", system-ui, "Segoe UI", Tahoma, sans-serif;
    --display-spacing: 0;
}

/* Jewel hues: gradient stops (j1-j3), deeper accent stops (c1, c2), glow color (jg), ink,
   split-bar inks (jl, jr), title shadow (jts) and light tint (t1, t2).
   Every light stop keeps white display type at 3:1. */

.h-sky {
    --j1: #3394F7; --j2: #0A6FE0; --j3: #04479F; --c1: #0968D4; --c2: #04479F;
    --jg: 0, 120, 239; --jink: #FFFFFF; --jl: #FFFFFF; --jr: #0E1825;
    --jts: 0 2px 10px rgba(0, 25, 70, 0.28); --t1: var(--sky-t1); --t2: var(--sky-t2);
}

.h-sun {
    --j1: #FFC35C; --j2: #FF8A1E; --j3: #F06400; --c1: #FFC35C; --c2: #F06400;
    --jg: 255, 122, 2; --jink: #2A1200; --jl: #2A1200; --jr: #2A1200;
    --jts: 0 1px 0 rgba(255, 255, 255, 0.45); --t1: var(--sun-t1); --t2: var(--sun-t2);
}

.h-aqua {
    --j1: #6AF5E1; --j2: #06CBC1; --j3: #057973; --c1: #6AF5E1; --c2: #05928A;
    --jg: 6, 203, 193; --jink: #0E1825; --jl: #FFFFFF; --jr: #0E1825;
    --jts: 0 1px 0 rgba(255, 255, 255, 0.4); --t1: var(--aqua-t1); --t2: var(--aqua-t2);
}

.h-berry {
    --j1: #EC55A9; --j2: #D43E95; --j3: #AE0C74; --c1: #C52A88; --c2: #990B66;
    --jg: 212, 62, 149; --jink: #FFFFFF; --jl: #FFFFFF; --jr: #0E1825;
    --jts: 0 2px 10px rgba(90, 0, 40, 0.25); --t1: var(--berry-t1); --t2: var(--berry-t2);
}

.h-violet {
    --j1: #9A77FE; --j2: #692ED0; --j3: #5404B2; --c1: #7C4AE1; --c2: #4A049D;
    --jg: 105, 46, 208; --jink: #FFFFFF; --jl: #FFFFFF; --jr: #0E1825;
    --jts: 0 2px 10px rgba(40, 10, 110, 0.28); --t1: var(--violet-t1); --t2: var(--violet-t2);
}

.h-night {
    --j1: #3C5A92; --j2: #1B2D58; --j3: #0B1430; --c1: #3C5A92; --c2: #0B1430;
    --jg: 27, 45, 88; --jink: #FFFFFF; --jl: #FFFFFF; --jr: #FFFFFF;
    --jts: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Base */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    background: var(--dawn-soft);
    background-color: var(--bg);
    background-size: 100% 52rem;
    background-repeat: no-repeat;
    color: var(--fg);
    font-family: var(--font-sans);
    line-height: 1.6;
    overflow-wrap: break-word;  /* a word longer than its line, such as a file's hash, breaks instead of widening the page */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    flex: 1;
}

h1,
h2,
h3 {
    margin: 0 0 0.5em;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: var(--display-spacing);
    text-wrap: balance;
}

p {
    margin: 0 0 1rem;
}

a {
    color: var(--primary);
    text-underline-offset: 0.2em;
}

:focus-visible {
    outline: 3px solid rgba(0, 120, 239, 0.55);
    outline-offset: 2px;
}

.wrap {
    width: min(72rem, 100% - 2rem);
    margin-inline: auto;
}

.skip {
    position: absolute;
    top: -4rem;
    inset-inline-start: 1rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    background: var(--surface);
    color: var(--fg);
    font-weight: 700;
    box-shadow: var(--shadow-xl);
}

.skip:focus {
    top: 1rem;
}

/* Icons come from the sprite in includes/icons.html */

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.ic {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

[dir="rtl"] .ic-flip {
    transform: scaleX(-1);
}

/* Glow layer */

/* Jewel: 1 gradient, 2 swoosh, 3 rim light, 4 colored shadow, 5 sparkles and sheen.
   The swoosh and sparkles stay on the end side, away from where text starts. */
.jewel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--jink);
    background: linear-gradient(135deg, var(--j1) 0%, var(--j2) var(--jm, 46%), var(--j3) 100%);
    box-shadow:
        0 22px 44px -20px rgba(var(--jg), 0.62),
        0 8px 18px -10px rgba(var(--jg), 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -2px 6px rgba(0, 0, 0, 0.14);
}

.jewel::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -30%;
    inset-inline-end: -72%;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.34) 64%, rgba(255, 255, 255, 0.1) 68%, rgba(255, 255, 255, 0) 72%);
}

.jewel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        var(--sparkle) 94% 11% / 12px 12px no-repeat,
        var(--sparkle) 86% 27% / 8px 8px no-repeat,
        var(--sparkle) 95% 62% / 6px 6px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0, rgba(255, 255, 255, 0) 14px);
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.85));
}

[dir="rtl"] .jewel::after,
[dir="rtl"] .glow::before,
[dir="rtl"] .dawn::before {
    transform: scaleX(-1);
}

/* Glass: small text on a jewel sits on glass so it keeps 4.5:1 */
.glass-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    max-width: 100%;
    padding: 0.3rem 0.65rem;
    border-radius: 10px;
    background: rgba(0, 20, 60, 0.3);
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.35;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.glass-chip .ic {
    width: 0.95rem;
    height: 0.95rem;
}

.glass-note {
    max-width: 38rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background: rgba(0, 20, 60, 0.3);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.h-sun .glass-chip,
.h-aqua .glass-chip,
.h-sun .glass-note,
.h-aqua .glass-note {
    background: rgba(255, 255, 255, 0.5);
    color: var(--jink);
}

/* Split bar: the two-tone pill from the brand palette cards */
.jsplit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.jsplit span {
    position: relative;
    min-width: 0;
    padding: 0.5rem 0.65rem;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
}

.jsplit span:first-child {
    z-index: 1;
    margin-inline-end: -1rem;
    padding-inline-end: 1.4rem;
    border-start-end-radius: 999px;
    border-end-end-radius: 999px;
    background: var(--j3);
    color: var(--jl);
    box-shadow: calc(5px * var(--dir)) 0 12px -6px rgba(0, 0, 0, 0.35);
}

.jsplit span:last-child {
    padding-inline-start: 1.5rem;
    background: var(--j1);
    color: var(--jr);
}

/* Icon tiles */
.jbadge {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    color: var(--jink);
}

.jbadge .ic {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2.2;
}

.jbadge.sm {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9px;
}

.jbadge.sm .ic {
    width: 0.95rem;
    height: 0.95rem;
}

.jbadge.lg {
    width: 3rem;
    height: 3rem;
    border-radius: 15px;
}

.jbadge.lg .ic {
    width: 1.5rem;
    height: 1.5rem;
}

.jbadge.jewel {
    box-shadow:
        0 6px 14px -6px rgba(var(--jg), 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 3px rgba(0, 0, 0, 0.16);
}

.jbadge.jewel::before {
    display: none;
}

.jbadge.jewel::after {
    background:
        var(--sparkle) 82% 18% / 7px 7px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0, rgba(255, 255, 255, 0) 50%);
    filter: none;
}

/* A frosted tile for icons that sit on a jewel */
.jbadge.glass {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 14px -8px rgba(0, 0, 0, 0.35);
}

.h-sun .jbadge.glass,
.h-aqua .jbadge.glass {
    background: rgba(255, 255, 255, 0.45);
}

/* Glow tile: a hue's light tint, for cards that hold body text */
.glow {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--fg);
    background: linear-gradient(150deg, var(--t1) 0%, var(--t2) 100%);
    border: 1px solid var(--tint-line);
    box-shadow:
        0 16px 30px -18px rgba(var(--jg), 0.55),
        0 4px 10px -6px rgba(var(--jg), 0.3),
        inset 0 1px 0 var(--tint-rim);
}

.glow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(80% 60% at 0% 0%, var(--tint-sheen), rgba(255, 255, 255, 0) 60%);
}

/* Dawn: the pale backdrop that makes jewels glow */
.dawn {
    position: relative;
    isolation: isolate;
    background: var(--dawn);
}

.dawn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        var(--sparkle-o) 6% 18% / 12px 12px no-repeat,
        var(--sparkle) 34% 8% / 9px 9px no-repeat,
        var(--sparkle-b) 58% 94% / 10px 10px no-repeat,
        var(--sparkle) 95% 52% / 11px 11px no-repeat,
        var(--sparkle-o) 78% 9% / 8px 8px no-repeat,
        radial-gradient(circle at 18% 74%, var(--dawn-dot) 0 1.5px, rgba(255, 255, 255, 0) 3px),
        radial-gradient(circle at 47% 30%, var(--dawn-dot) 0 1.2px, rgba(255, 255, 255, 0) 2.6px),
        radial-gradient(circle at 86% 82%, var(--dawn-dot) 0 1.5px, rgba(255, 255, 255, 0) 3px),
        radial-gradient(16% 24% at 26% 42%, var(--bokeh), rgba(255, 255, 255, 0) 70%),
        radial-gradient(12% 18% at 72% 68%, var(--bokeh), rgba(255, 255, 255, 0) 70%);
}

/* Highlighted words in a headline */
.hl {
    background: linear-gradient(calc(90deg * var(--dir)), var(--hl-a), var(--hl-b));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Top bar */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--topbar-bg);
    border-block-end: 1px solid var(--topbar-line);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
}

.topbar-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    min-height: 4.25rem;
    padding-block: 0.5rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--fg);
    text-decoration: none;
}

.logo {
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    filter: drop-shadow(0 6px 10px rgba(22, 36, 56, 0.22));
}

/* The wordmark is Latin on every page */
.wordmark {
    font-family: "Bricolage Grotesque", "Readex Pro", system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.brand-sm .logo {
    width: 1.6rem;
    height: 1.6rem;
    filter: none;
}

.brand-sm .wordmark {
    font-size: 1.1rem;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.nav form {
    margin: 0;
}

.nav-link {
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    color: var(--fg);
    font-weight: 650;
    text-decoration: none;
}

.nav-link:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.nav .btn {
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
}

.lang {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--fg-2);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 650;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.lang:hover {
    border-color: var(--line-strong);
    color: var(--primary);
}

/* "EN" or "ع" replaces the full language name on small phones */
.lang-short {
    display: none;
}

/* Buttons */

.btn,
:is(.auth-card, .panel) button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.6rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

.btn:active,
:is(.auth-card, .panel) button[type="submit"]:active {
    transform: translateY(1px);
}

.btn-lg {
    min-height: 3.4rem;
    padding: 0.8rem 1.5rem;
    border-radius: 14px;
    font-size: 1.05rem;
}

/* Jewel accents: the jewel's gloss on buttons, on deeper stops so their text keeps 4.5:1 */
.btn-primary,
.btn-accent,
:is(.auth-card, .panel) button[type="submit"] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--jink);
    background: linear-gradient(165deg, var(--c1) 0%, var(--c2) 100%);
    border-color: transparent;
    box-shadow:
        0 10px 20px -12px rgba(var(--jg), 0.9),
        0 3px 8px -4px rgba(var(--jg), 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2);
}

.btn-primary::after,
.btn-accent::after,
:is(.auth-card, .panel) button[type="submit"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0) 10px);
}

/* A jewel button in a panel keeps its hue: a security key's Remove is coral, not this blue (LWIA-470) */
.btn-primary,
:is(.auth-card, .panel) button[type="submit"]:not(.btn-jewel) {
    --c1: #0968D4;
    --c2: #04479F;
    --jg: 0, 120, 239;
    --jink: #FFFFFF;
}

.btn-accent {
    --c1: #FFC35C;
    --c2: #F06400;
    --jg: 255, 122, 2;
    --jink: #2A1200;
}

.btn-primary:hover,
.btn-accent:hover,
:is(.auth-card, .panel) button[type="submit"]:hover {
    box-shadow:
        0 16px 28px -12px rgba(var(--jg), 0.95),
        0 4px 10px -4px rgba(var(--jg), 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2);
}

.btn-glass {
    background: var(--glass);
    color: var(--fg);
    border-color: var(--glass-line);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    backdrop-filter: blur(10px) saturate(1.4);
    box-shadow: 0 10px 24px -14px rgba(14, 40, 90, 0.4), inset 0 1px 0 var(--glass-hi);
}

.btn-glass:hover {
    box-shadow: 0 14px 28px -14px rgba(14, 40, 90, 0.5), inset 0 1px 0 var(--glass-hi);
}

.btn-ghost {
    background: transparent;
    color: var(--fg);
    font-weight: 650;
}

.btn-ghost:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.btn-outline-light {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.35);
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* Forms */

input:not([type]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
select,
textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--input-bg);
    color: var(--fg);
    font: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid transparent;
    border-color: #0A6FE0;
    box-shadow: var(--ring);
}

input::placeholder {
    color: var(--fg-3);
}

/* Email addresses, passwords and phone numbers are typed left to right, even on Arabic pages */
input[type="email"],
input[type="password"],
input[type="tel"] {
    direction: ltr;
}

[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="tel"] {
    text-align: right;
}

input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: #0A6FE0;
}

label {
    display: block;
    margin-block-end: 0.35rem;
    font-size: 0.925rem;
    font-weight: 700;
}

.helptext {
    display: block;
    margin-top: 0.4rem;
    color: var(--fg-3);
    font-size: 0.85rem;
}

.helptext ul {
    margin: 0;
    padding-inline-start: 1.1rem;
}

.helptext a {
    font-weight: 650;
}

.errorlist {
    margin: 0.45rem 0 0;
    padding: 0.55rem 0.8rem;
    list-style: none;
    border-radius: 10px;
    background: var(--bad-soft);
    color: var(--bad-fg);
    font-size: 0.875rem;
    font-weight: 600;
}

.errorlist.nonfield {
    margin: 0 0 1rem;
}

/* Messages */

.messages {
    display: grid;
    gap: 0.5rem;
    margin-block: 1.25rem 0;
    padding: 0;
    list-style: none;
}

.messages li {
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--tint-line);
    border-inline-start: 4px solid #0A6FE0;
    border-radius: 14px;
    background: linear-gradient(150deg, var(--sky-t1), var(--sky-t2));
    box-shadow: 0 12px 24px -18px rgba(0, 120, 239, 0.55), inset 0 1px 0 var(--tint-rim);
    font-weight: 600;
}

.messages li.success {
    border-inline-start-color: #2D944E;
    background: linear-gradient(150deg, var(--leaf-t1), var(--leaf-t2));
}

.messages li.warning {
    border-inline-start-color: #F06400;
    background: linear-gradient(150deg, var(--sun-t1), var(--sun-t2));
}

.messages li.error {
    border-inline-start-color: #B22003;
    background: linear-gradient(150deg, var(--coral-t1), var(--coral-t2));
}

/* Home page */

.hero {
    padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
    overflow: hidden;
    overflow: clip;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--glass-line);
    border-radius: 999px;
    background: var(--glass);
    box-shadow: 0 8px 18px -12px rgba(14, 40, 90, 0.35), inset 0 1px 0 var(--glass-hi);
    font-size: 0.875rem;
    font-weight: 700;
}

.spark {
    width: 0.9rem;
    height: 0.9rem;
    flex: none;
    background: var(--sparkle-o) center / contain no-repeat;
}

.hero h1 {
    margin: 1.1rem 0 1rem;
    font-size: clamp(2.5rem, 6vw, 4.25rem);
    line-height: 1.06;
    letter-spacing: -0.025em;
}

.lede {
    max-width: 34rem;
    margin: 0;
    color: var(--fg-2);
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
}

.cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.assure {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--fg-2);
    font-size: 0.9rem;
    font-weight: 600;
}

.assure li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.assure .ic {
    color: var(--primary);
}

.hero-art {
    position: relative;
    padding-block: 3.25rem 4.5rem;
}

.art-card {
    margin-inline: 4% 10%;
    padding: 1.5rem;
    border-radius: 28px;
}

.art-h {
    margin: 0.9rem 0 0.15rem;
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: var(--display-spacing);
    text-shadow: var(--jts);
}

/* 19px bold: large text, so 3:1 on the jewel is enough */
.art-sub {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

.art-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.art-stats div {
    padding: 0.7rem 0.75rem;
    border-radius: 16px;
    background: rgba(0, 20, 60, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.art-stats b {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
}

.art-stats span {
    display: block;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.3;
}

.art-chip {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: calc(100% - 0.5rem);
    padding-block: 0.45rem;
    padding-inline: 0.45rem 1rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
}

.art-chip.jewel::before {
    display: none;
}

.art-chip.jewel::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0) 50%);
    filter: none;
}

.art-chip.c1 {
    top: 0.75rem;
    inset-inline-end: 0;
    padding: 0.65rem 1.1rem;
    white-space: nowrap;
}

.art-chip.c2 {
    bottom: 2rem;
    inset-inline-start: 0;
}

.art-chip.c3 {
    top: 34%;
    inset-inline-end: 0;
}

.section {
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.section-soft {
    background: var(--dawn-soft);
}

.section-end {
    padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
}

.section-head {
    max-width: 40rem;
    margin: 0 auto 2.25rem;
    text-align: center;
}

.section-head h2 {
    margin: 0;
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
}

.section-head p {
    margin: 0.6rem 0 0;
    color: var(--fg-2);
    font-size: 1.1rem;
}

.features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.feature {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.feature > p {
    margin: 0;
    padding-inline: 0.35rem;
    color: var(--fg-2);
}

.fj {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    min-height: 14rem;
    padding: 1.25rem;
    border-radius: 24px;
}

.fj.jewel::before {
    display: none;
}

.fj h3 {
    margin: auto 0 0;
    font-size: 1.6rem;
    text-shadow: var(--jts);
}

.fj .jsplit {
    align-self: stretch;
}

.why {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.why-tile {
    padding: 1.5rem;
    border-radius: 22px;
}

.why-tile h3 {
    margin: 1rem 0 0.4rem;
    font-size: 1.25rem;
}

.why-tile p {
    margin: 0;
    color: var(--fg-2);
}

.cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    padding: clamp(1.75rem, 4vw, 3rem);
    border-radius: 32px;
}

.cta-band h2 {
    margin: 0 0 0.4rem;
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    text-shadow: var(--jts);
}

.cta-band p {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
}

.cta-band .cta {
    margin: 0;
}

/* Dashboard */

.dash {
    padding-block: 2rem 4rem;
}

.welcome {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: 28px;
}

.welcome h1 {
    margin: 1rem 0 0.9rem;
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    text-shadow: var(--jts);
    overflow-wrap: anywhere;
}

/* The firm under the greeting: plain text, so it doesn't read as a field */
.welcome-firm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    opacity: 0.9;
}

.dash-title {
    margin: 2.5rem 0 1.1rem;
    font-size: 1.45rem;
}

.modules {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.module {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1.4rem;
    border-radius: 22px;
}

.module h3 {
    margin: 0.4rem 0 0;
    font-size: 1.2rem;
}

.module p {
    margin: 0 0 0.5rem;
    color: var(--fg-2);
    font-size: 0.95rem;
}

.soon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--fg-2);
    font-size: 0.825rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.soon .ic {
    width: 0.95rem;
    height: 0.95rem;
}

/* Sign in, sign up and the other account pages (allauth) */

.auth-page {
    padding-block: clamp(1.5rem, 5vw, 4rem);
}

.auth {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    width: min(62rem, 100% - 2rem);
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--glass-line);
    border-radius: 32px;
    background: var(--surface);
    box-shadow: var(--shadow-xl);
}

.auth-art {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
    padding: clamp(1.75rem, 3vw, 2.5rem);
}

.auth-logo {
    display: grid;
    place-items: center;
    flex: none;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 20px -10px rgba(0, 20, 60, 0.5), inset 0 1px 0 #FFFFFF;
}

.auth-logo .logo {
    filter: none;
}

.auth-h {
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: var(--display-spacing);
    text-shadow: var(--jts);
    text-wrap: balance;
}

.auth-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-points .glass-chip {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}

.auth-card {
    padding: clamp(1.75rem, 4vw, 3rem);
}

.manage {
    padding-block: 2rem 4rem;
}

/* The offline page (UIX-24): the same notice in Arabic and in English, one under the other */
.offline-stack {
    display: grid;
    gap: 1.5rem;
    width: min(44rem, 100% - 2rem);
    margin-inline: auto;
    padding-block: clamp(1.5rem, 6vw, 4rem);
}

.offline-logo {
    display: block;
    margin-bottom: 1rem;
}

.offline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block: 1.5rem 1rem;
}

.panel {
    max-width: 44rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow-xl);
}

:is(.auth-card, .panel) h1 {
    margin-bottom: 0.4rem;
    font-size: clamp(1.75rem, 3vw, 2.2rem);
}

:is(.auth-card, .panel) > p {
    color: var(--fg-2);
}

:is(.auth-card, .panel) form {
    margin-block: 1.5rem 1rem;
}

:is(.auth-card, .panel) form > p {
    margin: 0 0 1.1rem;
}

/* Buttons at the end of a security page, such as Done on recovery codes */
.panel .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

/* "Remember me": the checkbox before its label, in either direction */
:is(.auth-card, .panel) form > p:has(> input[type="checkbox"]) {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
}

:is(.auth-card, .panel) form > p:has(> input[type="checkbox"]) label {
    margin: 0;
    font-weight: 600;
}

.auth-card button[type="submit"] {
    width: 100%;
    min-height: 3.1rem;
    margin-top: 0.25rem;
}

/* A value that's given, not typed, such as the invited email on an invitation (PLA-08) */
.auth-card input[readonly] {
    background: var(--bg);
    color: var(--fg-2);
}

/* Email addresses page: one radio row per address, verified and primary as pills */
.panel h2 {
    margin-top: 2.25rem;
    font-size: 1.35rem;
}

.panel form > p:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.panel form > p:has(> input[type="radio"]) label {
    margin: 0;
    font-weight: 600;
}

.panel label strong {
    display: inline-block;
    margin-inline-start: 0.35rem;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 0.78rem;
}

.panel form > button + button {
    margin-inline-start: 0.5rem;
}

/* Only the page's main action is a jewel button */
.panel button[name="action_primary"],
.panel button[name="action_send"],
.panel button[name="action_remove"] {
    background: var(--surface);
    color: var(--fg);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
}

.panel button[name="action_remove"] {
    color: var(--bad-fg);
    border-color: currentColor;
}

.panel button[name="action_primary"]::after,
.panel button[name="action_send"]::after,
.panel button[name="action_remove"]::after {
    display: none;
}

.panel button[name="action_primary"]:hover,
.panel button[name="action_send"]:hover,
.panel button[name="action_remove"]:hover {
    background: var(--primary-soft);
    box-shadow: var(--shadow-sm);
}

/* Plus Jakarta Sans sets word spaces tight at bold weights */
html:lang(en) :is(.kicker, .art-chip, .art-sub, .glass-chip, .jsplit span, .btn, .soon) {
    word-spacing: 0.06em;
}

/* Arabic display type needs room for its tall letters */
html:lang(ar) :is(h1, h2, h3, .art-h, .auth-h) {
    font-weight: 700;
    line-height: 1.35;
}

html:lang(ar) .hero h1 {
    letter-spacing: 0;
    line-height: 1.3;
}

/* On a phone a button's words wrap rather than widening the page, as a firm's long name in one can (LWIA-458) */
@media (max-width: 40rem) {
    .btn,
    :is(.auth-card, .panel) button[type="submit"] {
        max-width: 100%;
        white-space: normal;
    }
}

/* Footer */

.footer {
    padding-block: 1.75rem;
    border-block-start: 1px solid var(--line);
    color: var(--fg-3);
    font-size: 0.9rem;
}

.footer-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.footer p {
    margin: 0;
}

/* On a phone the guide's round button sits over the corner of the footer: room under its links (LWIA-466) */
@media (max-width: 40rem) {
    .footer {
        padding-block-end: 5.5rem;
    }
}

/* Smaller screens */

@media (max-width: 64rem) {
    .features,
    .modules {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 52rem) {
    .hero-grid,
    .why,
    .auth {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-art {
        width: 100%;
        max-width: 34rem;
        margin-inline: auto;
    }

    .auth-art {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;
        padding: 1.25rem 1.5rem;
    }

    .auth-h {
        margin: 0;
        font-size: 1.3rem;
    }

    .auth-points {
        display: none;
    }
}

@media (max-width: 36rem) {
    .features,
    .modules {
        grid-template-columns: minmax(0, 1fr);
    }

    .fj {
        min-height: 11rem;
    }

    .art-chip.c3 {
        display: none;
    }

    .cta .btn {
        flex: 1 1 auto;
    }

    .cta-band .cta {
        width: 100%;
    }
}

/* Phones: keep the top bar on one row */
@media (max-width: 30rem) {
    .topbar-in {
        min-height: 3.75rem;
        gap: 0.5rem 0.75rem;
    }

    .nav {
        gap: 0.25rem;
    }

    .nav-link,
    .nav .btn,
    .lang {
        padding-inline: 0.6rem;
        font-size: 0.9rem;
    }

    .nav-signin,
    .signed-in .topbar .wordmark {
        display: none;
    }

    .lang-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .lang-short {
        display: inline;
    }
}

@media (max-width: 24rem) {
    .topbar-in {
        gap: 0.5rem;
    }

    .nav-link,
    .nav .btn,
    .lang {
        padding-inline: 0.45rem;
    }
}

/* Phones set to larger text (UIX-25): Chrome on Android follows the phone's font size by zooming
   pages, which leaves the top bar less room than any phone has at normal size (22.5rem and up).
   It stays on one row by dropping the globe from the language button, then by showing the logo
   without the name, which screen readers still read. */
@media (max-width: 21.5rem) {
    .lang .ic {
        display: none;
    }
}

@media (max-width: 19.5rem) {
    .topbar .wordmark {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    input {
        transition: none;
    }
}

@media (forced-colors: active) {
    .jewel,
    .glow,
    .glass-chip,
    .btn {
        border: 1px solid CanvasText;
    }

    .hl {
        background: none;
        color: inherit;
    }
}

/* The public intake form (INT-01), also shown inside a firm's website */
.intake-public.is-embedded {
    background: transparent;
}

.intake-public.is-embedded .wrap {
    margin: 0;
    padding: 0;
}

.intake-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.intake-form legend {
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.intake-form .field + .field {
    margin-top: 0.25rem;
}

.intake-form .has-error :is(input, textarea) {
    border-color: var(--bad-fg, #B42318);
}

[hidden] {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Signing page (DOC-05) */
.sign-frame {
    width: 100%;
    height: min(75vh, 900px);
    border: 1px solid var(--line, #E2E8F1);
    border-radius: 12px;
    background: #fff;
}

/* Client portal (POR) */
.portal {
    padding-block: 1.5rem 3rem;
}

.portal-nav {
    flex-wrap: wrap;
}

.journey {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.journey li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--fg-3, #637185);
}

.journey-dot {
    width: 0.8rem;
    height: 0.8rem;
    border: 2px solid currentColor;
    border-radius: 999px;
}

.journey .is-done {
    color: var(--ok-fg, #0A7D38);
}

.journey .is-done .journey-dot {
    background: currentColor;
}

.journey .is-current {
    color: var(--primary, #0465CA);
    font-weight: 800;
}

.journey .is-current .journey-dot {
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(4, 101, 202, 0.18);
}

.request-item {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line, #E2E8F1);
}

.request-item.is-done {
    opacity: 0.7;
}

.chat {
    display: grid;
    gap: 0.8rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.chat-item {
    max-width: 85%;
    padding: 0.6rem 0.9rem;
    border-radius: 14px;
    background: rgba(4, 101, 202, 0.08);
}

.chat-item.is-mine {
    margin-inline-start: auto;
    border: 1px solid var(--line, #E2E8F1);
    background: transparent;
}

.portal {
    max-width: 52rem;
}

.portal .panel {
    width: 100%;
    max-width: none;
    padding: clamp(1.1rem, 3vw, 1.75rem);
}

.portal .panel h2 {
    margin-top: 0;
}

/* The portal in the firm's color (POR-08) */
.portal-page .firm-logo {
    max-height: 2.4rem;
    max-width: 10rem;
    object-fit: contain;
}

:is(.portal-page, .portal-preview, .swatch).hue-sun { --primary: #B34700; }
:is(.portal-page, .portal-preview, .swatch).hue-aqua { --primary: #007C84; }
:is(.portal-page, .portal-preview, .swatch).hue-berry { --primary: #B8126E; }
:is(.portal-page, .portal-preview, .swatch).hue-violet { --primary: #5A2FC2; }
:is(.portal-page, .portal-preview, .swatch).hue-leaf { --primary: #0A7D38; }
:is(.portal-page, .portal-preview, .swatch).hue-coral { --primary: #B22003; }
:is(.portal-page, .portal-preview, .swatch).hue-lemon { --primary: #9A6A00; }
:is(.portal-page, .portal-preview, .swatch).hue-night { --primary: #1B2A44; }

:is(.portal-page, .portal-preview).hue-sun .btn-primary { --c1: #E26300; --c2: #B34700; --jg: 226, 99, 0; }
:is(.portal-page, .portal-preview).hue-aqua .btn-primary { --c1: #00939C; --c2: #006B72; --jg: 0, 147, 156; }
:is(.portal-page, .portal-preview).hue-berry .btn-primary { --c1: #D0177F; --c2: #9C0F5E; --jg: 208, 23, 127; }
:is(.portal-page, .portal-preview).hue-violet .btn-primary { --c1: #6B3BD9; --c2: #4A23A8; --jg: 107, 59, 217; }
:is(.portal-page, .portal-preview).hue-leaf .btn-primary { --c1: #0E9446; --c2: #086A31; --jg: 14, 148, 70; }
:is(.portal-page, .portal-preview).hue-coral .btn-primary { --c1: #D42A0C; --c2: #9E1C05; --jg: 212, 42, 12; }
:is(.portal-page, .portal-preview).hue-lemon .btn-primary { --c1: #B07A00; --c2: #7F5700; --jg: 176, 122, 0; }
:is(.portal-page, .portal-preview).hue-night .btn-primary { --c1: #2A3D5E; --c2: #142036; --jg: 27, 42, 68; }

/* Online booking (INT-04) */
.booking-days {
    display: grid;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.booking-day .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.booking-day .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--line, #C1CCD9);
    border-radius: 999px;
    cursor: pointer;
}

.booking-day .pill:has(input:checked) {
    border-color: var(--primary);
    background: rgba(4, 101, 202, 0.08);
    font-weight: 700;
}

/* The privacy policy (HRD-06): a dawn header, four tiles in short, then contents beside the text */
.legal-hero {
    padding-block: clamp(2.25rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
}

.legal-intro {
    max-width: 46rem;
}

.legal-intro h1 {
    margin: 1rem 0 0.75rem;
    font-size: clamp(2.1rem, 5vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.legal-intro .lede {
    max-width: 40rem;
    text-wrap: pretty;
}

.legal-date {
    margin: 1rem 0 0;
    color: var(--fg-3);
    font-size: 0.95rem;
}

.legal-short-section {
    padding-block-start: clamp(1.75rem, 4vw, 2.75rem);
}

.legal-short-h {
    margin: 0 0 1rem;
    font-size: 1.35rem;
}

.legal-short {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.legal-short .why-tile {
    padding: 1.25rem;
}

.legal-short .why-tile h3 {
    margin-block-start: 0.85rem;
    font-size: 1.1rem;
}

.legal {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 46rem);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem);
}

.legal-toc {
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 7rem);
    overflow: auto;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
}

.legal-toc h2 {
    margin: 0 0 0.6rem;
    color: var(--fg-3);
    font-size: 0.9rem;
}

.legal-toc ol {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding-inline-start: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.4;
}

.legal-toc a {
    color: var(--fg-2);
    text-decoration: none;
}

.legal-toc a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.legal-body {
    min-width: 0;
    line-height: 1.75;
    overflow-wrap: break-word;
}

.legal-body section {
    scroll-margin-top: 5.5rem;
}

.legal-body section + section {
    margin-block-start: 2.25rem;
    padding-block-start: 2.25rem;
    border-block-start: 1px solid var(--line);
}

.legal-body h2 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    line-height: 1.3;
}

.legal-body h3 {
    margin: 1.4rem 0 0.4rem;
    font-size: 1.08rem;
}

.legal-body p {
    margin: 0 0 0.9rem;
}

.legal-body ul {
    margin: 0 0 1rem;
    padding-inline-start: 1.25rem;
}

.legal-body li + li {
    margin-block-start: 0.45rem;
}

.legal-body code {
    padding: 0.05em 0.35em;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.88em;
}

.legal-body address {
    font-style: normal;
}

.legal-note {
    margin-block: 1.25rem 0;
    padding: 1rem 1.25rem;
    border-radius: 16px;
}

.legal-body .legal-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.25rem;
    padding: 0;
    list-style: none;
}

.legal-body .legal-services li + li {
    margin-block-start: 0;
}

.legal-service {
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    line-height: 1.55;
}

.legal-body .legal-service h3 {
    margin: 0 0 0.5rem;
    font-size: 1.02rem;
}

.legal-service dl,
.legal-cookies {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.3rem 0.75rem;
    margin: 0;
}

.legal-service dl {
    font-size: 0.93rem;
}

.legal-service dt {
    color: var(--fg-3);
    font-weight: 700;
}

.legal-service dd,
.legal-cookies dd {
    margin: 0;
}

.legal-cookies {
    margin-block: 1rem 1.25rem;
    gap: 0.6rem 1rem;
}

/* Sign-up says where the privacy policy is */
.auth-legal {
    margin: 1.25rem 0 0;
    color: var(--fg-3);
    font-size: 0.875rem;
}

@media (max-width: 60rem) {
    .legal {
        grid-template-columns: minmax(0, 1fr);
    }

    .legal-toc {
        position: static;
        max-height: none;
    }
}

@media (max-width: 26rem) {
    .legal-cookies {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
    }

    .legal-cookies dd + dt {
        margin-block-start: 0.5rem;
    }
}

/* Lawia's own pages for a link that leads nowhere, a page the role doesn't open, or a fault, and
   the same message on its own inside the slide-over panel (UIX-34, core/errors.py) */
.error-page {
    padding: clamp(1.5rem, 8vh, 5rem) 1rem;
}

.error-panel {
    display: grid;
    justify-items: center;
    max-width: 34rem;
    text-align: center;
}

.error-panel h1 {
    margin-block: 1rem 0.4rem;
}

.error-panel > p {
    max-width: 28rem;
    margin: 0;
}

/* In the app too, where panels otherwise fill the width */
.error-page .panel.error-panel {
    max-width: 34rem;
    margin-inline: auto;
}

.error-panel .form-actions {
    justify-content: center;
}

/* Back points the way back: right in Arabic, left in English (app.css does it in the app only) */
[dir="ltr"] .error-panel .flip-ltr {
    transform: scaleX(-1);
}

.error-panel .error-code {
    margin-top: 1.25rem;
    color: var(--fg-3);
    font-size: 0.8rem;
}

.error-note {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding: 1.5rem 1rem;
    text-align: center;
}

.error-note h2 {
    margin: 0;
    font-size: 1.15rem;
}

.error-note p {
    max-width: 28rem;
    margin: 0;
    color: var(--fg-2);
}

/* Show or hide a password (PLT-17): password-eye.js puts each password field and its eye button in
   .pw-eye, with the eye at the end of the line: on the right in English, on the left in Arabic. The
   field is typed left to right in both, also while it shows the text: its own direction is ltr, so
   its inline end is its right and its inline start its left, on either page. */
.pw-eye {
    display: grid;
    align-items: center;
}

.pw-eye > input,
.pw-eye-btn {
    grid-area: 1 / 1;
}

.pw-eye > input {
    min-width: 0;
    padding-inline-end: 3.4rem;
    direction: ltr;
}

[dir="rtl"] .pw-eye > input {
    padding-inline-end: 0.9rem;
    padding-inline-start: 3.4rem;
    text-align: end;
}

/* Edge shows an eye of its own in password fields; this one takes its place */
.pw-eye > input::-ms-reveal {
    display: none;
}

.pw-eye-btn {
    display: grid;
    place-items: center;
    justify-self: end;
    width: 2.5rem;
    height: 2.5rem;
    margin-inline-end: 0.3rem;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--fg-3);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.pw-eye-btn:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.pw-eye-btn:focus-visible {
    outline-offset: -3px;
}

.pw-eye-btn .ic {
    width: 1.25rem;
    height: 1.25rem;
}

/* The Lawia guide (LRN-02): a round button at the bottom corner of every page, and its chat panel.
   In site.css so the public pages have it too; its own small buttons and menu, as app.css isn't there. */
.guide .icon-btn {
    display: inline-grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--fg-2);
    font: inherit;
    cursor: pointer;
}

.guide .icon-btn:hover {
    background: var(--glass);
    color: var(--fg);
}

.guide .icon-btn:focus-visible,
.guide-btn:focus-visible,
.guide-chip:focus-visible,
.guide-lesson-shot:focus-visible {
    outline: 0;
    box-shadow: var(--ring);
}

.guide-btn {
    position: fixed;
    inset-block-end: max(1.1rem, env(safe-area-inset-bottom));
    inset-inline-end: 1.1rem;
    z-index: 90;
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--jink);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.guide-btn .ic {
    width: 1.5rem;
    height: 1.5rem;
}

.guide-btn:hover {
    transform: translateY(-2px);
}

.guide.is-open .guide-btn {
    display: none;
}

.guide-panel {
    position: fixed;
    inset-block-end: max(1.1rem, env(safe-area-inset-bottom));
    inset-inline-end: 1.1rem;
    z-index: 95;
    display: flex;
    flex-direction: column;
    width: min(24rem, calc(100vw - 2.2rem));
    height: min(40rem, calc(100dvh - 6rem));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    color: var(--fg);
    box-shadow: var(--shadow-xl);
    animation: guide-in 0.22s ease;
}

@keyframes guide-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
}

/* A menu opened from the app's top bar (the account menu, the + menu, notifications) sits above the panel */
.app-top:has(.menu[open]) {
    z-index: 96;
}

/* An answer arrives after the thinking dots: it fades in and settles, never pops */
.guide-msg.is-arriving > * {
    animation: guide-arrive 0.4s ease-out both;
}

@keyframes guide-arrive {
    from { opacity: 0; transform: translateY(6px); }
}

.guide-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.6rem 0.7rem 0.9rem;
    border-bottom: 1px solid var(--line);
    background: var(--dawn-soft);
}

.guide-mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 12px;
}

.guide-titles {
    display: grid;
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}

.guide-titles span {
    color: var(--fg-3);
    font-size: 0.78rem;
}

.guide-menu {
    position: relative;
}

.guide-menu > summary {
    list-style: none;
}

.guide-menu > summary::-webkit-details-marker {
    display: none;
}

.guide-menu-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    inset-inline-end: 0;
    z-index: 2;
    display: grid;
    gap: 0.1rem;
    min-width: 15rem;
    padding: 0.4rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-xl);
}

.guide-menu-panel a,
.guide-menu-panel button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--fg);
    font: inherit;
    font-weight: 600;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.guide-menu-panel a:hover,
.guide-menu-panel button:hover {
    background: var(--primary-soft);
}

.guide-log {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.guide-msg {
    max-width: 92%;
    padding: 0.6rem 0.85rem;
    border-radius: 16px;
    font-size: 0.95rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.guide-msg p,
.guide-msg ul,
.guide-msg ol {
    margin: 0 0 0.45rem;
}

.guide-msg > :last-child,
.guide-reply > :last-child {
    margin-bottom: 0;
}

.guide-msg ul,
.guide-msg ol {
    padding-inline-start: 1.1rem;
}

.guide-msg kbd,
.guide-msg code {
    padding: 0.05em 0.35em;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.85em;
}

.guide-msg.is-you {
    align-self: flex-end;
    border-end-end-radius: 6px;
    background: linear-gradient(165deg, var(--c1) 0%, var(--c2) 100%);
    color: var(--jink);
}

.guide-msg.is-guide {
    align-self: flex-start;
    border: 1px solid var(--line);
    border-end-start-radius: 6px;
    background: var(--bg);
}

.guide-topic {
    color: var(--fg-3);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.guide-topic a {
    color: inherit;
    text-decoration: none;
}

.guide-topic a:hover {
    text-decoration: underline;
}

.guide-excerpt.is-folded,
.guide-topic.is-folded,
.guide-reply .is-folded {
    display: none;
}

/* LRN-06: what the guide says about its own answer (records, legal questions, a partial answer), and a
   comparison's two sides */
.guide-note,
.guide-hedge,
.guide-lead {
    color: var(--fg-2);
    font-size: 0.9rem;
    font-weight: 600;
}

.guide-side + .guide-side {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--line);
}

.guide-ai-label,
.guide-wording {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--fg-3);
    font-size: 0.78rem;
}

.guide-wording {
    font-style: italic;
}

.guide-dots {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    height: 1.4rem;
}

.guide-dots span {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--fg-3);
    animation: guide-dot 1s infinite ease-in-out;
}

.guide-dots span:nth-child(2) { animation-delay: 0.15s; }
.guide-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes guide-dot {
    0%, 80%, 100% { opacity: 0.3; }
    40% { opacity: 1; }
}

.guide-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 1rem 0.6rem;
}

.guide-chips:empty {
    display: none;
}

.guide-chip {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
}

.guide-chip:hover {
    background: var(--primary-soft);
}

.guide-form {
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.guide-form input {
    flex: 1;
    min-width: 0;
    min-height: 2.6rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--input-bg);
    color: inherit;
    font: inherit;
}

.guide-form input:focus {
    outline: 0;
    border-color: var(--primary);
    box-shadow: var(--ring);
}

.guide-send {
    color: var(--primary);
}

.guide .guide-send {
    width: 2.6rem;
    height: 2.6rem;
}

.guide-btn-sm {
    min-height: 2.2rem;
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
}

.guide-lesson {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 14px;
}

.guide-lesson-shot {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    background: #0A1220;
    cursor: pointer;
}

.guide-lesson-shot img,
.lesson-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guide-lesson.is-phone .guide-lesson-shot img,
.lesson-card.is-phone .lesson-shot img {
    object-fit: contain;
}

.guide-lesson video {
    display: block;
    width: 100%;
    border-radius: 10px;
    background: #000;
}

.guide-lesson-title {
    margin: 0.45rem 0.2rem 0;
    font-size: 0.9rem;
    font-weight: 700;
}

.guide-toast {
    position: fixed;
    inset-block-end: 1.2rem;
    inset-inline-start: 50%;
    z-index: 99;
    max-width: calc(100vw - 2rem);
    padding: 0.7rem 1rem;
    border-radius: 12px;
    background: var(--fg);
    color: var(--bg);
    font-weight: 600;
    box-shadow: var(--shadow-xl);
    transform: translateX(calc(-50% * var(--dir)));
}

@media (max-width: 36rem) {
    .guide-panel {
        inset: 0;
        width: auto;
        height: auto;
        border: 0;
        border-radius: 0;
    }

    .guide-form {
        padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
    }
}

@media print {
    .guide {
        display: none;
    }
}

/* Lessons (LRN-01, LRN-04): cards, the Learn page and a lesson's page, on the public site and in the app */
.lesson-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    gap: 1.25rem;
}

.lesson-card {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border-radius: 20px;
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.lesson-card:hover {
    transform: translateY(-3px);
}

.lesson-shot {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 14px;
    background: #0A1220;
}

.lesson-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.lesson-play .ic {
    width: 1.3rem;
    height: 1.3rem;
    margin-inline-start: 0.15rem;
}

.lesson-clock {
    position: absolute;
    inset-block-end: 0.5rem;
    inset-inline-end: 0.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
    background: rgba(0, 20, 60, 0.6);
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lesson-title {
    padding-inline: 0.25rem;
    font-size: 1.05rem;
}

.lesson-summary {
    padding-inline: 0.25rem;
    color: var(--fg-2);
    font-size: 0.92rem;
}

.lesson-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.lesson-head h1 {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.15;
}

.lesson-eyebrow {
    margin: 0 0 0.25rem;
    color: var(--fg-3);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lesson-eyebrow a {
    color: inherit;
    text-decoration: none;
}

.lesson-lede {
    max-width: 44rem;
    margin: 0.4rem 0 0;
    color: var(--fg-2);
}

.lesson-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
}

.learn-hero {
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
}

.learn-hero h1 {
    margin: 1rem 0 0.75rem;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.learn-hero .lesson-actions {
    margin-top: 1rem;
}

.learn-public {
    padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
}

.learn-all {
    margin: 2rem 0 0;
    text-align: center;
}

.hero-learn {
    margin: 1.1rem 0 0;
}

.hero-learn a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
}

.lesson-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr);
    gap: 1.25rem;
    align-items: start;
    margin-bottom: 1.25rem;
}

.lesson-layout.is-phone {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 1.3fr);
}

.lesson-player {
    margin: 0;
    padding: 0.75rem;
    border-radius: 20px;
}

.lesson-video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    background: #000;
}

.lesson-layout.is-phone .lesson-video {
    width: auto;
    max-width: 100%;
    max-height: 72vh;
    margin: 0 auto;
}

.lesson-steps {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lesson-steps button {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: inherit;
    font: inherit;
    line-height: 1.45;
    text-align: start;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.lesson-steps button:hover {
    border-color: var(--line-strong);
}

.lesson-steps li.is-current button {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.lesson-n {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 800;
}

.is-current .lesson-n {
    background: var(--primary);
    color: #FFFFFF;
}

.lesson-next {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-end: 4.5rem;  /* clear of the guide's button in the corner */
    padding-inline-end: 3.5rem;
}

.lesson-back {
    transform: scaleX(-1);
}

[dir="rtl"] .lesson-back {
    transform: none;
}

.rail-stack {
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

@media (max-width: 52rem) {
    .lesson-layout,
    .lesson-layout.is-phone {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .guide-panel {
        animation: none;
    }

    .guide-btn,
    .lesson-card {
        transition: none;
    }

    .guide-dots span {
        animation: none;
        opacity: 0.6;
    }

    .guide-msg.is-arriving > * {
        animation: guide-fade 0.4s ease-out both;
    }
}

@keyframes guide-fade {
    from { opacity: 0; }
}

@media (forced-colors: active) {
    .guide-btn,
    .guide-panel,
    .guide-chip,
    .guide-msg,
    .lesson-card,
    .lesson-steps button {
        border: 1px solid CanvasText;
    }
}

/* The leaf hue, for a lesson card on the public pages too (app.css has it for the app) */
.h-leaf {
    --j1: #8BD789; --j2: #2FA957; --j3: #0A7D38; --c1: #13853F; --c2: #0A6B30;
    --jg: 22, 150, 70; --jink: #0E1825; --bink: #FFFFFF;
    --jts: 0 1px 0 rgba(255, 255, 255, 0.4); --t1: var(--leaf-t1); --t2: var(--leaf-t2);
}

/* Learning paths (LRN-07): the lessons in order, path by path, with the progress kept in the browser; the help's
   front page in the menu's groups and an article's contents (LRN-10). */
.learn-paths {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.25rem);
}

.learn-path-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1rem;
    margin-bottom: 1rem;
}

.learn-path-text {
    flex: 1 1 18rem;
    min-width: 0;
}

.learn-path-text h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.3rem;
}

.learn-path-text p {
    margin: 0.2rem 0 0;
    color: var(--fg-2);
    font-size: 0.95rem;
}

.learn-mine {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--primary-soft, rgba(0, 120, 239, 0.12));
    color: var(--primary, #0057C8);
    font-size: 0.75rem;
    font-weight: 800;
}

.learn-path-meta {
    display: grid;
    justify-items: end;
    gap: 0.3rem;
    color: var(--fg-3);
    font-size: 0.85rem;
    font-weight: 700;
}

.learn-progress {
    color: var(--fg-2);
}

.learn-bar {
    display: block;
    inline-size: 8rem;
    block-size: 0.4rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--line);
}

.learn-bar i {
    display: block;
    inline-size: 0;
    block-size: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2E8BFF, #10B39A);
    transition: inline-size 0.4s ease;
}

.learn-path-lessons {
    margin: 0;
    padding: 0;
    list-style: none;
}

.learn-path-lessons > li {
    display: grid;
}

.lesson-number {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: rgba(10, 18, 32, 0.72);
    color: #FFFFFF;
    font-size: 0.8rem;
    font-weight: 800;
}

.lesson-done {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    display: none;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: #10B39A;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(16, 179, 154, 0.4);
}

.lesson-done .ic {
    width: 1rem;
    height: 1rem;
    stroke-width: 3;
}

.lesson-card:not(.is-done) .lesson-done-label {
    display: none;  /* "Done", for screen readers, only once it is */
}

.lesson-card.is-done .lesson-done {
    display: grid;
}

.lesson-card.is-done .lesson-shot img {
    opacity: 0.82;
}

.lesson-card.is-phone .lesson-shot {
    background: radial-gradient(120% 90% at 0% 0%, #FFE1C2 0%, transparent 60%),
        radial-gradient(120% 90% at 100% 0%, #CFE2FF 0%, transparent 60%), #F6F8FD;
}

.lesson-card.is-phone .lesson-shot img {
    object-fit: contain;
}

.learn-continue {
    max-width: 100%;
}

.learn-continue > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.learn-all-done {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #0E8C78;
    font-weight: 800;
}

.learn-all-done[hidden],
.learn-continue[hidden] {
    display: none;
}

.lesson-side {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.lesson-path {
    padding: 0.9rem 1rem;
}

.lesson-path ol {
    display: grid;
    gap: 0.25rem;
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
}

.lesson-path a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}

.lesson-path a:hover,
.lesson-path a[aria-current="page"] {
    background: var(--glass, rgba(0, 120, 239, 0.08));
}

.lesson-path a[aria-current="page"] {
    font-weight: 800;
}

.lesson-path .lesson-tick {
    display: none;
    margin-inline-start: auto;
    color: #10B39A;
}

.lesson-path a.is-done .lesson-tick {
    display: inline-block;
}

.learn-mark.is-done {
    color: #0E8C78;
}

.help-learn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
}

.help-learn > div:first-of-type {
    flex: 1 1 16rem;
}

.help-learn h2 {
    margin: 0;
    font-size: 1.1rem;
}

.help-learn p {
    margin: 0.15rem 0 0;
}

.help-learn-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.help-group {
    margin-bottom: 1.75rem;
}

.help-group-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}

.help-toc ol {
    margin: 0.4rem 0 0;
}

.help-rail-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.help-rail-all {
    margin: 0.75rem 0 0;
    font-weight: 700;
}

@media (max-width: 40rem) {
    .learn-path-meta {
        justify-items: start;
        inline-size: 100%;
    }

    /* On a phone the video comes right after the title: its buttons, steps and path follow it */
    .lesson-page {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .lesson-page > .lesson-head,
    .lesson-page > .lesson-layout {
        display: contents;
    }

    .lesson-head > :first-child { order: 1; }
    .lesson-page .lesson-player { order: 2; }
    .lesson-page .lesson-actions { order: 3; }
    .lesson-page .lesson-side { order: 4; }
    .lesson-page > .lesson-next { order: 5; padding-inline-end: 0; }
}

/* MAT-15: the ready practice areas in Settings, and a task checklist's print links */
.app-content .ready-area h3 {
    margin: 0;
}

.ready-area form {
    margin-block-start: auto;
}

.checklist-print {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: var(--fg-2);
}

/* PLT-16: Sign in with Microsoft or Google on the sign-in page, and the firm's sign-in panel */
.sso-sign-in {
    display: grid;
    gap: 0.6rem;
}

.auth-card .sso-sign-in form {
    margin: 0;
}

.sso-btn {
    width: 100%;
    min-height: 3.1rem;
}

.sso-logo {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
}

.sso-sign-in .helptext {
    margin: 0;
    text-align: center;
}

.sso-waiting {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.sso-waiting p {
    margin: 0;
}

.sso-waiting ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
}

/* CTY-06: Hijri dates beside Gregorian ones, Hijri dates typed into date fields, expected Islamic holidays */
.hijri {
    color: var(--fg-2);
    font-size: 0.82em;
    font-weight: 500;
}

.hijri-block {
    display: block;
}

.hijri-inline {
    margin-inline-start: 0.45em;
}

.hijri-inline::before {
    content: "· ";
}

.hijri-day {
    margin-inline-start: 0.3em;
    font-size: 0.68rem;
    font-weight: 600;
}

.hijri-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 0.3rem;
    color: var(--fg-2);
    font-size: 0.85rem;
}

.hijri-shown.is-wrong {
    color: var(--bad-fg, #B42318);
    font-weight: 650;
}

.hijri-field .hijri-input {
    inline-size: 8rem;
    min-block-size: 0;
    padding-block: 0.2rem;
    font-size: 0.85rem;
}

.holiday-name.is-expected {
    color: var(--fg-2);
    font-style: italic;
}

/* AIX-14: a drafted paper's citations, checked against Lawia's law library, the firm's sources and the case's
   documents: the panel beside the draft, the report, and an article's text */
.cite-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.6rem;
}

.cite-list {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 0.8rem;
    padding: 0;
    list-style: none;
}

.cite-item {
    padding-block: 0.5rem;
    padding-inline: 0.7rem;
    border-inline-start: 3px solid var(--line-strong);
    border-radius: 0.5rem;
}

.cite-item.is-flagged,
.cite-table tr.is-flagged td:first-child {
    border-inline-start-color: var(--bad-fg);
}

.cite-table tr.is-flagged td:first-child {
    border-inline-start: 3px solid var(--bad-fg);
}

.cite-head,
.cite-why,
.cite-source {
    margin: 0;
}

.cite-why {
    margin-block-start: 0.3rem;
    font-size: 0.9rem;
}

.cite-source {
    margin-block-start: 0.25rem;
    font-size: 0.88rem;
}

.cite-statement {
    display: block;
    margin-block-start: 0.35rem;
    font-size: 0.88rem;
    color: var(--fg-2);
}

.law-text {
    line-height: 1.9;
    white-space: normal;
}

.law-articles {
    display: grid;
    gap: 0.9rem;
}

.law-articles .law-text {
    margin: 0.2rem 0 0;
    color: var(--fg-2);
}

.code-block {
    overflow-x: auto;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    font-size: 0.82rem;
    text-align: start;
}

/* INT-09: sanctions screening hits and the KYC card */
.kyc-hits {
    display: grid;
    gap: 0.75rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.kyc-hit {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    background: var(--warn-soft, var(--primary-soft));
}

.kyc-hit.is-cleared,
.kyc-hit.is-proceed {
    background: var(--ok-soft, var(--primary-soft));
}

.kyc-hit.is-partner,
.kyc-hit.is-decline {
    background: var(--bad-soft);
}

.kyc-hit p {
    margin: 0;
}

.kyc-hit-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
}

.kyc-score {
    font-weight: 600;
}

.kyc-hit .choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.kyc-subject + .kyc-subject {
    margin-block-start: 1rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--line, rgba(127, 127, 127, 0.2));
}

.kyc-subject h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

.kyc-lists .pill + .pill {
    margin-inline-start: 0.25rem;
}

/* PLT-27: the security page's dated facts, and the status page's incidents */
.security-facts .security-when {
    padding-block-start: 0.6rem;
    color: var(--fg-2);
    font-size: 0.85rem;
}

.status-incidents > li {
    padding-block: 0.6rem;
    border-block-end: 1px solid var(--line, rgba(127, 127, 127, 0.2));
}

.status-incidents > li > p {
    margin-block: 0.35rem 0;
}

/* AIX-15: contracts reviewed against the firm's playbooks: the panel on a document's page, a playbook's clauses
   in Arabic and English, the review's points with their redlines, and the contract's text */
.cr-list {
    margin-block: 0.6rem 0;
}

.cr-draft {
    margin-block-start: 0.7rem;
}

.cr-draft summary,
.cr-edit summary,
.cr-more summary,
.cr-reword summary {
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
}

.cr-draft form,
.cr-edit form {
    margin-block-start: 0.6rem;
}

.cr-clause,
.cr-finding {
    display: grid;
    gap: 0.6rem;
}

.cr-clause-head,
.cr-finding-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
}

.cr-clause-head h3,
.cr-finding-head h2 {
    flex: 1 1 16rem;
    margin: 0;
    font-size: 1.05rem;
}

.cr-clause-head .row-actions {
    display: flex;
    gap: 0.2rem;
}

.cr-num {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.6rem;
    block-size: 1.6rem;
    margin-inline-end: 0.3rem;
    padding-inline: 0.3rem;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 700;
}

.cr-up {
    transform: rotate(180deg);
}

.cr-pairs {
    display: grid;
    gap: 0.35rem;
    margin: 0;
}

.cr-pairs dt {
    color: var(--fg-3);
    font-size: 0.8rem;
    font-weight: 650;
}

.cr-pairs dd {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.3rem 1rem;
    margin: 0 0 0.3rem;
}

.cr-pairs dd p {
    margin: 0;
}

.cr-pairs dd p:empty {
    display: none;
}

.cr-wording,
.cr-quote,
.cr-redline {
    margin: 0;
    padding-block: 0.5rem;
    padding-inline: 0.7rem;
    border-inline-start: 3px solid var(--line-strong);
    border-radius: 0.4rem;
    background: var(--bg);
    line-height: 1.8;
    text-align: start;
}

.cr-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.cr-lang {
    margin: 0;
    color: var(--fg-3);
    font-weight: 700;
}

.cr-langs .choice-chip {
    min-height: 2.1rem;
    padding-block: 0.25rem;
    text-decoration: none;
}

.cr-langs .choice-chip.is-active {
    border-color: transparent;
    background: linear-gradient(165deg, #0968D4, #04479F);
    color: #FFFFFF;
}

.cr-filter {
    margin: 0;
}

.cr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
}

.cr-difference {
    margin: 0;
    font-weight: 550;
}

.cr-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.cr-side h3 {
    margin: 0 0 0.35rem;
    color: var(--fg-3);
    font-size: 0.82rem;
}

.cr-side p {
    margin-block: 0 0.5rem;
}

.cr-redline del {
    color: var(--bad-fg);
    text-decoration: line-through;
}

.cr-redline ins {
    color: var(--ok-fg);
    text-decoration: underline;
}

.cr-finding.is-red-line {
    border-inline-start: 3px solid var(--bad-fg);
}

.cr-finding.is-dismissed .cr-cols,
.cr-finding.is-dismissed .cr-difference {
    opacity: 0.6;
}

.cr-decide {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-block-start: 0.5rem;
    border-block-start: 1px solid var(--line);
}

.cr-decide-form {
    display: grid;
    flex: 1 1 100%;
    gap: 0.5rem;
}

.cr-reword textarea {
    inline-size: 100%;
    margin-block-start: 0.4rem;
}

.cr-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.cr-text {
    line-height: 1.9;
}

.cr-para {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: 0 0.6rem;
    padding-block: 0.2rem;
    scroll-margin-block-start: 5rem;
}

.cr-para:target {
    border-radius: 0.4rem;
    background: var(--primary-soft);
}

.cr-para > p {
    margin: 0;
}

.cr-para-n {
    color: var(--fg-3);
    font-size: 0.8rem;
    text-align: end;
}

.cr-para-links {
    display: flex;
    flex-wrap: wrap;
    grid-column: 2;
    gap: 0.3rem;
    margin: 0.2rem 0 0.4rem;
}

.cr-mark {
    padding-inline: 0.1rem;
    border-radius: 0.2rem;
    background: var(--warn-soft);
    color: inherit;
}

.cr-mark.bad {
    background: var(--bad-soft);
}

.cr-mark.ok,
.cr-mark.info {
    background: var(--ok-soft);
}

/* DOC-13: data rooms. The firm's room page (folders picked, parties, questions) and the guest's viewer, whose
   pages are pictures carrying the guest's watermark */
.room-folders {
    max-block-size: 18rem;
    overflow-y: auto;
}

.room-party + .room-party,
.room-questions > li + li {
    margin-block-start: 1rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--line, rgba(127, 127, 127, 0.2));
}

.room-party h3 {
    margin: 0;
    font-size: 1rem;
}

.room-answer {
    margin: 0;
    padding: 0.6rem 0.9rem;
    border-inline-start: 3px solid var(--primary);
    border-radius: 10px;
    background: var(--primary-soft);
}

.room-folder > summary {
    padding-block: 0.4rem;
    font-weight: 600;
    cursor: pointer;
}

.room-pages {
    display: grid;
    justify-items: center;
    gap: 1rem;
}

.room-pages img {
    inline-size: 100%;
    max-inline-size: 900px;
    block-size: auto;
    border-radius: 6px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    user-select: none;
    -webkit-user-drag: none;
}

/* BIL-19: a case's fee cap and budgets, each with a meter of what is used; one that is reached turns red */
.budget-list {
    display: grid;
    gap: 0.85rem;
}

.budget-row {
    display: grid;
    gap: 0.3rem;
}

.budget-row .identifier,
.budget-row .helptext {
    margin: 0;
}

.budget-row.is-reached .meter > span {
    background: linear-gradient(90deg, #F2545B, var(--bad-fg));
}

.budget-row.is-reached strong {
    color: var(--bad-fg);
}

.stage-budgets {
    margin-block-start: 1.25rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--line);
}

/* AIX-17: a case's chronology of facts: the document and folder picker, the facts table and its flags */
.chrono-picker {
    max-height: 26rem;
    overflow: auto;
    padding: 0.75rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.chrono-tree,
.chrono-tree ul {
    display: grid;
    gap: 0.3rem;
    margin: 0.35rem 0 0;
}

.chrono-tree > li {
    padding-inline-start: calc(var(--depth, 0) * 1.25rem);
}

.chrono-tree ul {
    padding-inline-start: 1.6rem;
}

.chrono-tree .check.is-off {
    opacity: 0.6;
}

.chrono-bar {
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin-block-end: 0.5rem;
}

.chrono-table td {
    vertical-align: top;
}

.chrono-table .chrono-tick {
    width: 2rem;
}

.chrono-table .chrono-date {
    white-space: nowrap;
}

.chrono-written,
.chrono-quote {
    display: block;
    margin-block-start: 0.15rem;
    font-size: 0.82rem;
}

.chrono-quote {
    white-space: normal;
}

.chrono-sources a,
.chrono-place {
    display: block;
}

.chrono-place a {
    display: inline;
}

.chrono-conflict {
    width: fit-content;
    margin-block-start: 0.35rem;
}

.chrono-table tr.is-flagged td {
    background: color-mix(in srgb, var(--bad-soft) 55%, transparent);
}

.chrono-table tr.chrono-editing td {
    background: color-mix(in srgb, var(--primary-soft) 70%, transparent);
}

/* AIX-16: review tables: a case's documents in rows, a question in each column, each answer with the document's
   words and a link to its page; the first column stays in view while the table scrolls sideways */
.rt-page .btn-xs {
    min-height: 1.75rem;
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
    font-size: 0.78rem;
}

.rt-picker,
.rt-page fieldset.panel {
    display: grid;
    gap: 0.6rem;
}

.rt-picker legend,
.rt-page fieldset.panel legend {
    padding-inline: 0.3rem;
    font-weight: 700;
}

.rt-folders,
.rt-starts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.4rem 1rem;
}

.rt-choice {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.rt-some summary,
.rt-own summary,
.rt-set summary {
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
}

.rt-group {
    margin: 0.7rem 0 0.2rem;
    color: var(--fg-3);
    font-size: 0.82rem;
    font-weight: 700;
}

.rt-docs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 0.25rem 1rem;
}

.rt-question {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.6rem 1rem;
    margin-block-start: 0.6rem;
}

.rt-q-text {
    grid-column: 1 / -1;
}

.rt-fill h2 {
    margin-block-start: 0;
}

.rt-wrap {
    max-block-size: 75vh;
    overflow: auto;
}

.rt-grid {
    min-inline-size: 100%;
    inline-size: max-content;
    font-size: 0.88rem;
}

.rt-grid th,
.rt-grid td {
    vertical-align: top;
}

.rt-grid thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: var(--surface, var(--bg));
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
}

.rt-grid .rt-doc {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    inline-size: 15rem;
    min-inline-size: 13rem;
    background: var(--surface, var(--bg));
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.rt-grid thead .rt-doc {
    z-index: 3;
}

.rt-col {
    min-inline-size: 12rem;
    max-inline-size: 18rem;
}

.rt-head {
    display: block;
    color: var(--fg);
    font-size: 0.86rem;
}

.rt-kind {
    display: block;
    color: var(--fg-3);
    font-size: 0.72rem;
    font-weight: 600;
}

.rt-remove {
    display: inline;
}

.rt-row-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-block-start: 0.3rem;
    font-weight: 400;
}

.rt-row-tools form {
    margin: 0;
}

.rt-flag form {
    margin-block-start: 0.3rem;
}

.rt-flagged {
    margin-block-start: 0.25rem;
}

.rt-grid tr.is-flagged .rt-doc {
    box-shadow: inset calc(3px * var(--dir, 1)) 0 0 var(--bad-fg);
}

.rt-cell {
    min-inline-size: 12rem;
    max-inline-size: 18rem;
}

.rt-cell a.rt-answer {
    display: block;
    color: var(--fg);
    font-weight: 500;
}

.rt-quote {
    display: -webkit-box;
    overflow: hidden;
    margin-block-start: 0.3rem;
    color: var(--fg-3);
    font-size: 0.8rem;
    font-style: italic;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.rt-src {
    display: block;
    margin-block-start: 0.25rem;
    font-size: 0.78rem;
}

.rt-none,
.rt-empty,
.rt-asking {
    color: var(--fg-3);
}

.rt-failed {
    color: var(--bad-fg);
}

.rt-cell.is-edited {
    background: var(--warn-soft);
}

.rt-cell.is-asking {
    background: color-mix(in srgb, var(--primary-soft) 50%, transparent);
}

.rt-big {
    font-size: 1.05rem;
    font-weight: 550;
}

.rt-label {
    margin: 0;
    color: var(--fg-3);
    font-size: 0.82rem;
}

.rt-set {
    padding-block: 0.6rem;
    border-block-end: 1px solid var(--line);
}

.rt-set-list {
    display: grid;
    gap: 0.35rem;
    margin-block: 0.6rem;
}

.rt-save form {
    margin-block-start: 0.5rem;
}

/* DOC-14: a contract review's accepted points as tracked changes in Word, on the review page and in the add-in */
.cr-word fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.cr-word legend {
    margin-block-end: 0.35rem;
    font-weight: 600;
}

.cr-skipped {
    margin-block: 0.35rem;
    padding-inline-start: 1.25rem;
}

.taskpane-points {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.taskpane-point {
    display: grid;
    gap: 0.35rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.taskpane-point p {
    margin: 0;
}

.taskpane-point[data-state="applied"],
.taskpane-point[data-state="dismissed"] {
    opacity: 0.7;
}

.taskpane-chips,
.taskpane-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.taskpane-redline {
    font-size: 0.9rem;
    text-align: start;
}

/* REP-08: the firm's experience: the search's fields and the export's options */
.experience-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.75rem 1rem;
}

.experience-fields .wide {
    grid-column: span 2;
}

/* One column on a phone: spanning two there would make the second, and widen the page (LWIA-458) */
@media (max-width: 40rem) {
    .experience-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .experience-fields .wide {
        grid-column: auto;
    }
}

.experience-export {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 1rem 0 0;
    border: 0;
    border-block-start: 1px solid var(--line, rgba(0, 0, 0, 0.08));
}

.experience-export legend {
    padding: 0;
    font-weight: 700;
}

.experience-table .col-title {
    min-inline-size: 14rem;
}

/* PLT-29: the developers page (/developers/): each endpoint with its method, address and scope */
.api-ops {
    display: grid;
    gap: 0.75rem;
    margin-block: 1rem 1.5rem;
}

.api-op {
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.api-op > p {
    margin: 0 0 0.35rem;
}

.api-op-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    text-align: start;
}

.api-method,
.api-scope {
    padding: 0.05em 0.5em;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.api-method {
    background: var(--primary-soft);
    color: var(--primary);
}

.api-scope {
    margin-inline-start: auto;
    border: 1px solid var(--line);
    color: var(--fg-3);
}

.api-params,
.api-fields {
    color: var(--fg-2);
    font-size: 0.92rem;
}

.api-fields {
    margin: 0.25rem 0 0;
}

.legal-body pre.code-block {
    margin: 0 0 1rem;
    line-height: 1.5;
    white-space: pre;
}

/* MAT-15 (follow-up): who delivers each item of a task's checklist, set beside the item */
.checklist li.with-who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.75rem;
}

.checklist li.with-who > label {
    flex: 1 1 14rem;
}

.checklist input.checklist-who {
    flex: 0 1 13rem;
    inline-size: auto;
    min-inline-size: 9rem;
    min-height: 2.3rem;
    margin-block-start: 0;
    padding-block: 0.3rem;
    padding-inline: 0.7rem;
    border-radius: 10px;
    font-size: 0.85rem;
}

/* AIX-14 for AIX-09: a saved reply to the other side's memo shows its citations as they were checked when it
   was saved, in the draft reply's panel on its document's page */
.paper-citations {
    margin-block-start: 1rem;
    padding-block-start: 0.8rem;
    border-block-start: 1px solid var(--line);
}

.paper-citations .panel-head h3 {
    margin: 0;
    font-size: 1rem;
}

/* The client's invoice link: each figure on its line, its label above it, as on the app's pages (LWIA-480) */
.manage .facts {
    display: grid;
    gap: 0.8rem;
    margin: 0 0 1rem;
}

.manage .facts dt {
    color: var(--fg-3);
    font-size: 0.8rem;
    font-weight: 700;
}

.manage .facts dd {
    margin: 0.1rem 0 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}