/* ============================================================
   IlmBank — Pomodoro Timer (scoped)
   Depends on global tokens already defined on .ib-timer / .ib-tools
   Scope root: .ib-pomodoro-app (often used with .ib-tools .ib-timer)
   ============================================================ */

.ib-pomodoro-app {
  font-family: var(--ib-font-ui);
  color: var(--ib-neutral-800);
}

/* -------------------- */
/* Card */
/* -------------------- */
.ib-pomodoro-app .ib-pomo-card{
  max-width: 28rem;
  margin: var(--ib-space-xl) auto;
  background: #fff;
  border-radius: var(--ib-radius-lg);
  box-shadow: var(--ib-shadow-md);
  border: 1px solid var(--ib-neutral-200);
  padding: var(--ib-space-lg);
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ib-pomodoro-app .ib-pomo-card:focus-within {
  box-shadow: var(--ib-shadow-lg);
  border-color: color-mix(in oklab, var(--ib-primary) 35%, white);
}
@media (prefers-color-scheme: dark){
  .ib-pomodoro-app .ib-pomo-card{
    background: var(--ib-neutral-100);
    border-color: var(--ib-neutral-300);
  }
}
@media (max-width: 480px){
  .ib-pomodoro-app .ib-pomo-card{
    margin: var(--ib-space-lg) var(--ib-space-md);
    border-radius: var(--ib-radius-md);
    padding: var(--ib-space-md);
  }
}

/* -------------------- */
/* Header */
/* -------------------- */
.ib-pomodoro-app .ib-pomo-header{
  display:flex; align-items:center; justify-content:space-between; gap:var(--ib-space-sm);
  margin-bottom: var(--ib-space-md);
}
.ib-pomodoro-app .ib-pomo-title{
  font-size:1.1rem; font-weight:700; color: var(--ib-brand-ink);
  letter-spacing:.2px;
}
.ib-pomodoro-app .ib-pomo-today{
  font-size:.9rem; color: var(--ib-neutral-500);
}

/* -------------------- */
/* Face (ring + labels) */
/* -------------------- */
.ib-pomodoro-app .ib-pomo-face{
  position:relative; display:grid; place-items:center; margin: var(--ib-space-md) 0 var(--ib-space-lg);
}

.ib-pomodoro-app .ib-pomo-svg{ width: 240px; height:240px; }
@media (max-width: 420px){ .ib-pomodoro-app .ib-pomo-svg{ width: 200px; height:200px; } }

.ib-pomodoro-app .ib-pomo-ring-bg{
  stroke: var(--ib-neutral-200);
  stroke-width: 10; fill:none;
}
@media (prefers-color-scheme: dark){
  .ib-pomodoro-app .ib-pomo-ring-bg{ stroke: var(--ib-neutral-300); }
}

/* Progress ring changes colour by mode */
.ib-pomodoro-app .ib-pomo-ring{
  stroke: var(--ib-primary);
  stroke-width:10; stroke-linecap:round; fill:none;
  transition: stroke .2s ease, stroke-dashoffset .1s linear;
}

/* Support either a class on card or a data attribute on root */
.ib-pomodoro-app [data-mode="focus"] .ib-pomo-ring,
.ib-pomodoro-app .mode--focus .ib-pomo-ring{ stroke: var(--ib-primary); }

.ib-pomodoro-app [data-mode="short"] .ib-pomo-ring,
.ib-pomodoro-app .mode--short .ib-pomo-ring{ stroke: var(--ib-success); }

.ib-pomodoro-app [data-mode="long"] .ib-pomo-ring,
.ib-pomodoro-app .mode--long .ib-pomo-ring{ stroke: var(--ib-info); }

/* Labels in the ring */
.ib-pomodoro-app .ib-pomo-label{
  position:absolute; top: calc(50% - 40px); width:100%; text-align:center;
  font-weight:600; color: var(--ib-neutral-600);
  padding: 0 var(--ib-space-sm);
}
@media (prefers-color-scheme: dark){
  .ib-pomodoro-app .ib-pomo-label{ color: var(--ib-neutral-500); }
}
.ib-pomodoro-app .ib-pomo-time{
  position:absolute; top: calc(50% - 6px); width:100%; text-align:center;
  font-variant-numeric: tabular-nums; font-weight:800; letter-spacing:.02em; font-size:2.75rem;
}
@media (max-width: 420px){ .ib-pomodoro-app .ib-pomo-time{ font-size:2.25rem; } }

/* Optional sub-time under the time (e.g., session counter, HH:MM clock) */
.ib-pomodoro-app .ib-pomo-subtime {
  position: absolute;
  top: calc(50% + 38px);
  width: 100%;
  text-align: center;
  font-size: 1rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
  font-weight: 600;
  color: var(--ib-neutral-600);
  letter-spacing: .5px;
}
@media (prefers-color-scheme: dark){
  .ib-pomodoro-app .ib-pomo-subtime { color: var(--ib-neutral-500); }
}

/* Small inline readout (top right) */
.ib-pomodoro-app .ib-pomo-mini{
  position: absolute; top: var(--ib-space-sm); right: var(--ib-space-md);
  background: transparent; color: var(--ib-neutral-600);
  font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
  font-weight:700; letter-spacing:.5px;
}

/* -------------------- */
/* Controls */
/* -------------------- */
.ib-pomodoro-app .ib-pomo-controls{
  display:flex; gap:var(--ib-space-sm); justify-content:center; flex-wrap:wrap;
}

.ib-pomodoro-app .ib-pomo-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: var(--ib-space-sm) var(--ib-space-lg);
  border-radius: var(--ib-radius-md); border:2px solid transparent;
  font-weight:600; cursor:pointer; transition: var(--ib-transition);
  min-height: 2.75rem; user-select:none;
}
.ib-pomodoro-app .ib-pomo-btn:focus-visible{
  outline:3px solid color-mix(in oklab, var(--ib-primary), white 25%);
  outline-offset:2px;
}

