/* Treatly — Commitments & Calendar
 * Long-term consistency surfaces: commitment builder, streak path, month view.
 * Uses core tokens only so dark mode and the native shells inherit correctly.
 */

/* How a day went, in one colour each. Kept deliberately outside the accent
   palette: these mean pass / fail / waiting, and must not shift when the theme
   does. Muted enough to sit next to pastel chrome without shouting. */
:root{
  --cal-kept:#3E8E5A;
  --cal-proof:#D69A2C;
  --cal-missed:#C4544F;
  --cal-open:#9AA3AE;
  /* A renewed day is neither kept nor missed — it is a day someone covered. */
  --cal-renewed:#4E7FA8;
}
[data-theme="dark"]{
  --cal-kept:#5FB77C;
  --cal-proof:#E6B65A;
  --cal-missed:#DE7B76;
  --cal-open:#7C848E;
  --cal-renewed:#79A6CC;
}

/* ── shared bits ─────────────────────────────────────────── */
.commit-sec{margin:0 0 18px;}
.commit-sec-lbl{
  font-family:var(--font-display);font-size:11.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--t3);margin:0 0 8px;
}
.commit-sec-lbl--tight{margin-top:12px;}
.commit-hint{font-size:12px;line-height:1.45;color:var(--t3);font-weight:600;margin:8px 0 0;}
.commit-hint--tight{margin:0 0 10px;}

/* ── create sheet ────────────────────────────────────────── */
.commit-sheet{padding-top:8px;max-height:92vh;overflow-y:auto;}
.commit-sheet-title{
  font-family:var(--font-display);font-size:21px;font-weight:800;letter-spacing:-.02em;
  color:var(--text);margin:4px 0 2px;
}
.commit-sheet-sub{font-size:12.5px;font-weight:600;color:var(--t3);margin:0 0 16px;line-height:1.45;}

