/* A notebook someone keeps about their cat: paper slips with ink outlines, laid crooked over the room.
   Rules: hard offset ink shadows only, no blur, no gradients as decoration, no uniform radii.
   File url()s are not allowed here (they would skip ?v= cache busting); fonts come from index.php. */

:root {
    --paper: #F3E6CC;
    --paper-light: #FBF4E4;
    --paper-shade: #E4D2AE;
    --ink: #2E2420;
    --ink-soft: #6B5546;
    --persimmon: #D9623B;
    --brick: #A8431F;
    --mustard: #D9A62E;
    --moss: #7D8B4A;
    --pond: #3F7F7A;
    --alarm: #B23A2A;
    --backdrop: rgb(46 36 32 / 0.38);

    --font-display: "Chewy", "Cardo", Georgia, serif;
    --font-body: "Cardo", Georgia, "Times New Roman", serif;

    --space-1: 4px;
    --space-2: 6px;
    --space-3: 10px;
    --space-4: 16px;
    --space-5: 26px;

    --edge-top: max(10px, env(safe-area-inset-top));
    --edge-bottom: max(10px, env(safe-area-inset-bottom));
    --edge-left: max(10px, env(safe-area-inset-left));
    --edge-right: max(10px, env(safe-area-inset-right));

    color: var(--ink);
    font: 17px/1.45 var(--font-body);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: #F6E7D4;
}

p { margin: 0; }

