/* Larger supporting text and additional focus tools with Theme support */
.eyebrow { font-size: 11px; }
.subtle { font-size: 15px; }
.card-kicker { font-size: 11px; }
.focus-card > p { font-size: 15px; }
.progress-label { font-size: 11px; }
.focus-bottom b { font-size: 13px; }
.dark-btn { font-size: 13px; }
.streak-card p { font-size: 14px; }
.mini-week span { font-size: 11px; }
.streak-card small { font-size: 13px; }
.metrics p { font-size: 13px; }
.metric-change { font-size: 11px; }
.ring { font-size: 8px; }
.text-btn { font-size: 13px; }
.subject h3 { font-size: 17px; }
.subject p { font-size: 13px; }
.subject small { font-size: 12px; }
.panel-head > span { font-size: 12px; }
.task { font-size: 15px; }
.legend { font-size: 12px; }
.quote { font-size: 14px; }
.side-tip { font-size: 13px; }
#taskInput { font-size: 14px; }

.utility-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
  margin: -21px 0 51px;
}

.timer-card, .countdown-card {
  border-radius: 15px;
  background: var(--card-bg);
  padding: 25px;
  box-shadow: var(--shadow);
  border: 1px solid var(--card-border);
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}

.timer-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 15px;
  background: linear-gradient(120deg, var(--card-bg), var(--paper));
}

.timer-card:after {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--purple-soft);
  right: -90px;
  top: -95px;
  z-index: 0;
}

.timer-card > * {
  position: relative;
  z-index: 1;
}

.timer-card h2, .countdown-card h2 {
  font: 700 22px 'Playfair Display';
  margin: 0 0 8px;
  color: var(--ink);
}

.timer-copy, .countdown-card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 300px;
}

.timer-face {
  text-align: center;
  border: 5px solid var(--purple-soft);
  width: 118px;
  height: 118px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  background: var(--card-bg);
  box-shadow: var(--icon-shadow);
}

.timer-face b {
  font: 700 25px 'Playfair Display';
  color: var(--purple);
}

.timer-face span {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}

.timer-actions {
  grid-column: 1/-1;
  display: flex;
  gap: 10px;
}

.timer-actions button, .date-btn {
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font: 600 13px 'DM Sans';
  cursor: pointer;
  transition: all 0.2s ease;
}

.timer-start {
  background: var(--purple);
  color: #fff;
}

.timer-start:hover {
  background: var(--purple-hover);
}

.timer-reset {
  background: var(--purple-soft);
  color: var(--purple);
}

.countdown-card {
  display: flex;
  align-items: center;
  gap: 17px;
  background: #fffaf4;
  border: 1px solid #f9edd9;
}

[data-theme="dark"] .countdown-card {
  background: #251c24;
  border-color: #422a2c;
}

.count-icon {
  width: 43px;
  height: 43px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #ffead9;
  color: #df8c57;
  font-size: 23px;
  flex-shrink: 0;
}

[data-theme="dark"] .count-icon {
  background: #3d231b;
  color: #f5a975;
}

.countdown-card h2 b {
  color: #db8652;
  font-size: 29px;
}

[data-theme="dark"] .countdown-card h2 b {
  color: #f7a26b;
}

.date-btn {
  margin-left: auto;
  white-space: nowrap;
  background: #f7e4d4;
  color: #bd6d3d;
}

.date-btn:hover {
  transform: translateY(-2px);
  filter: brightness(0.95);
}

[data-theme="dark"] .date-btn {
  background: #472b20;
  color: #f7aa79;
}

@media(max-width: 950px) {
  .utility-grid { grid-template-columns: 1fr; }
  .timer-card { grid-template-columns: 1fr auto; }
}

@media(max-width: 650px) {
  .utility-grid { margin: -17px 0 36px; }
  .timer-card { grid-template-columns: 1fr; }
  .timer-face { display: none; }
  .countdown-card { align-items: flex-start; padding-bottom: 64px; }
  .countdown-card .date-btn { position: absolute; right: 18px; bottom: 19px; }
}