/* ==========================================================================
   Routine, Workouts and Food — one look.

   These three are the working surfaces of the app: the pages you open to do
   something rather than to browse. They had each grown their own palette — a
   green-to-cyan gradient here, a neon green button there, headline numbers in
   three different colours — and the result read as three apps sharing a shell.

   The rule applied throughout: colour carries meaning or it goes. A number is
   white; the accent is reserved for the one control that matters on the page;
   green and red mean better and worse, never decoration.

   Loaded after the per-section stylesheets, so these rules win. Circle's own
   playful identity is untouched — this file only reaches inside these three.
   ========================================================================== */
:root{
  --sx-surface:rgba(255,255,255,.045);
  --sx-surface-2:rgba(255,255,255,.075);
  --sx-line:rgba(255,255,255,.10);
  --sx-line-strong:rgba(255,255,255,.18);
  --sx-text:#f1f5f9;
  --sx-muted:rgba(255,255,255,.62);
  --sx-dim:rgba(255,255,255,.42);
  --sx-accent:#6ee7b7;
  --sx-up:#4ade80;
  --sx-down:#f87171;
  --sx-radius:14px;
}

/* ── the header ──────────────────────────────────────────────────────────
   Left alone. These three carry the same animated wordmark as Plans and
   Friends: it is Circle's voice, and pulling it off three pages made them look
   like a different app bolted on. The emoji is gone from the markup, but that
   is cosmetic -- the wordmark builder strips a leading one anyway.

   Everything below this point is still standardised: the numbers, the buttons,
   the cards and the timeline. The header was never the noisy part. */

/* ── section tabs ────────────────────────────────────────────────────────
   A quieter rail: the active tab is marked by weight and a thin bar, not by
   a coloured slab. */
#routine .sec-tabs, #workouts .sec-tabs, #food .sec-tabs,
#routine .act-tabs, #workouts .act-tabs, #food .act-tabs{
  border-bottom:1px solid var(--sx-line) !important;
}

/* ── numbers ─────────────────────────────────────────────────────────────
   Headline figures are white. They were green, cyan and amber across the
   three pages, which made a streak look more important than a total for no
   reason other than which page you were on. */
.rtn-stat-card, .fnt-stat-card, .wkt-stat-card,
#routine .stat-card, #workouts .stat-card, #food .stat-card{
  background:var(--sx-surface) !important;
  border:1px solid var(--sx-line) !important;
  border-radius:var(--sx-radius) !important;
  padding:14px 12px !important;
  box-shadow:none !important;
}
.rtn-stat-val, .fnt-stat-val, .wkt-stat-val,
#routine .stat-val, #workouts .stat-val, #food .stat-val{
  font-size:26px !important;
  font-weight:700 !important;
  letter-spacing:-.02em !important;
  color:var(--sx-text) !important;
  font-variant-numeric:tabular-nums;
  text-shadow:none !important;
}
.rtn-stat-lbl, .fnt-stat-lbl, .wkt-stat-lbl,
#routine .stat-lbl, #workouts .stat-lbl, #food .stat-lbl{
  font-size:10.5px !important;
  font-weight:600 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase;
  color:var(--sx-dim) !important;
  margin-top:4px !important;
}
/* Green and red survive only where they mean better and worse. */
.rtn-stat-val.sx-up, .fnt-stat-val.sx-up, .wkt-stat-val.sx-up{ color:var(--sx-up) !important; }
.rtn-stat-val.sx-down, .fnt-stat-val.sx-down, .wkt-stat-val.sx-down{ color:var(--sx-down) !important; }

/* ── buttons ─────────────────────────────────────────────────────────────
   One filled control per screen, and it is the thing you came to do. The
   rest are outlines. The green-to-cyan gradient made "Get AI recommendations"
   the loudest thing on a page where it is the least important. */
#routine .fnt-ai-btn, #workouts .fnt-ai-btn, #food .fnt-ai-btn,
#routine .rtn-ai-btn, #workouts .wkt-ai-btn{
  background:transparent !important;
  border:1px solid var(--sx-line-strong) !important;
  color:var(--sx-muted) !important;
  font-weight:600 !important;
  font-size:.85rem !important;
  border-radius:12px !important;
  padding:12px !important;
}
#routine .fnt-ai-btn:hover, #workouts .fnt-ai-btn:hover, #food .fnt-ai-btn:hover{
  color:var(--sx-text) !important;
  border-color:var(--sx-line-strong) !important;
  opacity:1 !important;
}

/* The primary action: solid, single colour, dark text. */
.sx-primary,
#workouts .wkt-log-btn,
#routine .rtn-primary-btn{
  background:var(--sx-accent) !important;
  border:0 !important;
  color:#08130e !important;
  font-weight:700 !important;
  border-radius:12px !important;
  padding:13px 18px !important;
  font-size:.92rem !important;
  box-shadow:none !important;
  background-image:none !important;
}

/* The workout log button: the one thing you came to Workouts to do. It keeps
   its weight, loses the gradient and the lift-on-hover. */
#workouts .wkt-cta-primary{
  background:var(--sx-accent) !important;
  background-image:none !important;
  color:#08130e !important;
  font-weight:700 !important;
  font-size:.92rem !important;
  border-radius:12px !important;
}
#workouts .wkt-cta-primary:hover{ transform:none !important; opacity:.9 !important; }

/* Secondary actions read as outlines rather than as second primaries. */
.sx-secondary,
#routine .activity-section-share-btn,
#workouts .activity-section-share-btn,
#food .activity-section-share-btn,
#workouts .wkt-cta-secondary{
  background:transparent !important;
  border:1px solid var(--sx-line-strong) !important;
  color:var(--sx-muted) !important;
  border-radius:12px !important;
  font-weight:600 !important;
}

