/* ==========================================================
   SarahOS: lavender paper, black pixel outlines, hard shadows.
   Tokens first; change these to re-skin the whole app.
   ========================================================== */

:root{
    --paper:        #f1ecfc;
    --paper-deep:   #e6defa;
    --fur:          #ffffff;
    --lilac:        #d9cdf7;
    --lilac-soft:   #ece5fc;
    --lavender:     #8b6fd6;
    --lavender-deep:#5b3fb8;
    --ear:          #ff8fa8;
    --ear-soft:     #ffd9e1;
    --mint:         #b8ecc9;
    --screen:       #1d1a26;
    --screen-2:     #2a2536;
    --ink:          #000000;
    --ink-soft:     #4b4460;
    --muted:        #7d7594;
    --danger:       #d63a5a;

    --accent:       var(--lavender);
    --accent-soft:  var(--lilac);

    --shadow:       4px 4px 0 0 #000;
    --shadow-sm:    3px 3px 0 0 #000;
    --shadow-lg:    6px 6px 0 0 #000;
    --border:       3px solid #000;
    --radius:       12px;
    --radius-sm:    8px;

    --font-body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-pixel:   "Pixelify Sans", "Instrument Sans", system-ui, sans-serif;
    /* the clock: a pixel face whose 5 can never be mistaken for an S */
    --font-clock:   "VT323", "Courier New", ui-monospace, monospace;

    color-scheme: light;
}

/* Break swaps the accent to pink */
body[data-mode="break"]{
    --accent:       var(--ear);
    --accent-soft:  var(--ear-soft);
}

/* ---------- Base ---------- */

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

html{
    background:var(--paper);
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    margin:0;
    min-height:100vh;
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.5;
    text-align:left;
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    /* the pixel face turns "fi" into a glyph that reads as an A ("finals" -> "Anals") */
    font-variant-ligatures:none;
    font-feature-settings:"liga" 0, "clig" 0;
    overflow-x:hidden;
    display:flex;
    flex-direction:column;
}

h1, h2, h3{
    font-family:var(--font-pixel);
    font-weight:600;
    letter-spacing:0;
    line-height:1.1;
    margin:0;
}

h1{ font-size:clamp(32px, 5vw, 48px); margin:6px 0 16px; }
h2{ font-size:22px; }
h3{ font-size:20px; }
p{ margin:0; }
a{ color:var(--lavender-deep); text-decoration:underline; text-underline-offset:3px; }
a:hover{ color:#000; }
::selection{ background:var(--lilac); }

:focus-visible{
    outline:3px dashed var(--lavender);
    outline-offset:3px;
}

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}

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

.skip-link{
    position:fixed;
    top:-60px;
    left:12px;
    z-index:200;
    padding:8px 14px;
    background:#fff;
    border:var(--border);
    border-radius:var(--radius-sm);
    font-weight:600;
}
.skip-link:focus{ top:12px; }

::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-thumb{ background:var(--lilac); border:3px solid var(--paper); border-radius:8px; }
::-webkit-scrollbar-track{ background:var(--paper); }

/* ---------- Header ---------- */

.site-header{
    position:sticky;
    top:0;
    z-index:60;
    background:rgba(241, 236, 252, .96);
    border-bottom:var(--border);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}

.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    max-width:1120px;
    margin:0 auto;
    padding:8px clamp(14px, 3vw, 24px);
}

.brand{
    display:flex;
    align-items:center;
    gap:8px;
    color:#000;
    text-decoration:none;
    font-family:var(--font-pixel);
    font-size:28px;
    font-weight:600;
    line-height:1;
}
.brand:hover{ color:#000; }
.brand-mark{
    display:block;
    width:36px;
    height:36px;
    image-rendering:pixelated;
    transition:transform .12s steps(3);
}
.brand:hover .brand-mark{ transform:translateY(-2px) rotate(-6deg); }

.app-nav{
    display:flex;
    align-items:center;
    gap:8px;
}

/* ---------- Layout ---------- */

main{ display:block; flex:1 0 auto; width:100%; }

.page{
    max-width:1120px;
    margin:0 auto;
    padding:28px clamp(14px, 3vw, 24px) 40px;
}
.page.narrow{ max-width:780px; position:relative; }

/* a little cat keeping the page company */
.page-buddy{
    position:absolute;
    top:14px;
    right:clamp(8px, 2vw, 24px);
    width:118px;
    pointer-events:none;
}
.page-buddy .cat-sprite{ width:100%; }
.page.narrow > .page-head, .page.narrow > h1, .page.narrow > .task-resource-icons{ padding-right:128px; }
@media (max-width:760px){
    .page-buddy{ width:78px; top:20px; }
    .page.narrow > .page-head, .page.narrow > h1, .page.narrow > .task-resource-icons{ padding-right:86px; }
}

.page-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:18px;
}
.page-head h1{ margin:0 0 6px; }

