/* The medicine list (handoff A2): shared by the wall and the admin preview.
   Scoped under .wall-list so it can sit inside the admin page. */
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 400; font-display: block; src: url('/wall/fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 700; font-display: block; src: url('/wall/fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Literata'; font-weight: 600; font-display: block; src: url('/wall/fonts/literata-latin-600-normal.woff2') format('woff2'); }
.wall-list { --bg: #F7F2E9; --ink: #1E1A16; --muted: #4A4239; --rule: #DDD2C0; --equip: #ECE4D6;
  --morning: #C98A2E; --evening: #4E5A8C; --any: #7B7164; --supp: #5F7A4E; --supp-bg: #EAEEDF;
  font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; color: var(--ink); }
.wall-list .compact .row-sub .strength, .wall-list.compact .row-sub .strength { display: none; }
.wall-list .cols { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 24px; align-items: start; }
.wall-list .col { max-height: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 18px; position: relative; }
.wall-list .section-title { font-size: 24px; font-weight: 700; margin: 0 0 4px; padding-bottom: 4px; border-bottom: 4px solid var(--any); display: inline-block; }
.wall-list .section-title.morning { border-color: var(--morning); }
.wall-list .section-title.evening { border-color: var(--evening); }
.wall-list .section-title .aside { font-size: 19px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.wall-list .prn-box { border: 2px dashed var(--any); border-radius: 16px; padding: 12px 10px 4px; }
.wall-list .supplement-box { background: var(--supp-bg); border-radius: 16px; padding: 12px 10px 4px; }
.wall-list .section-title.supplement { border-color: var(--supp); }
.wall-list .equip-box { background: var(--equip); border-radius: 16px; padding: 14px 16px; }
.wall-list .equip-label { font-size: 19px; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 6px; }
.wall-list .equip-box .row-name { font-size: 26px; }

.wall-list .row { display: grid; grid-template-columns: minmax(0, 1fr) 108px; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.wall-list .row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.wall-list .yn { display: flex; gap: 2px; }
.wall-list .yn button, .wall-list .dose-btn, .wall-list .dose-undo { font: 700 15px 'Atkinson Hyperlegible', system-ui, sans-serif; border-radius: 9px;
  border: 2px solid var(--any); background: #fff; color: var(--ink); height: 34px; padding: 0 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wall-list .yn .yn-no { width: 36px; }
.wall-list .yn .yn-yes { width: 70px; white-space: nowrap; overflow: hidden; }
.wall-list .yn .yn-no.on { background: #C62828; border-color: #9E1C1C; color: #fff; }
.wall-list .yn .yn-yes.on { background: #2F6B2A; border-color: #2F6B2A; color: #fff; font-size: 12.5px; padding: 0 2px; letter-spacing: -.2px; }
.wall-list .dose-btn { width: 108px; height: 56px; white-space: normal; line-height: 1.1; background: #2F6B2A; border-color: #2F6B2A; color: #fff; }
.wall-list .row-until { font-size: 19px; color: var(--ink); margin-top: 2px; }
.wall-list .row-until.temp { font-weight: 700; color: #7A4B00; }
/* Temporary plan banner over the columns; up to two lines (layout.mjs reserves 2 x BANNER_H). */
.wall-list .temp-banner { background: #FFF1D6; border: 2px solid #C98A2E; border-radius: 12px; padding: 8px 14px; margin: 0;
  font-size: 22px; font-weight: 700; color: var(--ink); }
.wall-list .temp-banner .temp-line { overflow-wrap: anywhere; }
.wall-list .row-note { font-size: 17px; color: #2F6B2A; font-weight: 700; margin-top: 2px; }
.wall-list .temp-banner[hidden] { display: none; }
.wall-list .dose-rx { font-size: 19px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.wall-list .dose-log { grid-column: 1 / -1; background: #EEF3E8; border-left: 4px solid #2F6B2A; border-radius: 8px;
  padding: 6px 10px; font-size: 18px; color: var(--ink); }
.wall-list .dose-log:empty { display: none; }
.wall-list .dose-undo { height: 30px; margin-top: 4px; font-size: 14px; }
.wall-list .row.taken { background: #E7F0E1; border-radius: 10px; }
.wall-list .tick { display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--muted); }
.wall-list .tick-box { width: 26px; height: 26px; border: 2px solid var(--any); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
.wall-list .tick.on { color: #2F6B2A; font-weight: 700; }
.wall-list .tick.on .tick-box { background: #2F6B2A; border-color: #2F6B2A; color: #fff; }
.wall-list .row-name { font-size: 26px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.wall-list .row-sub { font-size: 19px; color: var(--muted); margin-top: 2px; }
.wall-list .row-sub b { color: var(--ink); }
.wall-list .row-amt { white-space: nowrap; text-align: right; }
.wall-list .row-count { font-size: 34px; font-weight: 700; }
.wall-list .row-unit { font-size: 22px; font-weight: 700; margin-left: 6px; }

.wall-list .more { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, var(--bg) 40%);
  padding-top: 28px; text-align: center; }
.wall-list .more button { font-size: 19px; }