/* HOP — the daily Easy 8 check-in, calmer and roomier (v112)
   Soft sage light at the top, one roomy card per habit, round ticks, no strike-through on a missed habit,
   and one benefit under each habit name (e8benefits.js) with what's behind it under the arrow.
   Loaded after hop-refresh.css so it wins over the older check-in rules in metrics.css, score.css, why.css and e8test.css. */
:root{
  --ci-glow:#e6f2ee; --ci-card:#ffffff; --ci-line:#e1ebe7; --ci-off:#f7f7f3; --ci-off-line:#e8e6dc;
  --ci-check:#2f8a7a; --ci-ring:#b8cbc5; --ci-num-bg:#edf4f1; --ci-num:#5e7d76; --ci-ben:#58716c; --ci-more:#f0f6f3;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --ci-glow:#173230; --ci-card:rgba(255,255,255,.045); --ci-line:rgba(255,255,255,.09); --ci-off:rgba(255,255,255,.02); --ci-off-line:rgba(255,255,255,.07);
  --ci-check:#5fb8a6; --ci-ring:#4d6863; --ci-num-bg:rgba(255,255,255,.07); --ci-num:#a3bdb6; --ci-ben:#a9bfba; --ci-more:rgba(255,255,255,.055); } }
:root[data-theme="dark"]{
  --ci-glow:#173230; --ci-card:rgba(255,255,255,.045); --ci-line:rgba(255,255,255,.09); --ci-off:rgba(255,255,255,.02); --ci-off-line:rgba(255,255,255,.07);
  --ci-check:#5fb8a6; --ci-ring:#4d6863; --ci-num-bg:rgba(255,255,255,.07); --ci-num:#a3bdb6; --ci-ben:#a9bfba; --ci-more:rgba(255,255,255,.055); }

/* the sheet: a soft glow at the top, a little more room at the sides */
.sheet:has(> .checkin){ background:linear-gradient(180deg, var(--ci-glow) 0, var(--surface) 260px); padding-left:18px; padding-right:18px; }
.checkin .sheet-head{ margin-bottom:4px; }
.checkin .sheet-head h2{ font-family:Georgia, "Times New Roman", serif; font-weight:600; font-size:27px; letter-spacing:-.01em; line-height:1.15; }
.ci-day{ margin:0 0 16px; font-size:15px; color:var(--text-muted); }
.checkin .ci-note{ background:transparent; border:0; padding:0; margin:0 0 12px; font-size:16.5px; line-height:1.5; color:var(--text); }
.checkin .e8t-banner{ background:transparent; border:0; padding:0; margin:0 0 18px; font-size:14.5px; color:var(--text-muted); }

/* one roomy card per habit */
.checkin .ci-list{ gap:12px; margin-bottom:22px; }
.checkin .ci-item{ background:var(--ci-card); border:1px solid var(--ci-line); border-radius:20px; padding:10px 10px 10px 12px;
  box-shadow:0 1px 2px rgba(20,50,45,.04); transition:background .25s, border-color .25s; }
.checkin .ci-item:has(.ci-row.is-off){ background:var(--ci-off); border-color:var(--ci-off-line); box-shadow:none; }
.checkin .ci-line{ gap:8px; }
.checkin .ci-row{ padding:8px 4px; gap:14px; font-size:17.5px; font-weight:650; line-height:1.3; }
.checkin .ci-row:active{ background:transparent; }
.checkin .ci-row.is-off span{ text-decoration:none; color:var(--text-muted); }

/* round, soft tick */
.checkin .ci-row input{ -webkit-appearance:none; appearance:none; width:30px; height:30px; flex:none; margin:0; border-radius:50%; cursor:pointer;
  border:2px solid var(--ci-ring); background:var(--surface); transition:background .2s, border-color .2s, transform .15s; }
.checkin .ci-row input:checked{ border-color:var(--ci-check);
  background:var(--ci-check) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }
.checkin .ci-row input:active{ transform:scale(.92); }
.checkin .ci-row input:focus-visible{ outline:3px solid var(--accent-400); outline-offset:2px; }
.ci-num{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-right:9px; border-radius:50%; vertical-align:2px;
  background:var(--ci-num-bg); color:var(--ci-num); font-size:12px; font-weight:800; }

/* the star and the "?" sit quietly at the side */
.checkin .ci-q{ width:38px; height:38px; font-size:15px; opacity:.85; }
.checkin .e8t-star{ width:38px; height:38px; }

/* the benefit under the name, and what's behind it */
.ci-ben{ margin:-8px 0 4px 48px; }
.ci-ben-t{ display:block; max-width:100%; padding:4px 0; min-height:30px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:14.5px; line-height:1.4; color:var(--ci-ben); text-align:left; }
.ci-ben-chev{ display:inline-block; vertical-align:-3px; margin-left:4px; opacity:.75; transition:transform .2s; }
.ci-ben.is-open .ci-ben-chev{ transform:rotate(180deg); }
.ci-ben-t:focus-visible{ outline:2px solid var(--accent-400); outline-offset:2px; border-radius:6px; }
.ci-ben-more{ margin:4px 4px 6px 0; padding:11px 13px; border-radius:14px; background:var(--ci-more); }
.ci-ben-more[hidden]{ display:none; }
.ci-ben-more p{ margin:0 0 6px; font-size:14.5px; line-height:1.5; color:var(--text); }
.ci-ben-src{ font-size:13px; line-height:1.4; color:var(--accent-500); }
.ci-ben-src.is-hop{ color:var(--text-muted); font-weight:600; }

/* notes under a habit line up with the name */
.checkin .ci-sum, .checkin .ci-why-open, .checkin .e8t-sum, .checkin .e8t-hint{ margin:6px 0 4px 48px; }
.checkin .ci-sum, .checkin .e8t-sum{ border-radius:14px; }
.checkin .ci-why-open{ width:auto; border-radius:14px; }

/* a calm finish */
.checkin [data-ci-save]{ min-height:56px; border-radius:18px; font-size:18px; }
.checkin [data-ci-skip]{ min-height:46px; }

@media (max-width:380px){
  .sheet:has(> .checkin){ padding-left:12px; padding-right:12px; }
  .checkin .ci-row{ gap:11px; font-size:16.5px; }
  .ci-ben, .checkin .ci-sum, .checkin .ci-why-open, .checkin .e8t-sum, .checkin .e8t-hint{ margin-left:44px; }
  .ci-num{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .checkin .ci-row input, .ci-ben-chev, .checkin .ci-item{ transition:none; } }

/* v119: BEAST follows the Den */
.checkin .ci-item.is-den-empty, .checkin .ci-item.is-den-empty:has(.ci-row){ border:1.5px dashed #e3a83b; background:color-mix(in srgb, #fbf0d9 60%, var(--surface)); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .checkin .ci-item.is-den-empty, :root:not([data-theme="light"]) .checkin .ci-item.is-den-empty:has(.ci-row){ border-color:#b8862e; background:rgba(240,195,90,.07); } }
:root[data-theme="dark"] .checkin .ci-item.is-den-empty, :root[data-theme="dark"] .checkin .ci-item.is-den-empty:has(.ci-row){ border-color:#b8862e; background:rgba(240,195,90,.07); }
.ci-den{ margin:-6px 0 6px 48px; font-size:14px; line-height:1.4; }
.ci-den.is-logged{ display:flex; align-items:center; gap:6px; color:var(--ci-check); font-weight:700; }
.ci-den.is-note{ color:#a8700b; font-weight:600; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .ci-den.is-note{ color:#f0c35a; } }
:root[data-theme="dark"] .ci-den.is-note{ color:#f0c35a; }
.ci-den.is-offer{ padding:10px 12px; border-radius:14px; background:var(--surface); border:1px solid #efd28f; margin-right:4px; }
.ci-den.is-offer p{ margin:0 0 8px; font-size:14.5px; font-weight:600; color:var(--text); }
.ci-den-b{ display:flex; flex-wrap:wrap; gap:6px; }
.ci-den-b button{ font:inherit; font-size:14px; font-weight:700; border-radius:999px; padding:8px 12px; min-height:38px; cursor:pointer; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--text); }
.ci-den-b .ci-den-log{ background:var(--ci-check); border-color:var(--ci-check); color:#fff; }
.ci-den-b .ci-den-no{ border-color:transparent; color:var(--text-muted); }
@media (max-width:380px){ .ci-den{ margin-left:44px; } }