/* One decision per panel, with the stepper as the only "where am I". */
.commit-stepper{display:flex;align-items:flex-start;gap:4px;margin:0 0 16px;}
.commit-step-dot{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:0;border:none;background:none;cursor:pointer;position:relative;
}
.commit-step-dot::before{
  content:"";position:absolute;top:11px;left:calc(-50% + 13px);right:calc(50% + 13px);
  height:2px;border-radius:2px;background:var(--border);
}
.commit-step-dot:first-child::before{display:none;}
.commit-step-dot.is-done::before,.commit-step-dot.is-now::before{background:var(--brand);}
.commit-step-n{
  display:flex;align-items:center;justify-content:center;
  width:23px;height:23px;border-radius:50%;background:var(--s2);
  border:1.5px solid var(--border);
  font-family:var(--font-display);font-size:11px;font-weight:800;color:var(--t3);
}
.commit-step-dot.is-done .commit-step-n{background:var(--brand);border-color:var(--brand);color:var(--on-brand,#fff);}
.commit-step-dot.is-now .commit-step-n{
  background:var(--surface);border-color:var(--brand);color:var(--brand);
  box-shadow:0 0 0 3px rgba(var(--brand-rgb),.16);
}
.commit-step-lbl{
  font-family:var(--font-display);font-size:9.5px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;color:var(--t3);text-align:center;
}
.commit-step-dot.is-now .commit-step-lbl{color:var(--brand);}

.commit-form-nav{display:flex;align-items:center;gap:8px;margin-top:12px;}
.commit-form-nav .cta{flex:1;margin-top:0!important;}
.commit-form-back{
  flex:0 0 auto;width:auto!important;margin:0!important;padding:12px 16px!important;font-weight:800;
}

.commit-mate-search{margin-bottom:10px!important;}
.commit-who--picked{margin-bottom:9px;}
.commit-who{display:flex;flex-wrap:wrap;gap:8px;}
.commit-who-chip{
  display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;
  border:2px solid var(--border);background:var(--surface);color:var(--t2);
  font-family:var(--font-display);font-size:13px;font-weight:800;cursor:pointer;
}
.commit-who-chip.on{
  border-color:var(--brand);background:var(--brand-dim);color:var(--brand);
  box-shadow:0 2px 10px rgba(var(--brand-rgb),.18);
}

/* how often — three cards, then whatever that choice needs */
.commit-freqs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
/* One tap vs timer — two choices, so two columns. */
.commit-freqs--2{grid-template-columns:repeat(2,1fr);}
.commit-freq{
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:11px 6px;
  border-radius:15px;border:2px solid var(--border);background:var(--surface);
  cursor:pointer;text-align:center;
}
.commit-freq.on{border-color:var(--brand);background:var(--brand-dim);}
.commit-freq-emoji{font-size:19px;line-height:1.1;}
.commit-freq strong{font-family:var(--font-display);font-size:12.5px;font-weight:800;color:var(--text);}
.commit-freq.on strong{color:var(--brand);}
.commit-freq small{font-size:10px;font-weight:600;color:var(--t3);line-height:1.3;}

.commit-window{display:flex;gap:9px;margin-top:11px;}
.commit-window label{
  flex:1;display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--t3);
}
.commit-time-inp{margin:0!important;padding:10px 11px;font-size:13.5px;}

.commit-times{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;}
.commit-time-chip{
  display:inline-flex;align-items:center;gap:6px;padding:8px 10px 8px 13px;border-radius:999px;
  border:1.5px solid var(--brand);background:var(--brand-dim);color:var(--brand);
  font-family:var(--font-display);font-size:13px;font-weight:800;
}
.commit-time-chip button{
  width:19px;height:19px;border-radius:50%;border:none;background:rgba(var(--brand-rgb),.22);
  color:var(--brand);font-size:11px;line-height:1;cursor:pointer;padding:0;
}
.commit-time-add{display:flex;gap:8px;align-items:center;margin-top:9px;}
.commit-time-add .commit-time-inp{flex:0 0 128px;}
.commit-time-btn{
  flex:1;padding:11px;border-radius:13px;border:1.5px dashed var(--border2);background:transparent;
  color:var(--t3);font-family:var(--font-display);font-size:13px;font-weight:800;cursor:pointer;
}

.commit-days{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.commit-day-chip{
  min-width:48px;padding:10px 12px;border-radius:13px;border:2px solid var(--border);
  background:var(--surface);font-family:var(--font-display);font-size:14px;font-weight:800;
  color:var(--t2);cursor:pointer;
}
.commit-day-chip.on{border-color:var(--brand);background:var(--brand-dim);color:var(--brand);}
.commit-day-custom{width:92px;margin:0!important;padding:9px 10px;font-size:13px;}

.commit-tog{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;
  padding:12px 14px;border-radius:14px;background:var(--s2);border:1.5px solid var(--border);cursor:pointer;
}
.commit-tog strong{display:block;font-family:var(--font-display);font-size:13.5px;font-weight:800;color:var(--text);}
.commit-tog small{display:block;font-size:11.5px;font-weight:600;color:var(--t3);margin-top:2px;}
.commit-tog-sw{
  position:relative;flex-shrink:0;width:46px;height:27px;border-radius:999px;
  background:var(--s3);transition:background .18s ease;
}
.commit-tog-sw::after{
  content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:var(--surface);box-shadow:0 1px 4px rgba(28,25,23,.25);transition:transform .18s ease;
}
.commit-tog-sw.on{background:var(--brand);}
.commit-tog-sw.on::after{transform:translateX(19px);}

.commit-summary{
  padding:13px 14px;border-radius:15px;background:var(--s2);border:1.5px solid var(--border);
  font-size:12.5px;line-height:1.55;color:var(--t2);font-weight:600;margin-bottom:6px;
}
.commit-summary strong{color:var(--text);font-weight:800;}

/* ── detail sheet ────────────────────────────────────────── */
.commit-detail-hero{margin-bottom:14px;}
.commit-detail-cat{
  display:inline-block;padding:5px 11px;border-radius:999px;
  background:var(--ctone-bg,var(--s2));color:var(--ctone,var(--t3));
  font-size:11.5px;font-weight:800;margin-bottom:8px;
}
.commit-detail-title{
  font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.02em;
  color:var(--text);margin:0 0 4px;line-height:1.2;
}
.commit-detail-daily{font-size:13.5px;font-weight:700;color:var(--t2);margin:0 0 2px;}
.commit-detail-who{font-size:12px;font-weight:600;color:var(--t3);margin:0 0 12px;}

.commit-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px;}
.commit-stat{
  padding:10px 8px;border-radius:14px;background:var(--s2);text-align:center;
}
.commit-stat strong{display:block;font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--text);}
.commit-stat small{display:block;font-size:10.5px;font-weight:700;color:var(--t3);margin-top:2px;}

