/* TriggerMark — Sleep: the morning card on the home screen, the week and
   patterns screen, and the reminder channels inside the push card. */

  /* ---------- Morning card (home) ---------- */
  .sleep-card{margin-top:22px;}
  .sleep-card[hidden]{display:none;}
  .sleep-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
  .sleep-card-head h3{margin:0;}
  .sleep-close{
    flex:none;appearance:none;cursor:pointer;background:none;
    border:1px solid var(--border);color:var(--text-faint);
    border-radius:999px;width:30px;height:30px;font-size:1.05rem;line-height:1;
    font-family:inherit;
  }
  .sleep-q{margin-top:14px;}
  .sleep-q-label{margin:0 0 8px;font-size:.86rem;font-weight:600;color:var(--text);}
  .sleep-scale,.sleep-yesno{display:flex;gap:6px;}
  /* Nothing is selected until a finger lands on it, and the selected answer
     is calm blue rather than red: a bad night is an answer, not an alarm. */
  .sleep-opt{
    flex:1;min-width:0;appearance:none;cursor:pointer;font-family:inherit;
    background:var(--bg-soft);border:1px solid var(--border);color:var(--text-dim);
    border-radius:var(--radius-s);padding:10px 3px;
    font-size:.72rem;font-weight:600;line-height:1.25;
    transition:background .12s ease,border-color .12s ease,color .12s ease;
  }
  .sleep-yesno .sleep-opt{font-size:.84rem;}
  .sleep-opt:active{transform:scale(.95);}
  .sleep-opt[aria-pressed="true"]{background:var(--calm-soft);border-color:var(--calm);color:var(--calm);}
  .sleep-saved{min-height:1.2em;margin:12px 0 0;color:var(--text-faint);font-size:.74rem;}

  /* ---------- Waiting for approval (home, under the morning card) ---------- */
  /* What the watch detected and nobody answered: at night, or a question that
     went by. Calm, like the morning card — a list to go through, not an alert. */
  .watch-review{margin-top:14px;}
  .watch-review[hidden]{display:none;}
  .watch-review-count{
    display:inline-block;min-width:1.6em;margin-inline-start:6px;
    font-size:.74rem;font-weight:700;text-align:center;
    color:var(--calm);background:var(--calm-soft);border-radius:999px;padding:1px 7px;
  }
  .watch-review-list{margin-top:10px;}
  .watch-review-row{
    display:flex;align-items:center;gap:10px;
    padding:10px 0;border-top:1px solid var(--border-soft);
  }
  .wr-meta{flex:1;min-width:0;display:flex;flex-direction:column;}
  .wr-when{font-weight:700;font-size:.92rem;font-variant-numeric:tabular-nums;color:var(--text);}
  .wr-day{font-size:.76rem;color:var(--text-faint);margin-top:2px;}
  .wr-actions{flex:none;display:flex;gap:6px;}
  .wr-btn{
    appearance:none;cursor:pointer;font-family:inherit;
    background:var(--bg-soft);border:1px solid var(--border);color:var(--text-dim);
    border-radius:var(--radius-s);padding:8px 10px;font-size:.78rem;font-weight:600;
  }
  .wr-btn.yes{border-color:var(--calm);color:var(--calm);background:var(--calm-soft);}
  .wr-btn:disabled{opacity:.5;cursor:default;}

  /* ---------- Week (sleep screen) ---------- */
  .sleep-week{
    background:var(--card);border:1px solid var(--border-soft);
    border-radius:var(--radius-m);overflow:hidden;
  }
  .sleep-head,.sleep-night{
    display:grid;grid-template-columns:86px minmax(0,1fr) 78px;
    gap:10px;padding:11px 14px;align-items:start;
  }
  .sleep-head{background:var(--bg-soft);color:var(--text-faint);font-size:.7rem;font-weight:700;padding-top:8px;padding-bottom:8px;}
  .sleep-night + .sleep-night{border-top:1px solid var(--border-soft);}
  .sleep-date{font-size:.78rem;font-weight:700;color:var(--text-dim);line-height:1.4;}
  .sleep-reported{display:flex;flex-direction:column;gap:6px;min-width:0;}
  .sleep-quality{font-size:.86rem;font-weight:700;color:var(--text);}
  .sleep-facts{display:flex;flex-wrap:wrap;gap:4px 6px;}
  .sleep-fact{font-size:.7rem;color:var(--text-dim);background:var(--bg-soft);border-radius:999px;padding:2px 8px;}
  .sleep-fact.yes{color:var(--amber);background:var(--amber-soft);}
  .sleep-fact.unset{color:var(--text-faint);}
  .sleep-none{font-size:.78rem;color:var(--text-faint);}
  /* The watch is a different source from the patient and has to look like
     one: its own column behind its own rule, never styled like an answer. */
  .sleep-measured{
    align-self:stretch;
    border-inline-start:1px dashed var(--border);padding-inline-start:10px;
    font-size:.76rem;color:var(--text-faint);
  }
  .sleep-watch-note{margin:10px 2px 0;color:var(--text-faint);font-size:.74rem;line-height:1.55;}

  /* ---------- Patterns (sleep screen) ---------- */
  .sleep-summary{margin-top:0;}
  .sleep-block-title{margin:18px 0 8px;font-size:.76rem;font-weight:700;color:var(--text-faint);}
  .sleep-block-title:first-child{margin-top:0;}
  .sleep-line{margin:0 0 10px;font-size:.86rem;line-height:1.65;color:var(--text);}
  .sleep-line.faint{color:var(--text-faint);}
  .sleep-line .trend{margin-inline-start:6px;}
  .sleep-line .trend-detail{display:block;font-size:.74rem;}

  /* ---------- Reminder channels (push card) ---------- */
  .notif-channels{display:flex;flex-direction:column;gap:10px;margin:2px 0 10px;}
  .notif-row{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--text);cursor:pointer;}
  .notif-row input[type="checkbox"]{width:20px;height:20px;margin:0;flex:none;accent-color:var(--calm);}
  .notif-hour{padding-inline-start:30px;color:var(--text-dim);font-size:.8rem;}
  .notif-hour select{
    font-family:inherit;font-size:.82rem;color:var(--text);
    background:var(--card-2);border:1px solid var(--border);border-radius:var(--radius-s);padding:6px 8px;
  }
  .notif-hour select:disabled{opacity:.5;}
  .notif-note{font-size:.76rem;}