/* =============================================================================
   Mosaic profile template - stylesheet
   -----------------------------------------------------------------------------
   A bento grid: tiles on a canvas. Sections:

     01  Design tokens (light / dark / accents)
     02  Reset & base
     03  Icons
     04  Skip link & focus
     05  Floating toolbar & menus
     06  Shell & bands
     07  Tile base
     08  Identity band (hero + portrait)
     09  Facts band (stats, links, video, languages, QR)
     10  Section markers
     11  List tiles (entries, prose, papers, skills)
     12  Cards (projects, certificates)
     13  Quote cards
     14  Chips, buttons, links, avatars
     15  Contact band
     16  Dialogs & toast
     17  Reveal animation (gated on .mo-anim so a failed script hides nothing)
     18  Responsive (screen-scoped - see Dossier for why)
     19  Accessibility preferences
     20  Print (plain linearised cleanup only; Dossier is the print template)
   ========================================================================== */

/* ------------------------------------------------------- 01 design tokens */

:root {
    --mo-display: "Space Grotesk", "Rubik", system-ui, sans-serif;
    --mo-body: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;

    --mo-canvas: #f4f4f2;
    --mo-tile: #ffffff;
    --mo-ink: #17181c;
    --mo-ink-soft: #54555d;
    --mo-ink-faint: #94959d;
    --mo-border: #e7e7e2;
    --mo-border-strong: #d4d4cd;
    --mo-hover: #f6f6f3;
    --mo-shadow: 0 1px 2px rgb(23 24 28 / 0.05), 0 10px 32px -12px rgb(23 24 28 / 0.14);
    --mo-shadow-lift: 0 2px 4px rgb(23 24 28 / 0.06), 0 18px 44px -14px rgb(23 24 28 / 0.22);

    /* Accent pair drives gradients (stats, play button, contact band). */
    --mo-accent: #0284c7;
    --mo-accent-2: #22d3ee;
    --mo-accent-soft: rgb(2 132 199 / 0.1);
}

html[data-theme="dark"] {
    --mo-canvas: #0e0f12;
    --mo-tile: #17181d;
    --mo-ink: #ecedef;
    --mo-ink-soft: #a7a9b1;
    --mo-ink-faint: #63656e;
    --mo-border: #26272e;
    --mo-border-strong: #34353d;
    --mo-hover: #1d1e25;
    --mo-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 36px -12px rgb(0 0 0 / 0.5);
    --mo-shadow-lift: 0 2px 4px rgb(0 0 0 / 0.45), 0 20px 48px -14px rgb(0 0 0 / 0.6);
}

/* Accent pairs - keys match ProfileTemplateCatalog.Accents. Light mode gets
   ink-grade values for text contrast on white tiles; dark mode brighter. */
