/* ============================================================================
   draft.css — the room for a first draft.

   You set a count. While you are writing, the page holds. Stop, and after a
   few seconds of grace the ink begins to fade — not deleted, only harder and
   harder to read, until you write again and it comes back.

   The whole room is one idea borrowed from the door that leads to it: the
   hand on the front page stays legible only because it keeps moving, and its
   ink fades behind it. That is this, at the size of a page.

   House rules honoured here: earth tones, no pure black or white, nothing
   faster than 0.4s, handmade over glossy. Nothing on this page loads
   off-origin, and nothing at all is stored.
   ========================================================================= */

@font-face {
    font-family: 'Bumbon';
    src: url('/fonts/LDBumbon-Regular.woff2') format('woff2'),
         url('/fonts/LDBumbon-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ── tokens ─────────────────────────────────────────────────────────────
   One palette, not two. The room is lit the way the Practices are lit: the
   lamp-black of .modal-overlay in index.html, warmed off neutral toward
   brown so it reads as evening rather than as a switched-off screen. A room
   you come to in order to write badly on purpose should not also ask you
   what time of day it is, so there is no light mode and no toggle. */
:root {
    --dr-paper:        #1a1710;   /* lamp-black, the Practices' own */
    --dr-page:         #221e16;
    --dr-ink-c:        #e8e3d6;   /* warm cream, never pure white */
    --dr-ink-soft:     #a8a294;
    /* 4.8:1 on the lamp-black above. The value this took on paper (#6f695c)
       measured 3.4:1 here and carried real text — the count, the vow, the
       note under the goal — so it is lifted rather than carried across. */
    --dr-ink-faint:    #8a8375;
    --dr-rule:         rgba(232, 227, 214, 0.14);
    --dr-rule-soft:    rgba(232, 227, 214, 0.08);
    --dr-accent:       #c09155;
    --dr-shadow:       rgba(0, 0, 0, 0.5);

    /* the site's one warning colour, at the value it takes in the dark */
    --dr-warn:         #d98b6a;

    --dr-serif:        'Petrona', Georgia, serif;
    --dr-display:      'Bumbon', Georgia, serif;

    --dr-slow:         0.55s cubic-bezier(0.33, 0.02, 0.24, 1);

    /* how legible the page is, 1 to 0 — driven by draft.js */
    --dr-ink:          1;
}

/* ── arriving through the door ──────────────────────────────────────────── */
html.dr-arriving body { opacity: 0; filter: blur(9px); }
html.dr-arriving.dr-arrived body {
    opacity: 1;
    filter: blur(0);
    transition: opacity 0.75s ease, filter 0.9s cubic-bezier(0.33, 0.02, 0.24, 1);
}
html.dr-arriving::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: var(--dr-paper);
    pointer-events: none;
}
html.dr-arriving.dr-arrived::after { opacity: 0; transition: opacity 0.7s ease; }
@media (prefers-reduced-motion: reduce) {
    html.dr-arriving body { opacity: 1; filter: none; }
    html.dr-arriving::after { display: none; }
}

/* ── leaving by the same door ────────────────────────────────────────────
   The arrival in reverse: a sheet comes up in the colour the front page was
   lit at when the door was opened — set inline by draft.js, since the room
   has one palette and the page behind it may be in either theme. It covers
   the room for half a second, and then the browser restores the page it was
   already holding, at the place it was left. */
.dr-depart {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.33, 0.02, 0.24, 1);
}
.dr-depart.is-up { opacity: 1; }

/* ── the page ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

/* The onion-skin leaf bound over a book's plates: a faint paper grain across
   the whole surface, and the tissue's own edge a hairline just inside the
   page. Both are index.html's, at the same values — it is the grain that
   keeps a dark writing surface from reading as a void, which is the failure
   mode of every distraction-free editor ever made. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
    opacity: 0.045;
}
body::after {
    content: '';
    position: fixed;
    inset: 13px;
    z-index: 0;
    pointer-events: none;
    border: 1px solid rgba(228, 223, 210, 0.09);
}
.dr-masthead, .dr-start, .dr-session, .dr-done { position: relative; z-index: 1; }

body {
    background: var(--dr-paper);
    color: var(--dr-ink-c);
    font-family: var(--dr-serif);
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button, input, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 3px; }

/* screen-reader only — the destructive behaviour is the point, but the room
   still has to be describable to someone who cannot see it fade */
.dr-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── masthead — present before and after, gone while writing ────────────── */
/* Centred on itself: the title sits on the page's axis, and the way out is
   lifted out of the flow so it cannot pull the title off-centre. */
