/* The strict session. Four screens: setup, the stage, the wall on top of it,
   and the summary. The stage is what full screen shows, so it is fixed and
   sits outside the page rather than inside it. */

/* The scrim is the one colour that cannot come from theme.css: it is drawn
   OVER the page in both themes, so it is dark in both. Light mode gets a
   lighter one so the wall reads as a pane rather than a blackout. */
:root { --focus-scrim: rgba(23, 25, 28, 0.72); }

@media (prefers-color-scheme: dark) {
  :root { --focus-scrim: rgba(9, 11, 16, 0.82); }
}

html[data-theme="light"] { --focus-scrim: rgba(23, 25, 28, 0.72); }
html[data-theme="dark"] { --focus-scrim: rgba(9, 11, 16, 0.82); }

.focus-page {
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: 5rem;
}

/* ---------- the modal box the wall and the confirmation share ---------- */

.wall-modal-box {
  width: 100%;
  max-width: 480px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: wall-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes wall-pop {
  0% { transform: scale(0.95); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .wall-modal-box { animation: none; }
}

.wall-icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--amber-soft);
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.wall-modal-box h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.wall-subtext {
  font-size: 0.95rem;
  color: var(--text-2);
  margin-bottom: 1.5rem;
}

.wall-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wall-foot {
  margin-top: 1.1rem;
  font-size: 0.8rem;
  color: var(--text-3);
  line-height: 1.5;
}

/* ---------- setup ---------- */

.focus-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 520px;
  margin-bottom: 2rem;
}

.focus-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-2);
  margin-top: 0.75rem;
}

.focus-form input[type="text"] {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast);
}

.focus-form input:focus {
  outline: none;
  border-color: var(--accent);
}

.focus-presets {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.focus-presets button {
  padding: 0.6rem 1rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.focus-presets button:hover { color: var(--text); border-color: var(--accent); }

.focus-presets button[aria-pressed="true"] {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.focus-custom {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--text-3);
}

.focus-custom input {
  width: 5.5rem;
  padding: 0.5rem 0.6rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.focus-form button[type="submit"] {
  margin-top: 1.5rem;
  justify-content: center;
}

/* The terms of the commitment, inside the box that asks you to make it. */
.focus-steps {
  margin: 1.25rem 0 0.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  text-align: left;
}

.focus-steps[hidden] { display: none; }

/* The fit note. Above the steps, because whether to use this page at all is a
   different question from how it behaves once you have. */
.focus-fit {
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-2);
}

.focus-fit strong { color: var(--text); font-weight: 650; }

.focus-steps ol {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 0.85rem;
}

.focus-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2rem;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--text-2);
}

.focus-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 50%;
}

.focus-steps strong { color: var(--text); font-weight: 650; }

.focus-fineprint {
  font-size: 0.85rem;
  color: var(--text-3);
  line-height: 1.6;
  max-width: 560px;
}

.focus-fineprint a { color: var(--accent); }

/* ---------- the stage ---------- */
/*
  A screen saver with a debt on it. Fixed and opaque so full screen shows this
  and nothing else, and so leaving full screen does not dump the person back
  onto a marketing page mid-session.
*/

.focus-stage {
  position: fixed;
  inset: 0;
  /* Above the sticky navbar (z-index 1000). A stage the site's own header
     floats on top of is not a stage: full screen renders the whole document,
     so the header is still there, and in the tab fallback it would be a live
     link out of a session the page is meant to be holding. */
  z-index: 1500;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--bg);
  color: var(--text);
  cursor: none;
  overflow: hidden;
}

.focus-stage[hidden] { display: none; }
.focus-stage.controls-visible { cursor: default; }

body.stage-live { overflow: hidden; }

.stage-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.stage-clock {
  font-family: var(--mono);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 300;
  color: var(--text-2);
  line-height: 1;
}

.stage-date {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.stage-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.focus-stage.controls-visible .stage-controls { opacity: 1; pointer-events: auto; }

.stage-controls button {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.stage-controls button:hover { color: var(--text); border-color: var(--text-3); }

.stage-middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 0;
}

.stage-state {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-bottom: clamp(1rem, 3vh, 2rem);
}

.stage-state .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.stage-state.green { color: var(--green); }
.stage-state.accent { color: var(--accent); }
.stage-state.red { color: var(--red); }
.stage-state.grey { color: var(--text-3); }

.stage-timer {
  font-family: var(--mono);
  font-size: clamp(4rem, 17vw, 13rem);
  font-weight: 100;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--text);
}

.focus-stage.is-kept .stage-timer { color: var(--green); }
.focus-stage.is-stopped .stage-timer { color: var(--text-3); }

.stage-timer-sub {
  margin-top: 0.9rem;
  font-size: clamp(0.8rem, 1.6vw, 0.95rem);
  color: var(--text-3);
}

.stage-task {
  margin-top: clamp(1.5rem, 5vh, 3rem);
  font-size: clamp(1.1rem, 3vw, 1.75rem);
  font-weight: 300;
  color: var(--text-2);
  max-width: 80vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-progress {
  width: min(460px, 70vw);
  height: 3px;
  margin-top: 1.25rem;
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.stage-progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.focus-stage.is-kept .stage-progress-fill { background: var(--green); }

.stage-bottom {
  display: flex;
  justify-content: flex-end;
}

.stage-hint {
  max-width: 34rem;
  text-align: right;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-3);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.focus-stage.controls-visible .stage-hint { opacity: 1; }

@media (max-width: 720px) {
  .stage-bottom { justify-content: flex-start; }
  .stage-hint { text-align: left; opacity: 0.75; }
}

/* ---------- summary ---------- */

.focus-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.focus-summary-item {
  padding: 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.focus-stat-label {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.3rem;
}

.focus-summary-value {
  font-family: var(--mono);
  font-size: 1.9rem;
  font-weight: 300;
  color: var(--text);
  margin: 0.2rem 0 0.3rem;
}

.focus-summary-item p {
  font-size: 0.8rem;
  color: var(--text-3);
  margin: 0;
}

.focus-nudge {
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.focus-nudge h2 { font-size: 1.35rem; margin-bottom: 0.75rem; }
.focus-nudge p { font-size: 0.95rem; color: var(--text-2); }

.focus-nudge-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.focus-history { margin: 2.5rem 0 1.5rem; }
.focus-history h2 { font-size: 1.1rem; margin-bottom: 0.75rem; }

.focus-controls {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* ---------- the wall ---------- */
/*
  It covers the stage rather than sitting in it. A wall you can scroll past is
  a banner, and the whole claim this page makes is that the real product's
  wall is not one.
*/

.focus-wall {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--focus-scrim);
  backdrop-filter: blur(10px);
  overflow-y: auto;
}

.focus-wall[hidden] { display: none; }

/* The way out is a real door and it is drawn like one: findable, never the
   easiest thing on the wall to press by accident. */
.wall-giveup {
  display: block;
  margin: 1.25rem auto 0;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text-3);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.wall-giveup:hover { color: var(--red); border-bottom-color: var(--red); }

.focus-wall-nudge {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--accent);
  line-height: 1.6;
}

.focus-wall-nudge[hidden] { display: none; }