.card{
    background:var(--fur);
    border:var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:clamp(16px, 3vw, 26px);
    margin:0 0 24px;
}

.card-title{
    margin:0 0 14px;
    font-size:24px;
}

.card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}
.card-head .card-title{ margin:0; }

.home-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 24px;
    align-items:start;
}

/* ---------- Greeting ---------- */

.greeting{ margin:2px 0 20px; }
.greeting-title{
    margin:0 0 6px;
    font-size:clamp(34px, 6.2vw, 60px);
    line-height:1;
}
.greeting .subtle{ font-size:18px; }

/* ---------- Buttons ---------- */

button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:9px 16px;
    border:var(--border);
    border-radius:var(--radius-sm);
    background:#fff;
    color:#000;
    box-shadow:var(--shadow-sm);
    font:inherit;
    font-weight:600;
    line-height:1.2;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform 80ms steps(2), box-shadow 80ms steps(2), background-color .1s;
}
button:hover{
    transform:translate(-1px, -1px);
    box-shadow:var(--shadow);
    background:var(--lilac-soft);
}
button:active{
    transform:translate(3px, 3px);
    box-shadow:0 0 0 0 #000;
}
button:disabled{
    opacity:.4;
    cursor:not-allowed;
    transform:none;
    box-shadow:var(--shadow-sm);
    background:#fff;
}

.btn-primary{
    background:var(--lavender);
    color:#fff;
}
.btn-primary:hover{ background:#7b5fc8; }
.btn-ghost{ background:#fff; }
.btn-danger{ background:var(--ear); color:#000; }
.btn-danger:hover{ background:#ff7a97; }
.btn-block{ display:flex; width:100%; padding:13px 16px; font-size:17px; }
.btn-back{
    margin:0 0 18px;
    padding:7px 14px;
    background:var(--lilac-soft);
}

.nav-pill{
    padding:7px 14px;
    border-radius:999px;
    font-size:15px;
}
.icon-pill{ width:40px; height:40px; padding:0; }
.icon-pill svg{ display:block; }
#soundToggle .snd-on{ display:none; }
#soundToggle.is-on .snd-on{ display:inline; }
#soundToggle.is-on .snd-off{ display:none; }
#soundToggle.is-on{ background:var(--mint); }

.btn-round{
    width:44px;
    height:44px;
    padding:0;
    font-size:14px;
    border-radius:var(--radius-sm);
}

/* ---------- Forms ---------- */

input, textarea, select{
    width:100%;
    padding:10px 12px;
    border:var(--border);
    border-radius:var(--radius-sm);
    background:#fff;
    color:#000;
    font:inherit;
    transition:box-shadow .1s;
}
input[type="checkbox"]{ width:auto; accent-color:var(--lavender); }
input::placeholder, textarea::placeholder{ color:var(--muted); }
input:focus, textarea:focus, select:focus{
    outline:2px solid var(--lavender-deep);
    outline-offset:2px;
    box-shadow:3px 3px 0 0 var(--lavender);
}
textarea{ min-height:130px; resize:vertical; line-height:1.5; }
label, .field-label{
    display:block;
    margin:0 0 6px;
    color:var(--ink-soft);
    font-size:14px;
    font-weight:600;
}
.field-label{ margin-top:16px; }

.inline-input{ display:flex; gap:10px; align-items:stretch; }
.inline-input input{ flex:1; min-width:0; }
.inline-input button{ flex-shrink:0; }

[role="alert"]{
    margin-top:8px;
    color:var(--danger);
    font-size:14px;
    font-weight:600;
}
[role="alert"]:empty{ display:none; }

/* ---------- Timer card ---------- */

.home-top{
    display:grid;
    grid-template-columns:minmax(0, 1.12fr) minmax(0, .88fr);
    gap:24px;
    align-items:stretch;
    margin-bottom:24px;
}
.home-top > .card{ margin:0; }

.hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:var(--lilac);
    transition:background-color .4s;
}
body[data-mode="break"] .hero{ background:var(--ear-soft); }

.mode-pill{
    margin:0 0 12px;
    padding:6px 16px 5px;
    border:var(--border);
    border-radius:999px;
    background:var(--lavender);
    color:#fff;
    font-size:18px;
    letter-spacing:.08em;
}
body[data-mode="break"] .mode-pill{ background:var(--ear); color:#000; }

#taskLabel{
    max-width:100%;
    margin:0 0 6px;
    font-size:clamp(20px, 3vw, 26px);
    overflow-wrap:anywhere;
}

.task-resource-icons{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px;
    min-height:4px;
}

.timer-player{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(10px, 2vw, 18px);
    width:100%;
    margin:14px 0 18px;
}

#timer{
    flex:1;
    max-width:340px;
    min-width:0;
    padding:10px 12px 6px;
    border:var(--border);
    border-radius:var(--radius);
    background:var(--screen);
    color:var(--paper);
    box-shadow:var(--shadow);
    font-family:var(--font-clock);
    font-size:clamp(64px, 11vw, 112px);
    font-weight:400;
    letter-spacing:.04em;
    line-height:.95;
    text-align:center;
    font-variant-numeric:tabular-nums;
    text-shadow:0 0 0 transparent;
}
body[data-mode="break"] #timer{ color:var(--ear); }

.player-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

#playPauseBtn{
    width:64px;
    height:64px;
    padding:0 0 2px;
    border-radius:var(--radius);
    background:var(--lavender);
    color:#fff;
    font-size:24px;
    box-shadow:var(--shadow);
}
#playPauseBtn:hover{ background:#7b5fc8; box-shadow:var(--shadow-lg); }
#playPauseBtn:active{ box-shadow:0 0 0 0 #000; }

.launch-btn{ margin-top:2px; }

.task-counter{
    margin-top:14px;
    color:var(--ink-soft);
    font-weight:600;
}
.task-counter span{
    font-family:var(--font-pixel);
    font-size:18px;
    color:#000;
}

/* ---------- Stage: the cats ---------- */

.stage-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
    border:var(--border);
    border-radius:var(--radius);
    background:#fff;
    box-shadow:var(--shadow);
}