.dr-masthead {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.9rem 2.4rem 1.5rem;
    border-bottom: 1px solid var(--dr-rule);
}
.dr-masthead[hidden] { display: none; }
.dr-masthead__title {
    margin: 0;
    font-family: var(--dr-display);
    font-size: 1.9rem;
    font-weight: 400;
    letter-spacing: 0.03em;
}
/* The way out. A bare glyph rather than a button, the same idiom the site's
   modals use to close, sitting where the theme control used to be. */
.dr-masthead__right {
    position: absolute;
    top: 50%;
    right: 2.4rem;
    transform: translateY(-50%);
}
.dr-close {
    display: block;
    padding: 0.2em 0.4em;
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    color: var(--dr-ink-faint);
    transition: color var(--dr-slow);
}
.dr-close:hover { color: var(--dr-accent); }

/* ── one screen giving way to the next ──────────────────────────────────────
   [hidden] cannot be transitioned — display:none has no in-between — so the
   fading is done with .is-out and `hidden` is only set once the fade has
   finished. draft.js owns that sequence. */
.dr-start, .dr-session, .dr-done, .dr-masthead {
    opacity: 1;
    transition: opacity 0.45s ease;
}
.dr-start.is-out, .dr-session.is-out, .dr-done.is-out, .dr-masthead.is-out { opacity: 0; }

/* smaller swaps that happen in place: a label changing, a new quote drawn */
.dr-goal__amount, .dr-goal__floor, .dr-epigraph { transition: opacity 0.28s ease; }
.dr-goal__amount.is-out, .dr-goal__floor.is-out, .dr-epigraph.is-out { opacity: 0; }

/* ── before ─────────────────────────────────────────────────────────────── */
.dr-start[hidden], .dr-session[hidden], .dr-done[hidden] { display: none; }

/* Everything on one axis. The room asks for one thing at a time, so the page
   is a single centred column rather than a form pinned to a left margin. */
.dr-start:not([hidden]), .dr-done:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    /* the room minus the masthead, so the column sits on the page's own axis */
    min-height: calc(100vh - 7rem);
}
.dr-start__inner, .dr-done__inner {
    max-width: 32rem;
    margin: 0 auto;
    padding: 3rem 2.4rem 4rem;
    text-align: center;
}

/* Two voices, and no third. Bumbon says the room's name and nothing else;
   Petrona says the rest at one size, told apart by colour alone — no small
   caps, no letterspaced eyebrows, no italics. */
/* ── the line the room is named from ──────────────────────────────────────
   Nothing here is on a timer in JavaScript: the lines hold their place in the
   layout from the first frame and only their ink arrives, staggered, the way
   the hand on the door lays a word down at a time. The couplet below is
   readable from the start and Begin works throughout — this is something to
   find by waiting, never something to wait for. */
@keyframes drInk    { to { opacity: 1; } }
@keyframes drInkDim { to { opacity: 0.62; } }

/* It hangs off the ellipsis rather than sitting in the column: out of the
   flow entirely, its left edge set under the dots themselves (--dr-hinge-x,
   measured once by draft.js so it holds whatever the title's metrics turn out
   to be), and stepped a little further right with each line. Left-aligned
   against a centred page on purpose — three uneven lines, ragged on both
   sides, spilling out of the title instead of obeying the axis. */
.dr-quatrain {
    position: absolute;
    top: 1.5rem;
    left: 50%;
    margin-left: var(--dr-hinge-x, 3rem);
    max-width: 24rem;
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.62;
    color: var(--dr-ink-faint);
}
.dr-quatrain p {
    margin: 0;
    opacity: 0;
    animation: drInk 1.1s ease forwards;
}
.dr-quatrain__line:nth-child(1) { animation-delay: 3s; }
.dr-quatrain__line:nth-child(2) { animation-delay: 3.7s; margin-left: 0.7rem; }
.dr-quatrain__line:nth-child(3) { animation-delay: 4.4s; margin-left: 1.4rem; }
.dr-quatrain .dr-quatrain__attr {
    margin: 0.9em 0 0 2.1rem;
    animation-name: drInkDim;
    animation-delay: 5.6s;
}

/* The hinge. Only while the start screen is up: over a finished session the
   masthead is the room's name again, not a sentence left hanging. */
.dr-masthead__ell { opacity: 0; }
body.dr-on-start .dr-masthead__ell {
    animation: drInk 0.9s ease 2.2s forwards;
}

/* The two opening lines are a couplet, not a heading over a subtitle, so
   they are set identically and the tilde does the separating. */
.dr-start__lede, .dr-start__body {
    margin: 0;
    font-family: var(--dr-serif);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.62;
    color: var(--dr-ink-soft);
}
/* Its two lines sit tighter than a paragraph would set them. */
.dr-start__body { margin-bottom: 3rem; line-height: 1.45; }
.dr-start__tilde {
    margin: 1.1em 0;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--dr-ink-faint);
}

