/*  V950 FOUND FOUR FIELDS THAT MAKE AN iPHONE ZOOM, and the way it found
    them is the point: V919's ratchet ("no stylesheet sets a field below 16px
    without going through --fld-fs") only ever walked static/css/. To-Do's
    fields were 12.5px, 14px and 15px -- under the 16px iOS needs -- and they
    were invisible to the guard because they lived inside a TEMPLATE. Moving
    them into a stylesheet is what exposed them. They go through the switch
    now: the laptop keeps the dense size, a touch screen gets 16px, and
    tapping a To-Do field stops zooming the page.

/*  THE TO-DO STYLESHEET --- moved out of templates/todo.html at V950.

    HIS INSTRUCTION, 04-Oct, and he asked for it as a separate release:
    *"after arabic release: do this as separate release"* -- quoting back the
    reason it was not folded into V945.

    WHY IT MOVED, in the order the costs actually bite.

    1  IT WAS RE-SENT ON EVERY SINGLE PAGE LOAD. Inline CSS is not cached, not
       minified and not gzipped. 772 lines travelled with the HTML every time
       anybody opened To-Do, on a phone, on mobile data, in Kathmandu. A
       stylesheet is fetched once, and since V834 it is minified and served
       gzipped besides.

    2  THE TEMPLATE WAS 1,274 LINES AGAINST ITS OWN 1,000-LINE CEILING, and the
       CSS was 772 of them. The ceiling broke at V933 and nobody saw it for
       fifteen releases, because V933 was a single-tool release run on the
       tiered selection and the suite holding that ceiling was not in the
       selection. V945 found it, recorded it, and deliberately did NOT fix it
       inside an Event Expenses release.

    3  NOTHING HERE WAS EVER TEMPLATED. Not one Jinja tag in 772 lines -- which
       is what made the move safe, and is also what made keeping them inline
       pointless.

    THE ORDER IS UNCHANGED, which is the only thing that could have broken the
    page: the <link> sits exactly where the <style> block sat, in the same head
    block, so every cascade and every specificity tie resolves the way it did
    before. Verified by measuring 28 computed properties on 80 elements at
    390px and 1280px, before and after, and requiring them identical.

    Kids Zone (static/css/kids.css) already worked this way and says the same
    thing in its own header. */

/* V578 (CR-14): --tg is used as TEXT (.tk-rem-when, .tk-chip.due) and as a FILL
   under a hard-coded #211903 ink (.tk-save, a ticked .tk-cbtn). The light value was
   #9a7300, the old house accent, which measured 4.01:1 under that ink -- and the ink
   is the problem, not the gold: a near-black belongs on the BRIGHT gold, white on
   the dark one. So the fill's ink is a token now, per theme, and the light gold is
   the darkest its own hue allows (4.63:1 on --btn, 5.49:1 under white). */
/* V721: the notch inset is paid ONCE, by the .tbar toolbar (its default notch=True),
   which is the first child of this wrapper. This wrapper must NOT also add it or a
   notched iPhone gets ~47px of empty space above the header (fine on Android,
   inset=0). Flat 10px top here; the toolbar clears the status bar / Dynamic Island. */
.tk-wrap{max-width:760px;margin:0 auto;padding:10px 14px 60px;color:var(--text);--tg:#eabd23;--tg-ink:#211903;
  --tg-wash:rgba(234,189,35,.13);--tg-edge:rgba(234,189,35,.55);}
/* V987: #80660c -> #7c6209. The wash is a 20% gold, so the ink's real ground is
   the WASH over whatever the theme's panel is -- and parchment's panel is warm
   ivory rather than near-white, which took the pair to 4.37 against a 4.5 floor.
   One step darker is 4.63 there and 4.90 on the light theme, where it was 4.63.
   Measured, not nudged: the wash is why a value chosen against white was never
   the value this label actually sits on. */
html:not([data-dark]) .tk-wrap{--tg:#7c6209;--tg-ink:#ffffff;
  --tg-wash:rgba(234,189,35,.20);--tg-edge:rgba(176,133,12,.62);}
.tk-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.tk-top a.back{color:var(--accent);text-decoration:none;font-size:13px;font-weight:600;background:var(--btn);border:1px solid var(--line2);border-radius:8px;padding:6px 12px;}
.tk-title{font-size:19px;font-weight:800;}

/* ---------- V530: the quick box ----------------------------------------
   ONE always-present line. It is not a shortcut to the editor sitting beside
   the editor -- it IS the editor's title field, before the rest has appeared. */
.tk-quick{display:flex;gap:8px;align-items:center;margin-bottom:14px;}
.tk-quick input{flex:1;background:var(--btn);border:1px solid var(--line2);border-radius:10px;padding:11px 13px;color:var(--text);font-size:var(--fld-fs,15px);font-family:inherit;}
.tk-quick input:focus{outline:2px solid var(--tg);outline-offset:-1px;}

.tk-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
/* The search group: the two controls are one control, so they look like one.
   A bare "contains / doesn't contain" dropdown floating beside a box is a
   question with no visible subject. */
.tk-sgrp{display:flex;flex:1;min-width:230px;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:var(--btn);}
/* V909 --- THE LAST NATIVE CONTROL ON THE PAGE. Everything here was already
   styled except the ARROW: a <select> keeps the operating system's own chevron
   and the little panel behind it, which on this dark skin is a pale notch that
   belongs to no other control. appearance:none removes it and the caret is
   drawn in the padding instead, so the one thing the eye catches in that row is
   the search box rather than a browser artefact. The caret is a data: URI, not
   a file: it is nine bytes of SVG and a request for it would cost more than the
   picture. */
.tk-sgrp select{appearance:none;-webkit-appearance:none;border:0;border-right:1px solid var(--line2);background:transparent;color:var(--muted2);font-size:var(--fld-fs,12.5px);font-weight:600;padding:9px 22px 9px 10px;font-family:inherit;flex:0 0 auto;max-width:44%;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238fb7a2' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:9px 6px;}
.tk-sgrp select:hover{color:var(--text);}
.tk-sgrp input{border:0;background:transparent;color:var(--text);font-size:var(--fld-fs,14px);padding:9px 11px;flex:1;min-width:0;font-family:inherit;}
.tk-sgrp input:focus:not(:focus-visible),.tk-sgrp select:focus:not(:focus-visible){ outline: none; }
.tk-sgrp:focus-within{border-color:var(--tg);}
.tk-fsel{background:var(--btn);border:1px solid var(--line2);border-radius:10px;color:var(--text);font-size:13px;font-weight:600;padding:9px 10px;font-family:inherit;}

.tk-editor{background:var(--card,var(--panel));border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px;display:none;}
.tk-editor.open{display:block;}
.tk-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:7px;}
/* V629 --- `hidden` HAS TO WIN, AND ON THIS PAGE IT DID NOT.
   `[hidden]` is only the user-agent's `display:none`, so ANY author `display`
   beats it: the rule directly above kept `#e-endwrap[hidden]` on screen from V621
   until V629, and every inline `display:inline-flex` in this form would do the
   same. That is why this is `!important` rather than a tidier selector -- an
   attribute that says "not shown" must not be arguable by specificity, and the
   next person to add `display` to a row here would otherwise reopen the same bug
   silently. `!important` in a stylesheet also beats an inline style, which is what
   makes it cover the fields inside the Ends box. */
[hidden]{display:none!important;}
/* V629: the Yes/No reminder toggle, in the same family as the calendar's AD/BS
   pill. Ink is stated WITH its ground on both states (V578): the chosen side
   paints --accent and takes --accent-fg, the other paints --btn and takes
   --text. Never opacity -- "not chosen" is not "faded". */