.stage{
    position:relative;
    flex:1;
    min-height:290px;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 120%, #fff 0 30%, transparent 31%),
        linear-gradient(180deg, #cfe3ff 0%, #e9efff 60%, #f6edff 100%);
    isolation:isolate;
}
body[data-mode="break"] .stage{
    background:
        linear-gradient(180deg, #ffd9e1 0%, #ffe9ee 60%, #fff4f0 100%);
}
.stage[data-mood="focus"]{
    background:linear-gradient(180deg, #8f86c4 0%, #b6aee2 60%, #d9cdf7 100%);
}

/* a few blocky clouds */
.stage::before{
    content:"";
    position:absolute;
    left:8%;
    top:16%;
    width:48px;
    height:12px;
    background:#fff;
    box-shadow:
        12px -12px 0 0 #fff, 24px -12px 0 0 #fff, 36px 0 0 0 #fff,
        190px 40px 0 0 #fff, 202px 28px 0 0 #fff, 214px 28px 0 0 #fff, 226px 40px 0 0 #fff;
    opacity:.85;
    z-index:-1;
    animation:drift 40s linear infinite alternate;
}
@keyframes drift{ from{ transform:translateX(-10px); } to{ transform:translateX(18px); } }

.ground{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:64px;
    border-top:var(--border);
    background:
        linear-gradient(#8fd07a 0 16px, transparent 16px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.09) 0 8px, transparent 8px 24px) 0 20px / 100% 8px no-repeat,
        repeating-linear-gradient(90deg, #c49a6c 0 16px, #b98a5e 16px 32px);
    z-index:1;
}
.ground::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:16px;
    height:3px;
    background:rgba(0,0,0,.28);
}
.stage[data-mood="focus"] .ground{
    background:
        linear-gradient(#6fb35d 0 16px, transparent 16px),
        repeating-linear-gradient(90deg, #a07a54 0 16px, #957049 16px 32px);
}

.cat-btn{
    position:absolute;
    bottom:30px;
    width:min(54%, 250px);
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    transform:none;
    transform-origin:50% 90%;
    z-index:2;
}
.cat-btn:hover, .cat-btn:active{
    background:none;
    box-shadow:none;
    transform:none;
}
.cat-btn-black{ left:-2%; }
.cat-btn-white{ right:-2%; }
.cat-btn:focus-visible{ outline-offset:-4px; border-radius:var(--radius); }

.cat-sprite{
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    background-repeat:no-repeat;
    image-rendering:pixelated;
    image-rendering:crisp-edges;
    image-rendering:pixelated;
    pointer-events:none;
}
.cat-sprite.swap{ animation:swap .24s steps(4) 1; }
@keyframes swap{
    0%{ transform:scale(1.07, .93); }
    50%{ transform:scale(.96, 1.06) translateY(-3%); }
    100%{ transform:none; }
}
.cat-sprite.small{ width:132px; margin:0 auto; }

.cat-btn:hover .cat-sprite{ transform:translateY(-2px); }
.cat-btn.poke{ animation:poke .42s steps(6) 1; }
@keyframes poke{
    0%{ transform:none; }
    25%{ transform:translateY(-14px) scale(.97, 1.04); }
    55%{ transform:translateY(0) scale(1.05, .94); }
    80%{ transform:translateY(-3px); }
    100%{ transform:none; }
}
.stage.startle .cat-btn{ animation:startle .5s steps(5) 3; }
@keyframes startle{
    0%, 100%{ transform:none; }
    30%{ transform:translateY(-26px); }
    60%{ transform:translateY(0) scale(1.04, .95); }
}

.speech{
    position:absolute;
    top:12px;
    left:50%;
    z-index:5;
    max-width:calc(100% - 28px);
    padding:9px 14px 8px;
    border:var(--border);
    border-radius:var(--radius-sm);
    background:#fff;
    box-shadow:var(--shadow-sm);
    font-family:var(--font-pixel);
    font-size:17px;
    line-height:1.25;
    text-align:center;
    transform:translateX(-50%);
    pointer-events:none;
}
.speech::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-11px;
    width:14px;
    height:14px;
    background:#fff;
    border-right:var(--border);
    border-bottom:var(--border);
    transform:translateX(-50%) rotate(45deg);
}
.speech[hidden]{ display:none; }
.speech.pop{ animation:bubble .3s steps(5) 1; }
@keyframes bubble{
    0%{ transform:translateX(-50%) scale(.6); opacity:0; }
    70%{ transform:translateX(-50%) scale(1.06); opacity:1; }
    100%{ transform:translateX(-50%) scale(1); }
}

.hearts-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px 14px;
    padding:12px 16px;
    border-top:var(--border);
    background:#fff;
}
.hearts{
    display:flex;
    gap:2px;
}
.hearts img{
    display:block;
    width:28px;
    height:28px;
    image-rendering:pixelated;
}
.hearts img.gain{ animation:heartpop .5s steps(5) 1; }
@keyframes heartpop{
    0%{ transform:scale(.4); }
    50%{ transform:scale(1.4) rotate(-6deg); }
    100%{ transform:scale(1); }
}
.level-line{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
    font-family:var(--font-pixel);
    font-size:17px;
    color:var(--ink-soft);
}
.level-line #levelLabel{ color:var(--lavender-deep); }
.level-line .dot{ width:6px; height:6px; background:var(--muted); }

/* ---------- Plan your session ---------- */

.settings{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    margin-bottom:4px;
}
.field span{
    display:block;
    margin-bottom:6px;
    color:var(--ink-soft);
    font-size:14px;
    font-weight:600;
}

.workspace-name-field{ margin-top:16px; }
.task-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}
.task-list-hint{
    margin:-6px 0 14px;
    color:var(--muted);
    font-size:14px;
}

/* ---------- Home workspaces ---------- */

.home-workspaces .card-head{ margin-bottom:6px; }
.home-workspaces .task-list-hint{ margin:0; }

.home-workspace-list{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
    gap:14px;
    margin-top:16px;
}
.home-workspace-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    padding:14px 16px;
    text-align:left;
    background:#fff;
}
.home-workspace-name{
    font-family:var(--font-pixel);
    font-size:20px;
    line-height:1.15;
    overflow-wrap:anywhere;
}
.home-workspace-meta{ color:var(--ink-soft); font-size:14px; font-weight:500; }
.home-workspace-cta{ margin-top:6px; color:var(--lavender-deep); font-weight:700; }
.home-workspace-card:hover{ background:var(--lilac); }
.home-workspace-list:has(.empty-state){ display:block; }

/* ---------- Empty states ---------- */

.empty-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:6px 12px 10px;
    text-align:center;
    color:var(--ink-soft);
}
.empty-state[hidden]{ display:none; }
.empty-state p{ max-width:34ch; font-size:15px; }
.empty-state .cat-sprite.small{ width:118px; }

/* ---------- Task rows ---------- */

#taskList .task-row,
#workspaceEditorTaskList .task-row{
    display:flex;
    align-items:stretch;
    gap:8px;
    width:100%;
    margin:0 0 10px;
    transition:transform .18s ease, opacity .18s ease;
}

