/*  maintenance-timer.css — styling for the recurring-interval service widget.
 *  Self-contained + theme-adaptive (light + dark). Status colour is carried on
 *  the container class (.mt-ok / .mt-soon / .mt-due / .mt-overdue / .mt-never).
 *
 *  Host surfaces may override the tokens below (e.g. --mt-radius, --mt-accent)
 *  via a scoping rule; defaults are picked to read on any background.
 */
.mt {
  --mt-ok:      #2c7a4b;
  --mt-soon:    #b7791f;
  --mt-due:     #c53030;
  --mt-overdue: #c53030;
  --mt-never:   #9b2c2c;
  --mt-track:   rgba(128, 128, 128, 0.22);
  --mt-ink:     inherit;
  --mt-ink-soft: rgba(120, 116, 110, 1);
  --mt-radius:  8px;
  --mt-status:  var(--mt-ok);

  display: block;
  border: 1px solid var(--mt-track);
  border-left: 3px solid var(--mt-status);
  border-radius: var(--mt-radius);
  padding: 12px 16px;
  font: 400 14px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--mt-ink);
  background: rgba(127, 127, 127, 0.04);
}

.mt-ok      { --mt-status: var(--mt-ok); }
.mt-soon    { --mt-status: var(--mt-soon); }
.mt-due     { --mt-status: var(--mt-due); }
.mt-overdue { --mt-status: var(--mt-overdue); }
.mt-never   { --mt-status: var(--mt-never); }

.mt-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mt-head { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.mt-label {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2px;
}

.mt-detail {
  font-size: 12.5px;
  color: var(--mt-ink-soft);
}

.mt-pill {
  flex: none;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  background: var(--mt-status);
  white-space: nowrap;
}

.mt-meta {
  margin-top: 6px;
  font-size: 13px;
  color: var(--mt-ink-soft);
}
.mt-meta strong { color: var(--mt-ink); font-weight: 600; }

.mt-localnote { font-style: italic; opacity: 0.85; }

.mt-bar {
  margin-top: 9px;
  height: 6px;
  border-radius: 999px;
  background: var(--mt-track);
  overflow: hidden;
}
.mt-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--mt-status);
  transition: width 0.4s ease;
}

.mt-actions {
  margin-top: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mt-mark {
  font: 600 12.5px/1 system-ui, -apple-system, sans-serif;
  color: var(--mt-status);
  background: transparent;
  border: 1px solid var(--mt-status);
  border-radius: 6px;
  padding: 6px 11px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.mt-mark:hover  { background: var(--mt-status); color: #fff; }
.mt-mark:active { transform: translateY(1px); }

.mt-baked {
  font-size: 12px;
  color: var(--mt-ink-soft);
}
.mt-baked code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  background: rgba(127, 127, 127, 0.15);
  padding: 1px 5px;
  border-radius: 4px;
}

@media (prefers-color-scheme: dark) {
  .mt {
    --mt-ok:      #48d18a;
    --mt-soon:    #e0b64a;
    --mt-due:     #f16d6d;
    --mt-overdue: #f16d6d;
    --mt-never:   #f16d6d;
    --mt-ink-soft: rgba(180, 176, 170, 1);
    --mt-track:   rgba(200, 200, 200, 0.18);
    background: rgba(200, 200, 200, 0.05);
  }
  .mt-pill { color: #14110e; }
  .mt-mark:hover { color: #14110e; }
}