/* Everything that used to sit in pomodoro.html's <style> block.
 *
 * Extracted because the page crossed the 60KB budget in tests/page-weight:
 * 62,628 bytes with the CSS inline, 47,361 without it. Same reasoning and
 * same shape as assets/css/language-page.css.
 *
 * Loaded AFTER assets/css/site.css so a page rule of equal specificity still
 * beats the shared foundation.
 */

    :root { --amber-1:#f8d9ae; --amber-2:#f2a355; --amber-3:#b8460f; --blue-1:#dde4ee; --blue-2:#6b83a8; --blue-3:#1b2a4e; }
    body { font-size:var(--fs-body); line-height:var(--leading-body); }
    .wrap { max-width: 640px; margin: 0 auto; padding: 0 2rem 4rem; }


    header { padding:3rem 0 2rem; opacity:0; animation:rise .8s ease forwards .1s; text-align:center; }
    h1 { font-size:clamp(1.75rem,4.6vw,2.6rem); font-weight:400; line-height:1.1; }
    h1 em { font-style:italic; color:var(--accent); }
    .intro { margin-top:1rem; color:var(--muted); font-size: var(--fs-base); max-width:440px; margin-left:auto; margin-right:auto; }

    /* ── HOURGLASS ── */
    .glass-section { padding:2.6rem 0 1rem; display:flex; flex-direction:column; align-items:center; opacity:0; animation:rise .9s ease forwards .25s; }

    /* Base size at --glass-scale:1. The scale itself is set from JS and tracks
       the focus length, so --glass-h sets the whole range rather than one
       size: at the default 25 minutes the scale is ~0.905, which puts the
       stage at 124 x 362.

       Only the height is a free number. Width is derived, because
       preserveAspectRatio defaults to "meet" and a stage that disagrees with
       the viewBox letterboxes the drawing inside it -- silently, visible only
       as the glass drifting away from the timer beneath it. Two independent
       px values were how that stayed possible; now there is one, and the
       ratio is spelled once.

       0.34 is the viewBox: 170 wide over 500 tall, exactly. Change the
       viewBox and this has to change with it. tests/hourglass.test.js checks
       the two still agree.

       The glass is ~15% bigger than it was, and none of that came from
       scaling anything up: the old stage was 160 x 395 for a 230 x 568
       viewBox, and 24 units of that box at each end were empty margin held
       open for the frame's caps. Removing the frame let the box crop in, and
       the same stage now spends its pixels on glass. */
    .glass-stage {
      --glass-scale: 1;
      --glass-h: 400px;
      width: calc(var(--glass-h) * var(--glass-scale) * 0.34);
      height: calc(var(--glass-h) * var(--glass-scale));
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 800px;
      transition: width .5s ease, height .5s ease;
    }
    .glass-rotor {
      width: 100%;
      height: 100%;
      transition: transform 1.1s cubic-bezier(.65,0,.35,1);
      transform-style: preserve-3d;
    }
    .glass-rotor.flipped { transform: rotate(180deg); }
    #hourglass-svg { width: 100%; height: 100%; display:block; filter: drop-shadow(0 10px 18px rgba(26,24,20,0.14)); }

    .sand-rect { transition: none; }
    .grain { animation: fall 0.5s linear infinite; animation-play-state: paused; }
    #hourglass-svg.flowing .grain { animation-play-state: running; }

    /* Two keyframes for one motion, because the rotor is what flips, not the
       sand. A grain translating +Y inside a container rotated 180deg travels
       UP the screen -- so through every break the sand used to fall out of
       the bottom bulb and rise into the top one. `fallUp` is the same motion
       mirrored in local coordinates, which comes out downward on screen.
       Keyframes cannot be partially overridden, so it is spelled out twice. */
    .glass-rotor.flipped .grain { animation-name: fallUp; }
    /* Fading in over the first 18% as well as out hides the pop-in at the
       neck; the grains used to appear at full opacity from nothing. */
    @keyframes fall {
      from { transform: translateY(0);     opacity: 0; }
      18%  { opacity: 1; }
      to   { transform: translateY(22px);  opacity: 0; }
    }
    @keyframes fallUp {
      from { transform: translateY(0);     opacity: 0; }
      18%  { opacity: 1; }
      to   { transform: translateY(-22px); opacity: 0; }
    }

    .time-display {
      margin-top: 1.2rem;
      font-family: var(--font-mono);
      font-size: var(--fs-3xl);
      font-weight: 400;
      letter-spacing: .04em;
      color: var(--ink);
      font-variant-numeric: tabular-nums; line-height:1.7; }
    .mode-label {
      margin-top: .4rem;
      font-family: var(--font-ui);
      font-size: var(--fs-2xs);
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--accent);
      transition: color .3s;
    }
    .mode-label.is-break { color: var(--blue-3); }

    .dots { display:flex; gap:.5rem; margin-top:1.2rem; }
    .dot { width:7px; height:7px; border-radius:50%; border:1px solid var(--line-strong); transition: background .3s, border-color .3s; }
    .dot.filled { background: var(--accent); border-color: var(--accent); }

    /* ── TODAY FOCUS / WEEK FOCUS / OTHER TASKS ── */
    .focus-block {
      max-width:560px; margin:0 auto .6rem; padding:.55rem 1rem;
      border:1px solid var(--line); border-radius:12px;
      /* the page background itself is warm and fairly light, so a card in
         the same tone would vanish -- a translucent white lift is enough to
         read as a distinct panel without introducing a new hard-coded hue */
      background: rgba(255,255,255,.55);
      box-shadow: 0 1px 1px rgba(26,24,20,.06), 0 10px 22px -16px rgba(26,24,20,.28);
    }
    /* label and its textarea share one line as long as there's room; the
       textarea has no fixed height of its own; JS sets it to the content's
       own scrollHeight on every keystroke, so it grows downward with what's
       typed instead of scrolling inside a fixed box */
    .focus-row {
      display:flex; align-items:baseline; flex-wrap:wrap; gap:.3rem .7rem;
      text-align:left;
    }
    .focus-label {
      font-family: var(--font-ui); font-size: var(--fs-3xs); letter-spacing:.08em;
      text-transform:uppercase; color:var(--muted); white-space:nowrap; flex-shrink:0;
    }
    .focus-date { color:var(--accent); }
    .focus-input {
      flex:1 1 220px; min-width:180px; border:none; background:transparent;
      resize:none; overflow:hidden; outline:none;
      font-family: var(--font-serif); font-size: var(--fs-sm); color:var(--ink);
      line-height:1.3; padding:0; margin:0;
    }
    .focus-input::placeholder { color:var(--muted); font-style:italic; }

    @media (max-width:480px) {
      /* not enough width for label + input side by side -- stack them */
      .focus-row { flex-direction:column; align-items:stretch; }
      .focus-input { flex-basis:auto; }
    }

    .daily-summary { margin-top:1.8rem; text-align:center; max-width:320px; }
    .daily-reset {
      margin-top:.5rem; font-family: var(--font-ui); font-size: var(--fs-4xs); letter-spacing:.08em;
      text-transform:uppercase; color:var(--muted); background:none; border:none; cursor:pointer;
      text-decoration:underline; text-underline-offset:2px; padding:0; transition:color .2s;
    }
    .daily-reset:hover { color:var(--accent); }
    .daily-hourglasses { display:flex; flex-wrap:wrap; justify-content:center; gap:.25rem .3rem; margin-bottom:.55rem; }
    .daily-hourglasses span { font-size: var(--fs-sm); line-height:1; opacity:.9; }
    .daily-text {
      font-family: var(--font-ui); font-size: var(--fs-4xs); letter-spacing:.08em; text-transform:uppercase;
      color:var(--muted);
    }

    /* ── CONTROLS ── */
    .controls { display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem; margin-top:1.8rem; }
    .btn {
      font-family: var(--font-ui); font-size: var(--fs-2xs); letter-spacing:.12em; text-transform:uppercase;
      padding:.75rem 1.6rem; border-radius:999px; cursor:pointer; border:1px solid var(--line);
      background:transparent; color:var(--ink); transition: all .2s;
    }
    .btn:hover { border-color:var(--accent); color:var(--accent); }
    .btn.primary { background:var(--accent); border-color:var(--accent); color:#fdf9f2; }
    .btn.primary:hover { background:#6f1e1e; border-color:#6f1e1e; color:#fdf9f2; }
    .btn:active { transform: translateY(1px); }

    .btn-chevron { display:inline-block; font-size: var(--fs-2xs); margin-left:.3rem; transition:transform .25s; }
    #paletteToggle.open .btn-chevron { transform:rotate(90deg); }

    .palette-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
    .palette-swatch {
      display:flex; flex-direction:column; align-items:center; gap:.5rem;
      padding:.7rem .6rem; border-radius:10px; cursor:pointer; border:1px solid var(--line);
      background:transparent; transition:all .2s;
    }
    .palette-swatch:hover { border-color:var(--accent); }
    .swatch-dots { display:flex; gap:.35rem; }
    .swatch-dot { width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
    .swatch-label {
      font-family: var(--font-ui); font-size: var(--fs-4xs); letter-spacing:.03em;
      text-transform:uppercase; color:var(--muted); text-align:center; line-height:1.3;
    }
    .palette-swatch:hover .swatch-label { color:var(--accent); }

    .palette-shuffle {
      display:block; margin:1rem auto 0; font-family: var(--font-ui); font-size: var(--fs-4xs);
      letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:none; border:none;
      cursor:pointer; text-decoration:underline; text-underline-offset:2px; transition:color .2s;
    }
    .palette-shuffle:hover { color:var(--accent); }

    @media (max-width:480px) {
      .palette-grid { grid-template-columns:1fr; }
    }

    .ambience-toggle {
      margin-top:1.5rem; display:inline-flex; align-items:center; gap:.55rem;
      cursor:pointer; user-select:none; font-family: var(--font-ui); font-size: var(--fs-3xs);
      letter-spacing:.12em; text-transform:uppercase; color:var(--muted); transition:color .2s;
      background:none; border:none; padding:0;
    }
    .ambience-toggle-wrap { display:flex; justify-content:center; }
    .ambience-toggle:hover, .ambience-toggle.open { color:var(--accent); }
    .ambience-chevron { font-size: var(--fs-2xs); transition:transform .25s; display:inline-block; }
    .ambience-toggle.open .ambience-chevron { transform:rotate(90deg); }

    .ambience-panel {
      max-width:400px; margin:0 auto; overflow:hidden;
      max-height:0; opacity:0; transition:max-height .4s ease, opacity .3s ease, margin-top .4s ease;
    }
    /* Generous cap: the panel is overflow:hidden, and the credit line below the
       chips is a licence requirement, so it must never be the thing that gets
       clipped. Wraps to more lines on a narrow screen, hence the media query. */
    .ambience-panel.open { max-height:400px; opacity:1; margin-top:1.1rem; }

    .ambience-credit {
      font-family: var(--font-ui); font-size: var(--fs-4xs); line-height:1.7;
      color:var(--muted); letter-spacing:.04em; margin-top:.9rem; text-align:center;
    }
    .ambience-credit a { color:var(--muted); }
    .ambience-credit a:hover { color:var(--accent); }

    .ambience-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
    .ambience-chip {
      font-family: var(--font-ui); font-size: var(--fs-3xs); letter-spacing:.05em; text-transform:uppercase;
      padding:.7rem .8rem; border-radius:999px; cursor:pointer; border:1px solid var(--line);
      background:transparent; color:var(--ink); transition:all .2s; display:inline-flex; align-items:center;
      justify-content:center; gap:.5rem;
    }
    .ambience-chip:hover { border-color:var(--accent); color:var(--accent); }
    .ambience-chip.playing { background:var(--accent); border-color:var(--accent); color:#fdf9f2; }
    .chip-icon { font-size: var(--fs-sm); }
    .ambience-chip.playing .chip-icon { animation:chipPulse 1.7s ease-in-out infinite; }
    @keyframes chipPulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }

    @media (max-width:480px) {
      .ambience-grid { grid-template-columns:1fr; }
      /* one chip per row instead of two, plus a credit line that wraps further */
      .ambience-panel.open { max-height:560px; }
    }

    /* ── POST-IT ── */
    .postit-wrap { display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem; margin-top:2.4rem; }
    .postit {
      position:relative;
      width:216px;
      padding:1.6rem 1.15rem 1.5rem;
      /* A gradient rather than one flat #e5d6a3. Paper is never one value:
         it catches light at the top-left and deepens towards the corner it
         curls away at, and that alone is most of the difference between
         "yellow rectangle" and "note". */
      background: linear-gradient(158deg, #f4e9c4 0%, #eaddac 48%, #e2d4a2 100%);
      /* Only the bottom-right corner is rounded, which is the corner the
         ::after curl shades. Sticky notes lift there because that is the
         free corner -- the top edge is held down by the tape. */
      border-radius: 1px 1px 14px 1px;
      box-shadow:
        0 1px 1px rgba(26,24,20,.10),
        0 10px 20px -8px rgba(26,24,20,.30),
        inset 0 1px 0 rgba(255,255,255,.55);
      transform: rotate(-2.5deg);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .postit:hover { transform: rotate(-1.2deg) translateY(-2px); }
    /* Straightens and lifts when you actually go to write on it. */
    .postit:focus-within {
      transform: rotate(0deg) translateY(-3px);
      box-shadow:
        0 1px 1px rgba(26,24,20,.10),
        0 16px 28px -10px rgba(26,24,20,.34),
        inset 0 1px 0 rgba(255,255,255,.55);
    }
    /* Tape. The clip-path is the whole point: a plain rectangle reads as a
       strip of plastic, while notching both ends reads as tape torn off a
       roll. Top and bottom edges stay straight -- those are the cut edges. */
    .postit::before {
      content:'';
      position:absolute; top:-13px; left:50%;
      transform:translateX(-50%) rotate(-2deg);
      width:78px; height:26px;
      background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.36));
      box-shadow: 0 1px 4px rgba(26,24,20,.16);
      clip-path: polygon(
        9% 0%, 91% 0%,
        100% 14%, 91% 30%, 100% 48%, 91% 66%, 100% 84%, 91% 100%,
        9% 100%,
        0% 84%, 9% 66%, 0% 48%, 9% 30%, 0% 14%
      );
    }
    /* The curl: a soft wedge of shade in the rounded corner. Cheaper and
       steadier than rotating a second element behind the note. */
    .postit::after {
      content:'';
      position:absolute; right:0; bottom:0;
      width:26px; height:24px;
      background: linear-gradient(135deg,
        rgba(90,78,44,.16) 0%, rgba(90,78,44,.06) 46%, transparent 62%);
      border-bottom-right-radius: 14px;
      pointer-events:none;
    }
    .postit textarea {
      width:100%; border:none; background-color:transparent; resize:none;
      font-family: var(--font-serif); font-size: var(--fs-md); line-height:1.7;
      color:#4a4026; outline:none;
      /* 5 lines x 1.7em. In em, not px, because the root scale is fluid: 150px
         was 4.45 line boxes at an 18px root and 5.01 at 16px, so the note
         showed a line of writing sliced through the middle at most window
         widths. Anything here must stay an exact multiple of line-height. */
      height: 8.5em;
      /* The ruling belongs here, not on .postit. On the note, `1.7em`
         resolved against the body font-size while the writing is set at
         --fs-md, so the rules and the lines of text ran at different
         intervals and drifted apart down the note. On the textarea both
         resolve against the same font-size, so 1.7em IS one line box.
         The -1px offset drops each rule to sit just under its baseline, and
         `local` makes the ruling scroll with the text instead of staying
         pinned while the writing slides over it. */
      background-image: linear-gradient(rgba(74,64,38,.15) 1px, transparent 1px);
      background-size: 100% 1.7em;
      background-position: 0 calc(1.7em - 1px);
      background-attachment: local;
    }
    /* 4.8:1 on the darkest corner of the note, so it stays legible while
       still reading as a prompt rather than as writing. */
    .postit textarea::placeholder { color:#625839; font-style:italic; }

    /* A little variety once there's more than one note on the desk, instead
       of every card lying at the same angle. Selector is on the tag, so the
       count only ever includes sibling .postit divs -- .postit-add is a
       <button>, a different type, and doesn't shift the pattern. */
    .postit:nth-of-type(3n+2) { transform: rotate(1.8deg); }
    .postit:nth-of-type(3n+3) { transform: rotate(-.8deg); }
    .postit:nth-of-type(3n+2):hover { transform: rotate(.8deg) translateY(-2px); }
    .postit:nth-of-type(3n+3):hover { transform: rotate(-1.8deg) translateY(-2px); }

    /* Small round "remove" button, tucked over the note's top-right corner.
       Hidden until the note is touched, so a desk of notes doesn't read as
       cluttered with controls at a glance. */
    .postit-delete {
      position:absolute; top:-9px; right:-9px; width:22px; height:22px;
      border-radius:50%; border:1px solid var(--line); background:var(--bg);
      color:var(--muted); font-family: var(--font-ui); font-size:14px; line-height:1;
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      opacity:0; transition:opacity .2s, color .2s, border-color .2s;
    }
    .postit:hover .postit-delete, .postit:focus-within .postit-delete { opacity:1; }
    .postit-delete:hover { color:var(--accent); border-color:var(--accent); }

    /* Sits in the flow next to the notes -- a plain dashed placeholder the
       same rough footprint as a note, rather than a button off to the side,
       so "add another" reads as part of the same desk of paper. */
    .postit-add {
      width:216px; height:196px;
      border:2px dashed var(--line); border-radius:8px; background:transparent;
      color:var(--muted); font-family: var(--font-serif); font-size:2rem;
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      transition: border-color .2s, color .2s, transform .2s;
    }
    .postit-add:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

    /* ── SETTINGS ── */
    .settings { margin-top:2.6rem; border-top:1px solid var(--line); opacity:0; animation:rise .9s ease forwards .4s; }
    .settings-trigger {
      display:flex; align-items:center; justify-content:space-between;
      padding:1.1rem 0; cursor:pointer; list-style:none; user-select:none;
      font-family: var(--font-ui); font-size: var(--fs-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
    }
    .settings-trigger::-webkit-details-marker { display:none; }
    .settings-chevron { color:var(--muted); transition:transform .25s; }
    details[open] .settings-chevron { transform:rotate(90deg); }

    .settings-body { padding:.3rem 0 2rem; display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 1.6rem; }
    .field { display:flex; flex-direction:column; gap:.5rem; }
    .field label { font-family: var(--font-ui); font-size: var(--fs-3xs); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
    .field input {
      font-family: var(--font-mono); font-size: var(--fs-base); color:var(--ink);
      background:transparent; border:1px solid var(--line); border-radius:2px;
      padding:.55rem .7rem; width:100%; transition:border-color .2s;
    }
    .field input:focus { outline:none; border-color:var(--accent); }
    .settings-note { grid-column:1 / -1; font-size: var(--fs-xs); color:var(--muted); font-style:italic; }

    footer { padding:3rem 0 1rem; }
    footer p { font-family: var(--font-ui); font-size: var(--fs-3xs); letter-spacing:.1em; color:var(--muted); }


    @media (max-width:600px) {
      .wrap { padding:0 1.2rem 3rem; }
      header { padding:2rem 0 1.5rem; }
      .time-display { font-size: var(--fs-xl); }
      /* One number. Width follows it through the ratio set above, so the
         phone size cannot drift out of step with the viewBox on its own. */
      .glass-stage { --glass-h: 325px; }
      .settings-body { grid-template-columns:1fr; }
    }