/* Study Date Room. Tokens only, so dark mode works. */
.tool.st { gap: 16px; }
.tool .st-preview { margin-top: -4px; }

.tool .st-desks { display: grid; grid-template-columns: 1fr; gap: 8px; }
.tool .st-desks.is-two { grid-template-columns: 1fr 1fr; }
.tool .st-desk { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border-radius: 20px; background: var(--surface); }
.tool .st-desk.is-waiting { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(var(--ink) / .14); }
.tool .st-avatar { flex: none; width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; font-size: 15px; font-weight: 900; color: #fff; background: var(--ramp); }
.tool .st-desk.is-waiting .st-avatar { background: rgb(var(--ink) / .12); color: rgb(var(--ink) / .5); }
.tool .st-desk-text { display: flex; flex-direction: column; min-width: 0; }
.tool .st-desk-text b { font-size: 15px; line-height: 20px; font-weight: 850; color: rgb(var(--ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool .st-desk-text span { font-size: 13px; line-height: 18px; font-weight: 650; color: rgb(var(--ink) / .55); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tool .st-desk input.st-inline { min-height: 28px; padding: 0; border-radius: 0; box-shadow: none; background: transparent; font-size: 16px; font-weight: 850; }
.tool .st-desk input.st-inline-sub { font-size: 16px; font-weight: 650; color: rgb(var(--ink) / .6); }
.tool .st-desk input.st-inline:focus-visible { box-shadow: inset 0 -2px 0 rgb(var(--accent)); }

.tool .st-clock { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 4px; }
.tool .st-clock .ck-ring-time { font-size: 52px; line-height: 56px; }
.tool .st-phase { text-align: center; font-size: 15px; line-height: 22px; font-weight: 700; color: rgb(var(--ink) / .62); min-height: 22px; max-width: 320px; }
.tool[data-phase="break"] .ck-ring-fg { stroke: #2FB673; }
.tool[data-phase="wait"] .ck-ring-fg { stroke: rgb(var(--ink) / .25); }

/* The whole session as one bar: focus blocks and break gaps fill up as time passes */
.tool .st-track { display: flex; gap: 4px; height: 10px; }
.tool .st-seg { position: relative; flex-basis: 0; border-radius: 5px; overflow: hidden; background: rgb(var(--ink) / .14); }
.tool .st-seg.is-now { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgb(var(--accent) / .45); }
.tool .st-track { height: 12px; padding: 0 4px; }
.tool .st-seg::after { content: ''; position: absolute; inset: 0; width: var(--fill, 0%); background: rgb(var(--accent)); border-radius: inherit; transition: width .5s linear; }
.tool .st-seg.is-break::after { background: #2FB673; }

.tool .st-break { display: flex; flex-direction: column; gap: 6px; text-align: left; place-items: initial; min-height: 0; text-wrap: pretty; }
.tool .st-break-eyebrow { font-size: 12px; line-height: 16px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: #1E8A55; }
.tool .st-break-title { font-size: 22px; line-height: 28px; font-weight: 900; color: rgb(var(--ink)); }
.tool .st-break-text { font-size: 17px; line-height: 25px; font-weight: 650; color: rgb(var(--ink) / .8); }
.tool .st-break-cupie { margin-top: 6px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--link); }
.tool .st-next { text-align: center; }
.tool .st-ctl { display: flex; justify-content: center; gap: 8px; }
.tool .st-sound[aria-pressed="false"] { color: rgb(var(--ink) / .45); }

.tool .st-end { display: flex; flex-direction: column; gap: 16px; text-align: center; place-items: initial; text-wrap: pretty; }
.tool .st-end .st-break-eyebrow { color: var(--link); }
.tool .st-end-title { font-size: 24px; line-height: 30px; font-weight: 900; color: rgb(var(--ink)); }
.tool .st-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 8px; }
.tool .st-stats .tool-stat { background: var(--surface-2); padding: 12px 8px; }
.tool .st-stats .tool-stat b { font-size: 20px; line-height: 28px; white-space: nowrap; }

@media (prefers-color-scheme: dark) {
  .tool .st-break-eyebrow { color: #6FE0A6; }
  .tool[data-phase="break"] .ck-ring-fg, .tool .st-seg.is-break::after { stroke: #4FD08E; background: #4FD08E; }
}
@media (max-width: 599px) {
  .tool .st-clock .ck-ring-time { font-size: 46px; line-height: 50px; }
}
@media (prefers-reduced-motion: reduce) { .tool .st-seg::after { transition: none; } }
.tool .st-setup .tool-chips { flex-wrap: nowrap; gap: 6px; }
.tool .st-setup .tool-chips button { flex: 1 1 0; min-width: 0; padding: 0 6px; white-space: nowrap; }
@media (max-width: 599px) { .tool .st-row { grid-template-columns: 1fr; } }

.tool .st-model { margin: 0; }
.tool .st-custom input[type="number"] { font-variant-numeric: tabular-nums; }
.tool .st-locknote { text-align: center; }
.tool .st-again { align-self: center; }
@media (min-width: 600px) { .tool .st-end .tool-actions .btn { flex: 1 1 0; } }

/* Round 2 */
.tool .st-same { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; border-radius: 18px; text-align: left; background: var(--surface); box-shadow: inset 0 0 0 1.5px rgb(var(--accent) / .45); transition: transform .2s var(--ease-out); }
.tool .st-same:active { transform: scale(.98); }
.tool .st-same b { font-size: 16px; font-weight: 900; color: var(--link); }
.tool .st-same span { font-size: 14px; font-weight: 650; color: rgb(var(--ink) / .65); }
.tool .st-breakfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.tool .st-breakfoot .st-break-cupie { margin: 0; flex: 1 1 200px; }
.tool .st-endlinks { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tool .st-weekly { display: inline-flex; align-items: center; text-decoration: none; color: rgb(var(--ink) / .75); }
.tool .st-sound::before { content: ''; width: 8px; height: 8px; border-radius: 4px; margin-right: 8px; display: inline-block; background: rgb(var(--ink) / .25); }
.tool .st-sound[aria-pressed="true"]::before { background: #2FB673; }
.tool .st-desk.is-waiting { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(var(--ink) / .14); }
.tool .st-desk.is-waiting .st-avatar { background: rgb(var(--ink) / .1); color: rgb(var(--ink) / .5); }
@media (prefers-color-scheme: dark) { .tool.st .tool-chips button[aria-pressed="true"] { background: rgb(var(--accent) / .35); color: rgb(var(--ink)); box-shadow: inset 0 0 0 1.5px rgb(var(--accent) / .8); } }
/* Round 3 */
.tool .st-ctl .ck-mini { white-space: nowrap; }
.tool .st-setup .tool-chips button { font-size: 13px; padding: 0 4px; }
.tool .st-desk { position: relative; }
.tool .st-in { min-width: 0; min-height: 34px; padding: 0 12px; font-size: 13px; gap: 4px; display: inline-flex; align-items: center; align-self: flex-start; margin-top: 6px; }
.tool .st-in .tool-icon { width: 16px; height: 16px; }
.tool[data-phase="wait"] .ck-ring-fg { stroke: rgb(var(--accent) / .45); }
/* Round 4 */
.tool .st-inrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tool .st-inrow .st-in { margin-top: 0; }
.tool .st-in[aria-pressed="true"] { color: #1E8A55; box-shadow: inset 0 0 0 1.5px rgb(47 182 115 / .6); }
.tool .st-end .tool-actions .btn { text-decoration: none; }
/* Round 7: timer preview first, private line, one send row under the desks, plain track fill, quieter controls */
.tool .st-pv { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 12px 12px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .06); }
.tool .st-pv-time { font-size: 56px; line-height: 60px; font-weight: 950; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: rgb(var(--ink)); }
.tool .st-pv-sub { font-size: 14px; line-height: 20px; font-weight: 750; color: rgb(var(--ink) / .6); }
.tool .st-model { font-size: 14px; line-height: 20px; font-weight: 650; color: rgb(var(--ink) / .7); }
.tool .st-model b { font-weight: 850; color: rgb(var(--ink)); }
.tool .st-solo { text-align: center; margin-top: -4px; }
.tool .st-at { display: flex; flex-direction: column; gap: 6px; }
.tool .st-at select { width: 100%; }
.tool .st-hostrow { display: flex; flex-direction: column; gap: 8px; }
.tool .st-hostrow:empty { display: none; }
.tool .st-sendrow .st-copy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tool .st-sendrow .st-copy .tool-icon { width: 18px; height: 18px; }
.tool .st-hostline { display: flex; align-items: center; justify-content: center; gap: 4px 12px; flex-wrap: wrap; }
.tool .st-hostline .st-in { margin: 0; min-height: 40px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.tool .st-leave { align-self: center; min-height: 40px; padding: 0 10px; background: none; font-size: 14px; font-weight: 750; color: rgb(var(--ink) / .55); text-decoration: underline; text-underline-offset: 3px; border-radius: 10px; }
.tool .st-leave:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
.tool .st-resend { color: var(--link); }
/* Track: one plain fill, the current segment slightly taller, no outline */
.tool .st-track { align-items: center; height: 14px; }
.tool .st-seg { height: 8px; background: rgb(var(--ink) / .12); }
.tool .st-seg.is-now { height: 14px; border-radius: 7px; box-shadow: none; }
.tool .st-cal .btn { flex: 1 1 0; }
@media (max-width: 599px) { .tool .st-cal { flex-direction: row; } .tool .st-cal .btn { width: auto; min-width: 0; padding-left: 8px; padding-right: 8px; font-size: 14px; } }
@media (prefers-color-scheme: dark) {
  .tool.st .tool-chips button[aria-pressed="true"] { background: rgb(var(--ink)); color: var(--bg); box-shadow: none; }
}
.tool .st-sound[aria-pressed="false"] { color: rgb(var(--ink) / .8); }
@media (max-width: 599px) { .tool .st-focusbtn { display: none; } }
.tool .st-cal-label { margin: -6px 0 -10px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--ink) / .5); }
.tool .st-desk input.st-inline { width: 100%; min-width: 0; font-size: 15px; }
@media (max-width: 599px) { .tool .st-end .tool-actions .btn-primary { font-size: 16px; padding-left: 12px; padding-right: 12px; white-space: nowrap; } }