/* ── Palette "Grand Line — plein jour" ───────────────────────────────
   The room is lit like a morning on deck: warm wood, cream walls, sea
   light through the window, and the crew's primary colours as accents.
   scene.js reads every --room-* token at startup, so re-theming the
   room means editing this block and nothing else.                    */
:root {
    /* ── Room (read by scene.js) ──────────────────────────────────────
       Muted on purpose. The first pass was bright but harsh: saturated
       accents against near-white walls, everything at the same high
       luminance, nothing for the eye to rest on. These are the same
       hues knocked back and spread across a wider value range, so the
       room still reads as daylight without glaring.                  */
    --room-wall:    #E7DECE;
    --room-wall-2:  #DCD1BD;
    --room-floor:   #A8805C;
    --room-ceiling: #F4EEE4;
    --room-desk:    #E4DED5;
    --room-wood:    #96663F;
    --room-red:     #C4675C;
    --room-gold:    #D9AC63;
    --room-blue:    #6193B0;
    --room-green:   #74A58C;
    --room-sky:     #A8CFE0;
    --room-sea:     #4A87A8;
    --room-sun:     #FFF2DD;

    /* ── Interface accents ────────────────────────────────────────────
       Kept vivid: these are the colours inside the Mac, which read well
       against white and are not what tires the eye in the room.     */
    --ui-accent:    #E8463C;
    --ui-warm:      #E0A020;

    /* macOS-ish interface */
    --mac-chrome:   #ECECEC;
    --mac-side:     #F2F0F3;
    --mac-body:     #FFFFFF;
    --mac-line:     #D8D5D9;
    --mac-text:     #1C1C1E;
    --mac-dim:      #7A777E;
    --mac-accent:   #0A84FF;
    --mac-shadow:   0 1.2em 3em rgba(40, 24, 10, 0.26);

    /* Boot terminal: night that gives way to the sunrise behind it */
    --boot-bg:      #0C1522;
    --boot-ink:     #E8DECB;
    --boot-ok:      #D9AC63;
    --boot-warn:    #E08763;
    --boot-dim:     #6A7890;
    --boot-line:    #223044;

    --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* .screen, .finder and .win all declare `display: flex`, which outranks
   the UA rule for [hidden] and leaves them on screen when JS hides them. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: var(--boot-bg);
    color: var(--mac-text);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}

#room-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    cursor: pointer;
}
#room-canvas.is-docked { cursor: default; }

.noscript-fallback { padding: 3rem 1.5rem; max-width: 42rem; background: #fff; }
.noscript-fallback a { color: var(--mac-accent); }

/* ── Boot sequence ───────────────────────────────────────────────── */
.boot {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: radial-gradient(ellipse at 50% 120%, #1B3350 0%, var(--boot-bg) 60%);
    color: var(--boot-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    transition: opacity 1s ease;
}
.boot.is-done { opacity: 0; pointer-events: none; }

.boot::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px);
}

.boot-inner { width: min(62rem, 100%); }

.boot-log {
    margin: 0 0 1.25rem;
    font-family: var(--mono);
    font-size: clamp(0.66rem, 1.7vw, 0.9rem);
    line-height: 1.75;
    white-space: pre-wrap;
    min-height: 19em;
    text-shadow: 0 0 14px rgba(255, 197, 61, 0.3);
}
.boot-log .ok   { color: var(--boot-ok); }
.boot-log .warn { color: var(--boot-warn); }
.boot-log .dim  { color: var(--boot-dim); }
.boot-log .cur {
    display: inline-block;
    width: 0.6em;
    background: var(--boot-ok);
    animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

.boot-bar { height: 3px; background: var(--boot-line); border-radius: 2px; overflow: hidden; }
.boot-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #B4453B, #D97A45, var(--boot-ok));
    transition: width 0.25s linear;
}

.boot-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--boot-dim);
}
.boot-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.boot-btn {
    font: inherit;
    color: var(--boot-dim);
    background: transparent;
    border: 1px solid var(--boot-line);
    border-radius: 5px;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
}
.boot-btn:hover, .boot-btn:focus-visible { color: var(--boot-ok); border-color: var(--boot-ok); }

/* ── Welcome prompt ──────────────────────────────────────────────── */
.welcome {
    position: fixed;
    left: 50%;
    bottom: 6vh;
    z-index: 40;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    padding: 1rem 1.6rem;
    border-radius: 1.2rem;
    background: rgba(255, 253, 248, 0.82);
    border: 1px solid rgba(181, 112, 60, 0.3);
    box-shadow: 0 1rem 2.5rem rgba(90, 50, 20, 0.22);
    backdrop-filter: blur(10px);
    animation: welcomeIn 0.7s 0.2s backwards ease;
    transition: opacity 0.4s ease, transform 0.4s ease;
    max-width: min(32rem, calc(100vw - 2rem));
}
.welcome.is-gone { opacity: 0; transform: translateX(-50%) translateY(1rem); }
@keyframes welcomeIn { from { opacity: 0; transform: translateX(-50%) translateY(1.5rem); } }

