/* Classroom Timer widget stylesheet.
   Extracted from the tool post in v9 so that the tool page and every preset
   page share one source of truth instead of each carrying a 10KB copy.
   Edit here, not in post_content. Bump the ?ver= on the <link> after changes. */
/* ===== Classroom Timer widget CSS - scoped under .jsct-root ===== */
.jsct-root{
  --jsct-accent:var(--wp--preset--color--primary);
  --jsct-bg:var(--wp--preset--color--surface);
  --jsct-fg:var(--wp--preset--color--contrast);
  --jsct-muted:var(--wp--preset--color--muted);
  --jsct-border:var(--wp--preset--color--border);
  --jsct-track:var(--wp--preset--color--base);
  box-sizing:border-box;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:460px;
  display:block;
}
.jsct-root *, .jsct-root *::before, .jsct-root *::after{box-sizing:inherit;}
@media (prefers-color-scheme:dark){
  .jsct-root{--jsct-bg:var(--wp--preset--color--contrast);--jsct-fg:var(--wp--preset--color--base);--jsct-border:color-mix(in srgb, var(--wp--preset--color--surface) 14%, var(--wp--preset--color--contrast));--jsct-muted:var(--wp--preset--color--border-strong);--jsct-track:color-mix(in srgb, var(--wp--preset--color--surface) 14%, var(--wp--preset--color--contrast));}
}
.jsct-root[data-theme="light"]{--jsct-bg:var(--wp--preset--color--surface);--jsct-fg:var(--wp--preset--color--contrast);--jsct-border:var(--wp--preset--color--border);--jsct-muted:var(--wp--preset--color--muted);--jsct-track:var(--wp--preset--color--base);}
.jsct-root[data-theme="dark"]{--jsct-bg:var(--wp--preset--color--contrast);--jsct-fg:var(--wp--preset--color--base);--jsct-border:color-mix(in srgb, var(--wp--preset--color--surface) 14%, var(--wp--preset--color--contrast));--jsct-muted:var(--wp--preset--color--border-strong);--jsct-track:color-mix(in srgb, var(--wp--preset--color--surface) 14%, var(--wp--preset--color--contrast));}

.jsct-banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--jsct-track);color:var(--jsct-fg);border:1px solid var(--jsct-border);border-radius:12px;padding:10px 14px;margin-bottom:14px;font-size:.85rem;}
.jsct-banner button{border:1px solid var(--jsct-border);background:var(--jsct-bg);color:var(--jsct-fg);border-radius:8px;padding:6px 12px;font-size:.8rem;font-weight:600;cursor:pointer;}
.jsct-banner button.jsct-banner-primary{background:var(--jsct-accent);border-color:var(--jsct-accent);color:var(--wp--preset--color--surface);}

.jsct-card{background:var(--jsct-bg);color:var(--jsct-fg);border:1px solid var(--jsct-border);border-radius:20px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.04);}
.jsct-root[data-embed="1"] .jsct-card{border:none;box-shadow:none;padding:10px;border-radius:0;}

.jsct-modes{display:flex;gap:4px;background:var(--jsct-track);padding:4px;border-radius:12px;margin-bottom:20px;}
.jsct-mode-btn{flex:1;border:none;background:transparent;color:var(--jsct-muted);padding:10px 8px;border-radius:9px;font-size:.85rem;font-weight:600;cursor:pointer;}
.jsct-mode-btn[aria-pressed="true"]{background:var(--jsct-accent);color:var(--wp--preset--color--surface);}

.jsct-main{display:flex;gap:32px;align-items:center;justify-content:center;flex-wrap:wrap;}
@media (max-width:720px){.jsct-main{flex-direction:column;}}