.commit-bar{height:8px;border-radius:999px;background:var(--s3);overflow:hidden;}
.commit-bar span{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--ctone,var(--brand)),var(--brand2,var(--ctone)));
}

.commit-path{
  display:flex;flex-wrap:wrap;gap:5px;padding:12px;border-radius:16px;background:var(--s2);
  margin-bottom:14px;
}
.commit-dot{
  width:20px;height:20px;border-radius:7px;background:var(--surface);
  border:1.5px solid var(--border);display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;line-height:1;
}
.commit-dot.is-done{background:var(--ctone,var(--brand));border-color:var(--ctone,var(--brand));}
.commit-dot.is-today{border-color:var(--ctone,var(--brand));border-width:2.5px;}
.commit-dot.is-part{
  border-color:var(--ctone,var(--brand));
  background:linear-gradient(to top,var(--ctone-bg,var(--brand-dim)) 50%,transparent 50%);
}
.commit-dot.is-missed{background:var(--s3);border-color:var(--s3);opacity:.65;}
.commit-dot.is-renewed{
  background:var(--cal-renewed);border-color:var(--cal-renewed);
  box-shadow:inset 0 0 0 2px var(--surface);
}
.commit-dot.is-ahead{background:var(--surface);border-color:var(--border);}
.commit-dot-more{
  align-self:center;font-size:10.5px;font-weight:800;color:var(--t3);padding-left:2px;
}

/* ── renew gifts ──────────────────────────────────────────
   The bank, then the days one can still be spent on. Sits under the streak
   path, because it is a thing you do *to* the path. */
.commit-renewgift{
  padding:13px 14px;border-radius:17px;background:var(--s2);
  border:1.5px solid var(--border);margin-bottom:14px;
}
.commit-renewgift .commit-sec-lbl{margin-bottom:4px;}
.commit-renewgift-bank{display:flex;align-items:center;gap:10px;}
.commit-renewgift-count{
  flex:0 0 auto;min-width:36px;height:36px;padding:0 9px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--cal-renewed);color:#fff;
  font-family:var(--font-display);font-size:16px;font-weight:800;
}
.commit-renewgift-line{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--t2);}
.commit-renewgift-add{
  flex:0 0 auto;padding:9px 13px;border-radius:12px;border:1.5px solid var(--cal-renewed);
  background:var(--surface);color:var(--cal-renewed);font-family:var(--font-display);
  font-size:12.5px;font-weight:800;cursor:pointer;
}
.commit-renewgift-days{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.commit-renewgift-day{
  padding:8px 12px;border-radius:11px;border:1.5px solid var(--cal-renewed);
  background:var(--cal-renewed);color:#fff;font-family:var(--font-display);
  font-size:12px;font-weight:800;cursor:pointer;
}
.commit-renewgift-day.is-open{
  background:var(--surface);border-color:var(--border);color:var(--t3);cursor:default;
}
.commit-renewgift-give{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.commit-renewgift-to{
  padding:7px 11px;border-radius:11px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--t2);font-size:11.5px;font-weight:700;cursor:pointer;
}

.commit-checkin{width:100%;margin-bottom:14px;}
.commit-checkin.is-done{opacity:.65;}

/* Treats down the run. The card only ever offered today, so nothing could be
   waiting before the day arrived — this is the row of days ahead, one tap
   each, opening the normal treat panel on that day's check-in. */
.commit-plan{margin-bottom:14px;}
.commit-plan-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px;
}
.commit-plan-cell{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:9px 10px;border-radius:14px;text-align:left;
  border:1.5px solid var(--border);background:var(--surface);
  font-family:inherit;
}
.commit-plan-cell.is-open{cursor:pointer;}
.commit-plan-cell.is-open:hover{border-color:var(--ctone,var(--brand));}
.commit-plan-cell.has-treat{
  border-color:var(--ctone,var(--brand));background:var(--ctone-bg,var(--brand-dim));
}
.commit-plan-day{
  font-family:var(--font-display);font-size:12.5px;font-weight:800;color:var(--text);
}
.commit-plan-idx{font-size:10.5px;font-weight:700;color:var(--t3);}
.commit-plan-mark{
  margin-top:3px;font-size:12px;font-weight:800;color:var(--ctone,var(--brand));
}