.welcome-hi {
    margin: 0 0 0.3rem;
    font-size: clamp(1rem, 2.4vw, 1.35rem);
    color: #4A2C12;
}
.welcome-hi strong { color: #B4453B; }
.welcome-cta {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: clamp(0.78rem, 1.8vw, 0.95rem);
    color: #7A5330;
}
.welcome-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #B4453B;
    animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
    50% { transform: scale(1.7); opacity: 0.35; }
}

/* ── The Mac, laid over the monitor's projected rectangle ────────────
   JS sets its position, size and font-size; everything inside is in
   `em` and reacts to the container width, so the same markup works on
   a 27-inch display and on a phone.                                 */
.screen {
    position: fixed;
    z-index: 30;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    container-type: inline-size;
    background: linear-gradient(170deg, #2E6FA8 0%, #4FA3CE 38%, #8FD2E8 70%, #FFD79A 100%);
    opacity: 0;
    transition: opacity 0.45s ease;
    font-size: 16px;
    color: var(--mac-text);
}
.screen.is-live { opacity: 1; }

/* Menu bar */
.mac-menubar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0 0.9em;
    height: 1.7em;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px);
    font-size: 0.68em;
    color: #15202B;
}
.mac-menubar strong { font-weight: 700; }
.mac-menu-mark {
    width: 0.85em;
    height: 0.85em;
    border-radius: 50% 50% 48% 48%;
    background: #15202B;
    box-shadow: 0.42em -0.3em 0 -0.33em #15202B;
}
.mac-menu-item { opacity: 0.8; }
.mac-menubar-spacer { flex: 1; }

/* Full-screen interface: the room's own controls would land on the Finder,
   so they move into the menu bar instead. */
.mac-back {
    display: none;
    font: inherit;
    font-weight: 700;
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0.15em 0.4em 0.15em 0;
    cursor: pointer;
}
.screen.is-full .mac-back { display: inline-block; }
.screen.is-full .mac-menu-mark { display: none; }
body.ui-full .exit,
body.ui-full .classic-link { display: none !important; }

.mac-desktop { position: relative; flex: 1 1 auto; overflow: hidden; }

/* ── Finder ──────────────────────────────────────────────────────── */
.finder, .win {
    position: absolute;
    display: flex;
    flex-direction: column;
    border-radius: 0.65em;
    overflow: hidden;
    background: var(--mac-body);
    box-shadow: var(--mac-shadow);
    border: 1px solid rgba(0, 0, 0, 0.14);
}

.finder { inset: 1.1em 1.4em 2.9em; }

.finder-bar, .win-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0 0.8em;
    height: 2.6em;
    background: var(--mac-chrome);
    border-bottom: 1px solid var(--mac-line);
}

.traffic { display: flex; gap: 0.45em; }
.traffic i {
    width: 0.78em;
    height: 0.78em;
    border-radius: 50%;
    background: #C9C7CB;
    cursor: default;
}
.traffic .t-red    { background: #FF5F57; cursor: pointer; }
.traffic .t-yellow { background: #FEBC2E; }
.traffic .t-green  { background: #28C840; }

.finder-nav, .win-nav { display: flex; gap: 0.2em; }
.finder-nav button, .win-nav button {
    width: 1.7em;
    height: 1.5em;
    display: grid;
    place-items: center;
    font: inherit;
    font-size: 1em;
    line-height: 1;
    color: var(--mac-dim);
    background: transparent;
    border: 0;
    border-radius: 0.3em;
    cursor: pointer;
}
.finder-nav button:hover:not(:disabled), .win-nav button:hover { background: rgba(0,0,0,0.07); color: var(--mac-text); }
.finder-nav button:disabled { opacity: 0.3; cursor: default; }

.finder-title, .win-title {
    flex: 1;
    font-size: 0.82em;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Balances the traffic lights + nav so the title sits visually centred. */
    margin-right: 4.6em;
}

.finder-body { flex: 1 1 auto; display: flex; min-height: 0; }

.finder-side {
    flex: 0 0 11em;
    padding: 0.7em 0.5em;
    background: var(--mac-side);
    border-right: 1px solid var(--mac-line);
    overflow-y: auto;
}
.side-head {
    padding: 0.4em 0.6em 0.3em;
    font-size: 0.66em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mac-dim);
}
.side-item {
    display: flex;
    align-items: center;
    gap: 0.5em;
    width: 100%;
    padding: 0.38em 0.6em;
    border: 0;
    border-radius: 0.4em;
    background: transparent;
    font: inherit;
    font-size: 0.78em;
    color: var(--mac-text);
    text-align: left;
    cursor: pointer;
}
.side-item:hover { background: rgba(0,0,0,0.06); }
.side-item.is-current { background: var(--mac-accent); color: #fff; }
.side-item.is-current svg { color: #fff; }
.side-item svg { flex: 0 0 auto; color: var(--mac-accent); }

.finder-main {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1em;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.2em, 1fr));
    align-content: start;
    gap: 0.5em;
    outline: none;
}

.item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4em;
    padding: 0.6em 0.3em;
    border: 0;
    border-radius: 0.5em;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: center;
}
.item:hover { background: rgba(0,0,0,0.05); }
.item:focus-visible { outline: 2px solid var(--mac-accent); outline-offset: -2px; }
.item-icon {
    width: 3.6em;
    height: 3.1em;
    display: grid;
    place-items: center;
    position: relative;
}
.item-icon svg { width: 100%; height: 100%; }
.item-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.3em;
    border: 1px solid rgba(0,0,0,0.18);
    background: #DCE6EC;
}
.item-name {
    font-size: 0.72em;
    line-height: 1.3;
    /* Finder truncates long names rather than letting them push the grid
       around; two lines then an ellipsis is the closest cheap equivalent. */
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0.1em 0.35em;
    border-radius: 0.3em;
}
.item:hover .item-name { background: rgba(10, 132, 255, 0.14); }