html[data-profile-accent="modern"]   { --mo-accent: #0284c7; --mo-accent-2: #22d3ee; --mo-accent-soft: rgb(2 132 199 / 0.1); }
html[data-profile-accent="classic"]  { --mo-accent: #3730a3; --mo-accent-2: #6366f1; --mo-accent-soft: rgb(55 48 163 / 0.1); }
html[data-profile-accent="minimal"]  { --mo-accent: #475569; --mo-accent-2: #94a3b8; --mo-accent-soft: rgb(71 85 105 / 0.1); }
html[data-profile-accent="creative"] { --mo-accent: #be185d; --mo-accent-2: #8b5cf6; --mo-accent-soft: rgb(190 24 93 / 0.1); }

html[data-theme="dark"][data-profile-accent="modern"]   { --mo-accent: #38bdf8; --mo-accent-soft: rgb(56 189 248 / 0.14); }
html[data-theme="dark"][data-profile-accent="classic"]  { --mo-accent: #818cf8; --mo-accent-soft: rgb(129 140 248 / 0.14); }
html[data-theme="dark"][data-profile-accent="minimal"]  { --mo-accent: #94a3b8; --mo-accent-soft: rgb(148 163 184 / 0.14); }
html[data-theme="dark"][data-profile-accent="creative"] { --mo-accent: #f472b6; --mo-accent-soft: rgb(244 114 182 / 0.14); }

/* --------------------------------------------------------- 02 reset & base */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body.mo-doc {
    margin: 0;
    background: var(--mo-canvas);
    color: var(--mo-ink);
    font-family: var(--mo-body);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Soft accent atmosphere behind the tiles. */
body.mo-doc::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(38rem 24rem at 85% -5%, var(--mo-accent-soft), transparent 70%),
        radial-gradient(30rem 22rem at -10% 40%, var(--mo-accent-soft), transparent 70%);
}

/* `hidden` is only UA-level display:none; our own display rules would beat
   it. This keeps inactive language blocks truly gone. */
.mo-doc [hidden] {
    display: none !important;
}

/* Element resets carry zero element specificity via :where(), so component
   rules like .mo-btn--solid always win - see the Dossier template for the
   ink-on-ink bug this prevents. */
.mo-doc :where(img) {
    max-width: 100%;
    display: block;
}

.mo-doc :where(h1, h2, h3, p, ul, ol, figure, blockquote) {
    margin: 0;
    padding: 0;
}

.mo-doc :where(ul, ol) {
    list-style: none;
}

.mo-doc :where(a) {
    color: inherit;
    text-decoration: none;
}

.mo-doc :where(button) {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: inherit;
}

/* --------------------------------------------------------------- 03 icons */

/* Sprite symbols are stroke-only paths. */
.mo-doc svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

/* ------------------------------------------------- 04 skip link & focus */

.mo-skip {
    position: fixed;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 100;
    padding: 0.55rem 1rem;
    background: var(--mo-ink);
    color: var(--mo-tile);
    border-radius: 0.6rem;
    font-size: 0.85rem;
    font-weight: 500;
    transform: translateY(-200%);
}

.mo-skip:focus-visible {
    transform: none;
}

.mo-doc :focus-visible {
    outline: 2px solid var(--mo-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ------------------------------------------- 05 floating toolbar & menus */

.mo-toolbar {
    position: fixed;
    inset-block-start: 0.9rem;
    inset-inline: 0;
    margin-inline: auto;
    width: fit-content;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem;
    background: color-mix(in oklab, var(--mo-tile) 85%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--mo-border);
    border-radius: 999px;
    box-shadow: var(--mo-shadow);
}

.mo-toolbar__brand {
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mo-accent), var(--mo-accent-2));
    color: #ffffff;
    font-family: var(--mo-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.mo-toolbar__group {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.mo-tool {
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 999px;
    color: var(--mo-ink-soft);
    transition: background-color 140ms ease, color 140ms ease;
}

.mo-tool:hover {
    background: var(--mo-hover);
    color: var(--mo-ink);
}

.mo-tool--lang span {
    font-family: var(--mo-display);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
}

.mo-menu {
    position: relative;
}

.mo-menu__panel {
    position: absolute;
    inset-block-start: calc(100% + 0.6rem);
    inset-inline-end: 0;
    min-width: 10.5rem;
    padding: 0.35rem;
    background: var(--mo-tile);
    border: 1px solid var(--mo-border);
    border-radius: 0.9rem;
    box-shadow: var(--mo-shadow);
    display: none;
}

.mo-menu[data-open="true"] .mo-menu__panel {
    display: block;
}

.mo-menu__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border-radius: 0.6rem;
    font-size: 0.85rem;
    color: var(--mo-ink-soft);
}

.mo-menu__item:hover {
    background: var(--mo-hover);
    color: var(--mo-ink);
}

.mo-menu__item .mo-menu__tick {
    margin-inline-start: auto;
    opacity: 0;
    width: 0.9rem;
    height: 0.9rem;
}

.mo-menu__item[aria-checked="true"] {
    color: var(--mo-ink);
    font-weight: 500;
}

.mo-menu__item[aria-checked="true"] .mo-menu__tick {
    opacity: 1;
    color: var(--mo-accent);
}

/* ------------------------------------------------------ 06 shell & bands */

.mo-shell {
    max-width: 72rem;
    margin-inline: auto;
    padding-block: 4.6rem 2rem;
    padding-inline: clamp(0.9rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: clamp(0.8rem, 1.6vw, 1.1rem);
}

.mo-section {
    display: flex;
    flex-direction: column;
    gap: clamp(0.8rem, 1.6vw, 1.1rem);
    margin-block-start: clamp(0.9rem, 2.5vw, 1.6rem);
}

/* --------------------------------------------------------- 07 tile base */

.mo-tile {
    background: var(--mo-tile);
    border: 1px solid var(--mo-border);
    border-radius: 1.25rem;
    padding: clamp(1.15rem, 2.5vw, 1.5rem);
    box-shadow: var(--mo-shadow);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.mo-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--mo-shadow-lift);
    border-color: var(--mo-border-strong);
}

.mo-tile__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mo-ink-faint);
}

/* --------------------------------------------- 08 identity band */

.mo-identity {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(0.8rem, 1.6vw, 1.1rem);
    align-items: stretch;
}

.mo-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mo-ink-faint);
}

.mo-eyebrow__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mo-accent), var(--mo-accent-2));
}

.mo-tile--hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    padding: clamp(1.4rem, 3.5vw, 2.4rem);
}

.mo-hero__honorific {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mo-accent);
    margin-block-start: 0.4rem;
}

.mo-hero__name {
    font-family: var(--mo-display);
    font-size: clamp(2.2rem, 5.5vw, 3.4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

html[lang="ar"] .mo-hero__name {
    letter-spacing: 0;
    line-height: 1.3;
}

.mo-hero__role {
    font-size: clamp(1.05rem, 2.2vw, 1.25rem);
    font-weight: 500;
    color: var(--mo-ink-soft);
}

.mo-hero__at {
    font-size: 0.9rem;
    color: var(--mo-ink-faint);
}

.mo-hero__at strong {
    font-weight: 600;
    color: var(--mo-ink-soft);
}

.mo-hero__bio {
    max-width: 46ch;
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--mo-ink-soft);
    margin-block-start: 0.3rem;
}

.mo-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-block-start: auto;
    padding-block-start: 1.1rem;
}

.mo-tile--portrait {
    position: relative;
    overflow: hidden;
    padding: 0;
    min-height: 20rem;
}

.mo-portrait__mono {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(150deg, var(--mo-accent-soft), transparent 60%), var(--mo-hover);
    color: var(--mo-ink-faint);
    font-family: var(--mo-display);
    font-size: clamp(3.5rem, 8vw, 5.5rem);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.mo-portrait__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mo-tile--portrait[data-image-failed="true"] .mo-portrait__img {
    display: none;
}

.mo-portrait__badge {
    position: absolute;
    inset-block-end: 0.9rem;
    inset-inline-start: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--mo-tile) 82%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--mo-border);
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--mo-ink-soft);
}