.dr-goal { border: none; margin: 0; padding: 0; }
.dr-goal__kinds {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 0 1.6rem;
}
.dr-kind {
    padding: 0.4em 1em;
    border: 1px solid var(--dr-rule);
    border-radius: 1px;
    font-size: 0.9rem;
    color: var(--dr-ink-soft);
    transition: color var(--dr-slow), border-color var(--dr-slow);
}
.dr-kind:hover { color: var(--dr-accent); border-color: var(--dr-accent); }
.dr-kind.is-on { color: var(--dr-accent); border-color: var(--dr-accent); }

.dr-goal__amount {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.5rem;
}
.dr-goal__field {
    width: 5rem;
    font-family: var(--dr-serif);
    font-size: 1.15rem;
    text-align: center;
    padding: 0.2em 0.4em;
    background: none;
    border: none;
    border-bottom: 1px solid var(--dr-rule);
    color: var(--dr-ink-c);
    transition: border-color var(--dr-slow);
}
.dr-goal__field:focus { outline: none; border-bottom-color: var(--dr-accent); }
/* The native spinner, gone in both engines. */
.dr-goal__field::-webkit-outer-spin-button,
.dr-goal__field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.dr-goal__field { -moz-appearance: textfield; appearance: textfield; }

/* Its replacement: two marks on the same baseline as the number, drawn faint
   and warming to the accent under the hand. No box, no chrome — they read as
   part of the line rather than as controls sitting on top of it. Kept out of
   the tab order because the field's own arrow keys already do this. */
.dr-step {
    padding: 0 0.15em;
    font-family: var(--dr-serif);
    font-size: 1.15rem;
    line-height: 1;
    color: var(--dr-rule);
    transition: color var(--dr-slow);
    user-select: none;
}
.dr-step:hover { color: var(--dr-accent); }
.dr-goal__amount:hover .dr-step { color: var(--dr-ink-faint); }
.dr-goal__amount:hover .dr-step:hover { color: var(--dr-accent); }
/* Empty in the ordinary case, so it takes no room until it speaks. */
.dr-goal__floor {
    margin: 0.9rem 0 0;
    font-size: 0.95rem;
    color: var(--dr-ink-faint);
    min-height: 1.4em;
    transition: color var(--dr-slow);
}
.dr-goal__floor.is-warning { color: var(--dr-warn); }

/* the one thing to write from, if you want it */
/* Centred with the rest, so the rule sits above it rather than beside it —
   a left bar would be the one thing on the page off the axis. */
.dr-epigraph {
    margin: 2.4rem auto 0;
    padding-top: 1.4rem;
    max-width: 26rem;
    border-top: 1px solid var(--dr-rule-soft);
}
.dr-epigraph[hidden] { display: none; }
.dr-epigraph__text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--dr-ink-c);
}
.dr-epigraph__attr {
    margin: 0.5em 0 0;
    font-size: 0.95rem;
    color: var(--dr-ink-faint);
}

/* Stacked, not paired: Begin is the act, and the mark below it is an aside
   you may or may not reach for. */
.dr-start__acts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    margin-top: 2.6rem;
}
.dr-begin {
    padding: 0.55em 1.6em;
    border: 1px solid var(--dr-accent);
    border-radius: 1px;
    font-size: 1rem;
    color: var(--dr-accent);
    transition: opacity var(--dr-slow);
}
.dr-begin[disabled] { opacity: 0.45; }
/* The mark alone, unruled — its label is in aria-label and the tooltip. */
.dr-quote {
    font-size: 1.05rem;
    line-height: 1;
    padding: 0.35em;
    color: var(--dr-ink-soft);
    transition: color var(--dr-slow);
}
.dr-quote:hover { color: var(--dr-accent); }
.dr-quote[disabled] { opacity: 0.5; }

/* ── during — no chrome at all ──────────────────────────────────────────── */
.dr-session {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 4rem clamp(2rem, 12vw, 12rem) 3rem;
}

/* the edge warms as the grace runs out, then holds while the ink goes */
.dr-edge {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    box-shadow: inset 0 0 0 0 var(--dr-warn);
    opacity: 0;
    transition: opacity 0.5s ease;
}
.dr-session.is-warning .dr-edge {
    opacity: 0.5;
    box-shadow: inset 0 0 7rem -2rem var(--dr-warn);
}

.dr-session__epigraph {
    flex: 0 0 auto;
    max-width: 42rem;
    margin: 0 0 2rem;
    padding-left: 1.1rem;
    border-left: 2px solid var(--dr-rule-soft);
    font-size: 0.94rem;
    font-style: italic;
    color: var(--dr-ink-faint);
}
.dr-session__epigraph[hidden] { display: none; }

