/* ==========================================================
   POMOZINE — photocopied cut-and-paste zine styles
   One spot color (hot pink). Everything else is toner + paper.
   ========================================================== */

:root {
  --paper: #efebe2;
  --paper-2: #f8f6f0;
  --ink: #141414;
  --ink-soft: #3a3a3a;
  --pink: #ff2e88;
  --tape: rgba(250, 238, 170, 0.62);

  --f-display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --f-type: "Special Elite", "Courier New", Courier, monospace;
  --f-marker: "Permanent Marker", "Comic Sans MS", cursive;

  /* photocopier grain */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 -.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --halftone: radial-gradient(rgba(0,0,0,.16) 1px, transparent 1.4px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--f-type);
  font-size: 17px;
  line-height: 1.45;
  background-color: var(--paper);
  background-image:
    var(--grain),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.18) 100%);
  background-attachment: fixed;
}

.defs { position: absolute; width: 0; height: 0; }

.zine {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 16px 48px;
}

/* ---------- masthead: ransom note ---------- */

.masthead { text-align: center; margin-bottom: 28px; }

.ransom {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  font-weight: normal;
  line-height: 1;
}

.ransom span {
  display: inline-block;
  padding: .08em .14em .02em;
  font-size: clamp(2.6rem, 9vw, 5rem);
  box-shadow: 2px 3px 0 rgba(0,0,0,.25);
}
/* each letter "cut from a different magazine" */
.ransom span:nth-child(1) { font-family: var(--f-display); background: var(--ink); color: var(--paper-2); transform: rotate(-4deg); }
.ransom span:nth-child(2) { font-family: var(--f-type); background: var(--paper-2); transform: rotate(3deg) translateY(4px); border: 2px solid var(--ink); }
.ransom span:nth-child(3) { font-family: var(--f-marker); background: var(--pink); color: var(--ink); transform: rotate(-2deg); }
.ransom span:nth-child(4) { font-family: Georgia, "Times New Roman", serif; font-style: italic; background: var(--paper-2); transform: rotate(5deg) translateY(-3px); }
.ransom span:nth-child(5) { font-family: var(--f-display); background: var(--paper-2); color: var(--ink); transform: rotate(-6deg); border: 3px dashed var(--ink); }
.ransom span:nth-child(6) { font-family: var(--f-type); background: var(--ink); color: var(--pink); transform: rotate(2deg) translateY(5px); }
.ransom span:nth-child(7) { font-family: "Arial Black", var(--f-display); background: var(--paper-2); background-image: var(--halftone); background-size: 5px 5px; transform: rotate(-3deg); }
.ransom span:nth-child(8) { font-family: var(--f-marker); background: var(--ink); color: var(--paper-2); transform: rotate(4deg) translateY(-2px); }

.issue {
  display: inline-block;
  margin: 16px 0 0;
  padding: 2px 10px;
  background: var(--ink);
  color: var(--paper-2);
  font-size: .85rem;
  letter-spacing: .04em;
  transform: rotate(-1deg);
}

/* ---------- torn paper (rough edges live on a pseudo layer so text stays crisp) ---------- */

.torn { position: relative; isolation: isolate; }
.torn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--card-bg, var(--paper-2));
  background-image: var(--grain);
  filter: url(#rough);
  box-shadow: 4px 6px 0 rgba(0,0,0,.22);
}

/* ---------- timer card ---------- */

.timer-card {
  --card-bg: var(--paper-2);
  margin: 0 auto 36px;
  padding: 34px 20px 22px;
  text-align: center;
  max-width: 640px;
  transform: rotate(-.6deg);
  transition: color .4s;
}

/* break = the page gets inverted, like a photocopy negative */
body[data-phase="break"] .timer-card { --card-bg: var(--ink); color: var(--paper-2); }
body[data-phase="done"]  .timer-card { --card-bg: var(--pink); }

.stamp {
  position: absolute;
  top: 14px;
  right: 18px;
  padding: 2px 12px;
  border: 4px double var(--pink);
  color: var(--pink);
  font-family: var(--f-display);
  font-size: 1.35rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(8deg);
  opacity: .92;
}
body[data-phase="done"] .stamp { border-color: var(--ink); color: var(--ink); }

.clock {
  font-family: var(--f-display);
  font-size: clamp(5.2rem, 24vw, 11rem);
  line-height: 1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  /* off-register print */
  text-shadow: 5px 4px 0 var(--pink);
  margin-top: 6px;
}
body[data-phase="done"] .clock { text-shadow: 5px 4px 0 var(--paper-2); }

.cycle {
  display: inline-block;
  margin: 10px 0 0;
  padding: 1px 10px;
  border: 2px solid currentColor;
  font-size: 1rem;
  text-transform: lowercase;
  transform: rotate(1deg);
}

.tagline {
  margin: 12px auto 0;
  max-width: 34ch;
  font-family: var(--f-marker);
  font-size: 1.2rem;
  line-height: 1.3;
}

/* phase strip: one cut-out block per focus/break */
.strip {
  display: flex;
  gap: 4px;
  height: 22px;
  margin: 20px 4px 4px;
}
.strip:empty { display: none; }
.blk {
  position: relative;
  min-width: 6px;
  border: 2px solid currentColor;
  overflow: hidden;
}
.blk.focus { background: var(--pink); }
.blk.break { background-image: repeating-linear-gradient(45deg, currentColor 0 2px, transparent 2px 7px); opacity: .75; }
.blk.done  { opacity: .3; }
.blk.done::after { /* crossed out with a marker */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent 46%, currentColor 47% 53%, transparent 54%);
}
.blk.now { border-width: 3px; box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 4px currentColor; }
body[data-phase="break"] .blk.now { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--paper-2); }
.blk .fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: currentColor;
  opacity: .55;
}
.strip-more { align-self: center; font-size: .85rem; padding-left: 4px; }