#taskList .task-select,
#workspaceEditorTaskList .task-select{
    flex:1;
    min-width:0;
    justify-content:space-between;
    gap:8px;
    padding:12px 14px;
    text-align:left;
    font-weight:600;
    cursor:grab;
}
#taskList .task-select > span:first-child,
#workspaceEditorTaskList .task-select > span:first-child{
    flex:1;
    min-width:0;
    overflow-wrap:anywhere;
    text-align:left;
}
#taskList .task-select .task-resource-icons-inline,
#workspaceEditorTaskList .task-select .task-resource-icons-inline{ flex-shrink:0; }

#taskList.task-list-dragging .task-select,
#workspaceEditorTaskList.task-list-dragging .task-select{ cursor:grabbing; }
#taskList .task-row.task-dragging,
#workspaceEditorTaskList .task-row.task-dragging{ opacity:.4; }
#taskList .task-row.drop-target .task-select,
#workspaceEditorTaskList .task-row.drop-target .task-select{
    background:var(--lilac);
    outline:3px dashed var(--lavender);
    outline-offset:2px;
}

#taskList .task-delete,
#workspaceEditorTaskList .task-delete{
    flex:0 0 46px;
    padding:0;
    color:var(--ink-soft);
    font-size:14px;
}
#taskList .task-delete:hover,
#workspaceEditorTaskList .task-delete:hover{
    background:var(--ear);
    color:#000;
}