.tk-rem-toggle{display:inline-flex;gap:0;margin:2px 0 8px;border:1px solid var(--line2);
  border-radius:9px;overflow:hidden;}
/* V912, HIS ASK: "yes and no after reminder should be 20% smaller vs todays size
   (vertically)". 34px of height became 27px and the padding came down with it;
   27px is still above the 24px minimum a finger needs on the side it is tapped. */
.tk-tog{background:var(--btn);color:var(--text);border:0;font:inherit;font-size:13px;
  font-weight:700;padding:4px 14px;cursor:pointer;min-height:27px;min-width:52px;}
.tk-tog + .tk-tog{border-left:1px solid var(--line2);}
.tk-tog.is-on{background:var(--accent);color:var(--accent-fg);}
/* V629: the read-only address the email reminder goes to. --muted on --panel is
   the same pairing the hints beside it use, so it reads as information rather
   than as a field somebody forgot to enable. */
.tk-remto{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.tk-row>label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted2);font-weight:600;flex:1;min-width:120px;}
/* V578: #ff8b6b measured 2.09:1 on the light card -- a required-field marker
   nobody can see is not a marker. --bad is the house danger token. */
.tk-req{color:var(--bad);font-weight:900;}
/* V909 --- `:not([type=checkbox]):not([type=radio])`, AND THAT IS THE WHOLE BUG
   HE REPORTED: "why check mark in the middle?".
   `.tk-editor input` matched the SUBTASK CHECKBOX too, so a 15px box was given
   width:100%, a border and 10px of padding. It became a full-width flex item --
   which pushed the grip onto one line, the stretched checkbox onto a second with
   the tick floating in the centre of it, and the text and buttons onto a third.
   Three lines and a centred tick, from one selector that was never meant to
   reach a checkbox. A checkbox is not a field and must not be sized like one. */
.tk-in,.tk-editor input:not([type=checkbox]):not([type=radio]),.tk-editor select,.tk-editor textarea{background:var(--btn);border:1px solid var(--line2);border-radius:8px;padding:7px 10px;color:var(--text);font-size:var(--fld-fs,14px);font-family:inherit;width:100%;box-sizing:border-box;}
/* V530: no `resize:vertical` and no transition. The box is sized from its
   content in JS, one line at a time, up to 4x. A CSS transition here would
   animate every keystroke that adds a line, which is the thing that was asked
   NOT to happen. */
.tk-editor textarea{min-height:52px;resize:none;overflow-y:auto;line-height:1.45;}

/* Title 60%, Priority half the width it used to take, Tags the balance --
   one row, which is what removing the redundant Short note field bought. */
.tk-r1{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.tk-r1>label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted2);font-weight:600;}
.tk-r1 .f-title{flex:0 0 60%;min-width:200px;}
.tk-r1 .f-prio{flex:0 0 88px;min-width:88px;}
.tk-r1 .f-tags{flex:1 1 120px;min-width:110px;}
@media (max-width:520px){
  .tk-r1 .f-title{flex:1 1 100%;}
  .tk-r1 .f-prio{flex:0 0 88px;}
  .tk-r1 .f-tags{flex:1 1 140px;}
}

.tk-sub{border-top:1px dashed var(--line);margin-top:6px;padding-top:10px;}
.tk-sublbl{font-size:12px;color:var(--muted2);font-weight:700;margin-bottom:6px;}
/* V857 --- HIS REPORT: "when creating sub task - the text is not visible inside the
   main group (the field/box seems too small, i can see once i go outside)".
   THE CAUSE: `flex:1` on the text box means flex-basis 0, so it takes only what is
   LEFT after a grip, a checkbox and two buttons have taken their natural widths --
   and inside `.tk-group`, which adds its own padding, that remainder is about forty
   pixels on a phone. The text was in there; there was no room to see it.
   THE FIX IS THE ROW, NOT THE BOX: let the row WRAP, and give the text a real
   basis and a floor. When the width is not there, the buttons drop to a second
   line instead of crushing the one control that has to be readable. */
/* V909 --- V857'S LAYOUT IS KEPT, EVERY PART OF IT, and that is a correction to
   this release's own first draft. It replaced the wrap and the text's floor with
   `nowrap` and no floor, on the reasoning that fixing the checkbox had freed
   enough room. Two of V857's checks went red and they were right to.
   The wrap and the floor were never the bug. The bug was the stretched checkbox
   ABOVE, which V857 could not see and worked around. With it fixed the row no
   longer wraps at ordinary widths -- but at 320px, with the words on the promote
   button, the text would still fall under its 150px floor, and then wrapping the
   buttons to a second line is exactly the right answer. Keeping a guard that
   costs nothing when it is not needed is cheaper than discovering why it existed.
   What V909 changes here is the LOOK, not the layout: the text loses its box,
   a done step reads as done, and the checkbox is drawn rather than native. */
.tk-subrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:7px 0;border-bottom:1px solid var(--line);}
.tk-subrow:last-of-type{border-bottom:0;}
/* `.tk-editor` IS IN THIS SELECTOR ON PURPOSE. The blanket field rule above is
   `.tk-editor input:not([type=checkbox]):not([type=radio])`, and each :not()
   carries its argument's weight -- so that rule scores (0,3,1) and a plain
   `.tk-subrow input[type=text]` scores (0,2,1) and LOSES, however far down the
   file it sits. The step text came back in a box for exactly that reason.
   Matching the weight is the fix; !important would have been the other one, and
   it would have left the next person guessing which rule was meant to win. */
.tk-editor .tk-subrow input[type=text]{flex:1 1 200px;min-width:150px;background:transparent;
  border:0;border-bottom:1px solid transparent;border-radius:0;padding:4px 2px;
  color:var(--text);font-size:var(--fld-fs,14px);width:auto;}
.tk-editor .tk-subrow input[type=text]:focus{border-bottom-color:var(--tg);}
.tk-editor .tk-subrow input[type=text]:focus:not(:focus-visible){ outline: none; }
/* A DONE STEP READS AS DONE. The card's own step list has struck this through
   since V845 (.tk-srow.on .lbl); the editor showed a tick and nothing else, so
   the same list said two different things depending which screen you were on. */
.tk-editor .tk-subrow.done input[type=text]{color:var(--muted);text-decoration:line-through;}
/* Drawn, not native: an unchecked box is the browser's grey square otherwise,
   which is the one control on this page that would not look like the tool.
   Same shape as .tk-srow .bx on the card, so the two lists match. */
.tk-editor .tk-subrow input[type=checkbox]{appearance:none;-webkit-appearance:none;
  width:17px;height:17px;flex:0 0 auto;margin:0;padding:0;border-radius:5px;
  border:2px solid var(--muted);background:transparent;cursor:pointer;
  display:grid;place-content:center;}
.tk-editor .tk-subrow input[type=checkbox]:checked{background:var(--tg);border-color:var(--tg);}
.tk-editor .tk-subrow input[type=checkbox]:checked::after{content:"";width:9px;height:5px;
  border:2px solid var(--bg);border-top:0;border-right:0;
  transform:rotate(-45deg) translateY(-1px);}
.tk-editor .tk-subrow input[type=checkbox]:disabled{opacity:.5;cursor:default;}
.tk-editor .tk-subrow input[type=checkbox]:focus-visible{outline:2px solid var(--tg);outline-offset:2px;}
/* The two actions are glyphs with titles, so five controls fit one phone line. */
.tk-sacts{display:flex;gap:2px;flex:0 0 auto;}
.tk-sacts .tk-mini{background:transparent;border:0;color:var(--muted);
  padding:4px 7px;font-size:13px;}
