/* Mon médicament — styles
   L'écran entier prend la couleur du statut : neutre, vert (prise confirmée)
   ou orange (nouvelle prise à confirmer). */

:root {
  --bg-none: #F2F5F3;
  --bg-confirmed: #DFF0E5;
  --bg-expired: #FBE7D2;

  --ink: #13211A;
  --muted: #56665E;
  --line: rgba(19, 33, 26, 0.14);
  --soft: rgba(19, 33, 26, 0.07);
  --surface: rgba(255, 255, 255, 0.62);

  --ok: #1D7448;
  --on-ok: #FFFFFF;
  --due: #A84F00;
  --on-due: #FFFFFF;
  --halo-none: rgba(19, 33, 26, 0.07);
  --halo-expired: rgba(168, 79, 0, 0.16);

  --btn-bg: #13211A;
  --btn-ink: #FFFFFF;
  --btn-check: #86E3AC;

  --danger: #B3261E;
  --sheet-bg: #FFFFFF;

  --font-round: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --dial: min(74vw, 40vh, 290px);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-none: #0F1412;
    --bg-confirmed: #0A1F14;
    --bg-expired: #251506;

    --ink: #E8EFEA;
    --muted: #9AAAA1;
    --line: rgba(232, 239, 234, 0.16);
    --soft: rgba(232, 239, 234, 0.08);
    --surface: rgba(255, 255, 255, 0.05);

    --ok: #5BD192;
    --on-ok: #08190F;
    --due: #FFA04A;
    --on-due: #2A1503;
    --halo-none: rgba(232, 239, 234, 0.08);
    --halo-expired: rgba(255, 160, 74, 0.16);

    --btn-bg: #E8EFEA;
    --btn-ink: #0F1412;
    --btn-check: #1D7448;

    --danger: #FF7A6E;
    --sheet-bg: #18201C;
  }
}