/* ── search and add ──────────────────────────────────────────────────────
   Kept on Routine and Workouts, where a library of templates is the point.
   Food's is removed in the markup: nobody keeps a favourites list of meals. */
#routine .routine-search-inner, #workouts .routine-search-inner{
  background:var(--sx-surface) !important;
  border:1px solid var(--sx-line) !important;
  border-radius:12px !important;
}
#routine .routine-search-input, #workouts .routine-search-input{
  font-size:.88rem !important;
  color:var(--sx-text) !important;
}
#routine .rtn-add-lib-btn, #workouts .rtn-add-lib-btn{
  border:1px dashed var(--sx-line-strong) !important;
  color:var(--sx-dim) !important;
  border-radius:12px !important;
  background:transparent !important;
}

/* ── cards ───────────────────────────────────────────────────────────────
   One card treatment for a routine step, a workout template and a meal. */
#routine .rtn-item-card, #workouts .wkt-card, #food .fnt-card,
#routine .rtn-card, #workouts .wkt-template-card, #food .fnt-food-card{
  background:var(--sx-surface) !important;
  border:1px solid var(--sx-line) !important;
  border-radius:var(--sx-radius) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

/* ── the timeline ────────────────────────────────────────────────────────
   Collapsed, Track reads as a list of headings down a dotted rail: what is on
   at six, at quarter past, at seven. Every step spending three lines explaining
   itself made the shape of the day the hardest thing on the page to see. The
   detail is one tap away, and double-tap still marks a step done. */
#routine .tl-item{ position:relative; }

/* The rail: dotted, so it reads as a sequence rather than a table border. */
#routine .tl-item::before{
  content:'';
  position:absolute;
  left:calc(var(--sx-rail, 86px) + 7px);
  top:0; bottom:0;
  border-left:2px dotted var(--sx-line);
  pointer-events:none;
}
#routine .tl-item:first-child::before{ top:50%; }
#routine .tl-item:last-child::before{ bottom:50%; }

/* The dot is now the control: tap it to mark a step done. */
#routine .tl-dot{
  width:16px !important; height:16px !important;
  border-radius:50% !important;
  background:transparent !important;
  border:2px solid var(--sx-line-strong) !important;
  padding:0 !important;
  cursor:pointer;
  position:relative;
  z-index:1;
  display:grid !important;
  place-items:center;
  transition:background .15s, border-color .15s;
}
#routine .tl-dot:hover{ border-color:var(--sx-accent) !important; }
#routine .tl-item.checked .tl-dot{
  background:var(--sx-accent) !important;
  border-color:var(--sx-accent) !important;
}
/* The tick, drawn rather than shipped as an icon. */
#routine .tl-item.checked .tl-dot::after{
  content:'';
  width:4px; height:8px;
  border:solid #08130e;
  border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}

/* A completed step recedes without becoming unreadable. */
#routine .tl-item.checked .tl-copy h4{
  color:var(--sx-dim) !important;
  text-decoration:line-through;
  text-decoration-color:var(--sx-line-strong);
}

/* Collapsed by default: heading only. */
#routine .tl-copy p,
#routine .tl-item .activity-card-media-routine,
#routine .tl-item .tile-face-back{
  display:none !important;
}
#routine .tl-item.tl-open .tl-copy p,
#routine .tl-item.tl-open .activity-card-media-routine,
#routine .tl-item.tl-open .tile-face-back{
  display:block !important;
}
#routine .tl-copy h4{
  font-size:.95rem !important;
  font-weight:600 !important;
  letter-spacing:-.01em;
  margin:0 !important;
  color:var(--sx-text) !important;
}
#routine .tl-item.tl-open .tl-copy p{
  margin-top:6px !important;
  font-size:.82rem !important;
  line-height:1.55 !important;
  color:var(--sx-muted) !important;
}

/* The caret, and the row it sits in. */
#routine .tl-content .tile-face-front{
  display:flex !important;
  align-items:flex-start;
  gap:10px;
}
#routine .tl-copy{ flex:1; min-width:0; }
#routine .tl-more{
  flex-shrink:0;
  background:none;
  border:0;
  color:var(--sx-dim);
  cursor:pointer;
  padding:2px;
  margin-top:1px;
  transition:transform .18s, color .15s;
}
#routine .tl-more:hover{ color:var(--sx-text); }
#routine .tl-item.tl-open .tl-more{ transform:rotate(180deg); color:var(--sx-text); }

/* A collapsed step is one line tall, so a day fits on a screen. */
#routine .tl-item{ padding-top:9px !important; padding-bottom:9px !important; }
#routine .tl-time{
  font-size:.72rem !important;
  font-variant-numeric:tabular-nums;
  color:var(--sx-dim) !important;
}

@media (prefers-reduced-motion:reduce){
  #routine .tl-more{ transition:none; }
}

/* ── empty states ────────────────────────────────────────────────────────
   Quiet, and they say what to do rather than apologising. */
#routine .sx-empty, #workouts .sx-empty, #food .sx-empty{
  text-align:center;
  padding:28px 20px;
  color:var(--sx-dim);
  font-size:.88rem;
  line-height:1.6;
}
.sx-empty h4{
  color:var(--sx-text);
  font-size:1rem;
  font-weight:600;
  margin-bottom:6px;
  letter-spacing:-.01em;
}

@media (prefers-reduced-motion:reduce){
  #routine .dav-letter, #workouts .dav-letter, #food .dav-letter{ animation:none !important; }
}