.tk-sacts .tk-mini:hover{background:var(--btn);color:var(--text);}
.tk-subhd{display:flex;align-items:center;gap:8px;margin-bottom:2px;}
.tk-subhd .cnt{margin-left:auto;font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;}
/* + Step becomes a full-width dashed line under the list: it is where the next
   one goes, so it sits where the next one would appear. */
/* V928, HIS ASK: "give Gold edge, gold tint to +Add a step button" -- the same
   treatment he picked for the card-game buttons. A dashed grey line that said
   "+ Add a step" was the one thing on this block people missed; gold is the
   page's own accent, so it lifts the control without inventing a new colour.
   The dashes stay: it is still where the NEXT one goes, not a filled button
   competing with Save.

   Light theme gets its own pair. --tg there is #7c6209 (V987; was #80660c), a
   dark olive chosen for
   TEXT contrast, and the 20% wash this theme sets is brown, not gold (13% is
   the DARK theme's wash -- the number here described the wrong block). --tg-wash
   and --tg-edge carry the gold the eye expects on each theme while the label
   keeps using --tg, which is the value that passes contrast. */
#e-addsub{width:100%;text-align:left;margin-top:8px;padding:7px 12px;
  background:var(--tg-wash);border:1px dashed var(--tg-edge);color:var(--tg);
  font-weight:700;}
#e-addsub:hover{border-color:var(--tg);
  background:color-mix(in srgb,var(--tg-wash) 100%,var(--tg) 6%);}
/* The pane's own "+ Add a sub task under this" takes the same tint. After the
   rename both buttons read "+ Add a sub task ..."; two controls with the same
   words and two different looks is a question nobody should have to answer. It
   stays inline-width -- the list button is where the next one GOES, this one
   nests under an open sub task. */
#e-sp-add{background:var(--tg-wash);border:1px dashed var(--tg-edge);
  color:var(--tg);font-weight:700;}
#e-sp-add:hover{border-color:var(--tg);}
/* V845 --- STEPS ON THE CARD, FOLDED BY DEFAULT (his choice from the mockup).
   A nine-step task makes a tall card, so what is always visible is the bar and
   the count; the list opens on a tap and the open/shut state is remembered per
   task. The bar is a BUTTON, not a div with a click handler, so it is reachable
   from a keyboard and announces itself. */
/* V909 --- THE BAR STOPS READING AS A DIVIDER.
   It was full width and sat between one card's text and the next, so on a list
   it looked like a rule separating rows rather than a progress bar belonging to
   the one above it. It is NOT being replaced by a static ring, which the mockup
   for this release proposed: V845 made this a BUTTON on purpose -- tapping it
   opens the step list on the card so a step can be ticked without opening the
   editor -- and a ring would have taken a control away to tidy a line.
   So it stays a control and gets narrower, indented, with the count FIRST: the
   number is the thing being read, and the bar is the picture of it. */
.tk-steps{margin-top:7px;padding-left:2px;}
.tk-sbar{display:flex;align-items:center;gap:8px;width:auto;background:none;border:0;
  padding:3px 0;cursor:pointer;color:var(--muted);font:inherit;font-size:12px;text-align:left;
  border-radius:7px;}
.tk-sbar:hover{color:var(--text);}
.tk-sbar .trk{flex:0 0 84px;height:4px;border-radius:99px;background:var(--btn);overflow:hidden;}
.tk-sbar .trk i{display:block;height:100%;background:var(--tg);transition:width .18s ease;}
.tk-sbar .cnt{font-variant-numeric:tabular-nums;white-space:nowrap;}
.tk-sbar .caret{transition:transform .18s ease;}
.tk-steps.open .tk-sbar .caret{transform:rotate(90deg);}
.tk-slist{display:none;margin-top:6px;border-top:1px dashed var(--line);padding-top:6px;}
.tk-steps.open .tk-slist{display:block;}
/* The whole row is the target, not the 15px box -- this is tapped with a thumb. */
.tk-srow{display:flex;align-items:center;gap:9px;padding:6px 2px;width:100%;background:none;
  border:0;color:var(--text);font:inherit;font-size:13.5px;text-align:left;cursor:pointer;}
.tk-srow .bx{width:16px;height:16px;flex:0 0 auto;border:2px solid var(--muted);border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;line-height:1;}
.tk-srow.on .bx{background:var(--tg);border-color:var(--tg);color:var(--bg);}
.tk-srow.on .lbl{text-decoration:line-through;color:var(--muted);}
.tk-srow .lbl{flex:1;min-width:0;}
.tk-srow .own{font-size:11px;color:var(--tg);border:1px solid var(--line2);border-radius:6px;padding:0 5px;}
.tk-srow[disabled]{opacity:.55;cursor:default;}
/* V912: a step under a step, on the card. Indented and quieter, so the two
   levels are told apart without a second control to expand them -- a list two
   deep is short enough to simply show. */
.tk-srow.kid{padding-left:22px;font-size:13px;}
.tk-srow.kid .bx{width:14px;height:14px;}
.tk-srow .tk-schips{flex:0 0 auto;}
/* The editor's step row gains a drag handle and a promote button. */
.tk-subrow .grip{cursor:grab;color:var(--muted);user-select:none;font-size:13px;letter-spacing:-2px;}
.tk-subrow.drag{opacity:.4;}
.tk-subrow .tk-mini{padding:4px 7px;font-size:12px;}
.tk-chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text);font-weight:600;}
.tk-mini{background:var(--btn);border:1px solid var(--line2);border-radius:7px;color:var(--text);cursor:pointer;padding:5px 10px;font-size:13px;}
.tk-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;align-items:center;}
.tk-save{background:var(--tg);color:var(--tg-ink);border:0;border-radius:9px;padding:9px 18px;font-weight:800;cursor:pointer;}
.tk-hint{font-size:12px;color:var(--muted3,var(--muted2));font-style:italic;margin-top:4px;}
.tk-autosave{font-size:11.5px;color:var(--muted2);margin-right:auto;font-weight:600;}

/* ---------- V530: the reminder block, as a sentence --------------------- */
.tk-rem-line{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--text);font-weight:600;}
/* ===================================================== V912, AND THE SAME TRAP.
   HIS ASK: "these should be in same row: Remind me, (days box), days/min etc
   drop down, before it is due." It was on THREE rows, and not because the flex
   refused to fit them -- because the number box and the dropdown were each 100%
   wide, so each one filled a line by itself.

   WHY. These rules say `width:auto` and score (0,2,1). The blanket field rule at
   the top of this file is `.tk-in,.tk-editor input:not([type=checkbox]):not([type=radio]),...`
   and each :not() carries its argument's weight, so that arm scores (0,3,1) and
   WINS -- the same arithmetic that put the step text back in a box (V857) and
   pushed the hidden Repeat select off the side of a phone (fixed below). Adding
   `.tk-editor` brings these to (0,3,1), ties it, and later-in-the-file decides.
   THIRD TIME IN ONE FILE: the lesson is that a bare class never beats that rule,
   and any new field rule on this page has to be written knowing it. */
.tk-editor .tk-rem-line select,
.tk-editor .tk-rem-line input[type=number]{width:auto;min-width:72px;padding:6px 8px;font-size:var(--fld-fs,13.5px);}
.tk-editor .tk-rem-line input[type=number]{width:66px;}
.tk-rem-when{font-size:12.5px;color:var(--tg);font-weight:700;margin-top:8px;}
/* V912, HIS ASK: "before it is due. -- pls set a due date (if due date is not set
   then it should blink in red)". This replaces the separate line that used to sit
   under the sentence saying the same thing a row away from the words it was about.
   The blink is opacity, never display: text that vanishes is text a screen reader
   loses, and reduced-motion gets the red without the pulse. */