/* Couleur d'état */
html            { --bg: var(--bg-none);      --accent: var(--ink); --halo: var(--halo-none); }
html[data-state="confirmed"] { --bg: var(--bg-confirmed); --accent: var(--ok); }
html[data-state="expired"]   { --bg: var(--bg-expired);   --accent: var(--due); --halo: var(--halo-expired); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.ready, html.ready body { transition: background-color 450ms ease; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.45 var(--font-text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, p { margin: 0; }
button { font: inherit; color: inherit; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
button:focus-visible, summary:focus-visible, .field:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Mise en page ---------- */

.app {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  padding:
    calc(env(safe-area-inset-top) + 18px)
    calc(env(safe-area-inset-right) + 22px)
    calc(env(safe-area-inset-bottom) + 20px)
    calc(env(safe-area-inset-left) + 22px);
  display: flex;
  flex-direction: column;
}

.top h1 {
  font: 700 34px/1.1 var(--font-round);
  letter-spacing: -0.02em;
}
.today {
  margin-top: 4px;
  color: var(--muted);
}

.notice {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.4;
}
.notice-error {
  color: var(--danger);
  background: var(--surface);
  font-weight: 600;
}

/* ---------- Statut ---------- */

.status {
  margin-top: 26px;
  text-align: center;
}
.phrase {
  font: 600 22px/1.25 var(--font-round);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.pill {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font: 700 17px/1.25 var(--font-round);
  max-width: 100%;
  text-wrap: balance;
}
html[data-state="none"] .pill {
  background: transparent;
  padding: 2px 8px;
  color: var(--ink);
  font-weight: 600;
  opacity: 0.75;
}
html[data-state="confirmed"] .pill {
  background: var(--ok);
  color: var(--on-ok);
  letter-spacing: 0.05em;
}
html[data-state="expired"] .pill {
  background: var(--due);
  color: var(--on-due);
}

/* ---------- Bouton rond / cadran ---------- */

.hero {
  flex: 1 0 auto;
  display: grid;
  place-items: center;
  padding: 26px 0 22px;
}
.take,
.dial {
  grid-area: 1 / 1;
  width: var(--dial);
  height: var(--dial);
}

.take {
  border: 0;
  border-radius: 50%;
  background: var(--btn-bg);
  color: var(--btn-ink);
  box-shadow: 0 0 0 12px var(--halo);
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 450ms ease;
}
.take:active { transform: scale(0.96); }
.take:disabled { cursor: default; }
.take-check {
  font: 700 58px/1 var(--font-round);
  color: var(--btn-check);
}
.take-label {
  font: 700 19px/1.2 var(--font-round);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  max-width: 11em;
  text-align: center;
}

.dial { position: relative; }
.dial svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.ticks line {
  stroke: var(--accent);
  stroke-opacity: 0.35;
  stroke-width: 2;
  stroke-linecap: round;
}
.ticks line.major { stroke-opacity: 0.6; stroke-width: 2.5; }
.track {
  fill: none;
  stroke: var(--accent);
  stroke-opacity: 0.16;
  stroke-width: 12;
}
.arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}
.dial-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 14%;
}
.dial-label {
  font-size: 15px;
  color: var(--muted);
}
.countdown {
  margin: 4px 0 6px;
  font: 700 clamp(40px, 14vw, 58px)/1 var(--font-round);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.countdown .unit {
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  margin: 0 0.24em 0 0.08em;
}
.countdown .unit:last-child { margin-right: 0; }
.countdown .small { font-size: 0.55em; letter-spacing: -0.01em; }
.due {
  font-size: 15px;
  color: var(--muted);
}

/* ---------- Sous le cadran ---------- */

.below {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.done {
  padding: 11px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: 600 16px/1.2 var(--font-round);
}
.done:disabled { opacity: 1; }

.last { font-size: 17px; }
.last strong { font-weight: 650; }

.history {
  width: 100%;
  max-width: 340px;
}
.history summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 15px;
}
.history summary::-webkit-details-marker { display: none; }
.history summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms ease;
}
.history[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.history-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 6px 16px;
  border-radius: 16px;
  background: var(--surface);
  text-align: left;
  font-size: 15px;
}
.history-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.history-list li:first-child { border-top: 0; }
.history-list time { font-variant-numeric: tabular-nums; font-weight: 600; }

.link {
  border: 0;
  background: none;
  padding: 6px 10px;
  color: var(--muted);
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
  cursor: pointer;
}

.note {
  margin-top: 6px;
  max-width: 30em;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.85;
}

/* ---------- Feuille « Annuler ou corriger » ---------- */

.sheet {
  border: 0;
  padding: 0;
  margin: auto auto 0;
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  background: var(--sheet-bg);
  color: var(--ink);
  border-radius: 28px 28px 0 0;
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.42); }
.sheet[open] { animation: sheet-in 260ms cubic-bezier(.2, .8, .2, 1); }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }

.sheet-body {
  padding: 10px 22px calc(env(safe-area-inset-bottom) + 20px);
}
.grabber {
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  margin: 0 auto 18px;
}
.panel { display: flex; flex-direction: column; gap: 12px; }
.panel h2 {
  font: 700 22px/1.2 var(--font-round);
  outline: none;
}
.sheet-text { font-size: 17px; }
.sheet-muted { color: var(--muted); font-size: 15px; }
.sheet-sep { height: 1px; background: var(--line); margin: 6px 0; }

.field-label {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}
.field {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 17px/1.3 var(--font-text);
  text-align: left;
}
.field::-webkit-date-and-time-value { text-align: left; }
.field-error {
  color: var(--danger);
  font-size: 15px;
  font-weight: 600;
}

.btn {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 0;
  border-radius: 16px;
  font: 600 17px/1.2 var(--font-round);
  cursor: pointer;
}
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-primary { background: var(--btn-bg); color: var(--btn-ink); }
.btn-danger { background: var(--danger); color: #FFFFFF; }
.btn-soft { background: var(--soft); color: var(--ink); }
.btn-text-danger { background: transparent; color: var(--danger); }

@media (prefers-color-scheme: dark) {
  .btn-danger { color: #2A0906; }
}

@media (prefers-reduced-motion: reduce) {
  html.ready, html.ready body, .arc, .take, .history summary::after { transition: none !important; }
  .sheet[open] { animation: none; }
}