.mo-portrait__badge svg {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--mo-accent);
}

/* ----------------------------------------------------- 09 facts band */

.mo-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: clamp(0.8rem, 1.6vw, 1.1rem);
}

.mo-tile--stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    text-align: center;
    align-items: center;
}

.mo-stat__value {
    font-family: var(--mo-display);
    font-size: clamp(2.1rem, 3.5vw, 2.7rem);
    font-weight: 700;
    line-height: 1.05;
    background: linear-gradient(120deg, var(--mo-accent), var(--mo-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mo-stat__plus {
    font-size: 0.7em;
}

.mo-stat__label {
    font-size: 0.8rem;
    color: var(--mo-ink-faint);
}

.mo-tile--links {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.7rem;
}

.mo-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.mo-social__link {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.8rem;
    border: 1px solid var(--mo-border);
    color: var(--mo-ink-soft);
    transition: color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.mo-social__link:hover {
    color: var(--mo-accent);
    border-color: var(--mo-accent);
    transform: translateY(-2px);
}

.mo-tile--video {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

.mo-video__play {
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mo-accent), var(--mo-accent-2));
    color: #ffffff;
    flex: none;
    transition: transform 160ms ease;
}

.mo-tile--video:hover .mo-video__play {
    transform: scale(1.08);
}

.mo-video__play svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: currentColor;
    stroke: none;
}

.mo-video__text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.mo-video__sub {
    font-size: 0.85rem;
    color: var(--mo-ink-soft);
}

.mo-tile--languages {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.7rem;
}

.mo-tile--qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-align: center;
}

.mo-qrbox {
    display: grid;
    place-items: center;
    padding: 0.4rem;
    background: #ffffff;
    border: 1px solid var(--mo-border);
    border-radius: 0.8rem;
}

.mo-qrbox:empty {
    min-width: calc(112px + 0.8rem);
    min-height: calc(112px + 0.8rem);
}

.mo-qrbox canvas {
    display: block;
    border-radius: 0.4rem;
}

/* ----------------------------------------------------- 10 section markers */

.mo-marker {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--mo-display);
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    padding-inline: 0.25rem;
}

