/* A quiet, tactile pause: warm coffee, a shrinking clock, and a cooling brain. */
.human-strip #break-button.break-control{position:relative;display:flex;align-items:center;gap:9px;min-height:44px;max-width:100%;padding:8px 12px;overflow:hidden;text-align:left;transition:background .35s,border-color .35s,box-shadow .35s}
.break-copy{display:flex;flex-direction:column;gap:4px;min-width:0;position:relative;z-index:1}
.break-label{font-size:11px;line-height:1.3}
.break-caption{font-size:9px;line-height:1.2;color:#a8c9b9;letter-spacing:.2px}
.break-cup{display:block;flex:none;width:24px;height:26px;color:#c5b399;position:relative;z-index:1}
.break-cup svg{display:block;width:100%;height:100%;overflow:visible}
.break-steam{opacity:.4}
.human-strip #break-button.is-breaking{width:100%;min-height:64px;opacity:1;background:#1d3533;border-color:#5b8b79;color:#dbeddf;cursor:default;box-shadow:inset 0 1px #d2efd80d,0 0 24px #77c9ae0c}
.is-breaking .break-cup{color:#e8c492;animation:break-cup-breathe 4s ease-in-out infinite}
.is-breaking .break-steam{animation:break-steam-drift 2.8s ease-out infinite}
.break-clock{width:36px;height:36px;flex:none;position:relative;margin-left:auto;color:#c3e6d2}
.break-clock svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.break-clock circle{fill:none;stroke-width:2}
.break-ring-track{stroke:#416457}.break-ring-value{stroke:#9bdbc0;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(var(--break-progress,0)*100);transition:stroke-dashoffset .25s linear}
.break-seconds{position:absolute;inset:0;display:grid;place-items:center;font:600 11px ui-monospace,monospace;font-variant-numeric:tabular-nums}
.break-progress{position:absolute;bottom:0;left:0;height:3px;width:100%;background:#8dd3b3;transform:scaleX(var(--break-progress,0));transform-origin:left;transition:transform .25s linear}
.human-strip #brain-metric.is-recovering b{color:#a5ddc8;transition:color .4s;text-shadow:0 0 24px #8cd8bd22}
#brain-metric.is-recovering .meter{background:#263d3d;box-shadow:0 0 0 1px #83bea21a;transition:background .4s}
#brain-metric.is-recovering .meter>span{background:linear-gradient(100deg,#82bcb7,#a4d7bc,#82bcb7);background-size:200% 100%;animation:break-meter-breathe 4s ease-in-out infinite;transition:width .25s linear}
.human-strip #break-button.break-finished{border-color:#8ac4a5;color:#d7efdc;background:#203b32;animation:break-return 1s ease-out}
.human-strip #brain-metric.break-finished .meter{animation:break-return 1s ease-out}
@keyframes break-cup-breathe{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-2px) rotate(3deg)}}
@keyframes break-steam-drift{0%{opacity:.2;transform:translateY(2px)}45%{opacity:.8}100%{opacity:0;transform:translateY(-4px)}}
@keyframes break-meter-breathe{0%,100%{background-position:0 0}50%{background-position:100% 0}}
@keyframes break-return{0%{box-shadow:0 0 0 0 #a4d7bc66}100%{box-shadow:0 0 0 8px #a4d7bc00}}
@media(max-width:680px){.human-strip #break-button.break-control{padding:8px;gap:6px}.break-label{font-size:10px}.break-caption{font-size:8px}.break-cup{width:20px;height:24px}.break-clock{width:29px;height:29px}.break-seconds{font-size:10px}}
@media(prefers-reduced-motion:reduce){.break-control,.break-control *,.human-strip #brain-metric.is-recovering b,#brain-metric.is-recovering .meter,#brain-metric.is-recovering .meter>span,.human-strip #brain-metric.break-finished .meter{animation:none!important;transition:none!important}.is-breaking .break-steam{opacity:.6}.human-strip #break-button.break-finished{outline:1px solid #a4d7bc;outline-offset:2px}}
