/* ==========================================================================
   Pomodoro dialog.

   The reference dialog is Tailwind; the values below are that build's resolved
   output — its palette tokens and its default spacing/type scale — written out
   so the dialog renders identically inside sections that ship no Tailwind.

   Light and dark are chosen by [data-pom-theme] rather than a media query: the
   host section decides (a QWorld exam in its dark theme, a Mehlman dark
   profile), not the operating system.
   ========================================================================== */

.pom-root{
  --pom-paper:#fbf9f6;          /* bg-paper */
  --pom-ink:#1a2e3b;            /* ink */
  --pom-ink-light:#4a5c6a;      /* ink-light */
  --pom-navy:#2c3e50;           /* navy-blue */
  --pom-highlight:#efebe6;      /* highlight-bg */
  --pom-border:#dedcd8;         /* border-light */
  --pom-sienna:sienna;          /* accent-sienna */
  --pom-green:#28a745;          /* functional-green */
  --pom-destructive:#dc3545;
  --pom-gray-400:#99a1af;
  --pom-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  /* Role tokens; the dark block below only re-points these. */
  --pom-surface:var(--pom-paper);
  --pom-surface-2:#fff;
  --pom-text:var(--pom-ink);
  --pom-text-muted:var(--pom-ink-light);
  --pom-line:var(--pom-border);
  --pom-hover:var(--pom-highlight);

  position:fixed;
  inset:0;
  z-index:2147483000;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
}

.pom-root[data-pom-theme="dark"]{
  --pom-surface:var(--pom-ink);
  --pom-surface-2:var(--pom-navy);
  --pom-text:var(--pom-paper);
  --pom-text-muted:var(--pom-gray-400);
  --pom-line:var(--pom-ink-light);
  --pom-hover:var(--pom-navy);
}

.pom-root *,
.pom-root *::before,
.pom-root *::after{box-sizing:border-box}

.pom-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(4px)}

.pom-center{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem}

.pom-panel{
  margin:0 auto;max-width:42rem;width:100%;max-height:calc(100vh - 2rem);overflow:auto;
  background:var(--pom-surface);color:var(--pom-text);
  border:2px solid var(--pom-line);
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
}

.pom-pad{padding:1rem}
@media(min-width:1280px){.pom-pad{padding:2rem}}

/* ---------- header ---------- */

.pom-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.pom-title{margin:0;font-size:1.25rem;line-height:1.75rem;font-weight:700;color:var(--pom-text)}
.pom-head-actions{display:flex;align-items:center;gap:.5rem}

.pom-iconbtn{
  padding:.5rem;background:transparent;border:2px solid transparent;color:var(--pom-text-muted);
  cursor:pointer;transition:background-color .15s,border-color .15s;line-height:0;
}
.pom-iconbtn:hover{background:var(--pom-hover);border-color:var(--pom-line)}

/* ---------- icons ---------- */

.pom-icon{display:inline-flex;align-items:center;justify-content:center;flex:none}
.pom-icon svg{display:block;width:100%;height:100%}
.pom-icon-5{width:1.25rem;height:1.25rem}
.pom-icon-4,
.pom-icon-4-green,
.pom-icon-4-sienna{width:1rem;height:1rem}
.pom-icon-4-green{color:var(--pom-green)}
.pom-icon-4-sienna{color:var(--pom-sienna)}

/* ---------- mode tabs ---------- */