.finder-empty {
    grid-column: 1 / -1;
    padding: 2em 1em;
    text-align: center;
    color: var(--mac-dim);
    font-size: 0.82em;
}

.finder-path {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.35em;
    /* One line that scrolls: wrapping would push the trail out of the
       fixed-height bar and hide where you actually are. */
    flex-wrap: nowrap;
    padding: 0.35em 0.8em;
    height: 1.9em;
    background: var(--mac-chrome);
    border-top: 1px solid var(--mac-line);
    font-size: 0.68em;
    color: var(--mac-dim);
    overflow-x: auto;
    scrollbar-width: none;
}
.finder-path::-webkit-scrollbar { display: none; }
.finder-path button {
    display: flex;
    align-items: center;
    gap: 0.3em;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.finder-path button:hover { color: var(--mac-text); }
.finder-path .sep { opacity: 0.5; }

/* ── Document + browser windows ──────────────────────────────────── */
.win { inset: 2.4em 3em 4.2em; z-index: 5; animation: winIn 0.22s ease; }
@keyframes winIn { from { opacity: 0; transform: translateY(0.6em) scale(0.985); } }

.win-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.1em 1.3em 1.6em;
    font-size: 0.78em;
    line-height: 1.6;
    outline: none;
}

.win-browser { inset: 1.8em 2em 3.4em; }
.win-browser .win-body { padding: 0; overflow: hidden; position: relative; }

.urlbar {
    flex: 1;
    padding: 0.3em 0.9em;
    background: #fff;
    border: 1px solid var(--mac-line);
    border-radius: 999px;
    font-size: 0.72em;
    color: var(--mac-dim);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 0;
}
.win-pop {
    flex: 0 0 auto;
    width: 1.7em;
    height: 1.5em;
    display: grid;
    place-items: center;
    border-radius: 0.3em;
    color: var(--mac-dim);
    text-decoration: none;
}
.win-pop:hover { background: rgba(0,0,0,0.07); color: var(--mac-text); }

.browser-body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}
.browser-loading, .browser-blocked {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
    padding: 1.5em;
    text-align: center;
    background: #fff;
    font-size: 0.8em;
    color: var(--mac-dim);
}
.browser-blocked p { margin: 0; max-width: 26em; }
.browser-blocked strong { color: var(--mac-text); }

