/* Stili specifici delle viste (piano di corsa, grafici, obiettivi, cucina, sonno): usano i token di style.css */
/* ---------- dettaglio piano ---------- */
.paces { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.paces dt { font-size: 12px; color: var(--text-3); }
.paces dd { font-weight: 620; font-variant-numeric: tabular-nums; }
.weeks { display: flex; flex-direction: column; gap: 8px; }
.week { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.week.is-current { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.week summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; }
.week summary::-webkit-details-marker { display: none; }
.week summary .icon:last-child { margin-left: 4px; color: var(--text-3); transition: transform .15s; }
.week[open] summary .icon:last-child { transform: rotate(90deg); }
.week-n { font-weight: 620; }
.week-km { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 560; }
.week-body { border-top: 1px solid var(--line); padding: 4px 16px 8px; }
.wrow { display: grid; grid-template-columns: 20px 92px 1fr auto; gap: 12px; align-items: flex-start; padding: 12px 0; }
.wrow + .wrow { border-top: 1px solid var(--line); }
.wrow-when { display: flex; flex-direction: column; line-height: 1.3; font-size: 14px; }
.wrow-main { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.wrow-desc { color: var(--text-2); font-size: 13.5px; }
.wrow-log { color: var(--good); font-size: 13px; }
.mark { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; margin-top: 2px; }
.mark.ok { background: var(--good); border-color: var(--good); color: #fff; }
.mark.muted { background: var(--surface-2); color: var(--text-3); }
@media (max-width: 560px) { .wrow { grid-template-columns: 18px 1fr; } .wrow-when { flex-direction: row; gap: 8px; grid-column: 2; } .wrow-main { grid-column: 2; } .wrow > .btn { grid-column: 2; justify-self: start; } .agenda-day { grid-template-columns: 1fr; gap: 4px; } .agenda-date { flex-direction: row; gap: 8px; } }

/* ---------- grafico ---------- */
.chart { position: relative; display: flex; flex-direction: column; gap: 8px; }
.chart-head { display: flex; justify-content: space-between; align-items: center; }
.chart-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-2); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sw-plan { background: var(--track); } .sw-done { background: var(--accent); }
.chart-body { width: 100%; min-height: 190px; }
.chart svg { display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .ax { stroke: var(--line-strong); stroke-width: 1; }
.chart .tick { fill: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .bar-plan { fill: var(--track); }
.chart .bar-done { fill: var(--accent); }
.chart .col:hover .bar-plan, .chart .col:focus-within .bar-plan { fill: color-mix(in srgb, var(--track) 70%, var(--accent)); }
.chart .hit { fill: transparent; outline: none; }
.chart .hit:focus-visible { stroke: var(--accent); stroke-width: 1.5; rx: 4; }
.chart .now { fill: var(--accent); }
.chart .band { stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; }
.chart .band-label { fill: var(--text-2); font-size: 11px; }
.tip { position: absolute; z-index: 5; pointer-events: none; min-width: 168px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 10px; box-shadow: 0 8px 28px rgb(0 0 0 / .14); font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.tip-title { font-weight: 620; font-size: 13px; } .tip-sub { font-weight: 400; color: var(--text-3); }
.tip-meta { color: var(--text-3); }
.tip-row { display: flex; align-items: center; gap: 8px; } .tip-label { color: var(--text-2); flex: 1; } .tip-row strong { font-variant-numeric: tabular-nums; }
.chart-table { overflow-x: auto; max-height: 340px; overflow-y: auto; }
.chart-table table, .md table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.chart-table th, .chart-table td, .md th, .md td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.chart-table th, .md th { color: var(--text-3); font-weight: 560; position: sticky; top: 0; background: var(--surface); }

/* ---------- obiettivi di crescita ---------- */
.levels-mini { display: flex; gap: 4px; flex-wrap: wrap; }
.lv { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--text-3); font-weight: 540; }
.lv.on { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-text); }
.lv.target { outline: 1.5px solid var(--line-strong); outline-offset: -1.5px; }
.level-track { list-style: none; margin: 4px 0 0; padding: 0; display: flex; align-items: flex-start; }
.level-track li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; text-align: center; font-size: 13px; color: var(--text-3); }
.level-track li::before { content: ""; position: absolute; top: 7px; left: -50%; right: 50%; height: 2px; background: var(--line-strong); }
.level-track li:first-child::before { display: none; }
.level-track li.past::before, .level-track li.current::before { background: var(--accent); }
.level-track .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); position: relative; z-index: 1; }
.level-track li.past .dot { background: var(--accent); border-color: var(--accent); }
.level-track li.current .dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.level-track li.current, .level-track li.past { color: var(--text); }
.level-track .lv-name { font-weight: 600; }
.lv-tag { font-size: 11px; color: var(--text-3); }
.minbars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 150px; }
.minbar { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.minbar .track { flex: 1; width: 100%; max-width: 24px; display: flex; align-items: flex-end; background: var(--surface-2); border-radius: 4px 4px 0 0; }
.minbar .track i { display: block; width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; }
.minval { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.minlab { font-size: 11px; color: var(--text-3); }
.syllabus summary { cursor: pointer; font-weight: 600; }
.syllabus ol { margin: 12px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.exercise { display: flex; flex-direction: column; gap: 12px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.solutions { border-top: 1px dashed var(--line-strong); padding-top: 12px; }
.sheet-wide { width: min(640px, calc(100% - 24px)); }
.sep { border: 0; border-top: 1px solid var(--line); margin: 0; width: 100%; }
.rpe-row.five { grid-template-columns: repeat(5, 1fr); }
.hint { font-size: 13px; color: var(--text-3); }

/* ---------- cucina ---------- */
.seg-3 { grid-template-columns: repeat(3, 1fr); margin-top: 4px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.day { gap: 6px; }
.meal { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px 12px; align-items: center; padding: 8px 0; }
.meal + .meal { border-top: 1px solid var(--line); }
.meal-slot { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); font-weight: 560; }
.meal-title { min-width: 0; overflow-wrap: anywhere; }
.meal-title.link { border: 0; background: transparent; padding: 0; text-align: left; color: var(--text); font-weight: 560; }
.meal-title.link:hover { color: var(--accent-text); text-decoration: underline; }
.meal-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) { .meal { grid-template-columns: 56px 1fr; } .meal-meta { grid-column: 2; justify-content: flex-start; } }
.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.checklist li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 0; }
.checklist li + li { border-top: 1px solid var(--line); }
.checklist label { display: flex; gap: 10px; align-items: center; cursor: pointer; min-width: 0; }
.checklist input { width: 18px; height: 18px; min-height: 0; padding: 0; accent-color: var(--accent); flex: none; }
.checklist input:checked + .cl-name { text-decoration: line-through; color: var(--text-3); }
.ingredients { list-style: none; margin: 0; padding: 0; }
.ingredients li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.mini-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin: 8px 0 0; font-weight: 600; }
.pantry-form { display: grid; grid-template-columns: 1fr 120px 110px auto; gap: 12px; align-items: end; }
@media (max-width: 560px) { .pantry-form { grid-template-columns: 1fr 1fr; } .pantry-form .field:first-child { grid-column: 1 / -1; } .pantry-form button { grid-column: 1 / -1; } }
select { width: 100%; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; min-height: 42px; }

/* ---------- sonno ---------- */
.sleep-times { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.sleep-times span, .sleep-times strong { display: inline-flex; gap: 6px; align-items: center; }
.sleep-times.big { gap: 28px; }
.sleep-times.big > div { display: flex; flex-direction: column; gap: 2px; }
.sleep-times.big strong { font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sleep-warn { font-size: 13px; color: var(--warn-text); }
.sleep-list { display: flex; flex-direction: column; max-height: 52vh; overflow-y: auto; }
.sleep-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sleep-day { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sleep-row .sleep-warn { grid-column: 1 / -1; }
.event-card h3 { margin-top: 2px; }
@media (max-width: 1023.98px) { .nav-link { padding: 6px 10px !important; } }