.jsct-dial{position:relative;width:230px;height:230px;flex:0 0 auto;}
.jsct-ring{width:100%;height:100%;transform:rotate(-90deg);}
.jsct-ring-track{fill:none;stroke:var(--jsct-track);stroke-width:10;}
.jsct-ring-progress{fill:none;stroke:var(--jsct-accent);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .2s linear;}
@media (prefers-reduced-motion:reduce){.jsct-ring-progress{transition:none;}}
.jsct-digits-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;padding:0 20px;}
.jsct-phase{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--jsct-muted);font-weight:700;min-height:1em;}
.jsct-digits{font-size:2.6rem;font-variant-numeric:tabular-nums;font-weight:700;line-height:1;}
.jsct-label-display{font-size:.82rem;color:var(--jsct-muted);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:1.2em;}

.jsct-controls{flex:1 1 260px;min-width:240px;display:flex;flex-direction:column;gap:14px;}
.jsct-presets{display:flex;flex-wrap:wrap;gap:8px;}
.jsct-chip{border:1px solid var(--jsct-border);background:transparent;color:var(--jsct-fg);padding:6px 12px;border-radius:999px;font-size:.82rem;cursor:pointer;}
.jsct-chip[aria-pressed="true"]{background:var(--jsct-accent);border-color:var(--jsct-accent);color:var(--wp--preset--color--surface);}
.jsct-label-input{padding:10px 12px;border-radius:10px;border:1px solid var(--jsct-border);background:var(--jsct-bg);color:var(--jsct-fg);font-size:.88rem;width:100%;}
.jsct-buttons{display:flex;gap:10px;}
.jsct-btn{border-radius:10px;border:1px solid var(--jsct-border);background:var(--jsct-bg);color:var(--jsct-fg);padding:11px 18px;font-size:.88rem;font-weight:600;cursor:pointer;}
.jsct-btn-primary{background:var(--jsct-accent);border-color:var(--jsct-accent);color:var(--wp--preset--color--surface);flex:1;}
.jsct-btn-ghost{background:transparent;}
.jsct-tools{display:flex;flex-wrap:wrap;gap:8px;}
.jsct-tools .jsct-btn{padding:8px 12px;font-size:.78rem;}
.jsct-btn[hidden]{display:none;}

.jsct-laps{margin-top:16px;max-height:150px;overflow-y:auto;font-size:.82rem;border-top:1px solid var(--jsct-border);padding-top:10px;}
.jsct-laps table{width:100%;border-collapse:collapse;}
.jsct-laps td{padding:4px 6px;border-bottom:1px solid var(--jsct-border);font-variant-numeric:tabular-nums;}
.jsct-laps td:first-child{color:var(--jsct-muted);}

.jsct-settings{margin-top:18px;padding-top:16px;border-top:1px solid var(--jsct-border);display:flex;flex-direction:column;gap:12px;}
.jsct-settings-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.jsct-settings-row label{font-size:.82rem;color:var(--jsct-muted);min-width:110px;}
.jsct-settings-row select,.jsct-settings-row input[type="number"]{padding:6px 8px;border-radius:8px;border:1px solid var(--jsct-border);background:var(--jsct-bg);color:var(--jsct-fg);font-size:.85rem;}
.jsct-settings-row input[type="number"]{width:64px;}
.jsct-settings-row input[type="range"]{flex:1;min-width:100px;}
.jsct-settings-row input[type="checkbox"]{width:16px;height:16px;}

.jsct-note{font-size:.75rem;color:var(--jsct-muted);margin-top:10px;min-height:1.2em;}
.jsct-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.jsct-root :focus-visible{outline:3px solid var(--jsct-accent);outline-offset:2px;}
.jsct-root [hidden]{display:none!important;}

.jsct-pip-placeholder{border:1px dashed var(--jsct-border);border-radius:14px;color:var(--jsct-muted);font-size:.85rem;padding:24px;text-align:center;width:230px;height:230px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}

