/* =============================================================================
   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;
}

/* Text that only screen readers should reach - labels for icon-only controls. */
.mo-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------- 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;
}

/* Icon only - the label lives in the tooltip, so the pill collapses to a circle. */
.mo-portrait__badge {
    position: absolute;
    inset-block-end: 0.9rem;
    inset-inline-start: 0.9rem;
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    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);
    color: var(--mo-ink-soft);
}

.mo-portrait__badge svg {
    width: 0.95rem;
    height: 0.95rem;
    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;
}

/* Projects: fewer, wider columns so a paragraph gets a readable measure
   (~45-60ch) instead of 4-word lines. auto-fit lets one or two projects
   share the full row rather than leaving empty tracks. */
.mo-cards--projects {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.mo-card--project .mo-card__media {
    aspect-ratio: 16 / 9;
}

.mo-card--project .mo-card__body {
    flex: 1 1 auto;
    gap: 0.7rem;
}

/* Stand-in cover for projects without an image, shown only when a sibling
   has one, so every title in the row starts on the same line. */
.mo-card__media--cover {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--mo-accent) 22%, transparent) 1px, transparent 0) 0 0 / 14px 14px,
        radial-gradient(28rem 14rem at 100% 0%, var(--mo-accent-soft), transparent 70%),
        linear-gradient(135deg, var(--mo-accent-soft), var(--mo-hover));
}

/* One column (two 20rem tracks no longer fit): nothing to align with. */
@media screen and (max-width: 43rem) {
    .mo-card__media--cover {
        display: none;
    }
}

.mo-card__cover-icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--mo-accent), var(--mo-accent-2));
    color: #ffffff;
    box-shadow: 0 10px 24px -10px var(--mo-accent);
    transition: transform 300ms ease;
}

.mo-card:hover .mo-card__cover-icon {
    transform: scale(1.06) rotate(-4deg);
}

.mo-card__cover-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.mo-card__summary {
    width: 100%;
}

.mo-card__summary > .mo-prose {
    margin-block-start: 0;
}

/* Clamped only when mosaic.js is running - it is what offers "Read more",
   so without it the full text must stay readable. Max-height + mask rather
   than line-clamp: the summary mixes paragraphs and bullet lists. */
html.mo-anim .mo-card__summary {
    max-height: 11.9em; /* 7 lines at the prose line-height */
    font-size: 0.92rem;
    overflow: hidden;
}

html.mo-anim .mo-card__summary > .mo-prose {
    font-size: 1em;
}

html.mo-anim .mo-card__summary[data-clamped="true"] {
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
    mask-image: linear-gradient(to bottom, #000 62%, transparent);
}

/* The footer sinks to the card's bottom edge, so tags and actions line up
   across a row however long each summary is. */
.mo-card__foot {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
    margin-block-start: auto;
    padding-block-start: 0.85rem;
    border-block-start: 1px solid var(--mo-border);
}

.mo-chips--tech {
    gap: 0.35rem;
}

.mo-chip.mo-chip--extra {
    display: none;
}

.mo-chip--more {
    color: var(--mo-accent);
    background: var(--mo-accent-soft);
}

.mo-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

/* "Read more" starts hidden; collapse the row (and a footer left with
   nothing visible) rather than leave an orphaned divider. */
.mo-card__actions:not(:has(> :not([hidden]))),
.mo-card__foot:not(:has(> .mo-chips, > .mo-card__actions > :not([hidden]))) {
    display: none;
}

.mo-link--external {
    margin-inline-start: auto;
}

html[dir="rtl"] .mo-link--more svg {
    transform: scaleX(-1);
}

/* Full project dialog. */
.mo-dialog.mo-dialog--project {
    width: min(42rem, calc(100vw - 2rem));
    max-height: min(52rem, calc(100dvh - 2rem));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mo-dialog--project .mo-dialog__head {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    background: var(--mo-tile);
    align-items: flex-start;
}

.mo-dialog--project .mo-dialog__title {
    font-size: 1.15rem;
    line-height: 1.35;
    padding-block-start: 0.3rem;
}

.mo-project__media {
    aspect-ratio: 16 / 9;
    background: var(--mo-hover);
    border-block-end: 1px solid var(--mo-border);
}

.mo-project__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.mo-project__body > .mo-prose {
    margin-block-start: 0;
    font-size: 0.96rem;
    max-width: 65ch;
}

.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,
    html.mo-anim .mo-card__summary {
        max-height: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .mo-chip.mo-chip--extra {
        display: inline-flex;
    }

    .mo-chip--more,
    .mo-link--more,
    .mo-card__media--cover {
        display: none !important;
    }

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

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