.task-drop-placeholder{
    width:100%;
    margin:0 0 10px;
    border:3px dashed var(--lavender);
    border-radius:var(--radius-sm);
    background:var(--lilac-soft);
    pointer-events:none;
}

#taskList .task-row.is-active .task-select{
    background:var(--lilac);
    box-shadow:var(--shadow-sm), inset 6px 0 0 var(--lavender);
    padding-left:20px;
}
body[data-mode="break"] #taskList .task-row.is-active .task-select{ background:var(--ear-soft); }
#taskList .task-row.is-done .task-select > span:first-child{
    color:var(--muted);
    text-decoration:line-through;
    text-decoration-thickness:2px;
}

#taskUndoNotice{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:12px;
    padding:8px 8px 8px 16px;
    border:var(--border);
    border-radius:var(--radius-sm);
    background:var(--screen);
    color:#fff;
    font-weight:600;
}
#taskUndoNotice[hidden]{ display:none; }
#taskUndoNotice button{ padding:5px 12px; color:#000; }

/* ---------- Resource icons ---------- */

.task-resource-icons-inline{ display:inline-flex; justify-content:flex-start; gap:4px; }
.task-resource-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:30px;
    min-height:30px;
    padding:2px 6px;
    border:2px solid #000;
    border-radius:var(--radius-sm);
    background:#fff;
    box-shadow:2px 2px 0 0 #000;
    font-size:15px;
    line-height:1;
}
span.task-resource-icon{ box-shadow:none; background:var(--lilac-soft); }
button.task-resource-icon:hover{ background:var(--lilac); box-shadow:3px 3px 0 0 #000; }

/* ---------- Task detail page ---------- */

#selectedTask{ margin-bottom:8px; overflow-wrap:anywhere; }
#selectedTaskResources{ justify-content:flex-start; margin-bottom:18px; }
.task-duration-field{ margin-bottom:18px; }
.task-duration-field[hidden]{ display:none; }

.notes-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:10px;
}
.notes-toolbar button{ padding:5px 10px; font-size:14px; }
.notes-toolbar select{ width:auto; }