/* ---------- buttons ---------- */

.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.btn {
  font-family: var(--f-display);
  font-size: 1.25rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .4em 1.1em;
  color: var(--paper-2);
  background: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--pink);
  cursor: pointer;
  transform: rotate(-1deg);
  transition: transform .08s, box-shadow .08s;
}
.btn.big { font-size: 1.6rem; padding: .35em 1.4em; }
.btn:nth-child(even) { transform: rotate(1.2deg); }
.btn:hover:not(:disabled) { background: var(--pink); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.btn.ghost { background: transparent; color: inherit; border-color: currentColor; box-shadow: 4px 4px 0 currentColor; }
.btn.ghost.armed { background: var(--pink); color: var(--ink); border-color: var(--ink); }
body[data-phase="break"] .btn { border-color: var(--paper-2); }
body[data-phase="break"] .btn:not(.ghost) { background: var(--paper-2); color: var(--ink); }

.hint { margin: 14px 0 0; font-size: .8rem; opacity: .65; }

.mini {
  font-family: var(--f-type);
  font-size: .85rem;
  padding: .2em .7em;
  color: var(--ink);
  background: var(--paper-2);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
}
.mini:hover { background: var(--pink); }
.mini:active { transform: translate(2px, 2px); box-shadow: none; }
.mini:disabled { opacity: .4; cursor: not-allowed; }

:focus-visible { outline: 3px dashed var(--pink); outline-offset: 3px; }

/* ---------- settings scraps ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 34px 26px;
}

.scrap {
  position: relative;
  padding: 26px 18px 16px;
  background: var(--paper-2);
  background-image: var(--grain);
  box-shadow: 3px 4px 0 rgba(0,0,0,.2);
  transform: rotate(var(--tilt, 0deg));
}
.scrap.wide { grid-column: 1 / -1; }
/* masking tape */
.scrap::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 96px;
  height: 26px;
  background: var(--tape);
  transform: translateX(-50%) rotate(-3deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 0, 82% 0, 88% 10%, 94% 0, 100% 8%, 100% 92%, 94% 100%, 88% 90%, 82% 100%, 18% 100%, 12% 90%, 6% 100%, 0 92%);
}
.scrap:nth-child(odd)::before { left: 22%; transform: rotate(4deg); }

.scrap h2 {
  margin: 0 0 12px;
  font-family: var(--f-marker);
  font-weight: normal;
  font-size: 1.45rem;
  line-height: 1.1;
}
.num {
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper-2);
  font-family: var(--f-display);
  font-size: .8em;
  vertical-align: 2px;
}

fieldset.lock { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.lock:disabled { opacity: .45; }

.small { font-size: .85rem; text-transform: lowercase; margin: 0 0 6px; }
.small.spaced { margin-top: 14px; }

.note { margin: 12px 0 0; font-size: .82rem; color: var(--ink-soft); }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }

/* radio chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-block;
  padding: .35em .8em;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-size: .95rem;
  transform: rotate(-1deg);
  transition: transform .1s;
}
.chip:nth-child(even) span { transform: rotate(1.4deg); }
.chip:hover span { background-image: var(--halftone); background-size: 5px 5px; }
.chip input:checked + span {
  background: var(--ink);
  color: var(--paper-2);
  box-shadow: 3px 3px 0 var(--pink);
}
.chip input:focus-visible + span { outline: 3px dashed var(--pink); outline-offset: 3px; }
fieldset:disabled .chip { cursor: not-allowed; }

/* inputs */
input[type="number"], input[type="time"] {
  font-family: var(--f-type);
  font-size: 1.1rem;
  width: 6.5em;
  padding: .2em .4em;
  background: var(--paper);
  border: 0;
  border-bottom: 3px solid var(--ink);
  color: var(--ink);
}
input[type="time"] { width: auto; }

input[type="range"] { accent-color: var(--pink); flex: 1 1 60px; min-width: 50px; }
/* same width for "hear it" and "stop", so swapping labels never reflows the row */
#hearNoise { flex: none; width: 6.4em; padding-inline: .4em; text-align: center; white-space: nowrap; }

.check { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--ink); }

/* planner output */
.plan {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-left: 6px solid var(--pink);
  background-image: var(--halftone);
  background-size: 6px 6px;
  font-size: 1rem;
}
.plan strong { font-family: var(--f-display); font-weight: normal; font-size: 1.2em; letter-spacing: .03em; }

.suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--pink);
  transform: rotate(-.7deg);
  width: fit-content;
  max-width: 100%;
}
.suggest[hidden] { display: none; }

/* ---------- footer ---------- */

.colophon {
  margin-top: 44px;
  text-align: center;
  font-size: .8rem;
  color: var(--ink-soft);
}
.colophon p { margin: 4px 0; }
.src-link {
  display: inline-block;
  margin-top: 10px;
  padding: 2px 10px;
  color: var(--paper-2);
  background: var(--ink);
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--pink);
  transform: rotate(-1.5deg);
}
.src-link:hover { background: var(--pink); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }

/* ---------- small screens ---------- */

@media (max-width: 520px) {
  body { font-size: 16px; }
  .stamp { font-size: 1rem; top: 10px; right: 10px; }
  .timer-card { padding-top: 44px; }
  .btn.big { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}