.browser-note {
    flex: 0 0 auto;
    padding: 0.35em 0.9em;
    background: var(--mac-chrome);
    border-top: 1px solid var(--mac-line);
    font-size: 0.64em;
    color: var(--mac-dim);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.browser-note a { color: var(--mac-accent); }

/* ── Dock ────────────────────────────────────────────────────────── */
.dock {
    position: absolute;
    left: 50%;
    bottom: 0.45em;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    gap: 0.4em;
    padding: 0.35em 0.5em;
    border-radius: 0.9em;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    box-shadow: 0 0.5em 1.5em rgba(20, 40, 60, 0.25);
    z-index: 8;
    max-width: 94%;
    overflow-x: auto;
    scrollbar-width: none;
}
.dock::-webkit-scrollbar { display: none; }
.dock-app {
    width: 2.6em;
    height: 2.6em;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0.6em;
    background: #fff;
    cursor: pointer;
    transition: transform 0.16s ease;
    box-shadow: 0 0.15em 0.4em rgba(0,0,0,0.18);
    padding: 0.35em;
}
.dock-app:hover { transform: translateY(-0.35em) scale(1.08); }
.dock-app svg { width: 100%; height: 100%; }

/* ── Document content primitives ─────────────────────────────────── */
.doc-hero { display: flex; gap: 1.1em; align-items: flex-start; margin-bottom: 1em; flex-wrap: wrap; }
.doc-hero img {
    width: 7em;
    border-radius: 0.6em;
    background: linear-gradient(160deg, #FFD79A, #F2A25C);
    object-fit: cover;
}
.doc-shot {
    width: 100%;
    max-height: 17em;
    object-fit: cover;
    border-radius: 0.6em;
    border: 1px solid var(--mac-line);
    margin-bottom: 1em;
    background: linear-gradient(160deg, #CFE6F2, #9EC8DD);
}
.eyebrow {
    margin: 0 0 0.25em;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ui-accent);
}
.h { margin: 0 0 0.5em; font-size: 1.5em; line-height: 1.2; }
.lede { color: var(--mac-dim); margin: 0 0 1em; white-space: pre-line; }
.body-text { white-space: pre-line; margin: 0 0 1em; }
.empty { color: var(--mac-dim); font-style: italic; }

.stat-row { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 1em 0; }
.stat {
    flex: 1 1 5em;
    padding: 0.7em;
    border-radius: 0.6em;
    background: linear-gradient(165deg, #FFF4DF, #FFE6BC);
    border: 1px solid #F0D09A;
    text-align: center;
}
.stat b { display: block; font-size: 1.3em; color: #C2410C; }
.stat span { font-size: 0.82em; color: var(--mac-dim); }

.tag {
    display: inline-block;
    margin: 0 0.3em 0.45em 0;
    padding: 0.14em 0.6em;
    border-radius: 999px;
    background: rgba(232, 70, 60, 0.12);
    color: #C0352C;
    font-size: 0.78em;
    font-weight: 600;
}
.tag.is-gold { background: rgba(255, 169, 20, 0.18); color: #9A6300; }
.tag.is-blue { background: rgba(10, 132, 255, 0.12); color: #0A6BD0; }

.timeline { margin: 0; padding: 0 0 0 1.1em; list-style: none; border-left: 2px solid #F0D09A; }
.timeline li { position: relative; padding: 0 0 1.3em 0.4em; }
.timeline li::before {
    content: "";
    position: absolute;
    left: -1.6em;
    top: 0.4em;
    width: 0.65em;
    height: 0.65em;
    border-radius: 50%;
    background: var(--ui-accent);
    box-shadow: 0 0 0 0.25em rgba(232, 70, 60, 0.16);
}
.timeline h4 { margin: 0; font-size: 1.05em; }
.timeline .when { font-size: 0.8em; font-weight: 600; color: #C2410C; }
.timeline p { margin: 0.3em 0 0; color: var(--mac-dim); }

.skill-group { margin-bottom: 1.1em; }
.skill-group h4 {
    margin: 0 0 0.5em;
    font-size: 0.78em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mac-dim);
}
.chips { display: flex; flex-wrap: wrap; gap: 0.4em; }
.chip {
    padding: 0.3em 0.75em;
    background: #F4F2F6;
    border: 1px solid var(--mac-line);
    border-radius: 999px;
    font-size: 0.88em;
}
.chip em { font-style: normal; color: #0A6BD0; font-size: 0.86em; font-weight: 600; }

.field { display: block; margin-bottom: 0.7em; }
.field span { display: block; margin-bottom: 0.25em; font-size: 0.86em; color: var(--mac-dim); }
.field input, .field textarea {
    width: 100%;
    padding: 0.55em 0.7em;
    background: #fff;
    border: 1px solid var(--mac-line);
    border-radius: 0.45em;
    color: var(--mac-text);
    font: inherit;
    font-size: 0.95em;
}
.field input:focus, .field textarea:focus {
    border-color: var(--mac-accent);
    outline: 2px solid rgba(10, 132, 255, 0.25);
}
.field textarea { resize: vertical; min-height: 5em; }

.btn {
    display: inline-block;
    padding: 0.5em 1.1em;
    background: var(--mac-accent);
    border: 1px solid var(--mac-accent);
    border-radius: 0.45em;
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.2s;
}
.btn:hover:not(:disabled), .btn:focus-visible { filter: brightness(1.12); }
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn.is-ghost { background: #fff; color: var(--mac-text); border-color: var(--mac-line); }

.links { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 1em 0; }
.form-note { margin-top: 0.8em; font-size: 0.86em; color: var(--mac-dim); }
.form-msg { margin-top: 0.7em; font-size: 0.92em; font-weight: 600; }
.form-msg.ok { color: #1A7F44; }
.form-msg.err { color: #C0352C; }

/* ── Chrome around the scene ─────────────────────────────────────── */
.exit, .classic-link {
    position: fixed;
    z-index: 40;
    padding: 0.55rem 1rem;
    background: rgba(255, 253, 248, 0.88);
    border: 1px solid rgba(181, 112, 60, 0.3);
    border-radius: 999px;
    color: #6B4522;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(8px);
    box-shadow: 0 0.4rem 1.2rem rgba(90, 50, 20, 0.18);
    transition: color 0.2s, border-color 0.2s;
}
.exit:hover, .exit:focus-visible,
.classic-link:hover, .classic-link:focus-visible { color: #B4453B; border-color: #B4453B; }
.exit { top: 1.1rem; left: 1.1rem; }
.classic-link { bottom: 1.1rem; right: 1.1rem; }

/* ── Narrow screen (the overlay, not the viewport) ────────────────── */
@container (max-width: 560px) {
    .finder { inset: 0.5em 0.6em 2.6em; }
    .finder-side { display: none; }
    .finder-title { margin-right: 0; font-size: 0.9em; }
    .finder-main { padding: 0.6em; grid-template-columns: repeat(auto-fill, minmax(5.6em, 1fr)); }
    .win { inset: 1.2em 0.9em 3em; }
    .win-browser { inset: 0.9em 0.6em 2.8em; }
    .dock-app { width: 2.2em; height: 2.2em; }
    .doc-hero img { width: 5em; }
}
@container (max-width: 380px) {
    .mac-menu-item:not(#mac-clock) { display: none; }
    .dock { bottom: 0.25em; }
}

/* On a phone the room chrome has to stay out of the thumb zone. */
@media (max-width: 700px) {
    .exit { top: 0.6rem; left: 0.6rem; padding: 0.45rem 0.8rem; font-size: 0.72rem; }
    .classic-link { bottom: 0.6rem; right: 0.6rem; padding: 0.45rem 0.8rem; font-size: 0.72rem; }
    .welcome { bottom: 4.2rem; padding: 0.8rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Close buttons, content primitives, and the private space.
   Everything here sizes in `em`, so it follows the .screen font-size
   that JS sets from the monitor (or from the viewport on a phone).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Visible close buttons ───────────────────────────────────────── */
.traffic button.t-red {
    display: grid;
    place-items: center;
    width: 1em;
    height: 1em;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #FF5F57;
    color: #6B0F08;
    font: inherit;
    font-size: 0.86em;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14) inset;
    transition: transform 0.12s ease, filter 0.12s ease;
}
/* Maximize sits where macOS puts it, and carries its glyph the same way
   the close button carries its cross. */
.traffic button.t-green {
    display: grid;
    place-items: center;
    width: 1em;
    height: 1em;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #28C840;
    color: #04380E;
    font: inherit;
    font-size: 0.7em;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14) inset;
    transition: transform 0.12s ease, filter 0.12s ease;
}
.traffic button.t-red:hover,
.traffic button.t-green:hover { transform: scale(1.18); filter: brightness(1.08); }
.traffic button.t-red:focus-visible,
.traffic button.t-green:focus-visible { outline: 2px solid var(--mac-accent); outline-offset: 2px; }
.traffic i { align-self: center; }

/* ── A window on the real screen ──────────────────────────────────────
   Fullscreen detaches the element visually but not from the cascade, so
   it would keep the em size derived from the simulated monitor — a few
   millimetres of text on a 27-inch display. Reset the root size here. */
.win:fullscreen,
.finder:fullscreen {
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: clamp(14px, 1vw, 19px);
    background: var(--mac-body);
}
.win:fullscreen .win-body,
.finder:fullscreen .finder-main { max-width: none; }
.win:fullscreen::backdrop,
.finder:fullscreen::backdrop { background: #10151D; }

.item.is-locked .item-name { color: var(--mac-dim); }

/* ── Rich text rendered on the public side ───────────────────────── */
.rich { line-height: 1.65; }
.rich > :first-child { margin-top: 0; }
.rich p { margin: 0 0 0.85em; }
.rich h2 { font-size: 1.3em; margin: 1.2em 0 0.4em; }
.rich h3 { font-size: 1.12em; margin: 1.1em 0 0.35em; }
.rich h4 { font-size: 1em; margin: 1em 0 0.3em; }
.rich ul, .rich ol { margin: 0 0 0.9em; padding-left: 1.4em; }
.rich li { margin-bottom: 0.3em; }
.rich a { color: var(--mac-accent); }
.rich img { max-width: 100%; height: auto; border-radius: 0.4em; margin: 0.5em 0; }
.rich blockquote {
    margin: 0 0 0.9em;
    padding: 0.5em 0.9em;
    border-left: 3px solid var(--ui-warm);
    background: #FBF7EF;
    border-radius: 0 0.4em 0.4em 0;
}
.rich pre {
    margin: 0 0 0.9em;
    padding: 0.8em;
    background: #F4F2F6;
    border-radius: 0.45em;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 0.9em;
}
.rich table { border-collapse: collapse; width: 100%; margin-bottom: 0.9em; }
.rich th, .rich td { border: 1px solid var(--mac-line); padding: 0.4em 0.6em; text-align: left; }

.doc-tags { margin-bottom: 0.3em; }
.card.is-static { cursor: default; }
.card.is-static:hover { transform: none; }

.progress {
    height: 0.5em;
    border-radius: 999px;
    background: #E7E4EA;
    overflow: hidden;
    margin: 0.5em 0 0.3em;
}
.progress span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #39B98A, #0A84FF);
    transition: width 0.4s ease;
}

.contact-list { list-style: none; margin: 0 0 1em; padding: 0; }
.contact-list li {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    padding: 0.5em 0;
    border-bottom: 1px solid var(--mac-line);
}
.contact-list li > span:first-child { color: var(--mac-dim); }
.contact-list a { color: var(--mac-accent); }

.blocked-glyph { font-size: 2.2em; }

/* ── Login window ────────────────────────────────────────────────── */
.win-login { inset: 12% 50% 12% 50%; width: 22em; margin-left: -11em; }
.login-body { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.login-lock { font-size: 2.4em; margin-bottom: 0.2em; }
.login-body .field { text-align: left; }
.login-body .btn { width: 100%; margin-top: 0.4em; }

/* ── Private space shell ─────────────────────────────────────────── */
.win-private { inset: 1.4em 1.6em 2.9em; }
.private-tabs { flex: 1; display: flex; gap: 0.2em; overflow-x: auto; scrollbar-width: none; }
.private-tabs::-webkit-scrollbar { display: none; }
.private-tabs button {
    display: flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.3em 0.7em;
    border: 0;
    border-radius: 0.4em;
    background: transparent;
    font: inherit;
    font-size: 0.78em;
    color: var(--mac-dim);
    white-space: nowrap;
    cursor: pointer;
}
.private-tabs button:hover { background: rgba(0, 0, 0, 0.06); color: var(--mac-text); }
.private-tabs button.is-current { background: var(--mac-accent); color: #fff; }

.win-logout {
    flex: 0 0 auto;
    padding: 0.28em 0.65em;
    border: 1px solid var(--mac-line);
    border-radius: 0.4em;
    background: #fff;
    font: inherit;
    font-size: 0.72em;
    color: var(--mac-dim);
    cursor: pointer;
}
.win-logout:hover { color: #C0352C; border-color: #C0352C; }

.private-body { padding: 0; position: relative; }
.loading { padding: 2em; text-align: center; color: var(--mac-dim); }

.toast {
    position: absolute;
    left: 50%;
    bottom: 1em;
    transform: translateX(-50%);
    z-index: 20;
    padding: 0.5em 1em;
    border-radius: 0.5em;
    background: #1C1C1E;
    color: #fff;
    font-size: 0.8em;
    box-shadow: 0 0.5em 1.4em rgba(0, 0, 0, 0.3);
    animation: toastIn 0.2s ease;
}
.toast.is-err { background: #C0352C; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(0.6em); } }

/* ── Shared form bits ────────────────────────────────────────────── */
.inline-form, .entry-form { padding: 1em 1.2em 1.4em; font-size: 0.86em; }
.row { display: flex; flex-wrap: wrap; gap: 0.7em; }
.row > * { flex: 1 1 10em; }
.row-actions { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.8em; }
.check { display: flex; align-items: center; gap: 0.45em; margin: 0.4em 0 0.8em; font-size: 0.95em; }
.field-label { display: block; margin: 0.9em 0 0.3em; font-size: 0.86em; color: var(--mac-dim); }
.btn.is-small { padding: 0.32em 0.7em; font-size: 0.86em; }
.icon-btn {
    width: 1.7em; height: 1.7em;
    display: grid; place-items: center;
    border: 0; border-radius: 0.35em;
    background: transparent; color: var(--mac-dim);
    font: inherit; cursor: pointer;
}
.icon-btn:hover { background: rgba(0, 0, 0, 0.07); color: var(--mac-text); }

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8em;
    padding: 0.7em 1.2em;
    border-bottom: 1px solid var(--mac-line);
}
.panel-head h3 { margin: 0; font-size: 0.95em; }

select {
    width: 100%;
    padding: 0.55em 0.7em;
    background: #fff;
    border: 1px solid var(--mac-line);
    border-radius: 0.45em;
    font: inherit;
    font-size: 0.95em;
    color: var(--mac-text);
}

/* ── Rich text editor ────────────────────────────────────────────── */
.editor {
    border: 1px solid var(--mac-line);
    border-radius: 0.5em;
    overflow: hidden;
    background: #fff;
}
.editor-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.12em;
    padding: 0.35em;
    background: var(--mac-chrome);
    border-bottom: 1px solid var(--mac-line);
}
.editor-bar button {
    min-width: 1.9em;
    height: 1.9em;
    padding: 0 0.35em;
    border: 0;
    border-radius: 0.3em;
    background: transparent;
    font: inherit;
    font-size: 0.86em;
    color: var(--mac-text);
    cursor: pointer;
}
.editor-bar button:hover { background: rgba(0, 0, 0, 0.09); }
.editor-sep { width: 1px; margin: 0.2em 0.25em; background: var(--mac-line); }
.editor-area {
    min-height: 9em;
    max-height: 22em;
    overflow-y: auto;
    padding: 0.9em 1em;
    outline: none;
    font-size: 0.95em;
}
.editor-area:focus { box-shadow: inset 0 0 0 2px rgba(10, 132, 255, 0.25); }

/* ── Journal ─────────────────────────────────────────────────────── */
.split { display: flex; height: 100%; min-height: 0; }
.toc {
    flex: 0 0 15em;
    overflow-y: auto;
    background: var(--mac-side);
    border-right: 1px solid var(--mac-line);
    padding-bottom: 1em;
}
.toc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    padding: 0.7em 0.8em 0.5em;
}
.toc-head strong { font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mac-dim); }
.toc-search {
    width: calc(100% - 1.6em);
    margin: 0 0.8em 0.6em;
    padding: 0.35em 0.6em;
    border: 1px solid var(--mac-line);
    border-radius: 0.4em;
    font: inherit;
    font-size: 0.78em;
}
.toc-section summary {
    padding: 0.35em 0.8em;
    font-size: 0.78em;
    font-weight: 700;
    color: var(--mac-text);
    cursor: pointer;
}
.toc-section summary span { color: var(--mac-dim); font-weight: 400; }
.toc-item {
    display: block;
    width: calc(100% - 1em);
    margin: 0 0.5em 0.15em;
    padding: 0.4em 0.6em;
    border: 0;
    border-radius: 0.4em;
    background: transparent;
    font: inherit;
    font-size: 0.78em;
    text-align: left;
    cursor: pointer;
}
.toc-item:hover { background: rgba(0, 0, 0, 0.06); }
.toc-item.is-current { background: var(--mac-accent); color: #fff; }
.toc-item.is-current time { color: rgba(255, 255, 255, 0.8); }
.toc-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-item time { font-size: 0.85em; color: var(--mac-dim); }
.toc-item .pin { color: var(--ui-warm); }

.reader { flex: 1 1 auto; overflow-y: auto; min-width: 0; }

/* ── Logbook ─────────────────────────────────────────────────────── */
.board { padding: 1em 1.2em 2em; display: flex; flex-direction: column; gap: 1em; }
.panel { border: 1px solid var(--mac-line); border-radius: 0.6em; background: #fff; overflow: hidden; }
.panel > .empty { padding: 1.2em; }

.routine-grid { padding: 0.6em 1.2em 1em; overflow-x: auto; }
.routine-row { display: flex; align-items: center; gap: 0.25em; padding: 0.18em 0; }
.routine-row.is-head { font-size: 0.7em; color: var(--mac-dim); }
.routine-name {
    flex: 0 0 9em;
    font-size: 0.82em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.routine-row.is-head > span:first-child { flex: 0 0 9em; }
.routine-day { width: 1.5em; text-align: center; }
.routine-day.is-today { color: var(--mac-accent); font-weight: 700; }
.routine-dot {
    width: 1.5em;
    height: 1.5em;
    flex: 0 0 auto;
    border: 1px solid var(--mac-line);
    border-radius: 0.35em;
    background: #F6F5F7;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease;
}
.routine-dot:hover { transform: scale(1.12); }
.routine-dot.is-done { background: #39B98A; border-color: #2E9C75; }

.kanban { display: flex; gap: 0.7em; padding: 0.9em 1.2em; overflow-x: auto; }
.column {
    flex: 1 1 10em;
    min-width: 9em;
    padding: 0.6em;
    border-radius: 0.5em;
    background: #F6F5F7;
    transition: background 0.15s ease;
}
.column.is-over { background: #DCEBFB; }
.column h4 {
    margin: 0 0 0.5em;
    font-size: 0.76em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mac-dim);
}
.column h4 span { color: var(--mac-text); }
.column-empty { margin: 0; color: #BFBCC4; text-align: center; }
.task {
    margin-bottom: 0.45em;
    padding: 0.55em 0.65em;
    border-radius: 0.45em;
    background: #fff;
    border-left: 3px solid var(--mac-line);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    cursor: grab;
}
.task.is-haute { border-left-color: #E8463C; }
.task.is-normale { border-left-color: #0A84FF; }
.task.is-basse { border-left-color: #B9B5BE; }
.task-title { margin: 0 0 0.3em; font-size: 0.84em; line-height: 1.35; }
.task-meta { display: flex; flex-wrap: wrap; gap: 0.25em; }
.task-meta .tag { margin: 0; font-size: 0.68em; }

.proj-row { display: flex; align-items: center; gap: 0.8em; padding: 0.55em 1.2em; }
.proj-name { flex: 0 0 11em; font-size: 0.84em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-row .progress { flex: 1; margin: 0; }
.proj-pct { flex: 0 0 3em; text-align: right; font-size: 0.8em; color: var(--mac-dim); }
.proj-count { flex: 0 0 3em; text-align: right; font-size: 0.76em; color: #9A96A2; }

/* ── Content editors ─────────────────────────────────────────────── */
.subtabs {
    display: flex;
    gap: 0.2em;
    padding: 0.6em 1.2em 0;
    border-bottom: 1px solid var(--mac-line);
    overflow-x: auto;
    scrollbar-width: none;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtabs button {
    padding: 0.4em 0.8em;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font: inherit;
    font-size: 0.82em;
    color: var(--mac-dim);
    white-space: nowrap;
    cursor: pointer;
}
.subtabs button.is-current { color: var(--mac-text); border-bottom-color: var(--mac-accent); }

.subpane h3 { margin: 1.2em 1.2em 0.5em; font-size: 0.95em; }
.rec-list { list-style: none; margin: 0; padding: 0.5em 0.8em; }
.rec-list li.empty { padding: 1em; color: var(--mac-dim); font-style: italic; }
.rec-list button {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    width: 100%;
    padding: 0.55em 0.7em;
    border: 0;
    border-radius: 0.45em;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.rec-list button:hover { background: rgba(0, 0, 0, 0.05); }
.rec-list strong { font-size: 0.86em; }
.rec-list span { font-size: 0.76em; color: var(--mac-dim); }

.days { display: flex; gap: 0.4em; border: 0; margin: 0.4em 0; padding: 0; }
.days legend { font-size: 0.82em; color: var(--mac-dim); padding: 0; }
.days label { display: flex; flex-direction: column; align-items: center; font-size: 0.76em; cursor: pointer; }

.image-field { margin: 0.9em 0; }
.image-field-row { display: flex; gap: 0.8em; align-items: flex-start; }
.image-field-row > div { flex: 1; min-width: 0; }
.image-field-row input { width: 100%; padding: 0.45em 0.6em; border: 1px solid var(--mac-line); border-radius: 0.4em; font: inherit; font-size: 0.86em; }
.image-preview {
    width: 6em;
    height: 4.5em;
    object-fit: cover;
    border-radius: 0.45em;
    border: 1px solid var(--mac-line);
    background: repeating-conic-gradient(#EEE 0% 25%, #FAFAFA 0% 50%) 50% / 1em 1em;
}

/* ── Assistant ───────────────────────────────────────────────────── */
.chat { display: flex; flex-direction: column; height: 100%; padding: 1em 1.2em; gap: 0.8em; }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5em; }
.bubble {
    max-width: 80%;
    padding: 0.6em 0.85em;
    border-radius: 1em;
    font-size: 0.84em;
    line-height: 1.5;
    white-space: pre-wrap;
}
.bubble.is-user { align-self: flex-end; background: var(--mac-accent); color: #fff; border-bottom-right-radius: 0.3em; }
.bubble.is-assistant { align-self: flex-start; background: #F1EFF3; border-bottom-left-radius: 0.3em; }
.chat-form { display: flex; gap: 0.5em; }
.chat-form input {
    flex: 1;
    padding: 0.55em 0.8em;
    border: 1px solid var(--mac-line);
    border-radius: 999px;
    font: inherit;
    font-size: 0.86em;
}

.account { padding: 1.2em; max-width: 30em; }
.account code { background: #F1EFF3; padding: 0.1em 0.35em; border-radius: 0.25em; font-size: 0.9em; }

/* ── Narrow overlay ──────────────────────────────────────────────── */
@container (max-width: 700px) {
    .split { flex-direction: column; }
    .toc { flex: 0 0 auto; max-height: 11em; border-right: 0; border-bottom: 1px solid var(--mac-line); }
    .win-private { inset: 0.5em 0.6em 2.6em; }
    .win-login { inset: 8% 0.8em; width: auto; margin-left: 0; }
    .routine-name, .routine-row.is-head > span:first-child { flex-basis: 6em; }
    .proj-name { flex-basis: 7em; }
}

/* ── Journal comfort ─────────────────────────────────────────────── */
.entry-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
    margin-bottom: 0.7em;
}
.entry-when { font-size: 0.82em; color: var(--mac-dim); }
.entry-state { font-size: 0.78em; color: transparent; }
.entry-state.is-dirty { color: #C2410C; font-weight: 600; }
.entry-count { margin: 0.5em 0 0; font-size: 0.78em; color: var(--mac-dim); }

.btn kbd {
    margin-left: 0.35em;
    padding: 0.05em 0.3em;
    border-radius: 0.25em;
    background: rgba(255, 255, 255, 0.22);
    font: inherit;
    font-size: 0.8em;
    opacity: 0.85;
}
.toc-empty { padding: 0.8em; margin: 0; font-size: 0.78em; color: var(--mac-dim); font-style: italic; }

/* ── Logbook comfort ─────────────────────────────────────────────── */
.panel-count {
    margin-left: 0.5em;
    font-size: 0.8em;
    font-weight: 400;
    color: var(--mac-dim);
}
.streak {
    flex: 0 0 2.6em;
    text-align: right;
    font-size: 0.74em;
    color: #C2410C;
    white-space: nowrap;
}
.streak.is-empty { color: transparent; }

.task { display: flex; align-items: flex-start; gap: 0.5em; }
.task-main { flex: 1; min-width: 0; }
.task.is-late { border-left-color: #E8463C; background: #FFF6F5; }

.task-tick {
    flex: 0 0 auto;
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.1em;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--mac-line);
    border-radius: 0.3em;
    background: #fff;
    color: transparent;
    font-size: 0.78em;
    line-height: 1;
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.task-tick:hover { border-color: #39B98A; color: #BFE6D6; }
.task-tick.is-done { background: #39B98A; border-color: #2E9C75; color: #fff; }

.quick-add {
    width: 100%;
    margin-top: 0.3em;
    padding: 0.45em 0.6em;
    border: 1px dashed var(--mac-line);
    border-radius: 0.45em;
    background: transparent;
    font: inherit;
    font-size: 0.8em;
    color: var(--mac-text);
}
.quick-add::placeholder { color: #A9A5B0; }
.quick-add:focus {
    outline: none;
    border-style: solid;
    border-color: var(--mac-accent);
    background: #fff;
}