.rich-note-editor{
    min-height:180px;
    padding:14px 16px;
    border:var(--border);
    border-radius:var(--radius-sm);
    background:#fff;
    line-height:1.65;
    overflow-wrap:anywhere;
    outline:none;
}
.rich-note-editor:focus{ box-shadow:3px 3px 0 0 var(--lavender); }
.rich-note-editor:empty::before{ content:attr(data-placeholder); color:var(--muted); }
.rich-note-editor input[type="checkbox"]{ width:auto; margin-right:8px; accent-color:var(--lavender); }
.rich-note-editor .note-checklist{ list-style:none; padding-left:8px; }
.rich-note-editor blockquote{
    margin-left:12px;
    padding-left:12px;
    border-left:4px solid var(--lilac);
    color:var(--ink-soft);
}

.item-list{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.item-list:empty{ display:none; }
.item-list > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 8px 8px 14px;
    border:3px solid #000;
    border-radius:var(--radius-sm);
    background:var(--lilac-soft);
    font-weight:500;
    overflow-wrap:anywhere;
}
.item-list > div > a{ flex:1; min-width:0; }
.item-list > div > button:last-child{ flex-shrink:0; padding:4px 10px; font-size:14px; box-shadow:2px 2px 0 0 #000; }
.item-list > div > button:last-child:hover{ background:var(--ear); }

.ai-chat-name{
    flex:1;
    min-width:0;
    justify-content:flex-start;
    padding:2px 4px;
    border:0;
    background:none;
    box-shadow:none;
    color:var(--lavender-deep);
    text-align:left;
    text-decoration:underline;
    text-underline-offset:3px;
}
.ai-chat-name:hover{ background:none; box-shadow:none; transform:none; color:#000; }
.ai-chat-name:active{ transform:none; }

#fileDropZone{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    padding:22px 16px;
    border:3px dashed #000;
    border-radius:var(--radius-sm);
    background:var(--lilac-soft);
    text-align:center;
    transition:background-color .1s;
}
#fileDropZone span{ color:var(--muted); }
#fileDropZone.drag-over{ background:var(--lilac); border-color:var(--lavender-deep); }

#aiChatLaunchLog{
    margin-top:12px;
    border:3px solid #000;
    border-radius:var(--radius-sm);
    background:#fff;
    padding:8px 12px;
}
#aiChatLaunchLog summary{ cursor:pointer; font-weight:600; }
#aiChatLaunchLogContent{
    margin:10px 0 2px;
    padding:10px;
    border-radius:6px;
    background:var(--screen);
    color:var(--lilac);
    font-size:13px;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

/* ---------- Dialogs ---------- */

dialog{
    width:min(480px, calc(100vw - 28px));
    max-height:calc(100vh - 28px);
    padding:24px;
    border:var(--border);
    border-radius:var(--radius);
    background:#fff;
    color:#000;
    box-shadow:var(--shadow-lg);
    overflow:auto;
}
dialog[open]{ animation:dialog-in .24s steps(5) 1; }
dialog::backdrop{ background:rgba(29, 26, 38, .5); }
@keyframes dialog-in{
    from{ transform:translateY(14px) scale(.96); opacity:0; }
    to{ transform:none; opacity:1; }
}
dialog h2{ margin-bottom:12px; font-size:26px; }
dialog label{ margin-top:14px; }
dialog p{ margin-top:8px; }
dialog p.subtle{ font-size:15px; }
.dialog-actions{
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}
.dialog-error{ margin-top:8px; }

.switch-row{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:14px;
    padding:10px 12px;
    border:3px solid #000;
    border-radius:var(--radius-sm);
    background:var(--lilac-soft);
    color:#000;
    font-size:15px;
    cursor:pointer;
}
.switch-row input{ flex:0 0 22px; width:22px; height:22px; margin:0; }

#applicationSearch{ margin:8px 0 12px; }
#applicationResults{
    display:flex;
    flex-direction:column;
    gap:6px;
    max-height:300px;
    overflow:auto;
    padding:2px 6px 6px 2px;
}
#applicationResults .application-choice{
    justify-content:flex-start;
    width:100%;
    padding:9px 12px;
    text-align:left;
    box-shadow:2px 2px 0 0 #000;
}
#applicationResults .application-choice[hidden]{ display:none; }
.picker-loading{ color:var(--ink-soft); }