html[lang="ar"] .mo-marker {
    letter-spacing: 0;
}

.mo-marker__icon {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.7rem;
    background: var(--mo-accent-soft);
    color: var(--mo-accent);
}

.mo-marker__icon svg {
    width: 1rem;
    height: 1rem;
}

/* ------------------------------------------------------ 11 list tiles */

.mo-tile--list {
    display: flex;
    flex-direction: column;
}

.mo-entry {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 0.5rem 1.4rem;
    padding-block: 1.1rem;
}

.mo-entry + .mo-entry,
.mo-paper + .mo-paper {
    border-block-start: 1px solid var(--mo-border);
}

.mo-entry:first-child,
.mo-paper:first-child {
    padding-block-start: 0.15rem;
}

.mo-entry:last-child,
.mo-paper:last-child {
    padding-block-end: 0.15rem;
}

.mo-entry__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.mo-entry__title {
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.45;
}

.mo-entry__org {
    font-size: 0.88rem;
    color: var(--mo-ink-soft);
    margin-block-start: 0.1rem;
}

.mo-prose {
    margin-block-start: 0.55rem;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--mo-ink-soft);
}

.mo-prose p + p,
.mo-prose p + ul,
.mo-prose ul + p {
    margin-block-start: 0.55rem;
}

.mo-prose ul {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.mo-prose li {
    position: relative;
    padding-inline-start: 1.1rem;
}

.mo-prose li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.15rem;
    inset-block-start: 0.62em;
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mo-accent), var(--mo-accent-2));
}

.mo-paper {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: 1rem;
    padding-block: 1.1rem;
}

.mo-paper__no {
    font-family: var(--mo-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--mo-ink-faint);
    line-height: 1.7;
}

.mo-paper__where {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--mo-ink-soft);
    margin-block-start: 0.25rem;
}

.mo-paper__where em {
    font-style: italic;
}

.mo-paper .mo-link,
.mo-entry .mo-link {
    margin-block-start: 0.5rem;
}

.mo-skillgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.3rem;
}

.mo-skillgroup {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mo-skillgroup__title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mo-ink-soft);
}

/* -------------------------------------------------------------- 12 cards */

.mo-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: clamp(0.8rem, 1.6vw, 1.1rem);
}

.mo-cards--wide {
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.mo-cards--compact {
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
}

.mo-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.mo-card__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-block-end: 1px solid var(--mo-border);
    background: var(--mo-hover);
}

.mo-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
}

.mo-card:hover .mo-card__media img {
    transform: scale(1.03);
}

.mo-card__media--zoom {
    cursor: zoom-in;
}

.mo-card__zoom {
    position: absolute;
    inset-block-end: 0.6rem;
    inset-inline-end: 0.6rem;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.6rem;
    background: rgb(10 10 12 / 0.55);
    color: #ffffff;
    opacity: 0;
    transition: opacity 160ms ease;
}

.mo-card__media--zoom:hover .mo-card__zoom,
.mo-card__media--zoom:focus-visible .mo-card__zoom {
    opacity: 1;
}

.mo-card__zoom svg {
    width: 0.9rem;
    height: 0.9rem;
}