/* Tier 3: floating panel - lives in the normal document, position:fixed, remembers a corner */
.jsct-floating{position:fixed;z-index:2147483000;background:var(--wp--preset--color--contrast);color:var(--wp--preset--color--base);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.35);width:240px;overflow:hidden;}
.jsct-floating[data-corner="tl"]{top:16px;left:16px;}
.jsct-floating[data-corner="tr"]{top:16px;right:16px;}
.jsct-floating[data-corner="bl"]{bottom:16px;left:16px;}
.jsct-floating[data-corner="br"]{bottom:16px;right:16px;}
.jsct-floating .jsct-dial{width:200px;height:200px;margin:8px auto 0;}
.jsct-floating .jsct-ring-track{stroke:color-mix(in srgb, var(--wp--preset--color--surface) 14%, var(--wp--preset--color--contrast));}
.jsct-floating .jsct-ring-progress{stroke:var(--wp--preset--color--accent);}
.jsct-floating .jsct-phase{color:var(--wp--preset--color--border-strong);}
.jsct-floating .jsct-label-display{color:var(--wp--preset--color--border-strong);}
.jsct-floating-handle{cursor:grab;touch-action:none;font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--wp--preset--color--border-strong);padding:8px 12px;background:color-mix(in srgb, var(--wp--preset--color--surface) 14%, var(--wp--preset--color--contrast));}
.jsct-floating-handle:active{cursor:grabbing;}
.jsct-pip-bar{display:flex;gap:8px;justify-content:center;padding:10px;}
.jsct-pip-bar button{border:1px solid color-mix(in srgb, var(--wp--preset--color--surface) 20%, var(--wp--preset--color--contrast));background:color-mix(in srgb, var(--wp--preset--color--surface) 14%, var(--wp--preset--color--contrast));color:var(--wp--preset--color--base);border-radius:8px;padding:8px 12px;font-size:.8rem;font-weight:600;cursor:pointer;}

/* Fullscreen presentation mode */
.jsct-root.jsct-fullscreen-active{background:var(--wp--preset--color--contrast);}
.jsct-root.jsct-fullscreen-active .jsct-card{display:flex;align-items:center;justify-content:center;min-height:100vh;border:none;box-shadow:none;background:var(--wp--preset--color--contrast);}
.jsct-root.jsct-fullscreen-active .jsct-modes,
.jsct-root.jsct-fullscreen-active .jsct-controls,
.jsct-root.jsct-fullscreen-active .jsct-settings,
.jsct-root.jsct-fullscreen-active .jsct-laps,
.jsct-root.jsct-fullscreen-active .jsct-note{display:none;}
.jsct-root.jsct-fullscreen-active .jsct-dial{width:60vmin;height:60vmin;}
.jsct-root.jsct-fullscreen-active .jsct-digits{font-size:13vmin;}
.jsct-root.jsct-fullscreen-active .jsct-phase{font-size:2vmin;}
.jsct-root.jsct-fullscreen-active .jsct-label-display{font-size:1.6vmin;max-width:none;}
.jsct-root.jsct-fullscreen-active .jsct-ring-track{stroke:color-mix(in srgb, var(--wp--preset--color--surface) 14%, var(--wp--preset--color--contrast));}
.jsct-root.jsct-fullscreen-active .jsct-ring-progress{stroke:var(--wp--preset--color--accent);}

/* Fullscreen forces a dark card, so the text colours have to come with it.
   Without this the digits inherit the light theme's dark ink and render
   #1A1A1A on a #1A1A1A card - present, correct, and completely invisible. */