/* The writing surface. Its legibility is --dr-ink, set by draft.js on a
   timer; the transition means the value can be re-targeted every tick and
   still read as one continuous fade rather than a staircase. */
.dr-write {
    flex: 1 1 auto;
    width: 100%;
    max-width: 42rem;
    resize: none;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--dr-serif);
    font-size: 1.35rem;
    line-height: 1.75;
    color: var(--dr-ink-c);
    opacity: var(--dr-ink);
    transition: opacity 0.45s linear;
}
.dr-write:focus { outline: none; }
.dr-write::placeholder { color: var(--dr-ink-faint); font-style: italic; }

/* The full width of the room, not the width of the writing column: the count
   and the way out sit in the two bottom corners, the same distance in from
   either edge, with the lit door between them. */
.dr-gauge {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    margin-top: 1.6rem;
}
.dr-abandon { justify-self: end; }
/* Held open whether or not the door is lit, so the count and the way out do
   not shift sideways the moment the goal is reached. */
.dr-finish[hidden] { display: block; visibility: hidden; }
.dr-gauge__count {
    margin: 0;
    font-size: 0.86rem;
    letter-spacing: 0.06em;
    color: var(--dr-ink-faint);
    transition: color var(--dr-slow);
}
.dr-session.is-warning .dr-gauge__count { color: var(--dr-warn); }

/* Shown only once the count is reached. Reaching it does not stop you — the
   sentence you are in the middle of is more important than the number — so
   this is a lit door rather than an ending: it breathes, in the site's own
   slow ring rhythm, and waits for you to be finished. */
.dr-finish {
    padding: 0.3em 1em;
    border: 1px solid var(--dr-accent);
    border-radius: 1px;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--dr-accent);
    animation: drGlow 3.4s ease-in-out infinite;
}
.dr-finish:hover { animation: none; opacity: 1; box-shadow: 0 0 1.4rem -0.4rem var(--dr-accent); }

@keyframes drGlow {
    0%,
    100% { opacity: 0.55; box-shadow: 0 0 0 0 transparent; }
    50%  { opacity: 1;    box-shadow: 0 0 1.6rem -0.5rem var(--dr-accent); }
}

/* deliberately small and plain: the room should not make leaving easy */
.dr-abandon {
    font-size: 0.76rem;
    color: var(--dr-ink-faint);
    opacity: 0.5;
    transition: opacity var(--dr-slow), color var(--dr-slow);
}
.dr-abandon:hover { opacity: 1; color: var(--dr-warn); }
.dr-abandon.is-asking { opacity: 1; color: var(--dr-warn); }

/* ── after ──────────────────────────────────────────────────────────────── */
.dr-done__stats {
    margin: 0 0 2.6rem;
    font-size: 0.95rem;
    color: var(--dr-ink-soft);
}
/* Stacked the way the start screen's are: the act, then the way out. */
.dr-done__acts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}
.dr-take {
    padding: 0.55em 1.6em;
    border: 1px solid var(--dr-accent);
    border-radius: 1px;
    font-size: 1rem;
    color: var(--dr-accent);
    transition: opacity var(--dr-slow);
}
.dr-take[disabled] { opacity: 0.45; }
.dr-take[hidden] { display: none; }
.dr-away {
    font-size: 0.95rem;
    color: var(--dr-ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--dr-rule);
    transition: color var(--dr-slow), border-color var(--dr-slow);
}
.dr-away:hover { color: var(--dr-accent); border-bottom-color: var(--dr-accent); }
.dr-done__note {
    margin: 3rem auto 0;
    padding-top: 1.4rem;
    max-width: 26rem;
    border-top: 1px solid var(--dr-rule-soft);
    font-size: 0.95rem;
    color: var(--dr-ink-faint);
}

/* ── quieter, if asked ──────────────────────────────────────────────────────
   The fade is the room, so it stays. Only its easing goes. */
@media (prefers-reduced-motion: reduce) {
    .dr-write { transition: none; }
    .dr-edge { transition: none; }
    .dr-start, .dr-session, .dr-done, .dr-masthead,
    .dr-goal__amount, .dr-goal__floor, .dr-epigraph { transition: none; }
    /* the finish door still lights, it just stops breathing */
    .dr-finish { animation: none; opacity: 1; }
    /* the line is shown, not performed: all of it, at once, on arrival */
    .dr-quatrain p { animation: none; opacity: 1; }
    .dr-quatrain .dr-quatrain__attr { opacity: 0.62; }
    body.dr-on-start .dr-masthead__ell { animation: none; opacity: 1; }
}