#blockedList{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.blocked-link{
    display:block;
    padding:10px 14px;
    border:3px solid #000;
    border-radius:var(--radius-sm);
    background:var(--lilac-soft);
    box-shadow:var(--shadow-sm);
    color:#000;
    font-weight:600;
    text-decoration:none;
    overflow-wrap:anywhere;
}
.blocked-link:hover{ background:var(--lilac); }

.love-card{
    width:min(460px, calc(100vw - 28px));
    background:#fff6fa;
    text-align:center;
}
.love-card .love-art{
    display:block;
    width:min(300px, 80%);
    height:auto;
    margin:-6px auto 6px;
    image-rendering:pixelated;
}
.love-card h2{ font-size:30px; }
.love-card #loveLines p{ margin-top:10px; font-size:17px; }
.love-sign{
    margin-top:16px !important;
    font-family:var(--font-pixel);
    font-size:22px;
    color:var(--danger);
}
.love-card .dialog-actions{ justify-content:center; }

/* ---------- AI library ---------- */

#aiLibraryStatus{ margin-bottom:12px; font-weight:600; color:var(--lavender-deep); min-height:0; }
#aiLibraryStatus:empty{ display:none; }
#aiLibraryStatus.error{ color:var(--danger); }
#aiShortcutList{ display:flex; flex-direction:column; gap:14px; }
#aiShortcutList:has(.empty-state), #workspaceList:has(.empty-state){
    padding:12px;
    border:3px dashed #000;
    border-radius:var(--radius);
    background:var(--lilac-soft);
}

.ai-shortcut-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:16px 18px;
    border:var(--border);
    border-radius:var(--radius);
    background:#fff;
    box-shadow:var(--shadow);
    cursor:grab;
}
.ai-shortcut-card.dragging{ opacity:.45; }
.ai-shortcut-card h2{ margin:0; }
.ai-shortcut-card p{ margin-top:4px; color:var(--ink-soft); font-size:15px; overflow-wrap:anywhere; }
.ai-shortcut-title{
    padding:0;
    border:0;
    background:none;
    box-shadow:none;
    font-family:var(--font-pixel);
    font-size:22px;
    text-align:left;
}
.ai-shortcut-title:hover{ background:none; box-shadow:none; transform:none; color:var(--lavender-deep); }
.ai-shortcut-title:active{ transform:none; }
.ai-shortcut-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.ai-shortcut-actions button{ padding:7px 12px; font-size:14px; }

/* ---------- Workspace manager ---------- */

#workspaceList{ display:flex; flex-direction:column; gap:14px; }
.workspace-entry{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:16px 18px;
    border:var(--border);
    border-radius:var(--radius);
    background:#fff;
    box-shadow:var(--shadow);
}
.workspace-entry-info{ min-width:0; }
.workspace-entry h3{ cursor:pointer; overflow-wrap:anywhere; }
.workspace-entry h3:hover{ color:var(--lavender-deep); text-decoration:underline; text-underline-offset:3px; }
.workspace-entry-meta{ margin-top:4px; color:var(--ink-soft); font-size:14px; }
.workspace-entry-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.workspace-entry-actions button{ padding:7px 12px; font-size:14px; }
.workspace-add-task{ margin-top:18px; }

/* ---------- Footer ---------- */

.site-footer{
    position:relative;
    flex-shrink:0;
    margin-top:120px;
    padding:46px clamp(14px, 3vw, 24px) 28px;
    border-top:var(--border);
    background:var(--screen);
    color:#fff;
}
.footer-peek{
    position:absolute;
    left:0;
    right:0;
    bottom:100%;
    height:0;
    max-width:1120px;
    margin:0 auto;
    pointer-events:none;
}
.footer-peek .peek{
    position:absolute;
    bottom:-3px;
    width:clamp(96px, 16vw, 150px);
}
.footer-peek .peek-black{ left:clamp(10px, 6vw, 80px); }
.footer-peek .peek-white{ right:clamp(10px, 7vw, 100px); }

.footer-inner{ max-width:1120px; margin:0 auto; }
.footer-top{ display:flex; align-items:flex-end; gap:14px; }
.footer-word{
    font-family:var(--font-pixel);
    font-size:clamp(48px, 11vw, 96px);
    font-weight:600;
    line-height:.9;
    letter-spacing:0;
}
.block-btn{
    padding:0;
    border:0;
    background:none;
    box-shadow:none;
    border-radius:6px;
    line-height:0;
}
.block-btn:hover{ background:none; box-shadow:none; transform:translateY(-2px); }
.block-btn:active{ transform:translateY(1px); }
.block-btn img{ display:block; width:64px; height:64px; image-rendering:pixelated; }
.block-btn.poke{ animation:poke .4s steps(5) 1; }