.jsct-root.jsct-fullscreen-active,
.jsct-root.jsct-fullscreen-active .jsct-card,
.jsct-root.jsct-fullscreen-active .jsct-digits{color:var(--wp--preset--color--base);}
.jsct-root.jsct-fullscreen-active .jsct-phase,
.jsct-root.jsct-fullscreen-active .jsct-subphase,
.jsct-root.jsct-fullscreen-active .jsct-label-display{color:color-mix(in srgb, var(--wp--preset--color--base) 72%, var(--wp--preset--color--contrast));}
.jsct-root.jsct-fullscreen-active .jsct-rounds .jsct-dot{background:color-mix(in srgb, var(--wp--preset--color--base) 32%, var(--wp--preset--color--contrast));}
.jsct-root.jsct-fullscreen-active .jsct-rounds .jsct-dot.is-done{background:var(--wp--preset--color--accent);}
.jsct-root.jsct-fullscreen-active .jsct-adjust-flash{color:var(--wp--preset--color--accent);}
/* Floor the projected digits so an unusual viewport can never shrink them to
   nothing; the scale control still works upward from here. */
.jsct-root.jsct-fullscreen-active .jsct-digits{font-size:max(2.5rem, calc(13vmin * var(--jsct-fs-scale, 1)));}
.jsct-root.jsct-fullscreen-active .jsct-dial{min-width:240px;min-height:240px;}

/* ===== v6 additions: time adjustment, warning states, rounds, sequence,
   shortcuts overlay, fullscreen bar, attribution. Warning colours are the
   same literals app.js hands to the video-PiP canvas. ===== */
