/* THE ROUTINES ROOM — its styles, moved out of app.css by the rebuild (15 Oct). Loaded straight
   after app.css. The Routines and Language tabs (rh-*), the run overlay (run-*) and the step lengths in the routine editor. */
  /* ==========================================================
     ROUTINES, AND THE PHRASE A DAY.
     ==========================================================

     THERE IS NO PROGRESS ANYWHERE IN THIS SECTION and there is no rule here
     that could draw one — no bar, no ring, no meter, no grid of squares, no
     colour that means "good" and none that means anything else. A step is
     ticked or it is not, and a ticked one is faded rather than green: green
     is a mark out of ten with the number left off.

     Nothing is coloured by whether a routine was done. The only thing on the
     page with any emphasis at all is the surface at the top, which says what
     is plausible at this hour — and a routine leaves that surface silently
     when its part of the day has gone. There is no rule for "was due", because
     nothing upstream can express it.

     The language card is the one thing here with size on it, because it is the
     one thing meant to be read aloud. Its four buttons are four identical
     buttons: making Easy green and Again red would be a verdict, and the
     grade is a description of what just happened in his head. */
  .rh-now{ margin-bottom:var(--space-1); }
  .rh-card{ border:1px solid var(--glass-border); border-radius:var(--radius-card); background:var(--glass-bg);
    padding:var(--space-3) var(--space-4); margin-bottom:var(--space-3); }
  /* The now surface gets a slightly brighter edge and nothing else. It is
     "this is plausible at this hour", not "this is outstanding". */
  .rh-card.is-now{ border-color:var(--glass-border-hi); }
  .rh-card.is-parked{ opacity:.6; }
  /* Quietly stopped gets a faint warm edge — a nudge, not a bill, the exact
     restraint the goals screen's "quiet" colouring already settled on. */
  .rh-card.is-stopped{ border-color:var(--amber, #C08A2E); }
  .rh-card-head{ display:flex; align-items:flex-start; gap:var(--space-3); }
  .rh-title{ font-size:var(--type-lead); font-weight:650; color:var(--text); display:block; }
  .rh-meta{ font-size:var(--type-body); color:var(--text-dim); display:block; margin-top:var(--space-hair); }
  .rh-note{ font-size:var(--type-body); color:var(--text-dim); display:block; margin-top:var(--space-1); }

  /* THE HONEST LINE. A count out of a count, never a percentage — see
     honestyWords() in _rhythm.js. */
  .rh-honesty{ font-size:var(--type-body); color:var(--text-dim); margin-top:var(--space-2); }
  .rh-honesty.is-stopped{ color:var(--amber, #C08A2E); font-weight:600; }
  .rh-weak{ font-size:var(--type-body); color:var(--text-faint); margin-top:var(--space-2); }
  .rh-weak b{ color:var(--text-dim); font-weight:600; }

  .rh-stopped-list{ margin-bottom:var(--space-4); }
  .rh-stopped-row{ display:flex; align-items:baseline; gap:var(--space-3); padding:var(--space-2) 0;
    border-bottom:1px solid var(--glass-border); flex-wrap:wrap; }
  .rh-stopped-row:last-child{ border-bottom:none; }
  .rh-stopped-title{ font-weight:650; color:var(--text); font-size:var(--type-body); }
  .rh-stopped-why{ font-size:var(--type-body); color:var(--text-dim); flex:1; min-width:120px; }
  .rh-stopped-row .btn{ font-size:var(--type-body); padding:var(--space-1) var(--space-3); }

  .rh-tick{ flex:none; width:26px; height:26px; border-radius:var(--radius-control); cursor:pointer;
    border:1px solid var(--glass-border-hi); display:flex; align-items:center;
    justify-content:center; font-size:var(--type-lead); color:var(--text); user-select:none; }
  .rh-tick:hover{ border-color:var(--text-dim); }
  .rh-tick-all{ margin-top:1px; }

  .rh-steps{ margin-top:var(--space-3); }
  .rh-step{ display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-2) 0;
    border-bottom:1px solid var(--glass-border); }
  .rh-step:last-child{ border-bottom:none; }
  .rh-step .rh-tick{ width:22px; height:22px; border-radius:var(--radius-control); font-size:var(--type-body); }
  .rh-step-main{ flex:1; min-width:0; }
  .rh-step-title{ font-size:var(--type-body); color:var(--text); display:block; }
  .rh-step-note{ font-size:var(--type-body); color:var(--text-dim); display:block; }
  /* Done is faded, not green. A colour that means "good" is a mark, and the
     step underneath it that has no colour then means the other thing. */
  .rh-step.is-done .rh-step-title{ color:var(--text-faint); text-decoration:line-through; }
  .rh-optional{ flex:none; font-size:var(--type-label); color:var(--text-faint); }

  .rh-acts{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3); }
  .rh-acts .btn{ font-size:var(--type-body); padding:var(--space-1) var(--space-3); }
  .rh-steps-box{ min-height:120px; }

  .rh-log-row{ display:flex; gap:var(--space-3); align-items:baseline; padding:var(--space-2) 0;
    border-bottom:1px solid var(--glass-border); }
  .rh-log-day{ font-size:var(--type-body); color:var(--text); min-width:120px; }
  .rh-log-at{ font-size:var(--type-body); color:var(--text-dim); }
  .rh-log-note{ font-size:var(--type-body); color:var(--text-faint); flex:1; min-width:0; }

  /* THE PHRASE. Large, because it is meant to be said out loud, and because a
     phrasebook you squint at is a phrasebook you close. */
  .rh-phrase{ border:1px solid var(--glass-border); border-radius:var(--radius-card); background:var(--glass-bg);
    padding:var(--space-5) var(--space-6); margin-bottom:var(--space-4); }
  .rh-phrase-front{ font-size:var(--type-title); font-weight:600; color:var(--text); line-height:1.35; }
  /* The line that says why THIS phrase, today. It is the only thing here no
     other language app can do, so it sits directly under the front of the card
     rather than in a corner. */
  .rh-phrase-why{ font-size:var(--type-body); color:var(--text-dim); margin-top:var(--space-2); }
  .rh-phrase-back{ font-size:var(--type-page); font-weight:600; color:var(--text); margin-top:var(--space-4); line-height:1.3; }
  .rh-phrase-say{ font-size:var(--type-lead); color:var(--text-dim); margin-top:var(--space-2); letter-spacing:.02em; }
  .rh-phrase-lit{ font-size:var(--type-body); color:var(--text-faint); margin-top:var(--space-2); line-height:1.5; }
  .rh-phrase-acts{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-4); }
  /* FOUR IDENTICAL BUTTONS. Again is not red and Easy is not green: the grade
     describes what just happened in his head, and colouring it would make one
     of the four an answer he is supposed to give. */
  .rh-grades{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-5); }
  .rh-grades .btn{ flex:1; min-width:80px; justify-content:center; font-size:var(--type-body); padding:var(--space-2) var(--space-3); }

  /* NOT A BADGE, and never coloured. A queue that grew while he was busy is a
     queue; a red number in a corner is an accusation. */
  .rh-queue{ font-size:var(--type-body); color:var(--text-dim); display:flex; gap:var(--space-3);
    align-items:center; flex-wrap:wrap; margin-bottom:var(--space-4); }
  .rh-queue .btn{ font-size:var(--type-body); padding:var(--space-1) var(--space-3); }

  .rh-noticed{ border:1px solid var(--glass-border); border-radius:var(--radius-card); padding:var(--space-2) var(--space-3); }
  .rh-noticed-row{ font-size:var(--type-body); color:var(--text-dim); padding:var(--space-1) 0; }
  .rh-suggest{ border:1px solid var(--glass-border-hi); border-radius:var(--radius-card); background:var(--glass-bg);
    padding:var(--space-4) var(--space-4); margin-bottom:var(--space-4); font-size:var(--type-body); color:var(--text-dim); line-height:1.55; }
  .rh-suggest b{ font-size:var(--type-lead); color:var(--text); display:block; margin-bottom:var(--space-2); }
  .rh-langs{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-4); }
  /* The sentence the server wrote about its own limits, kept small and kept
     word for word. It is not a disclaimer in fine print — it is the reason
     anything else on this tab can be believed. */
  .rh-honest{ font-size:var(--type-body); color:var(--text-faint); line-height:1.6;
    border-top:1px solid var(--glass-border); padding-top:var(--space-3); margin-top:var(--space-5); }

  /* THE PAGE WHEN THERE IS NOTHING ON IT, AND THE PAGE WHEN EVERYTHING IS SET
     DOWN. 8 October. Both were a sentence in a box with nothing to press, which
     is what "lots of blank space" measured as: 92px of content on a 1000px
     window. The starters are plain cards in the same .tile-grid every other
     card page uses, so they take that ladder's width and are not a new layout. */
  .rh-empty-lead{ font-size:var(--type-body); color:var(--text-dim); line-height:1.6; max-width:74ch;
    margin:0 0 var(--space-2); }
  .rh-empty-fine{ font-size:var(--type-body); color:var(--text-faint); line-height:1.6; max-width:74ch;
    margin:var(--space-3) 0 0; }
  .rh-starter{ border:1px solid var(--glass-border); border-radius:var(--radius-card); background:var(--glass-bg);
    padding:var(--space-3) var(--space-4); }
  .rh-starter-steps{ margin:var(--space-2) 0 0; padding-left:var(--space-5); font-size:var(--type-body);
    color:var(--text-dim); line-height:1.6; }
  .rh-idle{ font-size:var(--type-body); color:var(--text-dim); line-height:1.6; max-width:74ch;
    margin:0 0 var(--space-4); }
  .rh-idle-link{ background:none; border:0; padding:0; font:inherit; color:var(--text); cursor:pointer;
    text-decoration:underline; text-underline-offset:2px; }

  /* ---- Routines: The Run ------------------------------------------------ */
  /* Full screen, nothing else on it. display:none when shut, so a check that
     asks whether it is on screen must use getClientRects().length — which is
     what it does, because getComputedStyle().display lies about a child of a
     hidden parent. */
  .run-back{ display:none; position:fixed; inset:0; z-index:9000;
    background:var(--bg-base, #050710); }
  .run-back.open{ display:flex; align-items:center; justify-content:center; }
  .run-sheet{ width:100%; max-width:620px; padding:var(--space-6) var(--space-5);
    text-align:center; }
  /* TOP LEFT, not top right — the right-hand corner of this window already
     has the mark in it, and Stop was sitting on top of it. */
  .run-x{ position:fixed; top:14px; left:16px; z-index:9001; }
  .run-back.is-end .run-x{ display:none; }

  .run-pre h3{ font-size:26px; font-weight:600; margin:0 0 var(--space-2); }
  .run-line{ color:var(--text-dim); font-size:16px; margin:0 0 var(--space-2); }
  .run-untimed{ color:var(--text-faint); font-size:var(--type-label); font-style:italic; }
  .run-warn{ display:inline-block; margin:var(--space-3) 0 var(--space-5);
    padding:var(--space-3) var(--space-4); border-radius:var(--radius-control);
    border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background:color-mix(in srgb, var(--accent) 10%, transparent);
    color:var(--text); font-size:16px; text-align:left; line-height:1.4; }
  .run-btns{ display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap; }
  .run-pre-steps{ margin-top:var(--space-5); text-align:left; display:inline-block; }
  .run-pre-steps div{ display:flex; gap:var(--space-2); color:var(--text-faint);
    font-size:var(--type-label); padding:2px 0; }
  .run-pre-steps div.is-opt{ opacity:.55; }
  .run-mn{ font-family:'IBM Plex Mono', ui-monospace, monospace; width:46px; flex:none;
    text-align:right; font-variant-numeric:tabular-nums; }
  .run-fine{ font-size:var(--type-label); color:var(--text-faint); font-style:italic;
    margin:var(--space-4) 0 0; }

  .run-ring{ width:200px; height:200px; margin:0 auto var(--space-5); position:relative; }
  @media (max-width:560px){ .run-ring{ width:164px; height:164px; } }
  .run-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
  .run-ring-bg{ fill:none; stroke:color-mix(in srgb, var(--text) 8%, transparent); stroke-width:6; }
  .run-ring-fg{ fill:none; stroke:var(--accent); stroke-width:6; stroke-linecap:round;
    transition:stroke-dashoffset .95s linear, stroke .3s; }
  .run-ring.is-over .run-ring-fg{ stroke:var(--pink); }
  .run-clock{ position:absolute; inset:0; display:grid; place-items:center;
    font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:34px; font-weight:500;
    font-variant-numeric:tabular-nums; }
  .run-ring.is-over + .run-step,
  .run-ring.is-over .run-clock{ color:var(--pink-2); }

  .run-step{ font-size:34px; font-weight:600; line-height:1.15; margin:0 0 var(--space-2); }
  @media (max-width:560px){ .run-step{ font-size:26px; } }
  .run-note{ color:var(--text-dim); font-size:16px; margin:0 0 var(--space-5); }
  .run-next{ font-size:var(--type-label); color:var(--text-faint); letter-spacing:.04em;
    margin:0 0 var(--space-5); }
  .run-next b{ color:var(--text-dim); font-weight:600; }
  .run-ctl{ display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap; }
  .run-pips{ display:flex; gap:5px; justify-content:center; margin-top:var(--space-5); }
  .run-pips i{ width:24px; height:3px; border-radius:2px;
    background:color-mix(in srgb, var(--text) 14%, transparent); }
  .run-pips i.done{ background:color-mix(in srgb, var(--green) 62%, transparent); }
  .run-pips i.over{ background:color-mix(in srgb, var(--pink) 62%, transparent); }
  .run-pips i.skip{ background:color-mix(in srgb, var(--text) 30%, transparent); }
  .run-pips i.now{ background:var(--accent); }

  .run-end h3{ font-size:26px; font-weight:600; margin:0 0 var(--space-1); }
  .run-big{ font-size:44px; margin:0 0 var(--space-4);
    font-variant-numeric:tabular-nums; }
  .run-weak{ text-align:left; padding:var(--space-4); border-radius:var(--radius-control);
    border:1px solid var(--glass-border); border-left:3px solid var(--brass);
    background:color-mix(in srgb, var(--brass) 7%, transparent); margin-bottom:var(--space-4); }
  .run-weak p{ margin:0 0 var(--space-3); }

  /* ---- the step lengths, in the routine editor -------------------------- */
  .rh-lens-row{ display:flex; align-items:center; gap:var(--space-3);
    padding:var(--space-2) 0; border-bottom:1px solid var(--glass-border); }
  .rh-lens-row:last-child{ border-bottom:0; }
  .rh-lens-t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rh-lens-n{ width:76px; flex:none; font-family:inherit; font-size:var(--type-body, 13px);
    color:var(--text); background:var(--wash-soft); border:1px solid var(--glass-border);
    border-radius:var(--radius-control); padding:var(--space-2); }
  .rh-lens-o{ flex:none; font-size:var(--type-label); color:var(--text-faint);
    display:flex; align-items:center; gap:6px; cursor:pointer; }
  .rh-lens-none{ font-size:var(--type-label); color:var(--text-faint); font-style:italic;
    margin:var(--space-2) 0 0; }

  @media (prefers-reduced-motion:reduce){
    .run-ring-fg{ transition:none; }
  }


/* The bottom margin a routine card carried WAS the spacing of a stack. The gutter belongs to the grid
   now (see .tile-grid in app.css), and keeping both would put a blank row under the last card. */
.tile-grid > .rh-card{ margin-bottom:0; }