.pom-modes{display:flex;gap:.5rem;margin-bottom:1.5rem}
.pom-mode{
  flex:1 1 0;padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;font-weight:600;
  background:var(--pom-surface-2);color:var(--pom-text-muted);
  border:2px solid var(--pom-line);cursor:pointer;transition:all .15s;
  font-family:inherit;
}
.pom-mode:hover{background:var(--pom-hover)}
.pom-root[data-pom-theme="dark"] .pom-mode:hover{background:rgba(26,46,59,.5)}
.pom-mode.is-active.work{background:var(--pom-sienna);border-color:var(--pom-sienna);color:#fff}
.pom-mode.is-active.rest{background:var(--pom-green);border-color:var(--pom-green);color:#fff}

/* ---------- clock ---------- */

.pom-clock-wrap{text-align:center;margin-bottom:1.5rem}
.pom-clock{
  font-size:4.5rem;line-height:1;font-weight:700;margin-bottom:.5rem;
  color:var(--pom-text);font-family:var(--pom-mono);font-variant-numeric:tabular-nums;
}
.pom-clock-label{
  font-size:.875rem;line-height:1.25rem;color:var(--pom-text-muted);
  text-transform:uppercase;letter-spacing:.05em;font-weight:600;
}

/* ---------- start / reset ---------- */

.pom-controls{display:flex;align-items:center;justify-content:center;gap:.75rem}
.pom-primary,
.pom-secondary{
  display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:1rem;line-height:1.5rem;
  border:2px solid transparent;cursor:pointer;transition:all .15s;font-family:inherit;
}
.pom-primary{padding:.75rem 2rem;color:#fff}
.pom-primary.work{background:var(--pom-sienna);border-color:var(--pom-sienna)}
.pom-primary.work:hover{background:color-mix(in srgb,sienna 80%,transparent)}
.pom-primary.rest{background:var(--pom-green);border-color:var(--pom-green)}
.pom-primary.rest:hover{background:color-mix(in srgb,#28a745 90%,transparent)}
.pom-secondary{
  padding:.75rem 1.5rem;background:var(--pom-surface-2);color:var(--pom-text);border-color:var(--pom-line);
}
.pom-secondary:hover{background:var(--pom-hover)}
.pom-root[data-pom-theme="dark"] .pom-secondary:hover{background:rgba(26,46,59,.5)}

/* ---------- statistics ---------- */

.pom-stats-wrap{margin-top:1.5rem}
.pom-stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding:1rem;
  background:var(--pom-hover);border:2px solid var(--pom-line);
}
.pom-root[data-pom-theme="dark"] .pom-stats{background:var(--pom-navy)}
.pom-stat{text-align:center}
.pom-stat-row{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.25rem}
.pom-stat-value{font-size:1.5rem;line-height:2rem;font-weight:700;color:var(--pom-text)}
.pom-stat-label{
  font-size:.75rem;line-height:1rem;color:var(--pom-text-muted);
  text-transform:uppercase;letter-spacing:.05em;font-weight:600;
}

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

.pom-scroll{max-height:60vh;overflow-y:auto;padding-right:.5rem}
.pom-scroll>*+*{margin-top:1.5rem}
.pom-stack-3>*+*{margin-top:.75rem}
.pom-stack-2>*+*{margin-top:.5rem}

.pom-section{
  margin:0 0 .75rem;font-size:1rem;line-height:1.5rem;font-weight:600;color:var(--pom-text);
}
.pom-field-label{
  display:block;font-size:.875rem;line-height:1.25rem;font-weight:500;
  color:var(--pom-text-muted);margin-bottom:.25rem;
}
.pom-input{
  width:100%;padding:.5rem .75rem;border:2px solid var(--pom-line);
  background:var(--pom-surface-2);color:var(--pom-text);
  font-family:inherit;font-size:1rem;line-height:1.5rem;
}
.pom-hint{margin:.25rem 0 0;font-size:.75rem;line-height:1rem;color:var(--pom-text-muted)}

.pom-check{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.5rem;cursor:pointer;border:1px solid transparent;
}
.pom-check:hover{background:var(--pom-hover);border-color:var(--pom-line)}
.pom-check>span{font-size:.875rem;line-height:1.25rem;color:var(--pom-text)}
.pom-check input[type="checkbox"]{
  width:1rem;height:1rem;flex:none;accent-color:var(--pom-sienna);
  border:2px solid var(--pom-line);cursor:pointer;
}

.pom-volume{display:flex;align-items:center;gap:.75rem;color:var(--pom-text-muted)}
.pom-volume input[type="range"]{flex:1 1 auto;min-width:0;accent-color:var(--pom-sienna);cursor:pointer}
.pom-volume-value{
  width:3rem;text-align:right;font-family:var(--pom-mono);
  font-size:.875rem;line-height:1.25rem;color:var(--pom-text-muted);
}

.pom-notify-test{
  width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.5rem 1rem;font-weight:600;font-size:1rem;line-height:1.5rem;font-family:inherit;
  background:var(--pom-sienna);border:2px solid var(--pom-sienna);color:#fff;
  cursor:pointer;transition:background-color .15s;
}
.pom-notify-test:hover{background:color-mix(in srgb,sienna 80%,transparent)}

.pom-danger{
  padding:.5rem 1rem;font-weight:600;font-size:1rem;line-height:1.5rem;font-family:inherit;
  background:var(--pom-destructive);border:2px solid var(--pom-destructive);color:#fff;
  cursor:pointer;transition:background-color .15s;
}
.pom-danger:hover{background:color-mix(in srgb,#dc3545 90%,transparent)}

/* The clock is the one element that must stay readable on a narrow phone. */
@media(max-width:520px){
  .pom-clock{font-size:3.5rem}
  .pom-primary{padding:.75rem 1.25rem}
  .pom-secondary{padding:.75rem 1rem}
}