.commit-boosts{margin-bottom:14px;}
.commit-boost-row{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;}
.commit-boost-row::-webkit-scrollbar{display:none;}
.commit-boost{
  flex:0 0 auto;display:inline-flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 13px;border-radius:14px;border:1.5px solid var(--border);background:var(--surface);
  font-size:11.5px;font-weight:800;color:var(--t2);cursor:pointer;
}
.commit-boost span{font-size:19px;}

/* who else is on it */
.commit-roster{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;}
.commit-roster-row{
  display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:14px;
  background:var(--surface);border:1.5px solid var(--border);
}
.commit-roster-row.is-accepted{border-color:var(--brand);background:var(--brand-dim);}
.commit-roster-row.is-declined{opacity:.55;}
.commit-roster-name{flex:1;min-width:0;font-family:var(--font-display);font-size:13.5px;font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.commit-roster-meta{flex-shrink:0;font-size:11.5px;font-weight:700;color:var(--t3);}
.commit-roster-streak{flex-shrink:0;font-size:11.5px;font-weight:800;color:var(--t2);}

/* accept or reject an invite, from the detail sheet */
.commit-invite-actions{display:flex;gap:9px;margin:14px 0 4px;}
.commit-invite-yes{flex:1;margin:0;}
.commit-invite-no{
  flex:0 0 auto;padding:14px 18px;border-radius:15px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--t2);font-family:var(--font-display);
  font-size:14px;font-weight:800;cursor:pointer;
}

/* the finish line moves */
.commit-renew{
  display:flex;flex-direction:column;gap:3px;padding:14px 15px;border-radius:17px;
  border:2px solid var(--brand);background:var(--brand-dim);margin-bottom:14px;
}
.commit-renew strong{font-family:var(--font-display);font-size:15px;font-weight:800;color:var(--text);}
.commit-renew small{font-size:12px;font-weight:600;color:var(--t3);}
.commit-renew-row{display:flex;gap:7px;align-items:center;margin-top:9px;}
.commit-renew-btn{flex:1;margin:0;padding:12px;font-size:13.5px;}
.commit-renew-alt{
  flex:0 0 auto;padding:12px 14px;border-radius:13px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--t2);font-family:var(--font-display);
  font-size:13px;font-weight:800;cursor:pointer;
}

.commit-detail-actions{display:flex;justify-content:center;padding-bottom:4px;}
.commit-ghost-btn{
  border:none;background:transparent;color:var(--t3);font-size:12.5px;font-weight:700;
  cursor:pointer;padding:8px 12px;text-decoration:underline;
}

/* ── calendar screen ─────────────────────────────────────── */
#s-calendar .calendar-host{
  flex:1;min-height:0;overflow-y:auto;padding:0 0 var(--tab-scroll-bottom);
  display:flex;flex-direction:column;background:var(--surface);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
}
#s-calendar .calendar-host::-webkit-scrollbar{display:none;}

/* ── Month view ──────────────────────────────────────────────────────────────
   Laid out like a calendar: month and controls on one line, a weekday rule,
   then a continuous grid of day boxes separated by hairlines rather than gaps.
   Each box holds the date and what is on that day. */
