/* Focus: the dial first, one sentence of intent, and a quiet record beside it.
   Each kind of block wears one colour from the colour study, as on the home page. */
.screen--focus {width:100%!important;max-width:none;}
.fc-page {--pigment:#2e8b57;--ink-pigment:color-mix(in srgb,var(--pigment) 78%,var(--ink));width:min(1180px,100%);margin:0 auto;padding:96px clamp(18px,4vw,48px) 60px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,5vw,64px);align-items:start;}
.fc-page[data-mode=short] {--pigment:#2a7cc7;}
.fc-page[data-mode=long] {--pigment:#1a4ca0;}

/* ---- the stage ---- */
.fc-stage {display:flex;flex-direction:column;align-items:center;min-width:0;}
.fc-head {display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:20px;width:100%;}
.fc-title {font-family:var(--font-serif);font-weight:400;font-size:34px;line-height:1;}
.fc-modes {grid-column:1/-1;grid-row:2;justify-self:center;display:inline-flex;gap:2px;padding:4px;border-radius:999px;border:1px solid var(--line-soft);background:color-mix(in srgb,var(--ink) 4%,transparent);}
.fc-modes button {display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:13.5px;font-weight:500;line-height:1;color:var(--ink-3);white-space:nowrap;transition:background-color 160ms ease,color 160ms ease,box-shadow 160ms ease;}
.fc-modes button:hover {color:var(--ink);}
.fc-modes small {display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 5px;border-radius:999px;font-size:11px;font-weight:600;line-height:1;color:var(--ink-3);background:color-mix(in srgb,var(--ink) 6%,transparent);font-variant-numeric:tabular-nums;transition:background-color 160ms ease,color 160ms ease;}
.fc-modes [aria-pressed=true] {background:var(--bg-raised);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgb(20 15 5 / .10),0 0 0 1px var(--line-soft);}
.fc-modes [aria-pressed=true] small {color:#fff;background:var(--pigment);}
html:not([data-theme='gouache']) .fc-modes [aria-pressed=true] {background:color-mix(in srgb,var(--ink) 12%,transparent);box-shadow:none;}
.fc-icon {display:inline-grid;place-items:center;justify-self:end;width:42px;height:42px;border-radius:50%;color:var(--ink-2);transition:background-color 140ms ease,color 140ms ease;}
.fc-icon:hover {background:color-mix(in srgb,var(--ink) 6%,transparent);}

.fc-intention {display:flex;flex-direction:column;align-items:center;gap:2px;width:min(100%,420px);margin:26px 0 6px;text-align:center;}
.fc-intention__label {font-family:var(--font-script);font-size:21px;color:var(--world-accent,var(--cta));}
.fc-intention input {width:100%;min-height:46px;padding:0 6px;border:0;border-radius:0;background:linear-gradient(var(--line),var(--line)) bottom center/56px 1px no-repeat;font-family:var(--font-serif);font-size:22px;text-align:center;color:var(--ink);transition:background-size 260ms var(--ease-out);}
.fc-intention input::placeholder {color:var(--ink-3);opacity:.75;font-style:italic;font-size:19px;}
.fc-intention input:focus {outline:none;background-image:linear-gradient(var(--pigment),var(--pigment));background-size:100% 1.5px;}
.fc-intention.is-set input:not(:focus) {background-size:100% 1px;}
.fc-page[data-running=true] .fc-intention {visibility:hidden;}

.fc-dial {position:relative;width:min(360px,44vh,80vw);aspect-ratio:1;margin:8px 0 4px;}
.fc-dial svg {width:100%;height:100%;transform:rotate(-90deg);overflow:visible;}
.fc-ticks line {stroke:var(--line);stroke-width:1;}
.fc-ticks line.is-hour {stroke:var(--line-strong);stroke-width:1.4;}
.fc-track {fill:none;stroke:color-mix(in srgb,var(--pigment) 12%,var(--line-soft));stroke-width:9;}
.fc-progress {fill:none;stroke:var(--pigment);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 400ms linear,stroke 400ms ease,opacity 200ms ease;}
.fc-progress.is-empty {opacity:0;}
.fc-dial__center {position:absolute;inset:14%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.fc-dial__intent {max-width:100%;min-height:1.3em;font-family:var(--font-serif);font-style:italic;font-size:18px;line-height:1.3;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fc-digits {font-family:var(--font-serif);font-weight:400;font-size:clamp(64px,9vh,92px);line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;}
.fc-status {margin-top:8px;font-size:12.5px;color:var(--ink-3);min-height:1.4em;}
.fc-page[data-running=true] .fc-status {color:var(--ink-pigment);}

.fc-rounds {display:flex;align-items:center;gap:7px;min-height:12px;margin:8px 0 18px;}
.fc-rounds span {width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--ink) 14%,transparent);transition:background-color 200ms ease,width 200ms var(--ease-out);}
.fc-rounds span.is-done {background:var(--pigment);border-color:var(--pigment);}
.fc-rounds span.is-now {width:20px;border-radius:999px;background:color-mix(in srgb,var(--pigment) 45%,transparent);}

.fc-controls {display:flex;align-items:center;gap:22px;}
.fc-main {min-width:150px;min-height:54px;padding:0 34px;border-radius:999px;background:var(--pigment);color:#fff;font-size:16px;font-weight:600;letter-spacing:.01em;box-shadow:0 8px 20px -10px color-mix(in srgb,var(--pigment) 80%,transparent);transition:filter 140ms ease,transform 140ms ease;}
.fc-main:hover {filter:brightness(1.08);}
.fc-main:active {transform:scale(.98);}
.fc-icon--labelled {width:auto;height:auto;display:inline-flex;flex-direction:column;gap:3px;padding:6px 8px;border-radius:12px;font-size:10.5px;color:var(--ink-3);}
.fc-icon--labelled svg {color:var(--ink-2);}
#skipBtn svg {transform:none;}

.fc-options {display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:10px 16px;margin-top:28px;}
.fc-option {display:contents;}
.fc-option[hidden] {display:none;}
.fc-option__label {font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:right;}
.fc-chips {display:flex;flex-wrap:wrap;gap:6px;}
.fc-chips button {display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line-soft);font-size:12.5px;line-height:1;color:var(--ink-2);transition:border-color 140ms ease,background-color 140ms ease,color 140ms ease;}
.fc-chips button:hover {border-color:var(--line-strong);color:var(--ink);}
.fc-chips [aria-pressed=true] {border-color:var(--pigment);background:color-mix(in srgb,var(--pigment) 12%,transparent);color:var(--ink);font-weight:600;}
.fc-deep {margin-top:18px;min-height:36px;font-size:12.5px;color:var(--ink-3);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px;}
.fc-deep:hover {color:var(--ink);}

/* ---- the record ---- */
.fc-panel {position:sticky;top:96px;padding:22px;border:1px solid var(--line-soft);border-radius:10px;background:color-mix(in srgb,var(--bg-raised) 65%,transparent);}
.fc-panel__title {font-family:var(--font-serif);font-weight:400;font-size:26px;}
.fc-panel__label {font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;}
.fc-numbers {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 18px;}
.fc-numbers p {display:flex;flex-direction:column;}
.fc-numbers strong {font-family:var(--font-serif);font-weight:400;font-size:34px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;}
.fc-numbers span {font-size:11px;color:var(--ink-3);margin-top:4px;line-height:1.3;}
.fc-log {list-style:none;padding:0;margin:0 0 20px;max-height:220px;overflow:auto;border-top:1px solid var(--line-soft);}
.fc-log li {display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13px;}
.fc-log__time,.fc-log__minutes {font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.fc-log__what {color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
li.fc-log__empty {display:block;color:var(--ink-3);font-size:13px;}
.fc-bars {display:flex;align-items:flex-end;gap:4px;height:64px;}
.fc-bar {flex:1;height:var(--h);min-height:3px;border-radius:2px 2px 1px 1px;background:color-mix(in srgb,#2e8b57 55%,var(--line-soft));}
.fc-bar.is-today {background:#2e8b57;}
.fc-history__foot {display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:10.5px;color:var(--ink-3);}
.fc-note {margin-top:18px;font-size:11.5px;color:var(--ink-3);}

/* Deep focus: the dial alone. */
#app.focus-deep .top-bar,#app.focus-deep .bottom-nav,#app.focus-deep .meadow-footer,#app.focus-deep .fc-panel,#app.focus-deep .fc-head,#app.focus-deep .fc-options {display:none!important;}
#app.focus-deep .fc-page {grid-template-columns:1fr;min-height:100dvh;align-content:center;padding-top:24px;}
#app.focus-deep .fc-dial {width:min(460px,62vh,86vw);}
#app.focus-deep .fc-digits {font-size:clamp(76px,12vh,120px);}

@media(max-width:960px){
 .fc-page {grid-template-columns:1fr;padding-top:88px;padding-bottom:120px;}
 .fc-panel {position:static;}
}
@media(max-width:600px){
 .fc-title {font-size:28px;}
 .fc-modes {justify-self:stretch;}
 .fc-modes button {flex:1;gap:6px;padding:0 6px;font-size:12.5px;}
 .fc-intention {margin-top:16px;}
 .fc-intention input {font-size:19px;}
 .fc-dial {width:min(300px,78vw);}
 .fc-digits {font-size:62px;}
 .fc-options {grid-template-columns:minmax(0,1fr);gap:8px;}
 .fc-option__label {text-align:center;margin-top:6px;}
 .fc-chips {justify-content:center;}
}
html:lang(th) .fc-option__label,html:lang(th) .fc-panel__label {letter-spacing:0;text-transform:none;}
@media(prefers-reduced-motion:reduce){.fc-progress,.fc-main,.fc-modes button,.fc-intention input,.fc-rounds span{transition:none;}}