/* Primary / Ghost / Danger */
.ib-pomodoro-app .ib-pomo-btn--primary{ background: var(--ib-primary); color:#fff; }
.ib-pomodoro-app .ib-pomo-btn--primary:hover{ background: var(--ib-primary-hover); }
.ib-pomodoro-app .ib-pomo-btn--primary:active{ background: var(--ib-primary-active); }

.ib-pomodoro-app .ib-pomo-btn--ghost{
  background: #fff; color: var(--ib-neutral-700); border-color: var(--ib-neutral-200);
}
.ib-pomodoro-app .ib-pomo-btn--ghost:hover{ background: var(--ib-neutral-100); }
@media (prefers-color-scheme: dark){
  .ib-pomodoro-app .ib-pomo-btn--ghost{ background: var(--ib-neutral-100); border-color: var(--ib-neutral-300); color: var(--ib-neutral-800); }
  .ib-pomodoro-app .ib-pomo-btn--ghost:hover{ background: var(--ib-neutral-200); }
}

.ib-pomodoro-app .ib-pomo-btn--danger{ background: var(--ib-danger); color:#fff; }
.ib-pomodoro-app .ib-pomo-btn--danger:hover{ background:#B91C1C; }

/* -------------------- */
/* Footer / Mode chips */
/* -------------------- */
.ib-pomodoro-app .ib-pomo-footer{
  display:flex; justify-content:space-between; align-items:center; gap:var(--ib-space-sm);
  margin-top: var(--ib-space-md); color: var(--ib-neutral-600);
}
@media (max-width: 520px){
  .ib-pomodoro-app .ib-pomo-footer{ flex-direction:column; align-items:stretch; gap: var(--ib-space-sm); }
}

.ib-pomodoro-app .ib-pomo-mode{ display:flex; gap: var(--ib-space-sm); flex-wrap:wrap; }
.ib-pomodoro-app .ib-pomo-chip{
  padding: 4px 10px; border:1px solid var(--ib-neutral-200);
  border-radius: var(--ib-radius-pill); font-size:.85rem; cursor:pointer;
  background:#fff; color: var(--ib-neutral-700); transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ib-pomodoro-app .ib-pomo-chip:hover{
  border-color: var(--ib-primary); color: var(--ib-primary);
}
.ib-pomodoro-app .ib-pomo-chip[aria-pressed="true"]{
  background: color-mix(in oklab, var(--ib-primary) 10%, white);
  border-color: var(--ib-primary); color: var(--ib-primary);
}

/* -------------------- */
/* Settings Drawer */
/* -------------------- */
.ib-pomodoro-app .ib-pomo-settings{
  margin-top: var(--ib-space-lg);
  border-top:1px dashed var(--ib-neutral-200);
  padding-top: var(--ib-space-md);
  display:none;
}
.ib-pomodoro-app .ib-pomo-settings.open{ display:block; }

.ib-pomodoro-app .ib-pomo-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--ib-space-md);
}
@media (max-width: 520px){
  .ib-pomodoro-app .ib-pomo-grid{ grid-template-columns: 1fr; }
}
.ib-pomodoro-app .ib-pomo-field label{
  display:block; font-size:.9rem; color: var(--ib-neutral-600); margin-bottom: var(--ib-space-xs);
}
.ib-pomodoro-app .ib-pomo-field input[type="number"],
.ib-pomodoro-app .ib-pomo-field input[type="checkbox"]{
  accent-color: var(--ib-primary);
}
.ib-pomodoro-app .ib-pomo-number{
  width:100%; padding: var(--ib-space-sm) var(--ib-space-md); border:2px solid var(--ib-neutral-200);
  border-radius: var(--ib-radius-md); background:#fff; color: var(--ib-neutral-800);
}
@media (prefers-color-scheme: dark){
  .ib-pomodoro-app .ib-pomo-number{
    background: var(--ib-neutral-100); border-color: var(--ib-neutral-300); color: var(--ib-neutral-800);
  }
}

/* -------------------- */
/* Motion prefs */
/* -------------------- */
@media (prefers-reduced-motion: reduce) {
  .ib-pomodoro-app .ib-pomo-card,
  .ib-pomodoro-app .ib-pomo-ring { transition: none; }
}