.cal-top{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 14px 10px;
}
/* The month is the title of the screen, so it is cut from the same sweep the
   header and the CTAs are. */
.cal-month{
  font-family:var(--font-display);font-size:23px;font-weight:800;letter-spacing:-.03em;
  margin:0;color:var(--text);
  background:var(--hdr-grad,linear-gradient(128deg,var(--brand),var(--brand2)));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.cal-top-btns{display:flex;align-items:center;gap:6px;}
.cal-nav{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);
  color:var(--t2);font-size:19px;font-weight:800;cursor:pointer;line-height:1;
  box-shadow:var(--sh);
}
.cal-nav:active{background:var(--brand-dim);color:var(--brand);}

/* ── the grid ────────────────────────────────────────────────────────────────
   No card, no border, no shadow, no grain: the month is the screen. Both edges
   are the phone's edges and the only structure is the hairline between cells. */
.cal-card{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
  background:var(--surface);
  border-top:1px solid var(--border);
}

.cal-dow{
  flex:0 0 auto;
  display:grid;grid-template-columns:repeat(7,1fr);
  padding:9px 0;
  background:var(--hdr-grad,linear-gradient(128deg,var(--brand),var(--brand2)));
  background-size:cover;
}
.cal-dow span{
  text-align:center;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--chrome-ink,#fff);opacity:.92;
}

/* A commitment is one run, so it draws as one bar across the days it covers,
   broken only where the week breaks. Each day of the bar carries its own
   state colour, so the shape reads as a streak and the colour as the record. */
.cal-weeks{
  /* Fills the grid on a normal screen. On a short one the weeks would be
     squeezed under their own minimum and the last row would be cut off, so
     this scrolls rather than clips. */
  flex:1 1 auto;min-height:0;overflow-y:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
  display:flex;flex-direction:column;padding:0;
  background-image:repeating-linear-gradient(
    to right,
    transparent 0 calc(100% / 6 - 1px),
    var(--border) calc(100% / 6 - 1px) calc(100% / 6)
  );
  background-size:calc(100% * 6 / 7) 100%;
  background-repeat:no-repeat;
}
.cal-weeks::-webkit-scrollbar{display:none;}
.cal-week{
  flex:1 0 auto;min-height:46px;
  display:flex;flex-direction:column;
  padding:5px 0 6px;
}
.cal-week + .cal-week{border-top:1px solid var(--border);}
.cal-week-days{flex:0 0 auto;display:grid;grid-template-columns:repeat(7,1fr);}
.cal-day{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  border:none;background:transparent;padding:0;cursor:pointer;
  min-width:0;
}
.cal-day--pad{visibility:hidden;cursor:default;}
.cal-day-n{
  font-family:var(--font-display);font-size:12.5px;font-weight:700;color:var(--t2);
  line-height:24px;width:24px;height:24px;border-radius:12px;text-align:center;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.cal-day.is-today .cal-day-n{
  background:var(--chrome-cta-gradient,linear-gradient(128deg,var(--brand),var(--brand2)));
  color:var(--on-brand,#fff);font-weight:800;
  box-shadow:0 2px 8px rgba(var(--brand-rgb,14,116,144),.35),inset 0 1px 0 rgba(255,255,255,.24);
}
.cal-day.is-sel .cal-day-n{box-shadow:inset 0 0 0 2px var(--brand);}
.cal-day.is-sel.is-today .cal-day-n{
  box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--brand);
}
.cal-day:active .cal-day-n{transform:scale(.9);}

/* One dot per task on that day, coloured by whose it is — yours in the brand
   colour, everyone else in their own. Four is as many as a cell can hold. */
.cal-dots{display:flex;align-items:center;justify-content:center;gap:2.5px;min-height:5px;}
.cal-dot{
  width:5px;height:5px;border-radius:50%;background:var(--dot,var(--brand));
  display:block;flex:0 0 auto;
}
.cal-dot.is-done{opacity:.4;}
.cal-dot-more{
  font-size:8px;font-weight:800;line-height:5px;color:var(--t4);
  font-style:normal;display:block;
}

.cal-lanes{
  flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:repeat(7,1fr);gap:3px 0;
  align-content:start;margin-top:5px;padding:0 2px;
}
.cal-lanes-blank{grid-column:1/span 7;height:6px;}

/* ── the day, opened in place ────────────────────────────────────────────── */
.cal-open{flex:0 0 auto;}
.cal-open-day{display:none;}
.cal-open-day.is-on{
  display:flex;flex-direction:column;gap:3px;
  margin:6px 6px 0;padding:7px 9px;
  border-radius:10px;background:var(--s2);
  animation:calOpenIn .16s ease-out;
}
@keyframes calOpenIn{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:none;}}
.cal-open-row{
  display:flex;align-items:center;gap:6px;min-width:0;
  font-size:11.5px;font-weight:700;color:var(--t2);
}
.cal-open-row.is-done{color:var(--t4);}
.cal-open-row.is-done .cal-open-task{text-decoration:line-through;}
.cal-open-dot{
  width:6px;height:6px;border-radius:50%;background:var(--dot,var(--brand));
  flex:0 0 auto;
}
.cal-open-row b{font-weight:800;color:var(--text);flex:0 0 auto;}
.cal-open-row.is-done b{color:var(--t4);}
.cal-open-task{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600;
}
.cal-open-tick{font-style:normal;color:var(--green);font-weight:800;flex:0 0 auto;}
.cal-open-none{font-size:11.5px;font-weight:600;color:var(--t4);}
.cal-run{
  position:relative;display:block;min-width:0;padding:0;border:none;background:transparent;
  cursor:pointer;text-align:left;overflow:hidden;
  border-radius:2px;
}
/* Only the true ends get a rounded cap, so a run continuing into the next week
   reads as carrying on rather than stopping at the edge. */
