/* Shared interface polish. Change IDs map to docs/ui-polish-review.md. */

/* UI-01 — shared ink, surfaces and control states. */
:root {--ink:#101f40;--muted:#182b50;--line:#243f7080;--lcd-input:#a8c8ed;--ui-action:#233d74;--ui-light:#eff9ff}
.panel,.overview-tasks,.nutrition-editor,.daily-training-card,.weekly-training,.checklist-editor,.calendar-card,.history-detail,.sentiments-editor,.day-score {background:linear-gradient(145deg,#a3c4eb40,#92b4e626);border-color:#294674;box-shadow:inset 0 1px #d1e5ff44}
.section-instruction,.hint,.meter-help,.rating-description,.tiny-note,.eyebrow,.calendar-date,.calendar-legend,.gym-group-heading small,.daily-training-entries small {color:var(--muted);opacity:1}
:is(.primary-button,.review-button):not(:disabled),.score-action.needs-input,.score-action.is-complete {background:var(--ui-action);color:var(--ui-light);border:1px solid #c3dcf5;text-shadow:none}
:is(.primary-button,.review-button):hover:not(:disabled) {background:#182f62;color:var(--ui-light)}
.quiet-button,.adjust-button {background:#96b9e6;color:var(--ink);border-color:#34517e;text-shadow:none}
.quiet-button:hover:not(:disabled),.adjust-button:hover:not(:disabled) {background:#b4d2ef}
.quiet-button[aria-pressed='true'],.calendar-filters button[aria-pressed='true'],.day-tabs>button[aria-selected='true'] {background:var(--ui-action);color:var(--ui-light);border-color:#d9edff;text-shadow:none;box-shadow:inset 0 -2px #e4f5ff}
.calendar-filters button {background:#96b9e6;color:var(--ink);border-color:#34517e}
.text-button {color:var(--ink);font-weight:600}
textarea[data-notes],.task-composer .handwriting-input,.subtask-input-row textarea,.name-control input,.rating-controls input,.gym-form input,#body-weight {background:var(--lcd-input);color:var(--ink);border-color:#34517e}
::placeholder {color:#344c70;opacity:1}
button:disabled {opacity:.58;cursor:not-allowed}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex='0']:focus-visible {outline:2px solid #f1faff;outline-offset:2px;box-shadow:0 0 0 4px #20345b}
.task-list input:checked+span {opacity:.82}
.day-tabs>button {font-size:14px}
.day-tabs .tab-check {color:inherit}
.day-tabs .tab-check.late-warning {color:#fff0b4;filter:drop-shadow(0 1px #152441)}
.state-pill.complete {background:#d0e7f8;color:#162b52;border-color:#294674;text-shadow:none}
.status-toast {background:#203965;color:#f0f9ff;border-color:#d0e8fa;text-shadow:none}

/* UI-02 — stable content edges and a consistent title/action hierarchy. */
#page-title {font-weight:700}
.detail-view {max-width:none;width:100%;margin-inline:0}
.detail-heading {gap:12px;min-height:40px;margin-bottom:12px}
.detail-heading>.section-instruction {font-size:13px;line-height:1.4}
.detail-heading .quiet-button {margin:0;flex:none}
.panel-heading {gap:12px}
.panel-heading h3,.dialog-heading h2,.weekly-training h3 {font-weight:700}
.panel-heading>div {min-width:0}
.panel-heading .eyebrow {margin:0 0 5px;line-height:1.4}
#tasks-date,#tomorrow-date,#later-dates {min-height:1.4em;margin:0 0 5px;font-size:10px;line-height:1.4}
#tasks-title,#tomorrow-title,#later-title {font-size:25px;line-height:1.2;padding:3px 0 7px;overflow-wrap:anywhere}
.task-tools {margin-top:12px;padding-top:12px}
.tomorrow-actions {margin-top:12px;flex-wrap:wrap}
.tomorrow-actions .quiet-button {white-space:normal}
.planning-empty,#tomorrow-tasks .tomorrow-empty {color:var(--muted);opacity:1;font-size:12px;line-height:1.5}
.calendar-tools {align-items:center}

/* UI-04/05 — clear, compact training priorities. */
.daily-training-card .body-weight-form {padding:10px 12px;margin-bottom:12px;background:#b4d2ee66;border-color:#34517e;box-shadow:inset 3px 0 #e4f3ff}
.weight-highlight {margin:0;gap:8px}
.weight-highlight>div {flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:8px 16px}
.weight-highlight strong {font-size:29px}
.weight-highlight span {font-size:12px}
.weight-entry-editor summary {font-size:12px;min-height:36px;padding:9px 0;color:var(--ink);cursor:pointer}
.weight-entry-editor[open] summary {margin-bottom:8px}
.weight-entry-editor>label {display:none}
.body-weight-status .hint {font-size:11px}
.training-gaps,.training-notes-details {border-top:1px solid var(--line);margin-top:12px}
.training-gaps>summary,.training-notes-details>summary {font:700 12px/1.4 var(--font-display);padding:12px 0;min-height:42px;cursor:pointer;color:var(--ink)}
.training-gaps .muscle-suggestions {margin:0 0 12px;padding:10px;border:0;background:transparent}
.training-gaps h4 {display:none}
.training-notes-details .training-notes {margin:0 0 12px}
.training-notes-details .training-notes>label {display:none}
.ideal-workout {margin-bottom:12px;background:#b5d2ed45;border-color:#34517e}
.ideal-workout p {font-size:11px}
.gym-form {margin-top:0;padding-top:12px}
.gym-form .primary-button {white-space:normal;line-height:1.4}
.training-choice label:has(:checked) {background:#233d74;color:#f0f9ff;border-color:#daeaff;box-shadow:inset 3px 0 #d0e9ff}
.training-choice label:has(:checked) span {color:inherit;text-shadow:none}
.muscle-picker label span {background:#96b9e6;color:var(--ink)}
.muscle-picker input:checked+span {background:#233d74;color:#f0f9ff;border-color:#daeaff;text-shadow:none}
.weekly-rest-credits {background:#b8d5ef55;border-width:1px;border-color:#34517e}

/* UI-06 — recaps must wrap within their actual column, including large numbers. */
.recap-metrics {grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:0}
.recap-metrics button {border:1px solid #34517e44;min-height:78px;padding:10px;overflow-wrap:anywhere}
.recap-metrics strong {font-size:24px;white-space:normal;overflow-wrap:anywhere}
.recap-metrics strong small {display:block;font-size:10px;line-height:1.3;margin-top:5px}
.recap-metrics button>span {font-size:11px;line-height:1.4;margin-bottom:7px}
.history-detail .recap-metrics {grid-template-columns:repeat(3,minmax(0,1fr))}
.history-detail .recap-metrics button {display:block;min-height:88px;padding:10px 7px}
.history-detail .recap-metrics button>span {margin:0 0 8px;font-size:10px}
.history-detail .recap-metrics strong {font-size:22px;text-align:left}
.recap-section summary {color:var(--ink)}
.calendar-day {border-color:#34517e55}
.calendar-day.outside-month {opacity:1;background:#698bbe33;border-style:dashed}
.calendar-weight {color:var(--ink)}

/* UI-07 — dialogs share a readable surface and a reachable close control. */
dialog {background:linear-gradient(145deg,#8badde,#7399d0);color:var(--ink);border-color:#cfe5f7;padding:24px;scroll-padding-top:70px;scrollbar-width:thin}
dialog .dialog-heading {position:sticky;top:-24px;z-index:5;background:#86a9db;gap:12px;padding:12px 0;margin:-12px 0 16px;border-bottom:1px solid #34517e66}
.dialog-heading h2 {font-size:26px;line-height:1.2;overflow-wrap:anywhere}
.dialog-heading .icon-button {width:44px;height:44px;min-height:44px;flex:none;background:#b6d3ee;color:#142749;border:1px solid #34517e;font-size:26px}
dialog p,dialog label,.settings-section p,.scoring-explanation li {color:var(--ink)}
.settings-section {padding-block:18px}
.settings-section h3 {font-size:17px;margin-bottom:10px}
.settings-section p {font-size:13px;line-height:1.6}
.reset-settings {border:1px solid #714657;padding:14px;background:#dfc1cf33}
.reset-settings #open-reset {border-color:#714657;color:#4f233b;background:#dbc5d9}
.final-review-actions,.composer-actions {gap:10px;flex-wrap:wrap}
.final-review-actions {background:#86a9db;border-top:1px solid #34517e;bottom:-24px;padding:12px 0}
.weight-day-card {background:linear-gradient(145deg,#acc9ea,#8db0db);color:#102140}
.weight-chart-data summary {min-height:44px;padding:12px 0}

/* UI-15 — the scoring guide follows the same icon and section hierarchy. */
.top-row #open-score-info {width:40px;height:40px;min-height:40px;padding:0;margin:0;border:1px solid var(--line);border-radius:4px;background:#a8d0f01a;flex:none}
#open-score-info>.icon {display:block;width:21px;height:21px}
.top-row #open-score-info:hover {background:#67b6f4}
.score-info-section {border-top:1px solid #34517e66;padding-top:16px;margin-top:18px}
.score-info-section h3 {font-size:18px;line-height:1.35;margin:0 0 10px;font-weight:700}
.score-info-section p {margin:0 0 12px}
.score-info-section .scoring-explanation {margin-bottom:12px}
.score-info-section .scoring-explanation li {padding:10px 0}
.score-info-section .scoring-explanation li:first-child {padding-top:0}
.score-info-section .scoring-explanation strong {color:var(--ink);font-weight:700}
.score-info-section .scoring-example {margin:12px 0}
.score-info-section .scoring-example p {margin:8px 0 0}

@media(min-width:1001px) {
  .app-shell>main>.detail-view {padding:12px 0}
  .nutrition-editor {max-width:none}
  .training-grid {grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .ideal-workout ul {grid-template-columns:repeat(3,minmax(0,1fr))}
  .daily-training-card .training-pace {padding:8px 0;margin-bottom:10px}
  .daily-training-card .training-choice label {min-height:44px}
  .history-grid {grid-template-columns:minmax(0,1fr) minmax(280px,26%)}
  .nutrition-notes textarea[data-notes] {max-height:calc(100cqh - 100px)}
}

/* UI-03/08 — phone navigation stays accessible; content gets the space back. */
@media(max-width:767px), (max-width:1000px) and (max-height:600px) and (orientation:landscape) {
  .app-shell>.app-header {display:contents}
  .day-tabs {grid-template-columns:repeat(5,minmax(0,1fr));position:sticky;top:0;z-index:8;background:#7498d0;border-bottom:1px solid #294674;padding:6px;gap:4px;box-shadow:0 4px 8px #20365b33}
  .day-tabs>button:is(#tab-today,#tab-nutrition,#tab-training,#tab-checklists,#tab-sentiments) {grid-column:auto;grid-template-columns:minmax(0,1fr) 16px;grid-template-rows:12px 1fr;min-height:62px;padding:5px 2px;gap:3px;font-size:10px;line-height:1.25}
  .day-tabs>button small {grid-column:1;grid-row:1;font-size:8px}
  .day-tabs .tab-label {grid-column:1/-1;grid-row:2;letter-spacing:0;text-align:center;justify-self:center}
  .day-tabs .tab-check {grid-column:2;grid-row:1;font-size:15px}
  .greeting-row {min-height:70px;padding:10px 0;align-items:center;gap:8px}
  .greeting-row .eyebrow {font-size:9px;margin:0 0 6px}
  #page-title {font-size:25px;min-height:30px;line-height:1.2}
  .greeting-row .state-pill {max-width:88px;font-size:9px}
  .detail-view {padding-top:12px}
  .detail-heading {flex-direction:row;align-items:center;gap:10px;margin-bottom:12px}
  .detail-heading>.section-instruction {font-size:11px;flex:1;min-width:0}
  .detail-heading .quiet-button {font-size:11px;min-height:44px;padding:8px 10px;max-width:145px;line-height:1.4}
  .panel {padding:16px}
  textarea[data-notes],.sentiments-editor textarea[data-notes] {min-height:150px;font-size:18px;line-height:1.3}
  .nutrition-body {gap:12px}
  .nutrition-meter,#sentiments-meter {width:190px}
  .nutrition-score .meter-number {font-size:66px}
  .nutrition-notes {padding-top:12px}
  .nutrition-notes textarea[data-notes] {height:150px}
  .meter-help {font-size:10px;line-height:1.5;margin-top:9px}
  .rating-description {font-size:11px;margin:8px 0 0}
  .training-choice legend {font-size:17px}
  .weight-highlight strong {font-size:27px}
  .body-weight-controls .quiet-button {width:auto;flex:1}
  .body-weight-controls {gap:6px}
  .weekly-training .gym-groups {grid-template-columns:1fr 1fr;gap:16px 12px}
  .gym-group-heading {font-size:11px;gap:4px;flex-wrap:wrap}
  .gym-group-heading small {font-size:9px}
  .gym-form .muscle-choices {gap:6px}
  .gym-form .muscle-picker label span {min-height:44px;font-size:12px}
  .ideal-workout-heading {flex-direction:row;align-items:center;gap:8px}
  .ideal-workout h4 {font-size:12px}
  .ideal-workout ul {margin-top:8px}
  .ideal-workout li {padding-block:5px}
  .ideal-workout:has(ul)>p {display:none}
  .sentiments-editor textarea[data-notes] {height:180px}
  .sentiments-rating {padding-top:16px}
  .calendar-filters {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;width:100%;gap:5px;padding:0}
  .calendar-filters button {font-size:11px;padding:8px 6px;min-height:44px;white-space:normal}
  .calendar-tools {gap:8px}
  #history-view>.detail-heading {flex-wrap:wrap}
  .calendar-summary {flex:1 0 100%}
  #history-today {max-width:none;width:100%}
  .history-detail .recap-metrics {grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
  .history-detail .recap-metrics button {display:block;text-align:left;min-height:76px}
  .history-detail .recap-metrics strong {text-align:left;margin-top:6px}
  dialog {padding:18px 14px;max-height:calc(100dvh - 20px);scroll-padding-top:64px}
  dialog .dialog-heading {top:-18px;margin-top:-6px;padding:8px 0}
  .dialog-heading h2,.final-review-dialog .dialog-heading h2 {font-size:23px}
  .final-review-actions {bottom:-18px}
  .final-review-content,.final-review-sentiments {padding:12px}
  .final-sentiments-body {grid-template-columns:minmax(0,1fr) 108px;gap:12px}
  #final-sentiments-meter {width:104px}
  #final-sentiments-meter .meter-number {font-size:35px}
  .final-rating-heading {font-size:11px;line-height:1.4}
  .final-sentiments-rating {align-items:center}
  .final-review-sentiments textarea[data-notes] {min-height:180px}
  #final-clear-sentiments-rating {font-size:10px;min-height:44px;text-align:center}
  .achievement-tools {padding:8px 0;top:76px}
  .achievement-streaks>div {padding:10px 8px}
  .achievement-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .achievement-card {padding:10px}
  .achievement-card-top {flex-wrap:wrap;font-size:8px;gap:5px}
  .achievement-card-top>strong {font-size:10px}
  .achievement-card h2 {font-size:14px;line-height:1.3}
  .achievement-card>p {font-size:10px;line-height:1.5}
  .achievement-progress>span,.achievement-last {font-size:9px}
  .achievement-emblem {width:28px;height:28px}
}
@media(max-width:767px) and (orientation:portrait) {
  .greeting-row {height:100px;min-height:100px}
  .greeting-row #page-title {font-size:24px;line-height:1.2}
  .day-score {display:grid;grid-template-columns:minmax(120px,.95fr) minmax(0,1fr);gap:10px 14px;padding:16px;align-items:center;text-align:left;justify-items:stretch}
  .day-score .score-heading {grid-column:1/-1;text-align:center}
  .score-heading h2 {font-size:22px;margin:0 0 6px}
  .day-score .hero-meter {grid-column:1;grid-row:2/6;width:145px;max-width:100%;margin:0 0 28px}
  .hero-score .meter-number {font-size:56px}
  .day-score .score-range,.day-score .score-caption,.day-score .score-description,.day-score .score-action {grid-column:2;margin:0;max-width:none}
  .day-score .score-description {font-size:11px;line-height:1.5}
  .day-score .score-action {font-size:12px;line-height:1.4;min-height:48px;padding:8px}
  .day-score .score-range {font-size:10px}
  .day-score .score-range strong {font-size:13px}
  .day-score #score-status {font-size:11px;line-height:1.4}
}
@media(max-width:1000px) and (max-height:600px) and (orientation:landscape) {
  .day-tabs>button:is(#tab-today,#tab-nutrition,#tab-training,#tab-checklists,#tab-sentiments) {grid-template-columns:13px minmax(0,1fr) 17px;grid-template-rows:1fr;min-height:44px;font-size:11px}
  .day-tabs .tab-label {grid-column:2;grid-row:1;text-align:left;justify-self:start}
  .day-tabs .tab-check {grid-column:3;grid-row:1}
  .greeting-row {min-height:40px;padding:4px 0}
  .nutrition-body {display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);align-items:center;gap:18px}
  .nutrition-notes {border:0;padding:0}
  .nutrition-notes textarea[data-notes] {height:145px}
  .nutrition-meter {width:165px}
  .training-grid {grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .sentiments-editor {grid-template-columns:minmax(0,1.4fr) minmax(180px,1fr)}
  .sentiments-rating {border-top:0;border-left:1px solid var(--line);padding:0 0 0 16px}
  .achievement-tools {top:56px}
  .achievement-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* UI-09 — review is one compact, explicit sequence, not a second page header. */
.review-banner {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;padding:12px;margin:12px 0 0;background:#b0ccea66;border-color:#34517e}
.review-banner>div:first-child {grid-column:1;min-width:0;margin:0}
.review-banner strong {font:700 14px/1.3 var(--font-display)}
.review-banner>div>span {font:400 11px/1.4 var(--font-ui);color:var(--ink)}
.review-steps {grid-column:1;display:flex;flex-wrap:wrap;gap:6px;order:initial}
.review-step {min-height:40px;padding:7px 10px;font-size:11px;color:var(--ink);background:#9fbfe7;border-color:#34517e}
.review-step.current {background:#233d74;color:#f0f9ff;border-color:#dcefff}
.review-step.reviewed {background:#c3dcf1;color:#162a50}
.review-step span {width:18px;height:18px;font-size:10px;flex:none}
.review-banner-actions {grid-column:2;grid-row:1/3;align-self:center;display:grid;grid-template-columns:auto auto;align-items:center;gap:8px}
.review-banner-actions .review-hint {grid-column:1/-1;margin:0;font-size:11px}
.review-banner-actions button {min-height:44px;padding:9px 12px;font-size:12px}
.detail-heading:has(>[data-start-review][hidden]) {display:none}
.selected-day-notice {padding:10px 12px;margin:12px 0 0;gap:10px;align-items:center}
.selected-day-notice strong {font-size:12px}
.selected-day-notice .quiet-button {min-height:40px}
@media(max-width:767px), (max-width:1000px) and (max-height:600px) and (orientation:landscape) {
  .review-banner {grid-template-columns:minmax(0,1fr);gap:8px;padding:12px}
  .review-banner>div:first-child {grid-column:1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px}
  .review-banner strong {font-size:12px}
  .review-banner>div>span {font-size:10px;margin:0}
  .review-steps {grid-column:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .review-step {min-width:0;min-height:44px;padding:5px;font-size:10px;gap:4px;line-height:1.3}
  .review-banner-actions {grid-column:1;grid-row:auto;grid-template-columns:minmax(0,1fr) auto;width:100%;gap:6px}
  .review-banner-actions button {font-size:11px;padding:8px}
  .review-banner-actions .review-hint {font-size:10px}
  .selected-day-notice {flex-direction:row;align-items:center;padding:10px;margin-top:10px}
  .selected-day-notice strong {font-size:11px;line-height:1.4}
  .selected-day-notice span {display:none}
  .selected-day-notice .quiet-button {font-size:10px;min-height:44px;max-width:110px;white-space:normal;flex:none}
}

/* UI-10 — phone calendar selections have an immediate, reversible destination. */
#back-to-calendar {display:none}
@media(max-width:767px), (max-width:1000px) and (max-height:600px) and (orientation:landscape) {
  .history-detail,.calendar-card {scroll-margin-top:88px}
  #back-to-calendar {display:block;min-height:44px;font-size:12px;margin-bottom:10px;text-align:left}
  .history-detail .recap-note p,.history-detail .recap-tasks {max-height:200px;overflow:auto}
}
@media(max-width:1000px) and (max-height:600px) and (orientation:landscape) {
  .history-detail,.calendar-card {scroll-margin-top:68px}
}

.weight-reading:focus-visible {outline:none;box-shadow:none}
@media(max-width:1000px) and (max-height:600px) and (orientation:landscape) {
  .app-shell>main>#checklists-view {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
  #checklists-view>.detail-heading {grid-column:1/-1}
  #checklists-view .tomorrow-plan,#checklists-view .later-plan {margin:0}
  #checklists-view .panel {padding:12px}
  #tasks-date,#tomorrow-date,#later-dates {min-height:30px}
  #tasks-title,#tomorrow-title,#later-title {font-size:21px;min-height:60px}
  .task-tools>span {display:none}
}
@media(max-width:380px) and (orientation:portrait) {
  .day-tabs {grid-template-columns:repeat(6,minmax(0,1fr))}
  .day-tabs>button:is(#tab-today,#tab-nutrition,#tab-training,#tab-checklists,#tab-sentiments) {grid-column:span 2;font-size:11px;min-height:54px}
  .day-tabs>button:is(#tab-checklists,#tab-sentiments) {grid-column:span 3}
  .achievement-tools {top:126px}
  .history-detail,.calendar-card {scroll-margin-top:138px}
  .final-sentiments-body {grid-template-columns:minmax(0,1fr);gap:14px}
  .final-sentiments-rating {align-items:center}
}

/* UI-11 — intermediate tablets use their document, rather than a trapped desktop pane. */
@media(min-width:768px) and (max-width:1000px) and (min-height:601px) {
  html {height:auto;overflow-y:auto;overflow-x:clip}
  body {height:auto;min-height:100dvh;overflow:visible;padding:0}
  .app-shell,.is-overview .app-shell {height:auto;min-height:100dvh;width:100%;border-radius:0;overflow:visible;padding:0 24px}
  .app-shell>main {height:auto;min-height:0;overflow:visible;scrollbar-gutter:auto}
  .app-shell>.app-header {display:contents}
  .greeting-row {min-height:100px;padding:12px 0}
  #page-title {font-size:30px}
  .day-tabs {position:sticky;top:0;z-index:8;background:#7498d0;padding:6px 0;border-bottom:1px solid #294674;box-shadow:0 4px 8px #20365b33}
  .day-tabs>button {white-space:normal;min-height:50px;font-size:12px;padding:7px;grid-template-columns:16px minmax(0,1fr) 18px;gap:5px}
  .day-tabs .tab-label {white-space:normal}
  .detail-view {padding-top:16px}
  .is-overview .display-footer {min-height:0;height:auto;padding:16px 0;margin-top:16px}
  .overview-board {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;padding:16px 0 0}
  .day-score {display:grid;grid-template-columns:220px minmax(0,1fr);gap:8px 24px;padding:18px;text-align:left;align-items:center;justify-items:start}
  .day-score .hero-meter {grid-column:1;grid-row:1/6;width:190px;max-width:100%;margin:0 0 28px}
  .day-score .score-heading,.day-score .score-range,.day-score .score-caption,.day-score .score-description,.day-score .score-action {grid-column:2;margin:0}
  .day-score .score-heading h2 {font-size:25px;margin:0}
  .day-score .score-description {font-size:12px}
  .day-score .score-action {min-width:0;min-height:44px}
  .hero-score .meter-number {font-size:72px}
  .overview-tasks {max-height:none;min-height:0}
  .overview-tasks .task-scroll {max-height:none;overflow:visible}
  .training-grid {grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px}
  .training-grid>.panel {padding:16px}
  .gym-form .muscle-choices {grid-template-columns:1fr 1fr}
  .weekly-training .gym-groups {grid-template-columns:1fr}
  .nutrition-editor {padding:20px}
  .nutrition-meter {width:230px}
  .nutrition-body {gap:20px}
  .sentiments-editor {grid-template-columns:minmax(0,1.4fr) minmax(200px,1fr);gap:20px;padding:20px}
  #sentiments-meter {width:190px}
  .history-grid {grid-template-columns:1fr}
  .history-detail {display:flex;gap:0}
  .history-detail,.calendar-card {scroll-margin-top:78px}
  #back-to-calendar {display:block;min-height:44px;margin-bottom:10px;font-size:12px}
  .history-detail .recap-metrics {grid-template-columns:repeat(3,minmax(0,1fr))}
  .achievement-tools {top:64px}
  .achievement-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  .app-shell>main>#checklists-view {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
  #checklists-view>.detail-heading {grid-column:1/-1}
  #checklists-view>.panel {margin:0;padding:14px}
  #tasks-date,#tomorrow-date,#later-dates {min-height:30px}
  #tasks-title,#tomorrow-title,#later-title {font-size:22px;min-height:62px}
}

/* Shared form surface, including fields that have older ID-specific styles. */
#subtask-inputs textarea {background:var(--lcd-input);color:var(--ink);border-color:#34517e}
.task-schedule select,.motion-controls select {background-color:var(--lcd-input);color:var(--ink)}
@media(max-width:767px) and (orientation:portrait) {
  .greeting-row #page-title {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:2.4em;overflow:hidden}
}

@media(max-width:1000px) {
  html {scrollbar-gutter:stable;-webkit-text-size-adjust:100%;text-size-adjust:100%}
}
.overview-tasks .panel-heading h2 {min-width:0;overflow-wrap:normal;white-space:normal}
.overview-tasks .task-heading-actions {flex:none}
@media(max-width:380px) {
  #overview-tasks-title {font-size:22px;line-height:1.2}
}

/* UI-12 — settings show a motion sample on demand and fold reference-only copy. */
.display-about summary {font:700 14px/1.4 var(--font-display);min-height:44px;padding:12px 0;cursor:pointer}
input::file-selector-button {background:var(--lcd-input);color:var(--ink);border-color:#34517e;border-radius:3px}

.day-tabs .tab-check.late-warning {background:#26364f;color:#fff0b4;border:1px solid #e6d19d;border-radius:3px;filter:none}
.review-banner {background:#96b6df}
@media(max-width:767px) and (min-height:700px) and (orientation:portrait) {
  .review-banner {position:sticky;top:75px;z-index:7}
}
@media(max-width:380px) and (min-height:700px) and (orientation:portrait) {
  .review-banner {top:126px}
}
@media(min-width:768px) and (max-width:1000px) and (min-height:700px) {
  .review-banner {position:sticky;top:64px;z-index:7}
}

/* Use the LCD UI face for native form controls, retaining specific handwriting rules. */
button,input,select,textarea,summary {font-family:var(--font-ui)}
input[type='number'] {font-family:var(--font-display)}
@media(max-width:1000px) {
  .task-schedule select,.motion-controls select,#task-date,#profile-name {font-size:16px;min-height:44px}
}

/* UI-14 — explain the disabled rest choice only when a set log exists. */
#training-mode-hint {font-size:11px;line-height:1.5;margin:8px 0 0}

/* UI-17 — descenders overflow the writing line without moving its frame. */
.task-writing-field {position:relative;width:100%;min-width:0;height:26px;background:var(--lcd-input);border-bottom:1px solid #34517e;overflow:visible}
.subtask-input-row>.task-writing-field {flex:1}
.task-composer .task-writing-field>textarea,#subtask-inputs .task-writing-field>textarea {position:absolute;inset:0 0 auto;width:100%;max-width:100%;background:transparent;border:0;padding-inline:3px;resize:none;outline:none;box-shadow:none}
.task-composer .task-writing-field>textarea:focus-visible {border:0;outline:none;box-shadow:none}
.task-writing-field:focus-within {outline:2px solid #f1faff;outline-offset:2px;box-shadow:0 0 0 4px #20345b;border-bottom-color:var(--ink)}
@media(max-width:1000px) {
  /* Center against the first line's cap height, never the whole wrapped label
     or its deep g/y tails. The entry font itself has .75em ascent; capitals
     are .7em, including browsers without CSS font-metric overrides. */
  .task-list label,.overview-tasks .task-list label,.editable-task-list label {--task-check-size:20px;display:grid;grid-template-columns:var(--task-check-size) minmax(0,1fr);align-items:start;font-size:17px;line-height:1.15}
  .task-list .child-tasks label {font-size:16px}
  .task-list label>span,.overview-tasks .task-list label>span,.editable-task-list label>span,.task-list .child-tasks label>span {min-width:0;font-size:inherit;line-height:inherit;overflow-wrap:anywhere}
  .task-list label>input,.task-list .child-tasks label>input {width:var(--task-check-size);height:var(--task-check-size);margin:calc(.475em - var(--task-check-size)/2) 0 0;align-self:start;flex:none;font-size:inherit}
}

/* UI-18/19 — deliberate recurring removal and a first-visit welcome. */
.routine-manager li {align-items:flex-start;flex-wrap:wrap;gap:10px}
.routine-manager li>span {min-width:0;flex:1;overflow-wrap:anywhere}
.routine-manager li>.quiet-button {font-size:11px;min-height:40px;white-space:normal}
.welcome-dialog {width:min(460px,calc(100% - 32px));padding:32px}
.welcome-dialog h2 {font-size:36px;font-weight:700;line-height:1.2;margin:8px 0 12px}
.welcome-dialog .eyebrow {margin:0;font-size:10px}
.welcome-dialog input {width:100%;min-height:48px;padding:10px 12px;background:var(--lcd-input);color:var(--ink);border:1px solid #34517e;border-radius:3px;font:400 16px var(--font-ui)}
.welcome-dialog .primary-button,.welcome-dialog>.quiet-button {width:100%;margin-top:16px;min-height:48px;white-space:normal}
.welcome-or {display:flex;align-items:center;gap:12px;margin-top:20px;font-size:12px}
.welcome-or::before,.welcome-or::after {content:'';height:1px;background:#34517e66;flex:1}
.welcome-dialog #welcome-status {font-size:12px;margin:16px 0 0}
.welcome-dialog #welcome-status:empty {display:none}

/* Shared selected state wins over older tab-specific ID rules. */
.day-tabs>button:is(#tab-today,#tab-nutrition,#tab-training,#tab-checklists,#tab-sentiments)[aria-selected='true'] {background:var(--ui-action);color:var(--ui-light);border-color:#d9edff;text-shadow:none;box-shadow:inset 0 -2px #e4f5ff}
.handwriting-caret {width:max(1.5px,.09em)}

/* Today’s Score is the common visual treatment for editable score meters. */
.standard-score-meter:is(#overall-meter,#nutrition-meter,#sentiments-meter,#final-sentiments-meter) .meter-track {fill:none;stroke:#263d75;stroke-opacity:.65;stroke-linecap:round}
.standard-score-meter:is(#overall-meter,#nutrition-meter,#sentiments-meter,#final-sentiments-meter) .meter-fill {fill:none;stroke:var(--score-color);stroke-linecap:round;filter:drop-shadow(0 -1px 0 #14275d) drop-shadow(0 1px 0 #14275d) drop-shadow(-1px 0 0 #14275d) drop-shadow(1px 0 0 #14275d) drop-shadow(0 0 var(--score-glow,0px) #def8ffb0)}
.standard-score-meter:is(#overall-meter,#nutrition-meter,#sentiments-meter,#final-sentiments-meter) .meter-number {color:#102450;text-shadow:1px 1px 0 #b2d5f480;-webkit-text-stroke:0}
.standard-score-meter:is(#overall-meter,#nutrition-meter,#sentiments-meter,#final-sentiments-meter).score-high .meter-number {color:#f2fbff;-webkit-text-stroke:1px #14275d;paint-order:stroke fill;text-shadow:0 1px 0 #14275d,0 0 5px #d2f7ff88}
.standard-score-meter .score-halo {fill:#345da321}
.standard-score-meter.score-high .score-halo {fill:#4492f166}
.standard-score-meter.score-perfect .score-halo {stroke:#dcf7ff;stroke-width:1.2;stroke-dasharray:2 5;filter:drop-shadow(0 0 4px #c2eeff)}
.standard-score-meter .meter-knob {opacity:0;stroke:#e5f4ff;stroke-width:2}
.standard-score-meter:is(:focus-visible,.dragging) .meter-knob {opacity:1}
.standard-score-meter:is(#overall-meter,#nutrition-meter,#sentiments-meter,#final-sentiments-meter) .meter-endpoint.start {left:30%;right:auto;top:auto;bottom:-21px;transform:translateX(-50%)}
.standard-score-meter:is(#overall-meter,#nutrition-meter,#sentiments-meter,#final-sentiments-meter) .meter-endpoint.end {left:70%;right:auto;top:auto;bottom:-21px;transform:translateX(-50%)}
.nutrition-meter.standard-score-meter {margin-bottom:30px}
.nutrition-notes-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.nutrition-notes-heading>label {margin:0}
.nutrition-notes-heading #clear-rating {min-height:32px;margin:0;padding:4px 0;font-size:11px}
#nutrition-view .detail-heading {justify-content:flex-end;min-height:36px;margin-bottom:8px}
#nutrition-view .detail-heading>.section-instruction,#rating-description {display:none}
.nutrition-editor .nutrition-body {gap:18px;grid-template-columns:minmax(220px,.85fr) minmax(0,1.15fr)}
#nutrition-meter .meter-number,#sentiments-meter .meter-number {font-size:clamp(32px,38cqw,108px)}
@media(min-width:1001px) {
  .nutrition-editor {flex:0 1 500px;align-items:stretch}
  .nutrition-editor .nutrition-body {align-items:stretch}
  .nutrition-body>div:first-child {align-self:center}
  .nutrition-notes {display:flex;flex-direction:column;align-self:stretch;min-height:0}
  .nutrition-notes-heading {flex:none}
  .nutrition-notes .notes-input-shell {flex:1;min-height:0}
  .nutrition-notes textarea[data-notes] {height:100%;min-height:110px;max-height:none}
}
@media(max-width:767px) {
  .nutrition-editor .nutrition-body {grid-template-columns:1fr;gap:14px}
  .nutrition-body>div:first-child {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(100px,1fr);gap:8px 16px;align-items:center}
  .nutrition-body #nutrition-meter {grid-column:1;grid-row:1/4;width:100%;max-width:180px;margin:0 0 28px}
  #rating-form {grid-column:2;grid-row:1/3;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
  #rating-value {grid-column:1/-1;grid-row:1;width:100%;height:44px;font-size:23px}
  #rating-minus,#rating-plus {grid-row:2;width:100%;height:40px}
  #meter-help {grid-column:2;grid-row:3;font-size:9px;line-height:1.5;margin:0}
  .nutrition-notes {padding:0;border:0}
  .nutrition-notes textarea[data-notes] {height:170px;min-height:130px}
}
@media(min-width:768px) and (max-width:1000px) and (max-height:600px) {
  .nutrition-editor .nutrition-body {grid-template-columns:minmax(230px,.85fr) minmax(0,1.15fr)}
}

/* UI-29 — keep the phone task list close to its handwritten card heading. */
@media(max-width:767px) {
  .checklist-editor .task-progress {margin:8px 0 4px}
  .checklist-editor #task-summary {display:none}
  .overview-tasks .task-scroll {margin-top:8px}
  #checklists-view>.detail-heading>.section-instruction {display:none}
  #checklists-view>.detail-heading {justify-content:flex-end;margin-bottom:8px}
}

/* UI-30 — one icon group, in visual and keyboard order: Home through Info. */
@media(max-width:767px) {
  .top-row {grid-template-columns:minmax(0,1fr) auto}
  .top-row .header-shortcuts {grid-column:2}
}
@media(max-width:1000px) and (max-height:600px) and (orientation:landscape) {
  .top-row {grid-template-columns:minmax(185px,1fr) minmax(0,auto) auto}
  .top-row .header-shortcuts {grid-column:3}
}