.jsct-subphase{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--wp--preset--color--border-strong);font-weight:600;min-height:1em;}
.jsct-rounds{display:flex;gap:5px;justify-content:center;margin-top:5px;}
.jsct-rounds .jsct-dot{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb, var(--wp--preset--color--surface) 20%, var(--wp--preset--color--contrast));}
.jsct-rounds .jsct-dot.is-done{background:var(--wp--preset--color--accent);}
.jsct-adjust-flash{position:absolute;top:10px;left:0;right:0;text-align:center;font-size:1rem;font-weight:700;color:var(--wp--preset--color--accent);opacity:0;transition:opacity .18s;pointer-events:none;}
.jsct-adjust-flash.is-visible{opacity:1;}
.jsct-custom{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.82rem;}
.jsct-custom label{color:var(--wp--preset--color--border-strong);}
.jsct-custom input[type="number"]{width:84px;padding:7px 9px;border-radius:8px;border:1px solid var(--jsct-border);background:var(--jsct-bg);color:var(--jsct-fg);font-size:.86rem;}
.jsct-custom-unit{color:var(--wp--preset--color--border-strong);}
.jsct-custom .jsct-btn{padding:7px 14px;font-size:.8rem;}
.jsct-custom-hint{flex-basis:100%;color:var(--wp--preset--color--border-strong);font-size:.76rem;min-height:1em;}
.jsct-adjust{display:flex;flex-wrap:wrap;gap:8px;}
.jsct-adjust .jsct-btn{padding:8px 14px;font-size:.82rem;}
.jsct-pomo-panel{display:flex;flex-direction:column;gap:8px;font-size:.84rem;}
.jsct-inline-check,.jsct-inline-num{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.jsct-inline-num input[type="number"]{width:62px;padding:6px 8px;border-radius:8px;border:1px solid var(--jsct-border);background:var(--jsct-bg);color:var(--jsct-fg);}
.jsct-hint-inline{color:var(--wp--preset--color--border-strong);font-size:.75rem;}
.jsct-sequence{display:flex;flex-direction:column;gap:10px;}
.jsct-seq-presets{display:flex;flex-wrap:wrap;gap:6px;}
.jsct-seq-steps{display:flex;flex-direction:column;gap:6px;}
.jsct-seq-step{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:9px;border:1px solid transparent;}
.jsct-seq-step.is-current{border-color:var(--wp--preset--color--accent);background:color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);}
.jsct-seq-num{font-size:.72rem;font-weight:700;color:var(--wp--preset--color--border-strong);min-width:1.2em;}
.jsct-seq-name{flex:1 1 90px;min-width:80px;padding:6px 8px;border-radius:8px;border:1px solid var(--jsct-border);background:var(--jsct-bg);color:var(--jsct-fg);font-size:.82rem;}
.jsct-seq-min{width:62px;padding:6px 8px;border-radius:8px;border:1px solid var(--jsct-border);background:var(--jsct-bg);color:var(--jsct-fg);font-size:.82rem;}
.jsct-seq-unit{font-size:.72rem;color:var(--wp--preset--color--border-strong);}
.jsct-seq-del{border:none;background:transparent;color:var(--wp--preset--color--border-strong);font-size:1.1rem;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px;}
.jsct-seq-del:hover{color:var(--wp--preset--color--primary);}
.jsct-seq-actions{display:flex;gap:8px;flex-wrap:wrap;}
.jsct-laps-wrap{margin-top:16px;}
.jsct-laps-copy{margin-top:8px;}
.jsct-session{margin-top:12px;font-size:.78rem;color:var(--wp--preset--color--border-strong);text-align:center;}
.jsct-hint{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.78rem;color:var(--wp--preset--color--border-strong);}
.jsct-hint button{border:1px solid var(--jsct-border);background:transparent;color:var(--jsct-fg);border-radius:8px;padding:4px 10px;font-size:.75rem;cursor:pointer;}
.jsct-hint kbd,.jsct-overlay kbd{font-family:inherit;font-size:.72rem;border:1px solid var(--jsct-border);border-bottom-width:2px;border-radius:5px;padding:1px 5px;background:var(--jsct-track);}
.jsct-wordmark{margin-top:12px;text-align:center;font-size:.76rem;}
.jsct-wordmark a{color:var(--wp--preset--color--border-strong);text-decoration:none;}
.jsct-wordmark a:hover{color:var(--wp--preset--color--primary);text-decoration:underline;}
.jsct-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:2147483100;padding:20px;}
.jsct-overlay-card{background:var(--jsct-bg);color:var(--jsct-fg);border:1px solid var(--jsct-border);border-radius:16px;padding:22px;max-width:380px;width:100%;max-height:80vh;overflow:auto;}
.jsct-overlay-card h3{margin:0 0 12px;font-size:1rem;}
.jsct-overlay-card table{width:100%;border-collapse:collapse;font-size:.82rem;margin-bottom:14px;}
.jsct-overlay-card td{padding:5px 4px;border-bottom:1px solid var(--jsct-border);}
.jsct-overlay-card td:first-child{white-space:nowrap;width:40%;}
.jsct-fs-bar{display:none;}
.jsct-flood{display:none;}
@keyframes jsct-pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.jsct-root.jsct-pulse .jsct-ring-progress{animation:jsct-pulse 1s ease-in-out infinite;}
@keyframes jsct-flood-fade{0%{opacity:.96;}100%{opacity:0;}}
.jsct-root.jsct-fullscreen-active .jsct-fs-bar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:fixed;bottom:4vmin;left:0;right:0;z-index:6;}
.jsct-root.jsct-fullscreen-active .jsct-fs-bar button{border:1px solid color-mix(in srgb, var(--wp--preset--color--surface) 20%, var(--wp--preset--color--contrast));background:color-mix(in srgb, var(--wp--preset--color--surface) 14%, var(--wp--preset--color--contrast));color:var(--wp--preset--color--base);border-radius:10px;padding:10px 16px;font-size:1rem;font-weight:600;cursor:pointer;}
.jsct-root.jsct-fullscreen-active .jsct-fs-bar button:focus-visible{outline:3px solid var(--wp--preset--color--accent);outline-offset:2px;}
.jsct-root.jsct-fullscreen-active .jsct-laps-wrap,
.jsct-root.jsct-fullscreen-active .jsct-session,
.jsct-root.jsct-fullscreen-active .jsct-hint,
.jsct-root.jsct-fullscreen-active .jsct-wordmark{display:none;}
.jsct-root.jsct-fullscreen-active .jsct-digits{font-size:calc(13vmin * var(--jsct-fs-scale, 1));}
.jsct-root.jsct-fullscreen-active .jsct-subphase{font-size:1.6vmin;}
.jsct-root.jsct-fullscreen-active .jsct-flood.is-on{display:block;position:fixed;inset:0;background:var(--wp--preset--color--primary);z-index:5;animation:jsct-flood-fade 3s ease-out forwards;}
/* The embed box is the thing that earns links, so it is styled to be found
   rather than to blend in: accent edge, its own heading, real padding. */