.mo-card__media--blank {
    aspect-ratio: auto;
    min-height: 4.5rem;
    display: grid;
    place-items: center;
    color: var(--mo-ink-faint);
}

.mo-card__media--blank svg {
    width: 1.4rem;
    height: 1.4rem;
}

.mo-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding: clamp(1rem, 2vw, 1.25rem);
}

.mo-card__title {
    font-family: var(--mo-display);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

html[lang="ar"] .mo-card__title {
    letter-spacing: 0;
}

.mo-card__title--sm {
    font-size: 0.95rem;
}

.mo-card__org {
    font-size: 0.83rem;
    color: var(--mo-ink-soft);
}

.mo-card__date {
    font-size: 0.78rem;
    color: var(--mo-ink-faint);
}

/* -------------------------------------------------------- 13 quote cards */

.mo-quote {
    padding: clamp(1.15rem, 2.5vw, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}

.mo-quote__mark {
    font-family: var(--mo-display);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 0.6;
    background: linear-gradient(120deg, var(--mo-accent), var(--mo-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Clamped with max-height + fade rather than line-clamp: a stray 7th line
   leaking past the ellipsis is exactly the bug Aurora hit. */
.mo-quote__text {
    font-size: 0.94rem;
    line-height: 1.7;
    color: var(--mo-ink-soft);
    max-height: 10.2em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
    mask-image: linear-gradient(to bottom, #000 72%, transparent);
}

.mo-quote__author {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-block-start: auto;
    padding-block-start: 0.5rem;
    width: 100%;
}

.mo-quote__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mo-quote__name {
    font-size: 0.88rem;
    font-weight: 600;
}

.mo-quote__role {
    font-size: 0.8rem;
    color: var(--mo-ink-faint);
}

.mo-quote__linkedin {
    margin-inline-start: auto;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    border: 1px solid var(--mo-border);
    color: var(--mo-ink-faint);
}

.mo-quote__linkedin:hover {
    color: var(--mo-accent);
    border-color: var(--mo-accent);
}

/* --------------------------------------- 14 chips, buttons, links, avatar */

.mo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.mo-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--mo-border);
    background: var(--mo-tile);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--mo-ink-soft);
}

.mo-chip--bare {
    border-color: transparent;
    background: var(--mo-hover);
    font-size: 0.76rem;
}

.mo-chip--date {
    background: var(--mo-hover);
    border-color: transparent;
    font-variant-numeric: tabular-nums;
}

.mo-chip--now {
    color: var(--mo-accent);
    border-color: color-mix(in oklab, var(--mo-accent) 45%, transparent);
    background: var(--mo-accent-soft);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Proficiency reads as a thin gradient underline inside the chip. */
.mo-chip--level {
    background-image: linear-gradient(90deg, var(--mo-accent), var(--mo-accent-2));
    background-size: var(--mo-level, 0%) 3px;
    background-repeat: no-repeat;
    background-position: bottom left;
}

html[dir="rtl"] .mo-chip--level {
    background-position: bottom right;
}

.mo-chip__level {
    font-size: 0.72rem;
    color: var(--mo-ink-faint);
    font-variant-numeric: tabular-nums;
}

.mo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.05rem;
    border: 1px solid var(--mo-border-strong);
    border-radius: 999px;
    font-size: 0.87rem;
    font-weight: 500;
    color: var(--mo-ink-soft);
    background: var(--mo-tile);
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.mo-btn:hover {
    background: var(--mo-hover);
    color: var(--mo-ink);
    transform: translateY(-1px);
}

.mo-btn svg {
    width: 0.95rem;
    height: 0.95rem;
}

.mo-btn--solid {
    background: linear-gradient(135deg, var(--mo-accent), var(--mo-accent-2));
    border-color: transparent;
    color: #ffffff;
}

.mo-btn--solid:hover {
    background: linear-gradient(135deg, var(--mo-accent), var(--mo-accent-2));
    color: #ffffff;
    filter: brightness(1.06);
}

.mo-btn--invert {
    background: rgb(255 255 255 / 0.14);
    border-color: rgb(255 255 255 / 0.28);
    color: #ffffff;
}

.mo-btn--invert:hover {
    background: rgb(255 255 255 / 0.24);
    color: #ffffff;
}

.mo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--mo-accent);
}

.mo-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.mo-link svg {
    width: 0.85rem;
    height: 0.85rem;
}

.mo-avatar {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    object-fit: cover;
    background: var(--mo-accent-soft);
    color: var(--mo-accent);
    font-size: 0.8rem;
    font-weight: 600;
    flex: none;
}

.mo-rule {
    border: 0;
    border-block-start: 1px solid var(--mo-border);
    margin-block: 1rem;
}

/* -------------------------------------------------------- 15 contact band */

.mo-tile--contact {
    margin-block-start: clamp(0.9rem, 2.5vw, 1.6rem);
    background:
        radial-gradient(30rem 16rem at 110% -20%, rgb(255 255 255 / 0.18), transparent 65%),
        linear-gradient(135deg, var(--mo-accent), var(--mo-accent-2));
    border-color: transparent;
    color: #ffffff;
    padding: clamp(1.6rem, 4vw, 2.6rem);
}

.mo-tile--contact:hover {
    transform: none;
}

.mo-contact__title {
    font-family: var(--mo-display);
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

html[lang="ar"] .mo-contact__title {
    letter-spacing: 0;
}

.mo-contact__text {
    margin-block-start: 0.4rem;
    font-size: 0.98rem;
    color: rgb(255 255 255 / 0.85);
    max-width: 52ch;
}

.mo-contact__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-block-start: 1.4rem;
}

/* ------------------------------------------------------- 16 dialogs & toast */

.mo-dialog {
    width: min(26rem, calc(100vw - 2rem));
    border: 1px solid var(--mo-border);
    border-radius: 1.1rem;
    background: var(--mo-tile);
    color: var(--mo-ink);
    padding: 0;
    box-shadow: var(--mo-shadow-lift);
}

.mo-dialog--video {
    width: min(52rem, calc(100vw - 2rem));
}

.mo-dialog::backdrop {
    background: rgb(10 10 14 / 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.mo-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-block-end: 1px solid var(--mo-border);
}

.mo-dialog__title {
    font-family: var(--mo-display);
    font-size: 1.05rem;
    font-weight: 600;
}

.mo-dialog__body {
    padding: 1.25rem;
}

.mo-dialog__img {
    width: 100%;
    border-radius: 0.6rem;
}

.mo-dialog__quote {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--mo-ink-soft);
    white-space: pre-line;
}

.mo-video__frame {
    aspect-ratio: 16 / 9;
    border-radius: 0.6rem;
    overflow: hidden;
    background: #000000;
}

.mo-video__frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.mo-share {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    align-items: center;
}

.mo-share__qr {
    display: grid;
    place-items: center;
    padding: 0.5rem;
    background: #ffffff;
    border: 1px solid var(--mo-border);
    border-radius: 0.8rem;
}

.mo-share__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
}

.mo-share__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.65rem 0.25rem;
    border: 1px solid var(--mo-border);
    border-radius: 0.8rem;
    font-size: 0.72rem;
    color: var(--mo-ink-soft);
    transition: background-color 140ms ease, color 140ms ease;
}

