/* Free sleep calculators (/sleep-calculator, /sleep-debt-calculator, /sleep-score-calculator).
   Load after styles.css, home.css and guides.css. */

.tool {
  margin: 8px 0 8px;
  padding: 28px;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 30px 80px -50px rgba(0, 0, 0, 0.7);
}
.tool fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.tool legend { padding: 0; font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 12px; }

/* Segmented control for the two modes */
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--l0); margin-bottom: 22px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 9px 16px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--text-2); transition: background 0.15s ease, color 0.15s ease; }
.seg input:checked + span { background: var(--accent); color: var(--on-accent); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Form rows */
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px 18px; }
.field { display: grid; gap: 7px; align-content: start; }
.field > span, .field-label { font-size: 14px; font-weight: 600; color: var(--text-2); }
.field small { font-size: 13px; color: var(--text-3); }
.tool input[type="time"],
.tool input[type="number"],
.tool select {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--text);
  font: 600 17px/1.2 var(--rounded);
  font-variant-numeric: tabular-nums;
  color-scheme: inherit;
}
.tool select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.tool input[type="time"], .tool input[type="number"], .tool select { box-sizing: border-box; min-width: 0; max-width: 100%; display: block; }
.tool input[type="time"] { -webkit-appearance: none; appearance: none; text-align: left; }
.tool input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.tool input:focus-visible, .tool select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--text-2); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.btn-ghost {
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.tool-divider { height: 1px; background: var(--hairline); margin: 26px 0; border: 0; }
.tool-note { margin: 14px 0 0; font-size: 14px; color: var(--text-3); }

/* Results */
.result-title { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--text-2); }
.times { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.times li { padding: 16px 16px 14px; border-radius: var(--radius-card); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--hairline); }
.times li.best { box-shadow: inset 0 0 0 2px var(--l3); }
.times b { display: block; white-space: nowrap; font: 800 26px/1.05 var(--rounded); font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: -0.01em; }
.times span { display: block; margin-top: 6px; font-size: 14px; color: var(--text-2); }
.times em { display: inline-block; margin-top: 8px; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--l3); }
.times li.short em { color: var(--text-3); }

.big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 6px; }
.big output { font: 800 clamp(44px, 7vw, 60px)/1 var(--rounded); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.big .tag { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--l0); color: var(--text-2); }
.big .tag[data-l="1"] { background: color-mix(in srgb, var(--l1) 22%, transparent); color: var(--l1); }
.big .tag[data-l="2"] { background: color-mix(in srgb, var(--l2) 22%, transparent); color: var(--l2); }
.big .tag[data-l="3"], .big .tag[data-l="4"] { background: color-mix(in srgb, var(--l3) 22%, transparent); color: var(--l4); }
.result-line { margin: 10px 0 0; font-size: 17px; color: var(--text-2); }
.result-line strong { color: var(--text); }

/* Sleep debt: one row per night */
.nights { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nights li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 4.6em; gap: 12px; align-items: center; }
.nights .n-name { font-size: 15px; font-weight: 600; color: var(--text-2); }
.nights li[hidden] { display: none; }
.nights li.week-label:not([hidden]) { display: block; margin: 0 0 2px; }
.nights .pair { grid-template-columns: 1fr 1fr; gap: 6px; }
.nights .pair select { min-height: 44px; font-size: 16px; padding: 8px 22px 8px 10px; background-position: calc(100% - 13px) 52%, calc(100% - 8px) 52%; }
.nights .pair select:disabled { opacity: 0.45; }
.nights .n-debt { text-align: right; font: 700 15px/1 var(--rounded); font-variant-numeric: tabular-nums; color: var(--text-3); }
.nights .n-debt.add { color: var(--loss, var(--l1)); }
.nights .n-debt.back { color: var(--gain, var(--l3)); }
.nights .n-debt.capped::after { content: "*"; }
.week-label { margin: 22px 0 10px; font-size: 14px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Sleep score: reuse the homepage ring */
.score-out { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; }
.ring { --c: var(--l4); position: relative; width: 170px; height: 170px; }
.ring[data-l="1"] { --c: var(--l1); }
.ring[data-l="2"] { --c: var(--l2); }
.ring[data-l="3"] { --c: var(--l3); }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.ring-bg { stroke: var(--l0); }
.ring-fg { stroke: var(--c); stroke-dasharray: var(--p) 100; transition: stroke-dasharray 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), stroke 0.3s ease; }
.ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-num output { font: 800 54px/1 var(--rounded); font-variant-numeric: tabular-nums; }
.ring-num span { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--c); text-transform: uppercase; letter-spacing: 0.06em; }
.parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.parts li { display: grid; grid-template-columns: 6.6em 1fr 3.4em; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.parts b { text-align: right; font-family: var(--rounded); font-variant-numeric: tabular-nums; color: var(--text); }
.parts .na b { color: var(--text-3); font-weight: 600; }
.part-bar { height: 7px; border-radius: 999px; background: var(--l0); overflow: hidden; }
.part-bar i { display: block; height: 100%; width: calc(var(--w, 0) * 100%); border-radius: inherit; background: var(--accent); transition: width 0.35s ease; }
.parts-why { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px; }
.parts-why li { font-size: 14px; color: var(--text-3); }
.warn { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--l2); }
.warn:empty { display: none; }

/* Calculator cards on the guides hub and in related links */
.calc-cards a strong::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--l3); margin-right: 10px; vertical-align: 2px; }
.hub-sub { font-size: 24px; letter-spacing: -0.01em; margin: 0 0 16px; }

@media (max-width: 560px) {
  .tool { padding: 20px 16px; border-radius: 22px; }
  .seg { display: flex; }
  .seg label { flex: 1; text-align: center; }
  .seg span { padding: 9px 10px; font-size: 14px; }
  .nights li { grid-template-columns: 5.4em minmax(0, 1fr) 3.4em; gap: 8px; }
  .nights .pair select { font-size: 15px; padding-left: 9px; }
  .nights .n-debt { font-size: 14px; }
  .nights .n-name { font-size: 14px; }
  .score-out { grid-template-columns: 1fr; justify-items: center; }
  .score-out .parts { width: 100%; }
  .times b { font-size: 22px; }
  .times { grid-template-columns: 1fr; }
  .times li { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; }
  .times li b { grid-row: span 2; min-width: 4.6em; }
  .times span, .times em { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ring-fg, .part-bar i, .seg span { transition: none; }
}