.tk-rem-nag{color:#d14343;font-weight:800;}
@media (prefers-reduced-motion:no-preference){.tk-rem-nag{animation:tk-nag 1.1s ease-in-out infinite;}}
@keyframes tk-nag{0%,100%{opacity:1;}50%{opacity:.22;}}
/* V912: the Yes/No rides the line it answers instead of dropping below it. */
.tk-remhd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 8px;}
.tk-remhd .tk-sublbl{margin-bottom:0;}
.tk-remhd .tk-rem-toggle{margin:0;}
.tk-rem-ways{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:10px;}
/* =================================================================== V933
   THE REMINDER BLOCK, HIS 03-Oct BATCH.

   WHY THESE RULES ARE HERE AND NOT IN A NEW STYLESHEET: every one of them is a
   To-Do editor rule, and the editor's styles have lived in this file since the
   tool was written. A second file for nine selectors is a second place to look
   for the same thing.
*/
/* The lead-time box loses its spinners. They are a MOUSE control on a field
   people type into, they steal 14px of a 66px box, and on a phone they do not
   exist at all -- so the box was shaped around something half his devices never
   show. His ask: *"remove up down arrow pls in 15"*. */
.tk-editor .tk-rem-line input[type=number]{-moz-appearance:textfield;appearance:textfield;
  text-align:center;}
.tk-editor .tk-rem-line input[type=number]::-webkit-outer-spin-button,
.tk-editor .tk-rem-line input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;appearance:none;margin:0;}

/* THE DUE ROW LOSES ITS PADDING, with a floor on a coarse pointer so a thumb
   still lands on it. His ask was *"reduce the zise of box to 50% height wise"*;
   a field cannot literally halve -- 33px to 16px is under every touch target
   this site measures against -- so what comes out is the padding, which is what
   made it look chunky. 32px to ~25px on a mouse, and back to 36px on a thumb.

   SCOPED TO THIS ROW, because the same rule on `.tk-editor input` takes the
   title and the Notes box with it.

   AND `!important`, WHICH IS NOT DECORATION HERE. compact.css (V718, the
   site-wide density pass) carries `.tk-in,.tk-editor input,...{padding:6px
   9px!important}` and is loaded LAST in <head> by design -- so without a
   matching `!important` this rule loses and the box stays at 32px. Measured in
   a real browser, which is the only way that was ever going to be found: the
   font-size half of this rule applied and the padding half silently did not. */
.tk-duerow label{font-size:12.5px;}
.tk-editor .tk-duerow input[type=date],
.tk-editor .tk-duerow input[type=time]{padding:3px 10px!important;font-size:var(--fld-fs,13.5px);}
@media (pointer:coarse){
  .tk-editor .tk-duerow input[type=date],
  .tk-editor .tk-duerow input[type=time]{min-height:36px;}
}

/* =================================================================== V935
   REPEAT JOINS THE DUE ROW WHERE THERE IS ROOM, AND ONLY THERE.

   His ask was *"possibel to squeez repeat in same row as date and time"*, and the
   measured answer was no -- not on a phone. At 390px the row is 316px and three
   native boxes clip the date to "10/05/" and the time to "04:3", silently: a date
   input draws its value in a shadow tree, so nothing overflows, nothing wraps and
   nothing reports that it ran out of room. Pinning each box to its own width gets
   closer and is WORSE, because "10/05/202" looks nearly right.

   So the layout is the answer rather than the markup. Above 720px the group turns
   into one wrapping flex line and Repeat comes up beside the two boxes; below it,
   nothing changes and Repeat stays where V928 put it, next to Urgent and Flag.

   720px, not 520: the other breakpoint on this page is where the Repeat chips drop
   their padding, which is a different question from whether a third control fits.
   Tying them together would mean a tablet gets the one-line layout at the width
   where the chips have already started shrinking to survive. */
@media (min-width:720px){
  .tk-dategrp{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;}
  /* The heading, the More menu, the hourly note and the Ends row are all
     full-width children -- only the two boxes and the Repeat row share a line. */
  .tk-dategrp > .tk-ghead,
  .tk-dategrp > .tk-rmore-menu,
  .tk-dategrp > .tk-rchips-note,
  .tk-dategrp > .tk-row:not(.tk-duerow){flex:0 0 100%;}
  .tk-dategrp > .tk-ghead{margin-bottom:0;}
  .tk-dategrp > .tk-duerow{flex:0 0 auto;margin-bottom:0;gap:8px;}
  /* The labels stop sharing the width equally: each box gets what its own value
     needs and no more, which is what frees the room for Repeat. */
  .tk-dategrp > .tk-duerow label{flex:0 0 152px;}
  /* The word "Repeat" rides the line too, immediately before its chip, rather
     than staying a heading over an empty row. Pinned here deliberately: without
     a rule it still lands there, by being the only child nobody gave a width to,
     and a layout that works by accident is one the next edit breaks. */
  .tk-dategrp > .tk-rlab{flex:0 0 auto;margin:0;align-self:center;}
  .tk-dategrp > .tk-rrow{flex:1 1 220px;min-width:0;margin-bottom:0;}
  /* The marks go to the far right of the line rather than sitting against the
     chips, so the row reads date -> time -> repeat ... marks. */
  .tk-dategrp > .tk-rrow .tk-rchips{flex:0 0 auto;}
  .tk-dategrp > .tk-rrow #e-urgent{margin-left:auto;}
}

/* THE THREE MODES. One row, icon and label on one line, ON and OFF on all
   three, gold on and the page's quiet grey off. 38px, down from 64. */
.tk-rem-ways{flex-direction:column;align-items:stretch;gap:0;}
.tk-modehd{margin:0 0 6px;}
.tk-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.tk-mode{background:var(--btn);border:1px solid var(--line2);border-radius:10px;
  padding:0 9px;height:38px;cursor:pointer;display:flex;align-items:center;gap:7px;
  color:var(--text);font:inherit;min-width:0;overflow:hidden;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;}
.tk-mode .ic{font-size:15px;line-height:1;flex:0 0 auto;}
.tk-mode .nm{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;flex:1 1 auto;text-align:left;}
.tk-mode .tick{font-size:10px;font-weight:900;letter-spacing:.06em;flex:0 0 auto;
  color:var(--muted2);}
.tk-mode.on{border-color:var(--tg);background:color-mix(in srgb, var(--tg) 14%, var(--btn));
  box-shadow:0 0 0 1px var(--tg);}
.tk-mode.on .tick{color:var(--tg);}
.tk-modehint{font-size:11.5px;margin-top:6px;}
.tk-remno{font-size:12.5px;line-height:1.5;margin-top:4px;}
@media (max-width:430px){
  .tk-mode{padding:0 7px;gap:5px;}
  .tk-mode .nm{font-size:11px;}
  .tk-mode .tick{font-size:9.5px;}
}
/* Kept in the DOM, out of the picture: the three checkboxes are still the value
   every other part of this page reads, and the address is still read from here.
   NOT `display:none` -- a hidden form control is skipped by some assistive
   technology and this one still carries the state. */