.footer-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:24px;
    margin-top:32px;
}
.footer-head{
    margin-bottom:8px;
    color:var(--lilac);
    font-family:var(--font-pixel);
    font-size:19px;
}
.footer-text{ color:rgba(255,255,255,.78); font-size:15px; }
.footer-links{ margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.site-footer a{ color:rgba(255,255,255,.85); text-underline-offset:3px; }
.site-footer a:hover{ color:#fff; }
.footer-note{
    margin-top:34px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.15);
    color:rgba(255,255,255,.7);
    font-size:14px;
}

/* ---------- Toasts and confetti ---------- */

.toasts{
    position:fixed;
    left:50%;
    bottom:18px;
    z-index:120;
    display:flex;
    flex-direction:column;
    gap:8px;
    width:min(460px, calc(100vw - 24px));
    transform:translateX(-50%);
    pointer-events:none;
}
.toast{
    padding:11px 16px;
    border:var(--border);
    border-radius:var(--radius-sm);
    background:#fff;
    box-shadow:var(--shadow);
    font-weight:600;
    font-size:15px;
    pointer-events:auto;
    cursor:pointer;
    animation:toast-in .25s steps(4) 1;
    transition:opacity .3s, transform .3s;
}
.toast-alert{ background:var(--ear-soft); }
.toast.leaving{ opacity:0; transform:translateY(8px); }
@keyframes toast-in{ from{ transform:translateY(16px); opacity:0; } to{ transform:none; opacity:1; } }

.confetti{
    position:fixed;
    inset:0;
    z-index:150;
    pointer-events:none;
}

/* ---------- Tablet and phone ---------- */

@media (max-width:900px){
    .home-top{ grid-template-columns:minmax(0, 1fr); }
    .home-grid{ grid-template-columns:1fr; }
    .stage{ min-height:260px; }
    .cat-btn{ width:min(48%, 230px); }
    .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:560px){
    .page{ padding-top:18px; }
    .header-inner{ gap:8px; }
    .brand{ font-size:24px; flex:1 1 auto; order:1; }
    .brand-mark{ width:32px; height:32px; }
    .nav-pill{ padding:6px 10px; font-size:14px; }
    .icon-pill{ width:36px; height:36px; order:2; }
    /* phone header: wordmark and icons on top, the two page buttons share a second row */
    .header-inner{ flex-wrap:wrap; row-gap:8px; }
    .app-nav{ display:contents; }
    .app-nav .nav-pill:not(.icon-pill){ order:3; flex:1 1 calc(50% - 6px); justify-content:center; padding:8px 10px; }
    .card-head{ gap:10px; }
    .card-head > div{ min-width:0; flex:1 1 auto; }
    .card-head > button{ flex:0 0 auto; white-space:nowrap; }
    .card-title{ font-size:22px; }
    .home-workspaces .card-title{ font-size:20px; white-space:nowrap; }
    .settings{ grid-template-columns:1fr; }
    .stage{ min-height:232px; }
    .cat-btn{ width:50%; bottom:26px; }
    .ground{ height:54px; }
    .hearts img{ width:24px; height:24px; }
    .hearts-row{ padding:10px 12px; }
    .ai-shortcut-card, .workspace-entry{ flex-direction:column; align-items:flex-start; }
    .ai-shortcut-actions, .workspace-entry-actions{ justify-content:flex-start; }
    .footer-grid{ grid-template-columns:1fr; gap:18px; }
    .footer-top{ align-items:center; }
    .block-btn img{ width:48px; height:48px; }
    .site-footer{ margin-top:100px; }
    #timer{ padding-top:8px; }
    .inline-input{ flex-wrap:wrap; }
    .inline-input button{ flex:1 1 100%; }
    .card{ padding:16px; }
}

@media (max-width:380px){
    .nav-pill:not(.icon-pill){ padding:8px 8px; font-size:13px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *, *::before, *::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }
    .confetti{ display:none; }
}

/* "os" in the wordmark takes the accent colour */
/* her favourite colour: lilac (deeper on the light header so it reads, soft on the dark footer) */
.brand-os{ color: #b38bdb; }
.footer-word .brand-os{ color: #d4b8f0; }