/* ============ Through Line Panel ============ */
  .through-panel{
    grid-column:1;grid-row:3;
    display:none;flex-direction:column;
    overflow-y:auto;padding:22px 22px 36px;gap:16px;
    min-height:0;
  }
  .through-panel.visible{display:flex;}

  .prod-through-divider{display:none;}
  .prod-panel .prod-through-divider{
    display:flex;align-items:center;gap:16px;margin:12px 0 2px;
    color:var(--text);font-size:12px;font-weight:800;
    letter-spacing:1.8px;text-transform:uppercase;
  }
  .prod-panel .prod-through-divider span{
    height:2px;flex:1;background:linear-gradient(90deg,transparent,var(--line-bright),transparent);
  }
  .prod-panel .prod-through-divider strong{
    padding:8px 14px;border:1px solid var(--line-bright);
    background:rgba(var(--text-rgb),.055);font:inherit;color:inherit;
  }
  .prod-panel .through-panel.prod-through-section{
    grid-column:auto;grid-row:auto;display:flex;
    overflow:visible;padding:0 0 12px;gap:16px;min-height:auto;
    background:transparent;
  }

  /* Page title */
  .tl-page-title{
    text-align:center;color:var(--warn);font-weight:800;font-style:italic;
    font-size:27px;line-height:1.25;letter-spacing:.2px;
    flex-shrink:0;margin:2px 0 14px;text-shadow:0 2px 18px rgba(var(--warn-rgb),.22);
  }

  /* Top row wrapper: counter card + combined tabbed box */
  .tl-top-row{
    display:flex;flex-direction:row;gap:14px;align-items:stretch;flex-shrink:0;
  }

  /* Hero: day counter + actions */
  .tl-hero{
    display:flex;flex-direction:row;align-items:stretch;
    background:linear-gradient(160deg,var(--card),var(--card-2));
    border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2);overflow:hidden;
    flex:2;min-width:0;
  }
  /* Solo mode: hero holds only the counter (no stats table alongside it) */
  .tl-hero.tl-hero-solo{flex:0 0 300px;}
  .tl-hero.tl-hero-solo .tl-hero-left{border-right:none;width:100%;}

  .tl-hero-left{
    flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
    justify-content:center;padding:26px 28px;border-right:1px solid var(--line);
    gap:3px;min-width:190px;
  }
  .tl-day-num{
    font-size:78px;font-weight:300;font-variant-numeric:tabular-nums;
    line-height:1;letter-spacing:-2px;
    background:linear-gradient(140deg,var(--accent-soft),var(--accent2-soft));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  }
  .tl-day-label{font-size:12px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;font-weight:600;}
  .tl-since{font-size:11px;color:var(--faint);margin-top:2px;text-align:center;line-height:1.4;}
  .tl-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;justify-content:center;}
  .tl-relapse-btn{
    background:rgba(var(--danger-rgb),.12);border:1px solid rgba(var(--danger-rgb),.35);
    color:var(--danger-soft);padding:8px 18px;border-radius:11px;
    font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s;
  }
  .tl-relapse-btn:hover{background:rgba(var(--danger-rgb),.25);}
  .tl-undo-btn{
    background:transparent;border:1px solid var(--line);
    color:var(--muted);padding:8px 14px;border-radius:11px;
    font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,color .15s;
  }
  .tl-undo-btn:hover{background:rgba(var(--text-rgb),.06);color:var(--text);}
  .tl-start-btn{
    background:linear-gradient(140deg,var(--accent),var(--accent2));
    border:none;color:#fff;padding:8px 18px;border-radius:11px;
    font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;
    box-shadow:0 6px 18px rgba(var(--accent-rgb),.3);transition:transform .1s;
  }
  .tl-start-btn:active{transform:scale(.97);}
  /* Stats table (reused inside the Relapse Trends tab panel) */
  .tl-stats-heading{
    font-size:var(--fs-small);text-transform:uppercase;letter-spacing:1.2px;
    color:var(--muted);font-weight:700;margin:0;
  }
  .tl-stats-grid{
    /* Fixed-ish column caps, not fr — fr stretches each cell to fill however
       wide the parent happens to be, which blew these up into huge boxes
       around a single small number once this column could run full-width. */
    display:grid;grid-template-columns:minmax(84px,132px) minmax(70px,108px) minmax(82px,116px);
    align-items:stretch;gap:6px;min-width:0;max-width:100%;
    align-self:flex-start;
  }
  .tl-stats-th{
    font-size:9.5px;text-transform:uppercase;letter-spacing:.8px;
    color:var(--faint);font-weight:700;padding:0 4px 3px;text-align:center;
    line-height:1.2;min-width:0;
  }
  .tl-stats-th:first-child{text-align:left;}
  .tl-stats-row-label{
    font-size:12px;color:var(--muted);font-weight:600;
    padding:10px 10px;border:1px solid var(--line-soft);border-radius:10px;
    background:rgba(var(--text-rgb),.025);white-space:nowrap;
    display:flex;align-items:center;min-width:0;
  }
  .tl-stats-cell{
    text-align:center;padding:9px 8px;border:1px solid var(--line-soft);
    border-radius:10px;background:var(--card);min-width:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  .tl-stats-val{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);line-height:1;}
  .tl-stats-sub{font-size:9.5px;color:var(--faint);margin-top:2px;}
  .tl-stats-cell.streak .tl-stats-val{color:var(--accent2-soft);}

  /* Compact Command-panel widget: just the day count + Relapse button, reusing
     the exact same tl-day-num / tl-relapse-btn styling as the full panel. */
  .eo-tl-widget{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;padding:14px 20px;flex-shrink:0;align-self:flex-start;
    background:linear-gradient(160deg,var(--card),var(--card-2));
    border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  }
  .eo-tl-widget .tl-relapse-btn{margin-top:8px;}

  /* Combined tabbed box: Relapse Trends / Daily Record / All-Time.
     Mountable in more than one place (Through Line page + Command widget). */
  .tl-tabbed-card{
    /* Don't grow to fill the row — hug its content so leftover space in the
       row shows up as blank space next to the box, not as dead padding
       stretched inside it. Still allowed to shrink under real pressure. */
    flex:0 1 auto;min-width:0;display:flex;flex-direction:column;
    background:linear-gradient(160deg,var(--card),var(--card-2));
    border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2);
    padding:18px 20px 20px;
  }
  .tl-box-tabs{display:flex;gap:6px;margin-bottom:16px;flex-shrink:0;}
  .tl-box-tab{
    background:transparent;border:1px solid var(--line);border-radius:8px;
    padding:5px 12px;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;
    transition:background .15s,color .15s,border-color .15s;white-space:nowrap;
    letter-spacing:.3px;font-family:inherit;
  }
  .tl-box-tab:hover{background:var(--line);color:var(--text);}
  .tl-box-tab.active{background:var(--accent,#e8e8ea);border-color:var(--accent,#e8e8ea);color:#fff;}
  .tl-box-panel{display:none;flex:1;min-height:0;min-width:0;flex-direction:column;}
  .tl-box-panel.active{display:flex;}

  /* Daily Record tab: trends on the left (fixed to the stats grid's own
     compact width — never grows to swallow leftover space), heatmap (under
     its own key) on the right, sized to its content. flex-wrap stacks them
     when the row is too narrow for both — nested flex rows need min-width:0
     at every level to shrink correctly, or they silently overflow and get
     clipped by the card's overflow:hidden (used elsewhere for rounded
     corners) instead of wrapping. */
  .tl-record-body{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;flex:1;min-width:0;}
  .tl-record-trends{flex:0 1 368px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:12px;}
  .tl-record-heatmap-col{flex:0 0 auto;display:flex;flex-direction:column;gap:12px;max-width:100%;}
  /* Last-resort safety net: if a row is ever narrower than the heatmap's own
     content, scroll instead of letting overflow:hidden clip it invisibly. */
  .tl-record-heatmap-col .heatmap-cols-wrap{overflow-x:auto;}
  .tl-record-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
  .tl-hm-legend{display:flex;align-items:center;gap:10px;font-size:10.5px;color:var(--faint);}
  .tl-hm-legend-item{display:flex;align-items:center;gap:5px;}
  .tl-hm-cell{
    width:17px;height:17px;border-radius:3.5px;flex:0 0 auto;position:relative;cursor:default;
  }
  .tl-hm-cell:hover{transform:scale(1.35);z-index:5;}
  .tl-hm-cell[data-tl="empty"]{background:var(--card-subtle);}
  .tl-hm-cell[data-tl="pass"]{background:var(--good);}
  .tl-hm-cell[data-tl="fail1"]{background:rgba(var(--danger-rgb),.55);}
  .tl-hm-cell[data-tl="fail2"]{background:rgba(var(--danger-rgb),.75);}
  .tl-hm-cell[data-tl="fail3"]{background:var(--danger);}
  /* Today is still in progress — not yet recorded as pass/relapse until midnight */
  .tl-hm-cell[data-tl="today"]{background:var(--card-hover);box-shadow:inset 0 0 0 1.6px var(--accent-soft);}
  .tl-cal-edit-btn{
    display:flex;align-items:center;gap:6px;background:var(--card);
    border:1px solid var(--line);border-radius:9px;padding:6px 11px;
    font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;
    font-family:inherit;letter-spacing:.2px;transition:background .15s,color .15s,border-color .15s;
  }
  .tl-cal-edit-btn svg{width:13px;height:13px;}
  .tl-cal-edit-btn:hover{background:var(--line);color:var(--text);border-color:var(--accent-soft);}

  /* ---- Calendar editor popup ---- */
  .tl-cal-overlay{
    position:fixed;inset:0;z-index:80;background:rgba(3,3,4,.78);backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;
  }
  .tl-cal-box{
    background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
    padding:20px 22px 18px;width:90%;max-width:380px;box-shadow:var(--shadow);
  }
  .tl-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
  .tl-cal-title{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;}
  .tl-cal-nav{
    width:32px;height:32px;border-radius:9px;background:var(--card);border:1px solid var(--line);
    color:var(--muted);font-size:17px;line-height:1;cursor:pointer;font-family:inherit;
    display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;
  }
  .tl-cal-nav:hover:not(:disabled){background:var(--line);color:var(--text);}
  .tl-cal-nav:disabled{opacity:.3;cursor:not-allowed;}
  .tl-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:6px;}
  .tl-cal-dow span{text-align:center;font-size:9.5px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.5px;}
  .tl-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
  .tl-cal-day{
    aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;
    font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;
    border:1px solid transparent;transition:transform .1s,filter .15s;user-select:none;
  }
  .tl-cal-day:not(.locked):hover{transform:scale(1.08);filter:brightness(1.2);}
  .tl-cal-day.other{visibility:hidden;}
  .tl-cal-day.locked{cursor:default;color:var(--faint);opacity:.45;background:#15162400;}
  .tl-cal-day.pass{background:var(--good);color:#fff;}
  .tl-cal-day.relapse{background:rgba(var(--danger-rgb),.75);color:#fff;}
  .tl-cal-day.relapse.multi{background:var(--danger);color:#fff;}
  .tl-cal-day.today{box-shadow:inset 0 0 0 1.8px var(--accent-soft);}
  .tl-cal-day.intrack{background:var(--card-hover);color:var(--muted);}
  .tl-cal-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;font-size:10.5px;color:var(--faint);}
  .tl-cal-legend-item{display:flex;align-items:center;gap:5px;}
  .tl-cal-swatch{width:13px;height:13px;border-radius:3.5px;flex:0 0 auto;}
  .tl-cal-hint{font-size:11px;color:var(--faint);margin-top:12px;line-height:1.4;}
  .tl-cal-actions{display:flex;justify-content:flex-end;margin-top:14px;}
  .tl-cal-done{
    background:var(--accent,#e8e8ea);border:1px solid var(--accent,#e8e8ea);color:#fff;
    padding:9px 22px;border-radius:11px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;
  }
  .tl-cal-done:hover{filter:brightness(1.08);}

  /* Through Line heatmap: larger cells so it fills its panel */
  .tl-tabbed-card .heatmap-day-labels{gap:4px;}
  .tl-tabbed-card .heatmap-day-labels span{height:17px;}
  .tl-tabbed-card .heatmap-cols,
  .tl-tabbed-card .heatmap-col{gap:4px;}

  /* All-time stats + month chart */
  .tl-alltime-top{display:flex;gap:10px;margin-bottom:18px;align-items:stretch;}
  .tl-at-stats{display:flex;gap:7px;flex:1;min-width:0;}
  .tl-at-stat{
    flex:1;min-width:0;background:var(--card);border:1px solid var(--line-soft);
    border-radius:11px;padding:9px 6px;text-align:center;
  }
  .tl-at-stat .v{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent2-soft);}
  .tl-at-stat .l{font-size:8.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.6px;margin-top:3px;line-height:1.25;}

  /* All-time chart toggle: one column, two rows */
  .tl-chart-toggle{display:flex;flex-direction:column;gap:6px;flex-shrink:0;width:116px;}
  .tl-chart-tab{flex:1;background:transparent;border:1px solid var(--line);border-radius:9px;padding:6px 8px;font-size:10.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s;letter-spacing:.2px;line-height:1.15;text-align:center;}
  .tl-chart-tab:hover{background:var(--line);color:var(--text);}
  .tl-chart-tab.active{background:var(--accent,#e8e8ea);border-color:var(--accent,#e8e8ea);color:#fff;}

  /* Month bar chart */
  .tl-chart-heading{font-size:var(--fs-small);text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);font-weight:700;margin:0 0 12px;}
  .tl-month-chart{display:flex;align-items:flex-end;gap:4px;height:84px;}
  .tl-month-col{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-width:0;}
  .tl-month-bar-wrap{flex:1;display:flex;align-items:flex-end;width:100%;}
  .tl-month-bar{width:100%;border-radius:3px 3px 0 0;background:rgba(204,40,40,.6);min-height:3px;transition:background .2s;}
  .tl-month-bar.progress{background:var(--accent2);}
  .tl-month-bar.zero{background:var(--line);opacity:.35;}
  .tl-month-lbl{font-size:9px;color:var(--faint);white-space:nowrap;overflow:hidden;}
  .tl-month-count{font-size:9.5px;color:var(--muted);font-variant-numeric:tabular-nums;min-height:13px;}

  /* Through Line: full recovery timeline section */
  .tl-timeline-card{background:linear-gradient(160deg,var(--card),var(--card-2));border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:22px 24px 28px;flex-shrink:0;}
  .tl-timeline-heading{font-size:var(--fs-small);text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);font-weight:700;margin:0 0 14px;}
  /* Tab strip */
  .tl-tl-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:0;}
  .tl-tl-tab{background:transparent;border:1px solid var(--line);border-radius:8px;padding:5px 11px;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap;letter-spacing:.3px;}
  .tl-tl-tab:hover{background:var(--line);color:var(--text);}
  .tl-tl-tab.active{background:var(--accent,#e8e8ea);border-color:var(--accent,#e8e8ea);color:#fff;}
  /* Content panel */
  .tl-tl-panel{display:none;margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft);}
  .tl-tl-panel.visible{display:flex;gap:24px;flex-wrap:wrap;}
  .tl-tl-col{flex:1;min-width:130px;}
  .tl-tl-col-label{font-size:9px;text-transform:uppercase;letter-spacing:.9px;font-weight:700;color:var(--muted);margin-bottom:7px;}
  .tl-tl-col-label.warn-col-label{color:var(--warn);}
  .tl-tl-item{font-size:12px;color:var(--muted);line-height:1.5;padding:1px 0 1px 12px;position:relative;}
  .tl-tl-item::before{content:'·';position:absolute;left:2px;color:var(--faint);}
  .tl-tl-item.warn{color:var(--warn);}

  /* Recovery Timeline text link (below action buttons) */
  .tl-timeline-link{
    flex-basis:100%;font-size:11px;color:var(--faint);
    text-decoration:underline;text-underline-offset:2px;
    cursor:pointer;letter-spacing:.3px;text-align:center;
    transition:color .15s;
  }
  .tl-timeline-link:hover{color:var(--muted);}
  .tl-reset-link{color:rgba(var(--danger-rgb),.65);}
  .tl-reset-link:hover{color:var(--danger-soft);}

  /* Recovery Timeline popup overlay */
  .tl-timeline-overlay{
    display:none;position:fixed;inset:0;z-index:80;
    background:rgba(3,3,4,.78);backdrop-filter:blur(6px);
    align-items:center;justify-content:center;
  }
  .tl-timeline-overlay.open{display:flex;}
  .tl-timeline-popup{
    background:var(--panel-2);border:1px solid var(--line);
    border-radius:var(--r-lg);padding:20px 22px 24px;
    width:90%;max-width:780px;max-height:80vh;overflow-y:auto;
    box-shadow:var(--sh-3);
  }
  .tl-timeline-popup-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:16px;
  }
  .tl-timeline-popup-head span{
    font-size:var(--fs-small);text-transform:uppercase;letter-spacing:1.2px;
    color:var(--muted);font-weight:700;
  }
  .tl-timeline-popup-close{
    background:transparent;border:1px solid var(--line);color:var(--muted);
    width:28px;height:28px;border-radius:7px;cursor:pointer;font-size:13px;
    display:flex;align-items:center;justify-content:center;
    font-family:inherit;transition:background .15s,color .15s;
  }
  .tl-timeline-popup-close:hover{background:var(--card-hover);color:var(--text);}

  @media (max-width:1180px){
    .tl-top-row{flex-direction:column;}
    .tl-hero.tl-hero-solo,.tl-tabbed-card{flex:0 0 auto;width:100%;}
  }

  @media (max-width:760px){
    .through-panel{padding:18px 14px 30px;}
    .tl-hero-left{padding:24px 18px;}
    .tl-stats-grid{grid-template-columns:minmax(76px,110px) minmax(60px,92px) minmax(70px,98px);}
    .tl-stats-row-label{font-size:11px;padding:9px 8px;}
    .tl-stats-val{font-size:19px;}
    .tl-box-tabs{flex-wrap:wrap;}
  }

  @media (max-width:460px){
    .tl-stats-grid{grid-template-columns:minmax(70px,140px) minmax(70px,140px);}
    .tl-stats-th:first-child{display:none;}
    .tl-stats-row-label{
      grid-column:1 / -1;justify-content:center;
      padding:7px 8px;margin-top:2px;
    }
    .tl-stats-cell{padding:10px 8px;}
  }