/* Deadline and author-aside components shared by lessons and the shell. */
.deadline { display:flex; align-items:center; gap:4px; max-width:280px; }
.deadline-copy { display:flex; flex-direction:column; align-items:flex-end; min-width:0; }
.deadline [data-countdown] { min-width:0; font:600 23px/1.15 var(--display); font-variant-numeric:tabular-nums; letter-spacing:-.3px; }
.deadline [data-countdown-label] { font-size:10px; line-height:1.4; text-align:right; }
.deadline-reminder { font:600 11px/1.4 var(--display); color:var(--green-dark); text-align:right; text-underline-offset:3px; }
.deadline[data-countdown-hidden=true] [data-countdown-label],.deadline[data-submission-state=closed] [data-countdown-label] { max-width:210px; font-size:12px; }
.deadline[data-submission-state=soon] .deadline-reminder { color:#775019; }
.deadline[data-submission-state=final] .deadline-reminder { color:#984227; }
.deadline[data-submission-state=closed] .deadline-reminder { color:var(--muted); }
#countdown-toggle { width:40px; height:40px; flex-shrink:0; border-radius:7px; }
#countdown-toggle .eye-slash { display:block; opacity:0; transition:opacity 140ms ease; }
#countdown-toggle[aria-expanded=false] .eye-slash { opacity:1; }
.submission-banner { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; column-gap:24px; row-gap:20px; padding:24px; border-radius:16px; background:#f7f5ed; box-shadow:0 0 0 1px #332b160c,0 2px 4px #332b1605; }
.submission-banner-title { font:600 16px/1.4 var(--display); text-wrap:balance; }
.submission-countdown { display:block; margin:8px 0 2px; font:600 clamp(36px,4.7vw,64px)/1.1 var(--display); font-variant-numeric:tabular-nums; letter-spacing:-1.8px; }
.submission-banner [data-countdown-label] { font-size:12px; color:#655c48; }
.submission-banner-action { min-width:0; }
.submission-button { display:flex; justify-content:center; align-items:center; gap:12px; min-height:48px; width:100%; padding:12px 18px; border:0; border-radius:8px; background:#263d29; color:#fff; font:600 15px/1.4 var(--display); transition:transform 140ms ease; }
.submission-button:not(:disabled):hover { background:#1c2f1f; text-decoration:none; }
.submission-button:not(:disabled):active { transform:scale(.98); }
.submission-button:disabled { cursor:not-allowed; background:#dedbce; color:#5f5a4c; }
.submission-banner-action p { margin-top:8px; font-size:11px; line-height:1.6; color:#655c48; text-wrap:pretty; }
.submission-banner .submission-banner-tip { grid-column:1 / -1; margin:0; padding-top:14px; border-top:1px solid #332b1614; font-size:13px; line-height:1.6; text-wrap:pretty; }
.submission-banner[data-submission-state=soon] { background:#fcf3e2; }
.submission-banner[data-submission-state=final] { background:#fbeee8; }
.submission-banner[data-submission-state=closed] { background:#f0f1ed; }
.submission-banner[data-submission-state=closed] .submission-banner-title { margin-bottom:6px; }
.author-quote { display:flex; align-items:flex-start; gap:14px; margin:24px 0; padding:18px 20px; background:#faf5f7; border-radius:12px; }
.author-quote>div { min-width:0; }
.author-quote blockquote { margin:0; }
.author-quote blockquote p { margin:0; color:#51454b; font:400 17px/1.7 var(--heading); text-wrap:pretty; }
.author-quote figcaption { margin-top:8px; font:500 11px/1.4 var(--body); color:#75616b; }
.lesson>.author-quote { margin-block:0; }
.lesson h1,.lesson h2,.lesson h3 { text-wrap:balance; }
.lesson p { text-wrap:pretty; }
#dev-controls { max-height:calc(100dvh - 150px); overflow-y:auto; overscroll-behavior:contain; }
.dev-panel-disclosure>summary { min-height:28px; cursor:pointer; font-weight:500; }
.dev-panel-disclosure[open]>summary { margin-bottom:14px; }
#dev-submission-state { width:100%; margin:8px 0 14px; min-height:40px; padding:8px; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--ink); font-size:12px; }
.submission-state-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:24px; }
.submission-state-preview { display:flex; flex-direction:column; min-width:0; border-radius:14px; padding:16px; box-shadow:0 0 0 1px #23271e12,0 2px 4px #23271e05; background:#fff; }
.submission-state-preview h3 { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:14px; font:600 15px/1.4 var(--display); }
.submission-state-preview h3 span { font:400 10px/1.4 var(--body); color:var(--muted); white-space:nowrap; }
.submission-state-sample { display:flex; flex-direction:column; align-items:flex-start; padding:14px; background:#f7f8f5; border-radius:8px; font-size:11px; line-height:1.6; }
.submission-state-sample + .submission-state-sample { margin-top:8px; flex:1; }
.submission-state-sample .submission-sample-mode { margin-bottom:10px; font-size:10px; color:var(--muted); }
.submission-state-sample strong { font:600 12px/1.5 var(--display); color:var(--green-dark); }
.submission-sample-countdown { font:600 28px/1.3 var(--display); font-variant-numeric:tabular-nums; }
.submission-state-sample[data-submission-state=soon] { background:#fcf3e2; }
.submission-state-sample[data-submission-state=final] { background:#fbeee8; }
.submission-state-preview button { display:flex; justify-content:space-between; gap:12px; width:100%; min-height:44px; margin-top:12px; padding:10px; border:0; border-radius:6px; font-size:12px; background:#eaf0e6; }
.submission-state-preview button:hover { background:#dfe9d9; }
@media(max-width:1100px) { .submission-state-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:720px) {
  .submission-banner { grid-template-columns:minmax(0,1fr); padding:20px; }
  .submission-countdown { font-size:clamp(40px,12vw,64px); }
  .author-quote { gap:12px; padding:16px; }
  .submission-state-gallery { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:650px) {
  .deadline { max-width:198px; gap:0; }
  .deadline [data-countdown] { font-size:22px; }
  .deadline [data-countdown-label] { font-size:9px; max-width:156px; }
  .deadline-reminder { max-width:155px; font-size:10px; }
  .deadline[data-countdown-hidden=true] [data-countdown-label],.deadline[data-submission-state=closed] [data-countdown-label] { font-size:11px; }
  #countdown-toggle { width:34px; }
}
@media(prefers-reduced-motion:reduce) {
  #countdown-toggle .eye-slash,.submission-button { transition:none; }
}
@media(max-width:360px) {
  :root { --header-height:132px; }
  .site-header { grid-template-rows:88px 44px; }
  .tabs { height:44px; }
}