.tk-vhide{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* URGENT AND FLAG ARE THE SYMBOLS. Lit when on, faded when off. The glow is a
   ring plus a soft outer shadow -- a background alone reads as "selected", a
   glow reads as "live", and he asked for glow. */
/*  V945 -- FADED, NOT INVISIBLE. His V933 ask was "if selected then glow else
    fade them", and the first cut read "fade" as `opacity:.45` over --muted2,
    which measures 1.82:1 on the light theme and 2.17:1 on dark against a 4.5
    floor: the symbol was the same brightness as the card behind it, which is
    one of the places he reported. The OFF state is still plainly the quiet one
    -- no fill, no ring, no glow, and a muted colour against the lit state's
    solid red or amber -- it is now simply legible while being quiet. */
.tk-mark{width:42px;height:38px;border-radius:11px;border:1px solid var(--line2);
  background:var(--btn);color:var(--muted);font:900 17px/1 system-ui;cursor:pointer;
  display:grid;place-items:center;opacity:1;flex:0 0 auto;
  transition:opacity .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;}
.tk-mark:active{transform:scale(.93);}
.tk-mark.on{opacity:1;color:#fff;border-color:#a3202f;background:#7a1420;
  box-shadow:0 0 0 1px #a3202f,0 0 14px -2px #a3202f;}
.tk-mark-flag.on{color:var(--tg-ink);border-color:var(--tg);background:var(--tg);
  box-shadow:0 0 0 1px var(--tg),0 0 14px -2px var(--tg);}
@media (prefers-reduced-motion:reduce){.tk-mark{transition:none;}.tk-mark:active{transform:none;}}

/* THE POP-UP. Positioned, never inserted, so it cannot push the form around.
   Faint: the panel is the page's own panel colour mixed toward the text, not a
   bright tooltip. Clamped to the viewport, with the little arrow sliding along
   to stay under the control it belongs to -- otherwise the third mode in the row
   puts it off the right edge of a phone. */
.tk-pop{position:absolute;z-index:60;max-width:300px;min-width:160px;
  background:color-mix(in srgb, var(--panel) 92%, var(--text));
  border:1px solid color-mix(in srgb, var(--line2) 70%, transparent);
  color:var(--text);border-radius:11px;padding:10px 13px;
  box-shadow:0 14px 34px -16px rgba(0,0,0,.75);
  opacity:0;transform:translateY(-5px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;}
html:not([data-dark]) .tk-pop{background:color-mix(in srgb, var(--panel) 88%, #fff);
  box-shadow:0 14px 34px -18px rgba(20,20,28,.45);}
.tk-pop.show{opacity:1;transform:translateY(0);}
.tk-pop::before{content:"";position:absolute;top:-6px;left:var(--ax,22px);width:11px;height:11px;
  background:inherit;border-left:1px solid color-mix(in srgb, var(--line2) 70%, transparent);
  border-top:1px solid color-mix(in srgb, var(--line2) 70%, transparent);transform:rotate(45deg);}
.tk-pop .to{font-size:13.5px;font-weight:800;line-height:1.4;}
.tk-pop .to code{background:transparent;color:var(--tg);font:inherit;font-weight:800;}
.tk-pop .chg{font-size:12px;color:var(--muted2);margin-top:5px;line-height:1.45;}
.tk-pop.said{font-size:13.5px;font-weight:800;min-width:0;}
.tk-pop.said b{color:var(--tg);}
.tk-pop.said.off b{color:var(--muted2);}
@media (prefers-reduced-motion:reduce){.tk-pop{transition:none;}}

/* THE PAST-DATE DIALOG. `hidden` has to win here as it does everywhere else on
   this page, so the shown state is a class and not an inline display. */
.tk-scrim{position:fixed;inset:0;background:rgba(4,20,14,.72);display:none;
  place-items:center;padding:18px;z-index:70;}
html:not([data-dark]) .tk-scrim{background:rgba(20,20,28,.5);}
.tk-scrim.on{display:grid;}
.tk-dlg{background:var(--panel);border:1px solid var(--line2);border-radius:14px;
  padding:18px;max-width:430px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.5);}
.tk-dlg h4{margin:0 0 9px;font-size:16px;}
.tk-dlg p{margin:0 0 14px;font-size:13.5px;color:var(--muted2);line-height:1.5;}
.tk-dlg .acts{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;}
.tk-btn{background:var(--btn);border:1px solid var(--line2);color:var(--text);
  border-radius:9px;padding:9px 14px;font-weight:700;font-size:13.5px;line-height:1.2;cursor:pointer;}
.tk-btn.pri{background:var(--tg);border-color:var(--tg);color:var(--tg-ink);}

.tk-list{display:flex;flex-direction:column;gap:10px;}
/* V909 --- THE URGENT EDGE, AND ONLY URGENT. The mockup for this release drew
   four colours (urgent / high / medium / low) and that would have put back the
   exact scale he asked to be removed at V806: "remove priority from to do..
   urgent / non-urgent is enough." Two states, then -- a red edge or nothing --
   which is the same fact the badge already carries, in three pixels instead of
   a chip, and on the edge of the card where the eye runs down a list. */
.tk-card{position:relative;display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 15px;overflow:hidden;}
.tk-card.urgent::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bad);}
.tk-card.done.urgent::before{opacity:.35;}
.tk-card.done{opacity:.62;}
.tk-cbtn{width:22px;height:22px;border-radius:50%;border:2px solid var(--muted3,var(--muted2));background:transparent;flex-shrink:0;cursor:pointer;margin-top:2px;color:var(--tg);font-weight:900;display:flex;align-items:center;justify-content:center;}
.tk-card.done .tk-cbtn{background:var(--tg);border-color:var(--tg);color:var(--tg-ink);}
.tk-body{flex:1;min-width:0;}
.tk-tt{font-weight:700;font-size:15px;}
.tk-card.done .tk-tt{text-decoration:line-through;}
/* V530: at most the first two non-blank lines of the description. The clamp is
   the visual backstop; the JS has already thrown away everything after line 2,
   because a 5,000-character detail should not be in the DOM 200 times over. */
.tk-note{font-size:13px;color:var(--muted2);margin-top:3px;white-space:pre-wrap;
         display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tk-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.tk-chip{font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;background:var(--btn);color:var(--muted2);border:1px solid var(--line2);}
/* V909 --- AMBER NOW MEANS "SOON", NOT "HAS A DATE".
   Every due chip used to be --tg, so a task due in March looked exactly like one
   due tomorrow and the colour said nothing. Three steps instead: a date far off
   is an ordinary chip, one inside a week is the page's amber, one that has
   passed is red and bold. The WORDS come from dueState() -- "overdue", "today",
   "in 3 days" -- because a colour on its own is a code the reader has to learn,
   and this is read at a glance.
   --tg and --bad both resolve on this page (--tg is declared on .tk-wrap, --bad
   is the house danger token). No invented token, so no frozen fallback. */
.tk-chip.due.soon{color:var(--tg);border-color:var(--tg);}
.tk-chip.due.over{color:var(--bad);border-color:var(--bad);font-weight:700;}
.tk-chip.p-high{background:rgba(255,107,107,.16);color:#ff8b6b;border-color:transparent;}
.tk-chip.p-med{background:rgba(234,189,35,.14);color:var(--tg);border-color:transparent;}
.tk-chip.p-low{background:rgba(120,180,255,.14);color:#8fb7ff;border-color:transparent;}
.tk-chip.draft{background:rgba(255,107,107,.16);color:#ff8b6b;border-color:transparent;}
/* V596: row -> column becomes row, so the priority chip sits BESIDE Delete
   rather than stacked above it. align-items:center keeps the chip's baseline
   with the button, which a stretch default would not. flex-shrink:0 on the chip
   stops a narrow card squashing "High" into an ellipsis. */
.tk-rowbtns{display:flex;flex-direction:row;align-items:center;gap:8px;}
/*  TWO ORPHANED RULE BODIES WERE DELETED HERE AT V950, and they had been
    breaking the page quietly since V909.

    V909 replaced this page's own row menu with the shared `rowmenu` component
    (rowmenu.css / rowmenu.js) and removed the two selectors -- but LEFT THEIR
    BODIES BEHIND. What sat here was:

        border:1px solid var(--line2);border-radius:14px; ... }
        color:var(--text);font:inherit;font-size:14px; ... }

    with no selector and no opening brace. A CSS parser meeting that does not
    skip a line; it treats everything up to the next `{` as a SELECTOR, which
    swallowed the rule that followed. So `.tk-rowbtns .tk-chip{flex:0 0 auto;
    margin:0}` has never applied on this page, and V596's check that the row
    buttons lay out horizontally was failing for a reason nothing could see.

    IT TOOK THE MOVE TO FIND IT. The bytes were identical inside the template,
    but nothing parsed a template as CSS -- test_v834's parity check and
    test_v919's field ratchet both walk static/css/ only. Nineteen suites read
    that template looking for SUBSTRINGS, which a broken rule satisfies
    perfectly well. */
.tk-rowbtns .tk-chip{flex:0 0 auto;margin:0;}
.tk-rowbtns button{background:var(--btn);border:1px solid var(--line2);border-radius:7px;color:var(--muted2);cursor:pointer;padding:4px 9px;font-size:12px;}
.tk-empty{color:var(--muted2);text-align:center;padding:30px 0;font-size:14px;}

/* files */
.tk-files{display:flex;flex-direction:column;gap:5px;margin-top:8px;}
.tk-file{display:flex;gap:8px;align-items:center;font-size:12.5px;}
.tk-file a{color:var(--accent);text-decoration:none;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tk-file .sz{color:var(--muted2);flex:0 0 auto;}
/* V534: the drop zone. Dashed, quiet, and it does NOT replace the button --
   there is nothing to drag from on a phone, and a drop target alone cannot be
   reached from a keyboard. */
.tk-dz{border:1.5px dashed var(--line2);border-radius:10px;padding:11px;margin:4px 0 0;
       text-align:center;font-size:12.5px;color:var(--muted2);cursor:pointer;}
.tk-dz.over{border-color:var(--tg);color:var(--text);background:rgba(234,189,35,.07);}
.tk-dz:focus-visible{outline:2px solid var(--tg);outline-offset:2px;}
.tk-delbtn{color:#ff6b6b;}
.tk-fchip{font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;background:var(--btn);color:var(--muted2);border:1px solid var(--line2);}

/* deleted panel */
.tk-del-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tk-del-tbl th,.tk-del-tbl td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);}
.tk-del-tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted2);}

/* ============================ V731 =====================================
   The To-Do dashboard, in the shape of iOS Reminders but in the Hub's own
   dark+gold skin. Coloured count tiles that act as filters, then a "Tags"
   section (this list's equivalent of "My Lists", since To-Do is one list
   organised by tags) with a "No tags" row for the untagged. Nothing here
   changes data -- every count and every filter is computed from the tasks
   already loaded. */
/* V909 --- SIX TILES BECOME SIX CHIPS. Measured before it was changed: the grid
   was 300px tall on a laptop and filled the ENTIRE first screen on a phone, above
   a list of four tasks, with five of the six counts reading 0. You scrolled past
   it every time to reach the list it was describing.
   The same six filters and the same six numbers now sit in one wrapping rail
   about 40px tall. Nothing is removed and nothing is hidden: an empty filter
   DIMS rather than disappearing, so the set never reorders or moves under a
   thumb between visits -- a control that moves because a count changed is worse
   than one that takes up room. */
.tk-dash{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;}
.tk-tile{position:relative;text-align:left;background:var(--panel);
  border:1px solid var(--line2);border-radius:999px;padding:6px 13px;cursor:pointer;
  font-family:inherit;color:var(--muted);display:inline-flex;align-items:center;
  gap:8px;font-size:13.5px;transition:border-color .12s,transform .06s;}
.tk-tile:active{transform:scale(.97);}
.tk-tile.sel{border-color:var(--tg);color:var(--tg);box-shadow:none;}
.tk-tile.zero{opacity:.55;}
.tk-tile .lbl{font-size:13.5px;font-weight:600;color:inherit;}
.tk-tile.sel .lbl{color:var(--tg);}
.tk-tile .n{position:static;font-size:11.5px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;background:var(--btn);border-radius:999px;
  padding:3px 8px;color:var(--muted2);}
.tk-tile.sel .n{background:var(--tg);color:var(--bg);}
/* V769: `off` is selected-but-collapsed -- pressing the active tile again closes
   the list. Dashed and unfilled so it reads as "you closed this" rather than "this
   filter found nothing"; the count stays, because the count is still true. */
.tk-tile.sel.off{border-style:dashed;box-shadow:none;}
.tk-tile.sel.off .lbl{color:var(--muted2);}
.tk-hidden{border:1px dashed var(--line2);border-radius:14px;padding:22px 16px;text-align:center;
  color:var(--muted2);font-size:13px;line-height:1.5;}
.tk-hidden b{display:block;color:var(--tg);font-size:14.5px;margin-bottom:3px;}
.tk-hidden[hidden]{display:none;}
/*  AND THE SAME FOR EVERY OTHER ROW THIS PAGE HIDES, added at V950 and a real
    fix rather than a tidy-up.

    `<div class="tk-row" id="e-endwrap" hidden>` does NOT hide, because
    `.tk-row{display:flex}` beats the browser's own `[hidden]{display:none}` --
    an author rule outranks a user-agent one, whatever the attribute says. Same
    for `.tk-rmore-menu`. Both have been visible-when-hidden on the live editor
    since the rules were written.

    IT TOOK THE MOVE TO FIND IT, which is the theme of this release:
    test_v616's guard walks static/css/ and compares it against the markup, so
    a display rule living inside a TEMPLATE was invisible to it. The bytes did
    not change; where they live did, and the guard could finally see them. */
.tk-row[hidden],.tk-rmore-menu[hidden]{display:none;}
/* V909 --- THE OLD TILE RULES ARE GONE, NOT OVERRIDDEN. They sat HERE, ninety
   lines below the block that styles the chip, so they won on source order: the
   icon disc came back at 29px, the count went back to absolute in a corner, and
   the label was clipped to "Sched" and "Comp". Layering a `display:none` above
   them only hid the evidence of two versions of the same control fighting.
   The `.ic-*` colour discs go with them: they existed to fill a tile's left
   column and a chip has no left column. */

.tk-secttl{font-size:19px;font-weight:800;margin:2px 2px 10px;}
.tk-tags{display:flex;flex-direction:column;gap:1px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;margin-bottom:18px;}
.tk-tagrow{display:flex;align-items:center;gap:11px;padding:11px 14px;cursor:pointer;
  background:transparent;border:0;border-top:1px solid var(--line);width:100%;font-family:inherit;
  color:var(--text);text-align:left;}
.tk-tagrow:first-child{border-top:0;}
.tk-tagrow:hover{background:var(--btn);}
.tk-tagrow.sel{background:rgba(234,189,35,.10);}
.tk-tagrow .dot{width:26px;height:26px;border-radius:50%;background:var(--tg);color:var(--tg-ink);
  display:flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 auto;}
.tk-tagrow .dot.none{background:var(--btn);color:var(--muted2);border:1px solid var(--line2);}
.tk-tagrow .nm{flex:1;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tk-tagrow .ct{font-size:14px;font-weight:700;color:var(--muted2);}
.tk-tagrow .chev{color:var(--muted3,var(--muted2));font-size:15px;}
.tk-tags-empty{padding:14px;color:var(--muted2);font-size:13px;text-align:center;}

/* the flag star on a list card */
.tk-flag{color:var(--tg);font-size:14px;flex:0 0 auto;margin-top:2px;}

/* ---- V731: the editor as iOS-style grouped cards -------------------------
   Same fields and the same wired IDs as before; grouped under quiet section
   headers and boxed like the iOS "Details" sheet, on the Hub's panels. */
/* V912: THE WHOLE EDITOR CAME IN BY ABOUT A THIRD. His instruction, "reduce
   gaps /padding for everything in this page" -- so these are the numbers, in one
   place, rather than a trim per section. Nothing drops below the 44px tap floor
   the site measures against; this is slack coming out, not comfort. */
.tk-group{background:var(--card,var(--panel));border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;margin-bottom:9px;}
.tk-ghead{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted2);margin:0 0 7px;}
.tk-group .tk-row:last-child,.tk-group .tk-r1:last-child{margin-bottom:0;}
.tk-group .tk-sub{border-top:0;margin-top:0;padding-top:0;}
/* the iOS-style toggle row: a label on the left, a pill toggle on the right */
.tk-togrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 0;border-top:1px solid var(--line);}
.tk-togrow:first-of-type{border-top:0;}
.tk-togrow .tl{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--text);}
.tk-togrow .tl .ti{width:27px;height:27px;border-radius:7px;display:flex;align-items:center;
  justify-content:center;font-size:14px;color:#fff;flex:0 0 auto;}
/* V736: the flag glyph took its #fff from `.tk-togrow .tl .ti` above (more specific
   than a bare `.ti-flag`), so it was white on the yellow chip (1.78:1). Raise the
   specificity so the chip's own dark ink (var(--tg-ink)) wins in both themes. */
.tk-togrow .tl .ti.ti-flag{background:var(--tg);color:var(--tg-ink);}
/* V912: `.ti-urgent{background:#c0392b}` rode the end of the line above and is
   GONE. Urgent moved onto the Repeat row, so that rule painted nothing -- but it
   still ANSWERED the question "what colour is urgent", and a dead rule that
   answers a live question is how two colours end up being true at once. The
   maroon is now stated once, beside the chip it paints. */
/* V736: #3b82f6 gave white text only 3.68:1 — deepen to #1f66d0 (5.43:1). */
.ti-prio{background:#1f66d0;}
/* the switch -- a compact two-state pill in the accent, like base's theme flip */
.tk-sw{width:48px;height:28px;border-radius:16px;border:1px solid var(--line2);background:var(--btn);
  position:relative;cursor:pointer;flex:0 0 auto;padding:0;transition:background .14s;}
.tk-sw::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  background:#fff;transition:transform .14s;box-shadow:0 1px 2px rgba(0,0,0,.3);}
.tk-sw.on{background:var(--tg);border-color:var(--tg);}
.tk-sw.on::after{transform:translateX(20px);}
.tk-togrow select{width:auto;min-width:96px;}
/* ====================================================== V912, A MEASURED BUG.
   THE TO-DO EDITOR SCROLLED SIDEWAYS ON A PHONE, and had since V739.
   `.tk-recur-hidden` says width:1px and scores (0,1,0). The blanket field rule
   near the top of this file is `.tk-in,.tk-editor select,...{width:100%}` and
   scores (0,2,0) on its `.tk-editor select` arm -- so the "visually hidden"
   select was 390px wide, absolutely positioned at its static spot, and its right
   edge landed at 426 on a 390-wide screen. Measured: document scrollWidth 426
   with the editor open, 390 with it closed.

   THIS IS THE THIRD TIME THIS PAGE HAS BEEN BITTEN BY EXACTLY THIS -- V621's
   `[hidden]` losing to `.tk-row{display:flex}`, V736's `.ti-flag` losing to
   `.tk-togrow .tl .ti` -- so the fix is V736's: MATCH THE WEIGHT. `.tk-editor
   .tk-recur-hidden` is (0,2,0), ties the blanket rule and sits later, so it
   wins on order. `!important` would have won too and left the next reader
   guessing which rule was meant to. `left:0` is belt-and-braces: an element
   taken out of flow should never be able to push the page from its old spot. */
.tk-editor select[aria-hidden="true"].tk-recur-hidden,
.tk-recur-hidden{position:absolute!important;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* V739: Repeat as tappable chips (drives the hidden #e-recur select). */
.tk-rlab{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted2);margin:12px 0 6px;}
/* V808: 2-and-More -- the front row wraps (no sideways scroll) and the rest sit in
   a dropdown menu below. */
/* V912, HIS ASK: "Move urgent beside (after more button along with on off
   toggle)". Urgent had a row of its own for one switch; it now rides the end of
   the Repeat chips, which is the row it is about. Flag does the same beside Tags.
   Each move gives a whole line of height back, which was the ask behind it. */
.tk-rrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.tk-rrow .tk-rchips{flex:1 1 auto;min-width:0;padding-bottom:0;}
.tk-inrow{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;}
.tk-inrow .tl{font-size:13.5px;font-weight:700;color:var(--text);}
.tk-inrow .ti{height:25px;min-width:25px;padding:0 6px;border-radius:7px;display:inline-flex;
  align-items:center;justify-content:center;font:800 13px/1 system-ui;color:#fff;flex:0 0 auto;}
/* V912, HIS ASK: "Red highlight should be maroon and white !! mark". The chip
   carried the colour emoji, and a colour emoji paints itself -- CSS `color` does
   nothing to one -- so a white mark was not available until the glyph became two
   ordinary characters. #7a1420 under #fff is 11.6:1. */
.tk-inrow .ti.ti-urgent{background:#7a1420;color:#fff;}
/* V736's rule, restated for the chip's new home: the flag chip is yellow, so the
   #fff above would be 1.78:1 on it. Ink is always stated with its own ground. */
.tk-inrow .ti.ti-flag{background:var(--tg);color:var(--tg-ink);}
.tk-inrow .tk-sw{width:42px;height:24px;}
.tk-inrow .tk-sw::after{top:3px;left:3px;width:18px;height:18px;}
.tk-inrow .tk-sw.on::after{transform:translateX(18px);}
.tk-tagrow{align-items:flex-end;}
.tk-tagrow .tk-inrow{margin-bottom:5px;}
.tk-rchips{display:flex;gap:7px;flex-wrap:wrap;padding:1px 0 5px;}
.tk-rmore-menu{display:flex;gap:7px;flex-wrap:wrap;padding:6px 0 4px;}
.tk-rchip.tk-rmore{font-weight:700;}
.tk-rchip{flex:0 0 auto;background:var(--btn);border:1px solid var(--line2);border-radius:999px;
  padding:8px 14px;font:700 13px/1 system-ui;color:var(--muted2);cursor:pointer;white-space:nowrap;}
.tk-rchip.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);}
.tk-rchips-note{font-size:11.5px;margin:4px 0 2px;}
/* V928, HIS ASK: "the urgent and flag button should be similar to this in
   mobile view also.. and reduce the padding pls".

   TWO THINGS, and the first one was a comment telling a lie. The note on the
   Repeat row has said since V912 that "on a phone the two words go and the
   marks stay -- the stylesheet does that". No such rule was ever written, so
   Repeat chips, "Urgent" + switch and "Flag" + switch all competed for 390px
   and wrapped onto three lines. The rule exists now.

   Then the padding: 8x14 on a chip is comfortable on a laptop and is most of
   why the row needed three lines on a phone. 6x12 holds the 44px touch target
   (12px line-height + 12 + 12 = 36 on the chip, and the chips are inside a row
   with its own spacing) while giving back about a chip's width per line. */
@media (max-width:520px){
  .tk-rrow{gap:8px;}
  .tk-rchip{padding:6px 12px;}
  .tk-rmore-menu{gap:6px;}
  .tk-inrow{gap:6px;}
  .tk-inrow .tl{display:none;}
}
/* ---------- V912: steps, the list and the open step's pane -------------- */
/* minmax(0,1fr) and not 1fr. A grid item's min-width is auto, so a column holding
   a long step title refuses to shrink and pushes the pane off the side -- the
   same defect measured on Score Keeper's Marriage row this release. */
.tk-sgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:11px;}
@media (min-width:860px){
  .tk-sgrid.split{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start;}
}
.tk-spane{background:var(--btn);border:1px solid var(--line2);border-radius:11px;padding:11px 12px;min-width:0;}
.tk-spane-hd{display:flex;align-items:center;gap:8px;margin-bottom:9px;}
.tk-spane-hd b{font-size:13.5px;font-weight:800;color:var(--text);flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tk-spane-x{background:transparent;border:0;color:var(--muted2);font-size:17px;line-height:1;
  cursor:pointer;padding:2px 5px;border-radius:6px;flex:0 0 auto;}
.tk-spane .tk-rlab{margin:9px 0 4px;}
/* The chips that say, on the row itself, what the pane holds -- so a closed step
   still shows its date and its urgency without being opened to find out. */
.tk-schips{display:inline-flex;gap:5px;align-items:center;flex:0 0 auto;}
.tk-schip{font:700 11px/1 system-ui;border-radius:999px;padding:4px 7px;background:var(--btn);
  border:1px solid var(--line2);color:var(--muted2);white-space:nowrap;}
.tk-schip.late{background:#7a1420;border-color:#7a1420;color:#fff;}
.tk-schip.urg{background:#7a1420;border-color:#7a1420;color:#fff;}
/* The open step is marked on the LIST too: a pane with nothing pointing at it is
   a pane you have to guess the owner of. */
.tk-subrow.open{background:var(--btn);border-radius:9px;box-shadow:inset 3px 0 0 var(--tg);}
/* V912: a step under a step. Indented by its own rule rather than an inline
   style, so the depth is readable in the stylesheet and not only in the JS. */
.tk-subrow.kid{margin-left:22px;}
.tk-subrow.kid .grip{visibility:hidden;}
/* V912 --- HOW A STEP ROW WRAPS, now that it carries chips as well as a title
   and two buttons, inside a column that is half the editor while the pane is
   open. MEASURED at 346px: the title took its 200px basis, the chips and the
   buttons would not fit beside it, and everything after the title fell to a
   second line -- including the two buttons, which then read as belonging to
   nothing. So the wrap is STATED rather than left to chance: the title shrinks
   (min-width 0, not 150px, which is what pinned it), the buttons stay on the
   title's line because the chips are ordered after them and given a full row of
   their own, and that row lines up under the title rather than under the box. */
.tk-editor .tk-subrow input[type=text]{flex:1 1 90px;min-width:0;}
/* NOT margin-left:auto. On a WRAPPING flex line an auto margin claims all the
   free space, so the buttons demanded a line of their own and got one -- which
   is the two-buttons-under-nothing the first render showed. The title's own
   flex-grow pushes them right, and they stay on the line. */
.tk-subrow .tk-sacts{flex:0 0 auto;}
.tk-subrow .tk-schips{order:9;flex:1 0 100%;padding-left:27px;}
.tk-subrow .tk-schips:empty{display:none;}
/* HIS ASK: "if a sub task is already created as task then remove arrow its own
   task.. just show Its own task and clickable". It is a link and looks like one:
   a promoted step opens its task. */
.tk-ownlink{background:transparent;border:0;color:var(--tg);font:700 12px/1 system-ui;
  cursor:pointer;padding:4px 6px;border-radius:6px;text-decoration:underline;white-space:nowrap;}
.tk-sopen{background:transparent;border:1px solid var(--line2);border-radius:7px;color:var(--muted2);
  cursor:pointer;padding:4px 8px;font:700 12px/1 system-ui;flex:0 0 auto;}
.tk-sopen.on{background:var(--tg);border-color:var(--tg);color:var(--tg-ink);}
/* V739: Ends as a segmented control (drives the hidden #e-endkind select). */
.tk-eseg{display:inline-flex;background:var(--btn);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap;}
.tk-eseg button{border:0;background:transparent;color:var(--muted2);font:700 12.5px/1 system-ui;padding:7px 12px;border-radius:8px;cursor:pointer;}
.tk-eseg button.on{background:var(--accent);color:var(--accent-fg);}

/*  ====================================== V1068 -- SORTING AND MULTI-SELECT
    V1061 #10 and #11. The list was permanently in due-date order with no
    control anywhere, and every action was one task at a time.

    THE BULK STRIP IS NOT DRAWN UNTIL SOMETHING IS PICKED, which is why it is a
    separate row rather than three greyed buttons: a row of controls that do
    nothing is a row people read once and learn to ignore. */
.tk-sortbar{display:flex;gap:9px;align-items:center;margin:0 0 9px;flex-wrap:wrap}
.tk-sortlbl{font-size:12.5px;color:var(--muted2)}
/*  `--btn`, NOT `--bg2`. This file's own inputs use `--btn` and `--line2`, and
    `--bg2` is not declared on this page -- a custom property with no fallback
    that the page never declares is DROPPED, not defaulted, and it then measures
    green because the element inherited something that happened to work. That is
    V578's own check and it caught this the day it was written. */
/*  `--fld-fs`, NOT A LITERAL. A <select> is a field, and iOS zooms the whole
    page when you tap one under 16px -- V919's ratchet is that no stylesheet
    sets a field size without going through the site's switch, and it caught
    this one from inside the release zip. 13px was written here by habit. */
.tk-sortbar select{font-size:var(--fld-fs,15px);padding:6px 9px;border-radius:9px;
  border:1px solid var(--line2);background:var(--btn);color:var(--text);
  font-family:inherit}
.tk-bulk{display:flex;gap:9px;align-items:center;margin:0 0 10px;flex-wrap:wrap;
  padding:8px 10px;border:1px solid var(--line);border-radius:10px;
  background:color-mix(in srgb, var(--accent) 7%, transparent)}
.tk-bulk[hidden]{display:none}
.tk-all{display:flex;gap:7px;align-items:center;font-size:12.5px}
.tk-nsel{font-size:12.5px;color:var(--muted2)}
/*  THE CHECKBOX IS INSIDE THE CARD and only while picking, so a list nobody is
    selecting in looks exactly as it did. 22px of tap target, his phone-first
    rule, and it sits before the status circle so the two never overlap. */
.tk-pick{width:20px;height:20px;flex:0 0 auto;margin-right:2px;accent-color:var(--accent)}
.tk-card.picked{outline:2px solid var(--accent);outline-offset:-2px}

/*  V1068 (V1061 #19) -- THE UNFINISHED NEW TASK, as a card of its own.
    It was saved, shown nowhere, and surfaced only when you started the next
    task -- where the first character you typed overwrote its title. */
.tk-card.tk-draftcard{border-style:dashed}
.tk-card.tk-draftcard .tk-tt{color:var(--muted2)}