.mo-share__btn:hover {
    background: var(--mo-hover);
    color: var(--mo-ink);
}

.mo-share__copy {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-width: 0;
}

.mo-share__url {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    color: var(--mo-ink-faint);
    border: 1px solid var(--mo-border);
    border-radius: 999px;
    padding: 0.5rem 0.85rem;
}

/* ------------------------------------------------------------- back to top
   The grid is tall on narrow screens - every tile stacks - so returning to the
   identity tile is a long scroll without this. Logical inset keeps it in the
   trailing corner in both directions. */

.mo-top {
    position: fixed;
    inset-block-end: 1.25rem;
    inset-inline-end: 1.25rem;
    z-index: 80;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--mo-tile) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--mo-border);
    color: var(--mo-ink-soft);
    box-shadow: var(--mo-shadow-lift);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms, color 140ms ease, border-color 140ms ease;
}

.mo-top svg {
    width: 1.05rem;
    height: 1.05rem;
}

.mo-top[data-visible="true"] {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.mo-top:hover {
    color: var(--mo-accent);
    border-color: var(--mo-border-strong);
}

.mo-toast {
    position: fixed;
    inset-block-end: 1.25rem;
    inset-inline: 0;
    margin-inline: auto;
    width: fit-content;
    max-width: calc(100vw - 2rem);
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    background: var(--mo-ink);
    color: var(--mo-canvas);
    border-radius: 999px;
    font-size: 0.85rem;
    box-shadow: var(--mo-shadow-lift);
    opacity: 0;
    transform: translateY(0.75rem);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
}

.mo-toast[data-visible="true"] {
    opacity: 1;
    transform: none;
}

.mo-toast svg {
    width: 0.9rem;
    height: 0.9rem;
}

/* -------------------------------------------------- 17 reveal animation */

/* Gated on .mo-anim (added by mosaic.js): if the script never runs, nothing
   is hidden and the page reads fine without JavaScript. */
html.mo-anim [data-reveal] {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
}

html.mo-anim [data-reveal][data-revealed="true"] {
    opacity: 1;
    transform: none;
    transition:
        opacity 480ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--mo-i, 0) * 60ms),
        transform 480ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--mo-i, 0) * 60ms);
}