button {
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

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

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

#scene {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}

/* ---------- Paper slip: the one panel technique ---------- */

.paper {
    position: fixed;
    isolation: isolate;
    padding: var(--space-3) var(--space-4);
    color: var(--ink);
}

.paper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        repeating-linear-gradient(97deg, rgb(110 80 40 / 0.035) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(-6deg, rgb(255 255 255 / 0.22) 0 1px, transparent 1px 11px),
        radial-gradient(130% 100% at 22% 12%, var(--paper-light), var(--paper) 68%);
    border: 2px solid var(--ink);
    border-radius: var(--wobble);
    box-shadow: 3px 4px 0 var(--ink);
    transform: rotate(var(--tilt, 0deg));
}

.paper--wide { --wobble: 255px 18px 225px 14px / 14px 225px 18px 255px; }

/* ---------- Tag button ---------- */

.tag-button {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    font: 400 clamp(15px, 4.4vw, 21px) / 1 var(--font-display);
    font-synthesis: none;
    letter-spacing: 0.01em;
    color: var(--ink);
    background: var(--paper-light);
    border: 2px solid var(--ink);
    border-radius: 14px 6px 12px 5px / 6px 12px 5px 14px;
    box-shadow: 2px 3px 0 var(--ink);
    cursor: pointer;
    user-select: none;
    transition: transform 60ms, box-shadow 60ms;
}

.tag-button:nth-child(odd) { rotate: -1.2deg; }
.tag-button:nth-child(even) { rotate: 0.9deg; }
.tag-button:nth-child(3n) { border-radius: 6px 13px 5px 12px / 12px 5px 14px 6px; }

.tag-button:active {
    transform: translate(2px, 3px);
    box-shadow: 0 0 0 var(--ink);
    background: var(--paper-shade);
}

.tag-button[aria-disabled="true"] {
    color: var(--ink-soft);
    border-style: dashed;
    box-shadow: none;
    background: transparent;
}

.tag-button:disabled { opacity: 0.6; cursor: progress; }

.tag-button--primary { background: var(--brick); color: var(--paper-light); }
.tag-button--primary:active { background: #8A3618; }

.tag-button--small { font-size: 18px; padding: var(--space-2) var(--space-3); }

.tag-button svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

.icon-only { display: grid; place-items: center; padding: 0; width: 44px; }
.icon-only[aria-pressed="false"] { color: var(--ink-soft); }

:focus-visible { outline: 3px solid var(--persimmon); outline-offset: 3px; }

/* ---------- Top bar ---------- */

.top-bar {
    --tilt: -0.8deg;
    top: var(--edge-top);
    left: var(--edge-left);
    right: var(--edge-right);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.identity { min-width: 7rem; flex: 1 1 9rem; }

.save-name {
    font: 22px/1.1 var(--font-display);
    font-synthesis: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.save-name--plain { font-family: var(--font-body); font-weight: 700; }

.mood-line {
    font: italic 16px/1.2 var(--font-body);
    color: var(--ink-soft);
    text-wrap: balance;
}

.top-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    flex: 0 1 auto;
}

/* ---------- Needs ---------- */

.needs {
    --tilt: 0.6deg;
    top: calc(var(--edge-top) + var(--top-bar-height, 70px) + 12px);
    left: calc(var(--edge-left) + 6px);
    right: calc(var(--edge-right) + 14px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
}

.need { display: grid; justify-items: center; min-width: 44px; }
.need:nth-child(1) { rotate: -2deg; }
.need:nth-child(2) { rotate: 1.5deg; }
.need:nth-child(3) { rotate: -1deg; }
.need:nth-child(4) { rotate: 2deg; }

.need-button {
    display: grid;
    justify-items: center;
    gap: 0;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.need-art { width: 44px; height: 36px; overflow: visible; }
.need-outline { fill: none; stroke: var(--ink); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }

.need-fill {
    transform-box: fill-box;
    transform: translateY(calc((1 - var(--level, 1)) * 100%));
    transition: transform 600ms ease-out;
}

.need-label { font: 17px/1 var(--font-display); font-synthesis: none; }

.need[data-state="low"] .need-outline { stroke: var(--alarm); }
.need[data-state="low"] .need-label { color: var(--alarm); }
.need[data-state="low"] .need-art { animation: need-wobble 1.8s ease-in-out infinite; }

@keyframes need-wobble {
    0%, 100% { rotate: -4deg; }
    50% { rotate: 4deg; }
}

/* ---------- Action bar ---------- */

.action-bar {
    --tilt: -0.4deg;
    left: var(--edge-left);
    right: var(--edge-right);
    bottom: var(--edge-bottom);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
    padding: var(--space-3);
}

.action-bar .tag-button {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    min-height: 64px;
    padding: var(--space-2) 2px;
    hyphens: manual;
}

.action-bar .tag-button svg { width: 28px; height: 28px; }

/* "Wait, the cat is busy": a short sideways shake instead of a silent no-op. */
.tag-button--nudge { animation: button-nudge 280ms ease-out; }
@keyframes button-nudge {
    25% { translate: -3px 0; }
    60% { translate: 3px 0; }
}

/* ---------- Notes (scattered popovers) ---------- */

.note-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.note {
    position: fixed;
    left: 0;
    top: 0;
    translate: var(--x) var(--y);
    rotate: var(--tilt);
    max-width: min(68vw, 260px);
    padding: 8px 14px 10px;
    font: 20px/1.15 var(--font-display);
    font-synthesis: none;
    color: var(--ink);
    background: var(--paper-light);
    border: 2px solid var(--ink);
    border-radius: 22px 8px 26px 10px / 10px 24px 8px 20px;
    box-shadow: 2px 3px 0 var(--ink);
    pointer-events: auto;
    cursor: pointer;
    animation: note-in 180ms cubic-bezier(.3, 1.6, .5, 1) both;
}

.note--cat { font-size: 23px; }
.note--good { border-color: var(--moss); box-shadow: 2px 3px 0 var(--moss); }
.note--bad { border-color: var(--alarm); box-shadow: 2px 3px 0 var(--alarm); background: #FBEDE4; }
.note--info { font: 18px/1.3 var(--font-body); }

/* Speech tail: a square sitting on the edge that faces the cat; only its outer corner shows, and it
   covers the note border where it attaches, like a hand-drawn speech bubble. */
.note--with-tail::after {
    content: "";
    position: absolute;
    left: var(--tail-x);
    top: var(--tail-y);
    width: 15px;
    height: 15px;
    background: var(--paper-light);
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: translate(-50%, -50%) rotate(calc(var(--tail-angle) - 45deg));
}

.note--bump { animation: note-bump 140ms ease-out; }
.note--leaving { animation: note-out 160ms ease-in both; }
.note--leaving-fast { animation: note-out 110ms ease-in both; }

@keyframes note-in { from { opacity: 0; scale: .6; } }
@keyframes note-out { to { opacity: 0; translate: var(--x) calc(var(--y) + 8px); } }
@keyframes note-bump { 50% { scale: 1.06; } }

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

dialog.dialog {
    position: fixed;
    inset: auto var(--edge-right) auto var(--edge-left);
    top: calc(var(--visual-top, 0px) + var(--edge-top) + 8px);
    width: auto;
    max-width: 30rem;
    max-height: calc(var(--visual-height, 100dvh) - var(--edge-top) - 24px);
    margin: 0 auto;
    padding: var(--space-5) var(--space-4) var(--space-4);
    overflow: auto;
    overscroll-behavior: contain;
    color: var(--ink);
    background:
        repeating-linear-gradient(97deg, rgb(110 80 40 / 0.035) 0 1px, transparent 1px 7px),
        radial-gradient(130% 100% at 22% 12%, var(--paper-light), var(--paper) 68%);
    border: 2px solid var(--ink);
    border-radius: 28px 10px 34px 12px / 12px 30px 10px 26px;
    box-shadow: 4px 5px 0 var(--ink);
}

dialog.dialog::backdrop { background: var(--backdrop); }

dialog h2 {
    margin: 0 44px var(--space-3) 0;
    font: 28px/1.05 var(--font-display);
    font-synthesis: none;
    font-weight: 400;
}

dialog p + p, dialog p + label, dialog .chips + label { margin-top: var(--space-3); }

.dialog-note { font-size: 16px; color: var(--ink-soft); }
.dialog-note--warning { color: var(--alarm); }

dialog label {
    display: block;
    margin-top: var(--space-4);
    font: 18px/1.2 var(--font-display);
}

dialog input {
    width: 100%;
    margin-top: var(--space-2);
    padding: 10px 12px;
    font: 18px/1.3 var(--font-body);
    color: var(--ink);
    background: var(--paper-light);
    border: 2px solid var(--ink);
    border-radius: 6px 12px 4px 10px / 10px 4px 12px 6px;
}

dialog input[aria-invalid] { border-color: var(--alarm); }

.hint { margin-top: var(--space-2); font-size: 16px; color: var(--ink-soft); }
.field-error, .dialog-status { margin-top: var(--space-2); color: var(--alarm); min-height: 1.2em; }

.dialog-buttons {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
}

.dialog-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.dialog-close svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

.chip {
    min-height: 44px;
    padding: 6px 12px;
    font: 17px/1 var(--font-body);
    background: var(--paper-light);
    border: 2px dashed var(--ink);
    border-radius: 12px 4px 10px 6px;
    cursor: pointer;
}

.version {
    position: fixed;
    right: calc(var(--edge-right) + 4px);
    bottom: calc(var(--edge-bottom) + var(--action-bar-height, 90px) + 6px);
    font: italic 13px/1 var(--font-body);
    color: var(--ink-soft);
    opacity: 0.7;
    pointer-events: none;
}

.noscript { top: 40%; left: 10%; right: 10%; }

/* ---------- Short portrait screens: needs merge into a tighter strip ---------- */

@media (max-height: 600px) and (orientation: portrait) {
    .need-art { width: 34px; height: 28px; }
    .need-label { font-size: 15px; }
}

@media (max-width: 359px) {
    .top-buttons { max-width: 100px; }
}

/* ---------- Landscape phone: actions to the right edge, needs to the left ---------- */

@media (orientation: landscape) and (max-height: 520px) {
    .top-bar { right: auto; max-width: 62vw; padding: var(--space-2) var(--space-3); }
    .save-name { font-size: 19px; }
    .needs {
        top: calc(var(--edge-top) + var(--top-bar-height, 60px) + 12px);
        right: auto;
        grid-template-columns: 1fr;
        --wobble: 18px 160px 14px 200px / 200px 14px 160px 18px;
    }
    .need-art { width: 34px; height: 28px; }
    .action-bar {
        left: auto;
        top: var(--edge-top);
        bottom: var(--edge-bottom);
        grid-template-columns: 1fr;
        align-content: center;
        width: 150px;
        --wobble: 18px 160px 14px 200px / 200px 14px 160px 18px;
    }
    .action-bar .tag-button { grid-auto-flow: column; justify-content: start; min-height: 48px; padding: 4px 10px; }
    .version { bottom: var(--edge-bottom); right: calc(var(--edge-right) + 160px); }
}

/* ---------- Tablet and desktop: floating slips ---------- */

@media (min-width: 720px) and (min-height: 560px) {
    :root { font-size: 17.6px; }
    .top-bar { right: auto; width: min(600px, 56vw); }
    .needs { top: var(--edge-top); left: auto; right: calc(var(--edge-right) + 6px); width: min(380px, 37vw); }
    .action-bar { left: 50%; right: auto; width: min(660px, 92vw); translate: -50% 0; }
    .action-bar .tag-button { grid-auto-flow: column; justify-content: center; align-items: center; gap: 8px; }
}

@media (hover: hover) and (pointer: fine) {
    .tag-button:hover:not(:active):not([aria-disabled="true"]) { transform: translate(-1px, -1px); box-shadow: 3px 4px 0 var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
    .note { animation: note-fade-in 120ms linear both; }
    .note--leaving, .note--leaving-fast { animation: note-fade-out 120ms linear both; }
    .note--bump { animation: none; }
    .need[data-state="low"] .need-art { animation: none; }
    .tag-button { transition: none; }
    .tag-button--nudge { animation: none; outline: 2px dashed var(--ink-soft); }
    @keyframes note-fade-in { from { opacity: 0; } }
    @keyframes note-fade-out { to { opacity: 0; } }
}

@media (forced-colors: active) {
    .paper::before { background: Canvas; box-shadow: none; border-color: CanvasText; }
    .note, dialog.dialog { box-shadow: none; }
}