.cal-run.opens .cal-run-segs{border-top-left-radius:999px;border-bottom-left-radius:999px;}
.cal-run.ends .cal-run-segs{border-top-right-radius:999px;border-bottom-right-radius:999px;}
.cal-run-name{
  display:block;font-size:9px;font-weight:800;line-height:1.25;
  color:var(--ctone,var(--brand));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px 1px;
}
/* A run is a painted bar, not a grey block: each day keeps its state colour and
   the whole bar carries a sheen top to bottom so it reads as a solid object. */
.cal-run-segs{
  display:flex;height:11px;overflow:hidden;background:var(--s3);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.14);
}
.cal-seg{
  flex:1;min-width:0;height:100%;
  background-image:linear-gradient(180deg,rgba(255,255,255,.30),rgba(0,0,0,.10));
}
.cal-seg.is-done{background-color:var(--cal-kept,#3E8E5A);}
.cal-seg.is-proof{background-color:var(--cal-proof,#D69A2C);}
.cal-seg.is-missed{background-color:var(--cal-missed,#C4544F);}
.cal-seg.is-open{background-color:var(--cal-open,#9AA3AE);}
.cal-seg.is-ahead{
  background-color:var(--ctone-bg,var(--s3));
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 3px,transparent 3px 6px);
}
.cal-seg.is-sel{box-shadow:inset 0 0 0 2px var(--text);}

/* Whose calendar — one line, and only when it is not yours. */
.cal-whose{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 14px 8px;
  font-family:var(--font-display);font-size:12.5px;font-weight:800;color:var(--t3);
}
.cal-whose button{
  border:none;background:none;padding:0;cursor:pointer;
  font-family:var(--font-display);font-size:12px;font-weight:800;color:var(--brand);
}

.cal-fab{
  width:100%;margin:4px 0 12px;padding:15px;border-radius:17px;border:none;
  background:var(--chrome-cta-gradient);color:#fff;font-family:var(--font-display);
  font-size:14.5px;font-weight:800;cursor:pointer;box-shadow:var(--sh);
}

/* Friend profile — commitment is the headline action */
.fp-hero-btn--commit{
  flex:1;min-width:0;background:var(--chrome-cta-gradient);color:#fff;
  box-shadow:0 4px 14px rgba(var(--brand-rgb),.28);
}
.fp-profile-assign-row .fp-hero-btn--commit{flex:1.4;}

/* Desktop / wide shell — calendar earns the extra room */
@media (min-width:760px){
  .cal-week{padding:8px 0 11px;}
  .cal-run-segs{height:12px;}
  .cal-run-name{font-size:10.5px;}
}

/* ── Assign sheet: three ways to put something on someone ──────────────────
   One-off task · commitment · share one of yours. */
.asgn-intents {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 0 4px;
}
.asgn-intent {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 18px;
  border: 2px solid var(--border);
  background: var(--s2);
  cursor: pointer;
  text-align: left;
}
.asgn-intent:active {
  transform: scale(0.985);
}
.asgn-intent-ico {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.asgn-intent-txt {
  flex: 1;
  min-width: 0;
}
.asgn-intent-txt strong {
  display: block;
  font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.asgn-intent-txt small {
  display: block;
  font-size: 12px;
  color: var(--t3);
  margin-top: 2px;
}
.asgn-intent-chev {
  margin-left: auto;
  color: var(--t4);
  font-size: 18px;
}

.asgn-share-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  margin-bottom: 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--ctone, var(--brand));
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}
.asgn-share-row.is-busy {
  opacity: 0.55;
}
.asgn-share-emoji {
  font-size: 21px;
  flex-shrink: 0;
}
.asgn-share-main {
  flex: 1;
  min-width: 0;
}
.asgn-share-main strong {
  display: block;
  font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asgn-share-main small {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--t3);
  margin-top: 2px;
}
.asgn-share-go {
  flex-shrink: 0;
  padding: 6px 13px;
  border-radius: 14px;
  background: var(--ctone, var(--brand));
  color: var(--on-brand, #fff);
  font-size: 12px;
  font-weight: 800;
}
.asgn-share-empty {
  padding: 22px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--t3);
  line-height: 1.5;
  text-align: center;
}

/* Category tone as a class — commitColorClass() hands these to cards that
   build a class string rather than an inline style. Same two variables the
   inline commitTone() sets, so both paths tint identically. */
.ctone-green  { --ctone: var(--green);  --ctone-bg: var(--gbg); }
.ctone-blue   { --ctone: var(--blue);   --ctone-bg: var(--bbg); }
.ctone-amber  { --ctone: var(--amber);  --ctone-bg: var(--abg); }
.ctone-purple { --ctone: var(--purple); --ctone-bg: var(--pbg); }
.ctone-coral  { --ctone: var(--coral);  --ctone-bg: var(--cbg); }
.ctone-teal   { --ctone: var(--teal);   --ctone-bg: var(--tbg); }

/* ── A friend's commitments, on their profile ────────────────────────────────
   A profile used to show only today's tasks, which says nothing about what
   someone is actually holding themselves to. */
.fp-commit-section{margin-bottom:16px;}
.fp-commit-list{display:flex;flex-direction:column;gap:8px;}
.fp-commit-row{
  width:100%;display:flex;align-items:center;gap:11px;padding:11px 13px;
  border-radius:15px;border:1.5px solid var(--border);background:var(--surface);
  border-left:4px solid var(--ctone,var(--brand));
  text-align:left;cursor:pointer;
}
.fp-commit-emoji{font-size:20px;flex-shrink:0;}
.fp-commit-main{flex:1;min-width:0;}
.fp-commit-title{
  display:block;font-family:var(--font-display);font-size:13.5px;font-weight:800;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fp-commit-sub{display:block;font-size:11.5px;font-weight:600;color:var(--t3);margin-top:2px;}
.fp-commit-bar{
  display:block;height:5px;border-radius:999px;background:var(--s3);overflow:hidden;margin-top:6px;
}
.fp-commit-bar i{display:block;height:100%;background:var(--ctone,var(--brand));border-radius:999px;}
.fp-commit-streak{flex:none;font-size:12px;font-weight:800;color:var(--t2);white-space:nowrap;}
.fp-commit-empty{font-size:12.5px;font-weight:600;color:var(--t3);margin:0;}