/* Thought of the day (/english/thought-of-the-day/): a tear-off desk calendar
   on the Writing Desk. Uses the section's own tokens (--bg, --bg2, --ink,
   --soft, --acc, --line, --sh) from /english/assets/style.css and adds only
   what a calendar sheet needs. Every class is prefixed td- so nothing here
   restyles the rest of the section.

   Small coloured text uses the section's hues darkened (light theme) or
   lightened (dark theme) until it passes WCAG AA on the paper and on a pressed
   key chip. They follow the Journal's tag colours (green and grey are a shade
   darker here, for the chips), so a tagged word looks the same on both pages.
   The accent is mixed from var(--acc), so a reader's chosen accent still
   shows, but never at a contrast too low to read. */

.td-page{
  --td-acct:color-mix(in srgb,var(--acc) 76%,#000);
  --td-mute:#625B4C;--td-blue:#1F55C4;--td-purple:#6E43A8;--td-green:#11643F;
  --td-bind:var(--ink);--td-hole:var(--bg);--td-ring:#8E877A;
}
html[data-theme=dark] .td-page{
  --td-acct:color-mix(in srgb,var(--acc) 70%,#fff);
  --td-mute:#A39B87;--td-blue:#8FB3EC;--td-purple:#C9A6DC;--td-green:#6CCBB4;
  --td-bind:#2C2820;--td-ring:#9C9586;
}

.td-sr{position:absolute!important;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}

/* the title is short enough to sit beside the eyebrow; keep it on its own line */
.td-page .phead .eyebrow{display:block;width:fit-content}

/* ---------- the window */
.td-win{margin-top:24px}
.td-frame{border:1.5px solid var(--ink);border-radius:6px;background:var(--bg2);box-shadow:4px 4px 0 var(--ink);scroll-margin-top:84px}
.td-bar{display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--bg);padding:4px 6px 4px 14px;min-height:52px;border-radius:4px 4px 0 0;font:700 11.5px "Space Mono",monospace;letter-spacing:.2em}
.td-dot{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none}
html:not([data-theme=dark]) .td-dot{background:#F0742F}
.td-ttl{flex:1;text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-tools{display:none}
.tdjs .td-tools{display:flex;gap:6px;flex:none}
.td-tool{display:inline-flex;align-items:center;gap:8px;font:700 10.5px "Space Mono",monospace;letter-spacing:.14em;text-transform:uppercase;border:1.5px solid var(--bg);border-radius:99px;background:transparent;color:var(--bg);padding:0 15px;min-height:44px;cursor:pointer;transition:background-color .2s,color .2s}
.td-tool:hover{background:var(--bg);color:var(--ink)}
.td-tool:focus-visible{outline-color:var(--bg)}
.td-box-i{width:11px;height:11px;border:1.5px solid currentColor;border-radius:2px;flex:none}
.td-tool[aria-pressed=true] .td-box-i{background:currentColor;box-shadow:inset 0 0 0 2px var(--ink)}
.td-tool[aria-pressed=true]:hover .td-box-i{box-shadow:inset 0 0 0 2px var(--bg)}

/* the desk the pad sits on */
.td-pad{position:relative;overflow:hidden;padding:clamp(18px,3.2vw,40px) clamp(12px,3.4vw,44px) clamp(16px,2.6vw,30px);
  background:radial-gradient(circle at 1.5px 1.5px,var(--line) 1px,transparent 1.7px) 0 0/15px 15px,var(--bg);border-radius:0 0 4px 4px}

/* ---------- the sheet: a page on a tear-off pad, with two more under it */
.td-sheet{position:relative;display:grid;grid-template-columns:minmax(150px,13.5rem) 1fr;max-width:1060px;margin:0 auto 12px;
  border:1.5px solid var(--ink);border-radius:5px;padding-top:24px;
  background:linear-gradient(90deg,var(--line) 55%,transparent 0) 0 24px/9px 1.5px repeat-x,var(--bg2);
  box-shadow:0 6px 0 -3px var(--bg2),0 6px 0 -1.5px var(--ink),0 12px 0 -6px var(--bg2),0 12px 0 -4.5px var(--ink),6px 18px 26px -10px var(--sh);
  transform-origin:50% 0}
/* the binding strip and its two rings */
.td-sheet::before{content:"";position:absolute;left:-1.5px;right:-1.5px;top:-1.5px;height:17px;border-radius:5px 5px 0 0;background:var(--td-bind)}
.td-sheet::after{content:"";position:absolute;top:-12px;left:0;right:0;height:26px;pointer-events:none;
  --ring:radial-gradient(ellipse 6px 12px at 50% 50%,var(--td-hole) 0 48%,var(--td-ring) 54% 90%,transparent 97%);
  background:var(--ring) 22% 0/14px 26px no-repeat,var(--ring) 78% 0/14px 26px no-repeat}
html[data-theme=dark] .td-sheet::before{box-shadow:inset 0 -1px 0 var(--line)}

.td-date{padding:22px 22px 24px;border-right:1.5px dashed var(--line);display:flex;flex-direction:column;gap:10px}
.td-h{margin:0;display:flex;flex-direction:column;gap:4px}
.td-dn{display:block;font:700 clamp(76px,9.4vw,128px)/.86 "Space Mono",monospace;letter-spacing:-.06em;color:var(--ink);text-shadow:var(--emboss);font-variant-numeric:tabular-nums}
.td-mo{display:block;font:700 13px/1.3 "Space Mono",monospace;letter-spacing:.26em;text-transform:uppercase;color:var(--td-acct)}
.td-h:focus{outline:none}
.td-h:focus-visible{outline:3px solid var(--acc);outline-offset:4px}
.td-meta{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:400 12.5px "JetBrains Mono",monospace;color:var(--soft)}
.td-today{font:700 10px/1 "Space Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--td-acct);border:1.5px solid currentColor;border-radius:99px;padding:4px 9px}
.td-no{margin:auto 0 0;font:700 12px "Space Mono",monospace;letter-spacing:.06em;color:var(--ink)}
.td-no span{font-weight:400;color:var(--td-mute)}

.td-body{padding:22px clamp(18px,2.6vw,34px) 20px;min-width:0}
.td-lbl{display:block;margin:0 0 6px;font:700 10.5px/1.4 "Space Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--td-mute)}
.td-none{margin:6px 0 0;font:400 15px/1.7 "JetBrains Mono",monospace;color:var(--soft)}

/* the thought, every word tagged */
.td-parse{margin:0 0 10px;font:500 clamp(19px,2.25vw,29px)/2.2 "JetBrains Mono",monospace;color:var(--ink);text-wrap:pretty}
.tw{white-space:nowrap;border-radius:3px;transition:color .25s,box-shadow .25s}
.tw sup{font:700 .36em "Space Mono",monospace;letter-spacing:.08em;margin-left:2px;vertical-align:1.4em;text-transform:uppercase;line-height:0}
.t-noun,.t-propn{--c:var(--td-acct)}
.t-verb,.t-aux{--c:var(--td-blue)}
.t-adj,.t-num{--c:var(--td-green)}
.t-adv,.t-pron,.t-intj{--c:var(--td-purple)}
.t-det,.t-prep,.t-conj,.t-part{--c:var(--td-mute)}
.tw sup{color:var(--c)}
.td-plain .tw sup{visibility:hidden}
/* picking a part of speech in the key marks those words and greys the rest (still AA) */
.td-hl .tw{color:var(--td-mute)}
.td-hl .tw.on{color:var(--ink);box-shadow:inset 0 -.36em 0 color-mix(in srgb,var(--c) 24%,transparent)}

.td-legend{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.td-chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 13px;border:1.5px solid var(--line);border-radius:99px;background:transparent;
  font:700 11px "Space Mono",monospace;letter-spacing:.06em;color:var(--c);transition:background-color .2s,border-color .2s}
.td-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
button.td-chip{cursor:pointer}
button.td-chip:hover{border-color:var(--c)}
button.td-chip[aria-pressed=true]{border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,var(--bg2))}

/* word to learn + the day's question */
.td-grid{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;border-top:1.5px dashed var(--line)}
.td-box{padding:20px clamp(18px,2.6vw,34px) 22px;min-width:0}
.td-qbox{border-left:1.5px dashed var(--line);background:color-mix(in srgb,var(--ink) 3%,transparent)}
.td-wl{margin:2px 0 8px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.td-w{display:inline-block;border:1.5px solid var(--ink);border-radius:3px;padding:1px 10px;font:700 clamp(18px,1.9vw,23px) "Space Mono",monospace;color:var(--ink);background:var(--bg);box-shadow:2px 2px 0 var(--ink)}
.td-pos{font:italic 400 13px "JetBrains Mono",monospace;color:var(--td-mute)}
.td-def{margin:0;font:400 15px/1.65 "JetBrains Mono",monospace;color:var(--ink)}
.td-ex{margin:8px 0 0;font:italic 400 14px/1.6 "JetBrains Mono",monospace;color:var(--soft);padding-left:12px;border-left:2px solid var(--td-acct)}
.td-dict{margin:6px 0 0}
.td-dict a{display:inline-flex;align-items:center;min-height:44px;font:700 13px "JetBrains Mono",monospace;color:var(--td-acct);text-decoration:underline;text-underline-offset:3px}
.td-dict a:hover{text-decoration-thickness:2px}
.td-prompt{margin:2px 0 16px;font:700 clamp(18px,1.95vw,24px)/1.42 "Space Mono",monospace;color:var(--ink);text-wrap:balance}
.td-go{margin:0}
.td-go .btn{display:inline-flex;align-items:center;min-height:44px;text-align:left;line-height:1.3}

/* ---------- previous / today / next */
.td-steps{display:flex;justify-content:space-between;align-items:center;gap:10px;max-width:1060px;margin:22px auto 0}
.td-step{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;border:1.5px solid var(--ink);border-radius:4px;background:var(--bg2);color:var(--ink);
  font:700 12px "Space Mono",monospace;letter-spacing:.04em;box-shadow:3px 3px 0 var(--sh);transition:transform .14s,box-shadow .14s}
.td-step:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--acc)}
.td-step:active{transform:none;box-shadow:1px 1px 0 var(--acc)}
.td-step[hidden]{display:none}
.td-sl{font-weight:400;color:var(--soft)}
.td-back{background:var(--ink);color:var(--bg)}
.td-back .td-sl{color:inherit}

/* ---------- the tear: the old sheet lifts off the pad (JS adds it; motion only) */
.td-ghost{position:absolute;z-index:3;margin:0;pointer-events:none;clip-path:inset(25px -80px -80px -80px);transform-origin:0 25px;
  box-shadow:0 22px 34px -14px var(--sh);animation:td-tear .72s cubic-bezier(.5,0,.35,1) forwards}
.td-ghost::before,.td-ghost::after{display:none}
@keyframes td-tear{
  0%{transform:none;opacity:1}
  22%{transform:translateY(-3px) rotate(-1.2deg);opacity:1}
  72%{transform:translate(-3%,-64px) rotate(-8deg);opacity:1}
  100%{transform:translate(-7%,-130px) rotate(-13deg);opacity:0}
}
.td-sheet.td-drop{animation:td-drop .42s cubic-bezier(.2,.8,.2,1)}
@keyframes td-drop{from{opacity:0;transform:translateY(-12px) rotateX(8deg)}to{opacity:1;transform:none}}

/* ---------- how to use it */
.td-how .st{font-size:1rem}
.td-how .sd a,.td-page .faq .a a,.td-arch-lead a{color:var(--td-acct);text-decoration:underline;text-underline-offset:2px}
.td-page .faq .a p{margin:0}

/* ---------- the archive: twelve months, all in the HTML */
.td-arch-lead{margin:0 0 16px;max-width:70ch;color:var(--soft);font-size:.92rem;line-height:1.7}
.td-months{display:flex;flex-direction:column;gap:9px;max-width:1060px}
.td-mon{border:1.5px solid var(--ink);border-radius:5px;background:var(--bg2);box-shadow:3px 3px 0 var(--sh)}
.td-mon>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:54px;padding:6px 16px;border-radius:4px}
.td-mon>summary::-webkit-details-marker{display:none}
.td-mon>summary::after{content:"+";margin-left:8px;font:700 17px "Space Mono",monospace;color:var(--td-acct);width:1ch;text-align:center}
.td-mon[open]>summary::after{content:"–"}
.td-mon>summary:hover .td-mn{color:var(--td-acct)}
.td-mn{font:700 1.02rem "Space Mono",monospace;letter-spacing:-.01em;color:var(--ink);transition:color .2s}
.td-mc{margin-left:auto;font:400 12px "JetBrains Mono",monospace;color:var(--td-mute)}
.td-list{list-style:none;margin:0;padding:0 16px 10px;border-top:1.5px dashed var(--line)}
.td-list li{display:grid;grid-template-columns:8.2rem 1fr minmax(9rem,13rem);gap:2px 16px;align-items:baseline;padding:4px 8px;margin:0 -8px;border-bottom:1px dashed var(--line);scroll-margin-top:96px;border-radius:3px}
.td-list li:last-child{border-bottom:0}
.td-ad{display:inline-flex;align-items:center;white-space:nowrap;min-height:44px;font:700 12.5px "Space Mono",monospace;color:var(--td-acct);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .2s}
.td-ad:hover{text-decoration-color:currentColor}
.td-at{font:400 14px/1.6 "JetBrains Mono",monospace;color:var(--ink);padding:10px 0}
.td-aw{font:400 12px/1.5 "JetBrains Mono",monospace;color:var(--td-mute);padding:10px 0}
.td-aw b{color:var(--ink);font-weight:700}
.td-aw i{font-style:italic}
.td-list li.td-now{background:color-mix(in srgb,var(--acc) 9%,transparent);box-shadow:inset 3px 0 0 var(--td-acct)}
.td-list li.td-sel{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.td-list li.td-now .td-ad::after{content:"today";margin-left:8px;font:700 9.5px/1 "Space Mono",monospace;letter-spacing:.14em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:99px;padding:3px 6px}

/* ---------- widths */
@media (max-width:820px){
  .td-sheet{grid-template-columns:1fr}
  .td-date{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:6px 16px;border-right:0;border-bottom:1.5px dashed var(--line);padding:18px 18px 16px}
  .td-h{flex-direction:row;align-items:baseline;gap:12px}
  .td-dn{font-size:clamp(64px,17vw,92px)}
  .td-meta{margin-bottom:6px}
  .td-no{margin:0 0 6px auto}
  .td-grid{grid-template-columns:1fr}
  .td-qbox{border-left:0;border-top:1.5px dashed var(--line)}
  .td-list li{grid-template-columns:auto 1fr;padding-bottom:10px}
  .td-at{grid-column:1/-1;grid-row:2;padding:0}
  .td-aw{grid-column:2;grid-row:1;text-align:right;padding:0}
}
@media (max-width:700px){
  .td-nav{gap:14px}
  .td-nav .nav-r{min-width:0;overflow-x:auto;scrollbar-width:none;padding:4px 2px}
  .td-nav .nav-r::-webkit-scrollbar{display:none}
  .td-nav .nav-r a,.td-nav .nav-r .status,.td-nav .nav-r .chip{flex:none}
}
@media (max-width:560px){
  .tdjs .td-ttl{display:none}
  .td-tools{margin-left:auto}
  .td-sl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .td-back .td-sl{position:static;width:auto;height:auto;clip-path:none}
  .td-step{padding:0 13px}
  .td-parse{line-height:2.25}
  .td-mon>summary{padding:6px 12px}
  .td-legend{gap:5px}
  .td-chip{padding:0 10px;gap:6px;letter-spacing:.02em}
  .td-list{padding:0 12px 8px}
}
@media (max-width:380px){
  .td-tool{padding:0 11px;letter-spacing:.08em}
  .td-date{padding:16px 14px 14px}
  .td-body,.td-box{padding-left:14px;padding-right:14px}
}

@media (prefers-reduced-motion:reduce){
  .td-ghost{display:none}
  .td-sheet.td-drop{animation:none}
  .tw,.td-step,.td-chip,.td-tool{transition:none}
}
@media print{
  .td-bar,.td-steps,#how,#faq .relstrip{display:none!important}
  .td-frame{box-shadow:none;border:0}
  .td-pad{background:none;padding:0}
  .td-sheet{box-shadow:none}
  .td-mon{box-shadow:none;break-inside:avoid-page}
  .td-mon>.td-list{display:block}
}