/* ---------------------------------------------------------- 18 responsive */

/* Screen-scoped so the phone layout can never leak into print. */
@media screen and (max-width: 63.99rem) {
    .mo-identity {
        grid-template-columns: minmax(0, 1fr);
    }

    .mo-tile--portrait {
        min-height: 0;
        aspect-ratio: 16 / 10;
        order: -1;
    }
}

@media screen and (max-width: 47.99rem) {
    .mo-shell {
        padding-block-start: 4.2rem;
    }

    .mo-band {
        grid-template-columns: repeat(2, 1fr);
    }

    .mo-tile--links,
    .mo-tile--video,
    .mo-tile--languages,
    .mo-tile--qr {
        grid-column: 1 / -1;
    }

    .mo-entry {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.45rem;
    }

    .mo-entry__meta {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .mo-paper {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.3rem;
    }

    .mo-paper__no {
        display: none;
    }
}

/* --------------------------------------- 19 accessibility preferences */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    html.mo-anim [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .mo-doc *,
    .mo-doc *::before,
    .mo-doc *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: more) {
    :root,
    html[data-theme="dark"] {
        --mo-border: var(--mo-border-strong);
        --mo-ink-faint: var(--mo-ink-soft);
    }
}

@media (forced-colors: active) {
    .mo-tile,
    .mo-dialog,
    .mo-toolbar,
    .mo-chip,
    .mo-btn {
        border: 1px solid CanvasText;
    }
}

/* ----------------------------------------------------------- 20 print */

/* A plain linearised cleanup only - members who care about paper output
   should use the Dossier template. */
@media print {
    body.mo-doc {
        background: #ffffff;
    }

    body.mo-doc::before {
        display: none;
    }

    [data-noprint],
    .mo-toolbar,
    .mo-toast,
    .mo-dialog,
    .mo-skip,
    .mo-tile--video,
    .mo-tile--qr {
        display: none !important;
    }

    .mo-shell {
        padding-block-start: 0;
        max-width: none;
    }

    .mo-identity,
    .mo-band,
    .mo-cards {
        display: block;
    }

    .mo-tile {
        box-shadow: none;
        border-color: #d4d4cd;
        break-inside: avoid;
        margin-block-end: 0.8rem;
    }

    .mo-tile--portrait {
        display: none;
    }

    html.mo-anim [data-reveal] {
        opacity: 1;
        transform: none;
    }

    .mo-quote__text {
        max-height: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .mo-tile--contact {
        background: #ffffff;
        color: #17181c;
        border: 1px solid #d4d4cd;
    }

    .mo-contact__text {
        color: #54555d;
    }
}