.jsct-embed-builder{margin:20px 0 24px;padding:22px 24px;border:1px solid var(--jsct-border);
  border-top:4px solid var(--wp--preset--color--primary);border-radius:14px;background:var(--jsct-track);
  box-shadow:0 1px 3px rgba(0,0,0,.05),0 10px 28px rgba(0,0,0,.05);}
.jsct-eb-title{margin:0 0 4px;font-size:1.05rem;font-weight:700;color:var(--jsct-fg);}
.jsct-eb-lede{margin:0 0 14px;font-size:.86rem;color:var(--wp--preset--color--border-strong);}
.jsct-eb-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;font-size:.84rem;}
.jsct-eb-row label{color:var(--wp--preset--color--border-strong);}
.jsct-eb-row input{width:88px;padding:7px 9px;border-radius:8px;border:1px solid var(--jsct-border);background:var(--jsct-bg);color:var(--jsct-fg);font-size:.86rem;}
.jsct-eb-out{width:100%;padding:10px;border-radius:9px;border:1px solid var(--jsct-border);background:var(--jsct-bg);color:var(--jsct-fg);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;resize:vertical;}
.jsct-eb-note{margin:8px 0 0;font-size:.76rem;color:var(--wp--preset--color--border-strong);}
/* The builder sits OUTSIDE #jsct-root, so the --jsct-* custom properties are
   not in scope here. Button colours must come from the theme tokens, or the
   primary button renders white-on-white and disappears. */
.jsct-embed-builder .jsct-btn{flex:0 0 auto;margin-left:auto;border:1px solid var(--wp--preset--color--border-strong);background:transparent;
  color:var(--wp--preset--color--contrast);border-radius:10px;padding:9px 18px;font-size:.86rem;font-weight:600;cursor:pointer;}
.jsct-embed-builder .jsct-btn-primary{background:var(--wp--preset--color--primary);border-color:var(--wp--preset--color--primary);color:var(--wp--preset--color--base);}
.jsct-embed-builder .jsct-btn-primary:hover{filter:brightness(1.08);}
.jsct-embed-builder .jsct-btn:focus-visible{outline:3px solid var(--wp--preset--color--accent);outline-offset:2px;}
/* Chromeless embed stays lean: +/-1 min and the warning state travel with
   it, everything that needs a full page does not. */
.jsct-root[data-embed="1"] .jsct-pomo-panel,
.jsct-root[data-embed="1"] .jsct-sequence,
.jsct-root[data-embed="1"] .jsct-settings,
.jsct-root[data-embed="1"] .jsct-session,
.jsct-root[data-embed="1"] .jsct-hint,
.jsct-root[data-embed="1"] .jsct-laps-copy,
.jsct-root[data-embed="1"] .jsct-modes button[data-mode="sequence"],
.jsct-root[data-embed="1"] .jsct-tools button#jsct-settings-toggle,
.jsct-root[data-embed="1"] .jsct-tools button#jsct-copy-classroom,
.jsct-root[data-embed="1"] .jsct-tools button#jsct-shortcuts-open,
.jsct-root[data-embed="1"] .jsct-adjust button[data-adjust="300000"]{display:none !important;}
.jsct-root[data-embed="1"] .jsct-wordmark{margin-top:8px;}
@media (prefers-reduced-motion:reduce){
  .jsct-adjust-flash{transition:none;}
  .jsct-root.jsct-pulse .jsct-ring-progress{animation:none;}
  .jsct-root.jsct-fullscreen-active .jsct-flood.is-on{display:none;}
}