/* =====================================================================
   40-builders — Diet chart builder + Prescription builder (views/charts.js,
   public/js/dietchart.js, public/js/prescription.js). Tokens only.
   Layout: main column + sticky nutrition summary card (≥1800px, where the
   main column still has ~1140px for the meal tables); below that the summary
   lives in the floating action bar. ≤640px the line-item tables reflow into
   stacked rows (CSS only). JS contract: docs inv-js §3–4.
   ===================================================================== */

/* ---------------- page frame ---------------- */
.bld-page{max-width:1760px;margin:0 auto}
.bld-page-rx{max-width:1360px}
.bld-head{margin-bottom:22px}
.bld-head .page-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.bld-head .page-sub .badge .i{width:12px;height:12px}
.bld{display:block}
.bld-main{min-width:0}
.bld-aside{display:none}
/* keyboard focus and new rows never end up under the floating action bar */
html:has(.bld-bar){scroll-padding-bottom:120px}

.bld-page .card{margin-bottom:16px}
.bld-page .sec{flex-wrap:wrap;row-gap:2px}
.bld-page .sec .muted{margin-left:2px}

/* ---------------- patient card ---------------- */
.bld-pgrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:0 16px}
/* patient facts: the shared .dl.stacked.grid; one line per value, not-yet-loaded values in the faint ink */
.bld-pstrip{--dl-min:104px;margin:2px 0 0}
.bld-pstrip>div{min-width:0}
.bld-pstrip dd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bld-pstrip strong{font-weight:600}
.bld-pstrip .is-empty strong{color:var(--text-4);font-weight:500}
.bld-pstrip .is-empty .u{display:none}
.bld-pstrip-hint{display:none;align-items:center;gap:7px;margin:10px 0 0;font-size:var(--fs-sm);color:var(--text-3)}
.bld-pstrip-hint .i{color:var(--text-4)}
.bld-patient:has(#patientPicker:invalid) .bld-pstrip-hint{display:flex}
/* next visit (views/charts.js nextVisitField, public/js/nextvisit.js): date + quick buttons on one line */
.bld-next{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;margin:0 0 16px}
.bld-next-f{flex:0 1 240px;min-width:180px;margin:0}
.bld-next-q{gap:6px}
.bld-next-q .btn[aria-pressed="true"]{background:var(--primary-soft);border-color:var(--primary-soft-border);color:var(--primary-text)}
.bld-next .hint{flex-basis:100%;margin:0}
/* header: public link controls menu. It is anchored to the whole actions row, not to the Link button: when the
   actions wrap, the button can sit at the left of a row and a menu right-aligned to it would open off screen. */
.bld-head .page-actions{position:relative}
.bld-head .bld-link{position:static}
.bld-link-chev{margin-left:-2px;color:var(--text-3)}
.bld-link[open]>summary{background:var(--pressed)}
.bld-link-menu{min-width:260px;max-width:calc(100vw - 32px)}
.bld-link-menu .menu-label{white-space:normal}
.bld-link-menu form{display:block;margin:0}

/* PES / clinical notes */
.bld-pes{row-gap:16px}
.bld-pes>label{margin-bottom:0}
.bld-pes textarea{min-height:92px}

/* ---------------- meal plan (heading: the shared .section-head) ---------------- */
.bld-plan-total{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.bld-plan-total .lbl{font-size:var(--fs-sm);color:var(--text-3)}
.bld-plan-total .val{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.012em;font-variant-numeric:tabular-nums;color:var(--text)}
.bld-plan-total .val .u,.bld-meal-total .val .u{letter-spacing:0}
.bld-plan-oil{font-size:var(--fs-sm);color:var(--text-3);font-variant-numeric:tabular-nums} /* the day total with cooking oil (dietchart.js) */
.bld-page :is(.val,.num)>.u{margin-left:.3em}

/* card headers use the shared .card-head/.card-title/.card-sub; count sits inline after the title */
.bld-ch-title{display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap}
.bld-ch-title .card-sub{margin:0;font-variant-numeric:tabular-nums}
.bld-ch-title .card-sub:empty{display:none}
.bld-ch-title .card-title{align-self:center}
.bld-meal-total{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.bld-meal-total .lbl{font-size:var(--fs-sm);color:var(--text-3)}
.bld-meal-total .val{font-size:var(--fs-md);font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
.bld-meal:has(tbody:empty) .bld-meal-total .val{color:var(--text-4);font-weight:500}

/* the table sits flush inside the card (shared .card.flush: 20px outer cells); the remove column needs less on the right */
.bld-page .bld-meal>.table-scroll,.bld-page .bld-meds>.table-scroll{position:relative}
.bld-page .table-scroll>.meal-table{min-width:940px;table-layout:fixed}
.bld-page .table-scroll>.rx-table{min-width:860px;table-layout:fixed}
.bld-page .meal-table col.col-food{width:auto}
.bld-page .meal-table col.col-amt{width:70px}
.bld-page .meal-table col.col-unit{width:126px}
.bld-page .meal-table col.col-size{width:170px}
.bld-page .meal-table col.col-mac{width:64px}
.bld-page .meal-table col.col-kcal{width:70px}
.bld-page .meal-table col.col-conn{width:74px}
.bld-page :is(.meal-table,.rx-table) col.col-rm{width:46px}

.bld-page :is(.meal-table,.rx-table) th{height:34px;padding:0 6px;font-size:var(--fs-xs)}
.bld-page :is(.meal-table,.rx-table) td{height:auto;padding:8px 6px;vertical-align:top}
.bld-page :is(.meal-table,.rx-table) :is(th,td):last-child{padding-right:10px}
.bld-page :is(.meal-table,.rx-table) th .u{margin-left:2px;font-size:var(--fs-2xs);color:var(--text-4)}
.bld-page .meal-table td.num{padding-top:8px;line-height:32px;font-size:var(--fs-sm);color:var(--text-2)}
.bld-page .meal-table td.c-kcal{font-size:var(--fs-base);font-weight:500;color:var(--text)}

/* compact controls inside rows */
.bld-page :is(.meal-table,.rx-table) :is(input[type=text],input[type=number],select){height:32px;margin:0;box-shadow:none;border-color:var(--border)}
.bld-page :is(.meal-table,.rx-table) :is(input[type=text],input[type=number],select):hover:not(:disabled):not(:focus){border-color:var(--border-input-hover)}
.bld-page :is(.meal-table,.rx-table) :is(input[type=text],input[type=number],select):focus{border-color:var(--ring);box-shadow:0 0 0 3px var(--ring-soft)}
.bld-page :is(.bld-joined,.input-group) input[type=number]{-moz-appearance:textfield;appearance:textfield}
.bld-page :is(.bld-joined,.input-group) input[type=number]::-webkit-inner-spin-button,.bld-page :is(.bld-joined,.input-group) input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.bld-page :is(.meal-table,.rx-table) :is(input[type=text],input[type=number]){padding:0 9px}
.bld-page :is(.meal-table,.rx-table) select{padding:0 26px 0 9px;background-position:right 7px center;background-size:14px}
.bld-page .meal-table select.conn-sel{padding:0 22px 0 8px;background-position:right 5px center}
.bld-page .meal-table .amount-inp{text-align:right;-moz-appearance:textfield;appearance:textfield}
.bld-page .meal-table .amount-inp::-webkit-inner-spin-button,.bld-page .meal-table .amount-inp::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
@media (min-width:641px){.bld-page :is(.meal-table,.rx-table) :is(input[type=text],input[type=number],select){font-size:var(--fs-sm)}}
.bld-page .meal-table select:disabled{background-image:none;color:var(--text-4);border-color:var(--border-subtle);background-color:transparent}

/* food / medicine search cell (.ss-wrap > .ss-input stays a direct child) */
.bld-page .food-flex{display:flex;align-items:center;gap:2px}
.bld-page :is(.meal-table,.rx-table) input.ss-input{padding-left:31px;background-image:var(--search-glyph);background-repeat:no-repeat;background-position:10px center;background-size:14px}
.bld-page :is(.meal-table,.rx-table) .ss-wrap.has-value input.ss-input{padding-left:9px;background-color:transparent;background-image:none;border-color:transparent;font-weight:500;color:var(--text)}
.bld-page .ss-wrap.has-value .ss-input:hover{border-color:var(--border-input)}
.bld-page .ss-wrap.has-value .ss-input:focus{background-color:var(--surface);border-color:var(--ring)}
/* the food list's "USDA" tag after a name (public/js/dietchart.js, common.js attachSearch tag): the shared .badge.badge-outline,
   smaller inside the list (.ss-drop sits on <body>, outside .bld-page) */
.ss-drop .badge.ss-tag{height:16px;margin-left:6px;padding:0 5px;border-radius:var(--r-xs);font-size:var(--fs-2xs);vertical-align:1px}
/* "+" add-to-library: icon-only at every width (title + aria-label carry the words) */
.bld-page .btn-add-item{display:inline-grid;place-items:center;flex-shrink:0;width:30px;height:30px;padding:0;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--text-3);font:inherit;cursor:pointer;transition:background-color var(--dur-1),color var(--dur-1)}
.bld-page .btn-add-item span{display:none}
.bld-page .btn-add-item .i{width:15px;height:15px}
.bld-page .btn-add-item:hover{background:var(--hover);color:var(--text)}
.bld-page :is(.food-bn,.med-group,.unit-g){margin:2px 0 0 10px;font-size:var(--fs-xs);line-height:1.6;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bld-page :is(.food-bn,.med-group,.unit-g):empty{display:none}
.bld-page .rm-cell{text-align:right}
.bld-page .rm-row{--btn-h:32px;color:var(--text-4)}
.bld-page .rm-row:hover{background:var(--high-bg);color:var(--high-tx)}

/* written-manually rows: no nutrition values, not counted */
.bld-page tr.manual-row :is(.food-bn,.med-group){color:var(--text-3);font-style:normal}
.bld-page tr.manual-row :is(.food-bn,.med-group)::before{content:"";display:inline-block;width:12px;height:12px;margin-right:5px;vertical-align:-2px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 21h8'/%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 21h8'/%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3C/svg%3E") center/contain no-repeat}
.bld-page .meal-table tr.manual-row td.num{color:var(--text-4)}

/* "or" alternatives: the row after an OR is not counted */
.bld-page .meal-table tr.or-next>td{border-bottom:1px dashed var(--border-strong)}
.bld-page .meal-table tr.or-next .conn-sel{border-color:var(--border-strong);font-weight:600;color:var(--text)}
.bld-page .meal-table tr.or-next+tr>td:first-child{position:relative}
.bld-page .meal-table tr.or-next+tr>td:first-child::before{content:"or";position:absolute;top:-10px;left:22px;z-index:3;display:inline-flex;align-items:center;height:19px;padding:0 7px;border:1px solid var(--border-strong);border-radius:var(--r-pill);background:var(--surface);color:var(--text-2);font-size:var(--fs-2xs);font-weight:600;line-height:1}
.bld-page .meal-table tr.or-next+tr>td.num{color:var(--text-4)}

/* empty meal / empty medicine list: one dashed "add" target in the same style on both builders */
.bld-meal-empty{display:none;padding:14px 20px 16px}
.bld-meal:has(tbody:empty) .bld-meal-empty,.bld-meds:has(tbody:empty) .bld-meal-empty{display:block}
.bld-meal:has(tbody:empty) :is(.table-scroll,.bld-meal-foot),.bld-meds:has(tbody:empty) :is(.table-scroll,.bld-meal-foot){display:none}
.bld-empty-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;margin:0;border:1px dashed var(--border-input);border-radius:var(--r-md);background:transparent;color:var(--text-2);font:inherit;font-size:var(--fs-base);font-weight:500;cursor:pointer;transition:border-color var(--dur-1),background-color var(--dur-1),color var(--dur-1)}
.bld-empty-btn:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-text)}
.bld-empty-btn .i{color:currentColor}
.bld-meds .bld-meal-empty{padding:18px 20px}

.bld-meal-foot{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;padding:7px 12px 8px;border-top:1px solid var(--border-subtle)}
.bld-or-note{display:none;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--text-3)}
.bld-or-note .i{flex-shrink:0;color:var(--text-4)}
.bld-meal:has(tr.or-next) .bld-or-note,.bld-or-note.bld-show{display:inline-flex}

/* ---------------- fluids / activity ---------------- */
.bld-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:0 16px;margin-top:28px}
.bld-pair>.card>label:last-child{margin-bottom:0}
.bld-joined{display:flex;margin-top:6px}
.bld-joined>input{flex:1;min-width:0;margin:0;border-radius:var(--r-sm) 0 0 var(--r-sm)}
.bld-joined>select{flex:0 0 auto;width:auto;min-width:92px;margin:0 0 0 -1px;border-radius:0 var(--r-sm) var(--r-sm) 0;background-color:var(--surface-2)}
.bld-joined>:hover,.bld-joined>:focus{position:relative;z-index:1}
.bld-note{margin:-6px 0 14px;font-size:var(--fs-sm);color:var(--text-3)}
.bld-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.bld-act-label{margin:0;font-size:var(--fs-sm)}
.bld-act-label .bn{margin-left:2px;font-weight:400;color:var(--text-3)}

/* ---------------- recommended tests (shared details.disclosure) ---------------- */
.bld-tests{margin:0 0 16px}
.bld-tests>details.disclosure{border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.bld-tests>details>summary{align-items:center;padding:14px 20px 14px 22px;border-radius:var(--r-lg);transition:background-color var(--dur-1)}
.bld-tests>details>summary:hover{background:var(--hover)}
.bld-tests>details[open]>summary{border-bottom:1px solid var(--border-subtle);border-radius:var(--r-lg) var(--r-lg) 0 0}
.bld-tests-sum{display:flex;flex-direction:column;gap:5px;min-width:0}
.bld-tests-title{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap}
.bld-tests-picked{display:block;font-size:var(--fs-sm);font-weight:400;line-height:1.6;color:var(--text-2)}
.bld-tests>details[open] .bld-tests-picked{display:none}
.bld-tests>details>.body{padding:16px 22px 20px}
.bld-tests .test-picker{display:block;columns:3 280px;column-gap:36px}
.bld-tests .test-picker>.test-search{column-span:all;max-width:380px;margin:0 0 14px}
.bld-tests .test-picker>label{column-span:all;margin-top:8px;padding-top:14px;border-top:1px solid var(--border-subtle)}
.bld-tests .test-group{break-inside:avoid;padding:0 0 16px;border:0}
.bld-tests .test-group-title{margin-bottom:7px}
.bld-tests .test-list{gap:5px}

/* ---------------- suggestions ---------------- */
.bld-sugg .rte-editor{min-height:160px}

/* ---------------- floating action bar (the shared .sticky-actions.floating; only its content is styled here) ---------------- */
.bld-page .bld-bar{gap:10px 20px}
.bld-page .bar-sum{display:flex;align-items:center;gap:22px;flex:1 1 auto;min-width:0}
.bld-page .bar-kcal{display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.bld-page .bar-big{font-size:var(--fs-2xl);font-weight:600;line-height:1.1;letter-spacing:-.022em;font-variant-numeric:tabular-nums;color:var(--text)}
.bld-page .bar-kcal .u{font-size:var(--fs-sm)}
/* the day total with cooking oil as the big number: only at 901-1599 px when the chart has oil (.has-oil, dietchart.js) */
.bld-page .bar-big-oil{display:none;align-items:baseline;gap:4px}
.bld-page .bar-big-oil .i{flex-shrink:0;align-self:center;color:var(--text-3)}
.bld-page .bar-target{margin-left:8px;padding-left:10px;border-left:1px solid var(--border);font-size:var(--fs-sm);color:var(--text-3);font-variant-numeric:tabular-nums}
.bld-page .bar-target:empty{display:none}
.bld-page .bar-mac{display:flex;flex-direction:column;gap:6px;flex:0 1 340px;min-width:0}
.bld-page .bar-legend{display:flex;gap:4px 14px;flex-wrap:nowrap;font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap}
.bld-page .bar-legend>span{display:inline-flex;align-items:center}
.bld-page .bar-legend .bld-lg-short{display:none;text-decoration:none;cursor:help}
.bld-page .bar-legend b{margin-left:4px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.bld-page .bar-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.bld-page .bar-wide{display:none}
.bld-page .bar-more .menu{min-width:240px}
.bld-page .bar-more .menu-label{text-align:left}
.bld-page .bar-more>summary .bar-chev{margin:0 -4px 0 0;color:var(--text-3)}
.bld-page .bar-save{min-width:150px}
.bld-page .bar-rx-count{font-size:var(--fs-sm);color:var(--text-3)}
.bld-page .bar-rx-count strong{color:var(--text);font-variant-numeric:tabular-nums}

/* ---------------- nutrition summary card (≥1800px; a shared .card) ---------------- */
.bld-aside .nsum{margin:0;padding:18px 20px 16px}
.nsum-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 16px}
.nsum-title{margin:0;font-size:var(--fs-md);font-weight:600}
.nsum-live{font-size:var(--fs-xs);color:var(--text-3)}
.nsum-label{display:block;margin:0 0 6px;font-size:var(--fs-xs);font-weight:500;color:var(--text-3)}
.nsum-kcal{display:flex;align-items:baseline;gap:6px}
.nsum-big{font-size:var(--fs-3xl);font-weight:600;line-height:1.1;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--text)}
.nsum-kcal .u{font-size:var(--fs-base)}
.nsum-meter{margin:12px 0 7px}
.nsum-target{margin:0;font-size:var(--fs-sm);color:var(--text-3);font-variant-numeric:tabular-nums}
.nsum-sec{margin-top:18px;padding-top:16px;border-top:1px solid var(--border-subtle)}
.bld-page .nsum-sec .macbar{height:10px;margin:2px 0 10px}
.nsum-mrow{display:grid;grid-template-columns:minmax(0,1fr) auto 46px;align-items:center;gap:8px;padding:4px 0;font-size:var(--fs-sm);color:var(--text)}
.nsum-mname{display:flex;align-items:center;color:var(--text-2)}
.nsum-pct{text-align:right;color:var(--text-3);font-variant-numeric:tabular-nums}
.nsum-meals{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.nsum-meals li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;font-size:var(--fs-sm)}
.nsum-meal-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.nsum-meals .meter{grid-column:1/-1;height:4px}
.nsum-meals .meter>span{background:var(--border-strong)}
.nsum-empty{display:none}
.nsum.is-empty .nsum-sec{display:none}
.nsum.is-empty .nsum-empty{display:block;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--border-subtle);font-size:var(--fs-sm);line-height:1.55;color:var(--text-3)}
.nsum-foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--border-subtle)}
.nsum-foot p{display:flex;gap:7px;margin:0;font-size:var(--fs-xs);line-height:1.5;color:var(--text-3)}
.nsum-foot .i{flex-shrink:0;margin-top:2px;width:13px;height:13px;color:var(--text-4)}
.nsum-foot [data-oil-kcal]{color:var(--text-2);font-variant-numeric:tabular-nums}
.meter>span[data-sum-target-bar],.meter>span[data-meal-bar]{width:0;transition:width var(--dur-4) var(--ease-out)}

/* ---------------- prescription table ---------------- */
.bld-meds-hint{font-size:var(--fs-sm);color:var(--text-3)}
/* medicine names get a fixed share; free-text instructions take whatever is left */
.bld-page .rx-table col.col-med{width:30%}
.bld-page .rx-table col.col-dose{width:84px}
.bld-page .rx-table col.col-after{width:72px}
.bld-page .rx-table col.col-note{width:auto}
.bld-page .rx-table th.th-group{height:28px;text-align:center;border-bottom:1px solid var(--border-subtle)}
.bld-page .rx-table tr.th-sub th{height:28px;text-align:center}
.bld-page .rx-table th[rowspan]{vertical-align:bottom;padding-bottom:7px}
.bld-page .rx-table :is(th,td):is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6)){padding-left:3px;padding-right:3px}
.bld-page .rx-table tr.th-sub th{padding-left:3px;padding-right:3px}
.bld-page .rx-table .dose-inp,.bld-page .rx-table .after-inp{text-align:center;padding:0 4px}

/* ---------------- modals ---------------- */
.bld-modal{max-width:620px}
.bld-modal h3{padding-right:40px}
.bld-fs{margin:4px 0 0}
.bld-fs legend{display:flex;align-items:baseline;gap:6px;margin-bottom:10px;font-size:var(--fs-sm);font-weight:600}
.bld-fs legend .muted{font-weight:400}
.bld-fs label{margin-bottom:14px}
.bld-fs .bld-fs-hint{margin:-6px 0 14px} /* under the household measures of the + New food form */
.bld-err::before{content:"";flex-shrink:0;width:16px;height:16px;margin-top:2px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat}
.bld-modal .alert{margin:4px 0 0}

/* ---------------- responsive ---------------- */
@media (min-width:1800px){
  .bld{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
  .bld-aside{display:block;position:sticky;top:calc(var(--topbar-h) + 20px);max-height:calc(100vh - var(--topbar-h) - 40px);overflow-y:auto;border-radius:var(--r-lg)}
  .bld-page-dc .bld-bar .bar-sum{display:none}
  .bld-page-dc .bld-bar .bar-wide{display:inline-flex}
  .bld-page-dc .bld-bar .bar-more{display:none}
}
@media (max-width:1439px){
  /* tighter numeric columns so the food name keeps its room */
  .bld-page .meal-table col.col-unit{width:110px}
  .bld-page .meal-table col.col-size{width:136px}
  .bld-page .meal-table col.col-mac{width:56px}
  .bld-page .meal-table col.col-kcal{width:64px}
  .bld-page .meal-table col.col-conn{width:72px}
  .bld-page .rx-table col.col-med{width:28%}
  .bld-page .bar-mac{flex-basis:240px}
  .bld-page .bar-legend{gap:4px 10px}
  .bld-page .bar-legend .bld-lg-long{display:none}
  .bld-page .bar-legend .bld-lg-short{display:inline}
}
@media (min-width:1025px) and (max-width:1279px){
  /* sidebar + narrow main column: keep the action bar on one line */
  .bld-page .bld-bar .bar-target{display:none}
  .bld-page .bar-mac{flex-basis:200px}
}
@media (max-width:1100px){
  .bld-pair{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:901px) and (max-width:1599px){
  /* no room for the food total and the total with cooking oil side by side: when the chart has oil, the big number is the
     day total with it (droplet, food + oil on hover), so it agrees with the share of the TDEE and the target difference
     next to it; the food total stays in the meal plan's Day total and the Nutrition summary */
  .bld-page .bld-bar .bar-oil{display:none}
  .bld-page .bld-bar.has-oil .bar-food{display:none}
  .bld-page .bld-bar.has-oil .bar-big-oil{display:inline-flex}
}
@media (max-width:900px){
  .bld-page .bar-target{display:none}
  /* keep the food / medicine column in view while the numbers scroll */
  .bld-page :is(.meal-table,.rx-table) td:first-child{position:sticky;left:0;z-index:2;background:var(--surface);box-shadow:1px 0 0 var(--border-subtle)}
  .bld-page :is(.meal-table,.rx-table) th:first-child{position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--border)}
  .bld-page .meal-table col.col-food,.bld-page .rx-table col.col-med{width:216px}
  .bld-page .meal-table col.col-unit{width:118px}
  .bld-page .meal-table col.col-size{width:140px}
  .bld-page .table-scroll>.meal-table{min-width:0;width:994px}
  .bld-page .table-scroll>.rx-table{min-width:0;width:956px}
  .bld-page .meal-table tr.or-next+tr>td:first-child{position:sticky}
}
@media (max-width:640px){
  html:has(.bld-bar){scroll-padding-bottom:150px}
  .bld-pgrid,.bld-acts{grid-template-columns:minmax(0,1fr)}
  .bld-pstrip{--dl-min:80px}
  .bld-head .page-actions .btn{--btn-h:32px;padding:0 11px;font-size:var(--fs-sm)}
  .bld-page .card.flush>.card-head{padding:12px 16px}
  .bld-tests>details>summary{padding:14px 16px}
  .bld-tests>details>.body{padding:14px 16px 16px}
  .bld-meds-hint{display:none}
  .bld-meal-empty,.bld-meds .bld-meal-empty{padding:12px 16px 14px}
  .bld-plan-total{flex-wrap:wrap;row-gap:2px}

  /* ---- line items reflow into stacked rows: no sideways scrolling on phones ----
     meal row:  [food ................ ][remove]
                [amount][unit    ][size    ]
                C 12.3  P 4.5  F 1.2  Fb 0.8   412 kcal [and]
     Rx row:    [medicine ............ ][remove]
                [morning][noon][evening][night]
                [after hrs][instructions ........]                                    */
  .bld-page :is(.bld-meal,.bld-meds)>.table-scroll{overflow:visible}
  .bld-page .table-scroll>:is(.meal-table,.rx-table){display:block;width:100%;min-width:0;table-layout:auto}
  .bld-page :is(.meal-table,.rx-table)>:is(thead,colgroup){display:none}
  .bld-page :is(.meal-table,.rx-table)>tbody{display:block}
  .bld-page :is(.meal-table,.rx-table) tr[data-row]{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;padding:12px 16px 14px;border-bottom:1px solid var(--border-subtle)}
  .bld-page :is(.meal-table,.rx-table) tr[data-row]:last-child{border-bottom:0}
  .bld-page :is(.meal-table,.rx-table) tr[data-row]::before,.bld-page :is(.meal-table,.rx-table) tr[data-row]::after{content:"";flex-basis:100%;height:0}
  .bld-page :is(.meal-table,.rx-table) tr[data-row]>td,.bld-page :is(.meal-table,.rx-table) tr[data-row]>td:first-child{position:static;display:block;min-width:0;height:auto;padding:0;border:0;background:none;box-shadow:none;line-height:1.4}
  .bld-page :is(.meal-table,.rx-table) tbody tr[data-row]:hover>td{background:none}
  .bld-page :is(.meal-table,.rx-table) tr[data-row]>td:first-child{order:1;flex:1 1 0}
  .bld-page :is(.meal-table,.rx-table) tr[data-row]>td.rm-cell{order:2;flex:0 0 auto;align-self:flex-start}
  .bld-page :is(.meal-table,.rx-table) tr[data-row]::before{order:3}
  .bld-page :is(.meal-table,.rx-table) tr[data-row]::after{order:6}
  .bld-page :is(.meal-table,.rx-table) :is(input[type=text],input[type=number],select){height:36px}

  /* meal rows */
  .bld-page .meal-table tr[data-row]>td:nth-child(2){order:4;flex:0 0 72px;margin-top:8px}
  .bld-page .meal-table tr[data-row]>td:nth-child(3),.bld-page .meal-table tr[data-row]>td:nth-child(4){order:5;flex:1 1 0;margin-top:8px}
  .bld-page .meal-table tr[data-row]>td.num{order:7;flex:0 0 auto;margin-top:10px;padding:0;line-height:1.4;font-size:var(--fs-xs);color:var(--text-2)}
  .bld-page .meal-table tr[data-row]>td.num::before{margin-right:3px;color:var(--text-4);font-weight:500}
  .bld-page .meal-table tr[data-row]>td.c-carbs::before{content:"C"}
  .bld-page .meal-table tr[data-row]>td.c-prot::before{content:"P"}
  .bld-page .meal-table tr[data-row]>td.c-fat::before{content:"F"}
  .bld-page .meal-table tr[data-row]>td.c-fiber::before{content:"Fb"}
  .bld-page .meal-table tr[data-row]>td.c-kcal{order:8;margin-left:auto;font-size:var(--fs-sm);font-weight:600;color:var(--text)}
  .bld-page .meal-table tr[data-row]>td.c-kcal::before{content:none}
  .bld-page .meal-table tr[data-row]>td.c-kcal::after{content:"kcal";margin-left:3px;font-size:var(--fs-2xs);font-weight:400;color:var(--text-3)}
  .bld-page .meal-table tr[data-row]>td:nth-child(10){order:9;flex:0 0 68px;margin-top:10px}
  .bld-page .meal-table tr.or-next{border-bottom-style:dashed;border-bottom-color:var(--border-strong)}
  .bld-page .meal-table tr.or-next>td{border:0}
  .bld-page .meal-table tr.or-next+tr>td:first-child{position:static}
  .bld-page .meal-table tr.or-next+tr>td:first-child::before{top:-10px;left:16px}
  .bld-page .meal-table tr.or-next+tr>td.num{color:var(--text-4)}

  /* Rx rows: dose labels come from CSS because the header row is hidden */
  .bld-page .rx-table tr[data-row]>td:is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5)){order:4;flex:1 1 0;margin-top:10px}
  .bld-page .rx-table tr[data-row]>td:nth-child(6){order:7;flex:0 0 84px;margin-top:10px}
  .bld-page .rx-table tr[data-row]>td:nth-child(7){order:8;flex:1 1 0;margin-top:10px}
  .bld-page .rx-table tr[data-row]>td:is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6),:nth-child(7))::before{display:block;margin:0 0 4px 1px;font-size:var(--fs-xs);font-weight:500;color:var(--text-3)}
  .bld-page .rx-table tr[data-row]>td:nth-child(2)::before{content:"Morning"}
  .bld-page .rx-table tr[data-row]>td:nth-child(3)::before{content:"Noon"}
  .bld-page .rx-table tr[data-row]>td:nth-child(4)::before{content:"Evening"}
  .bld-page .rx-table tr[data-row]>td:nth-child(5)::before{content:"Night"}
  .bld-page .rx-table tr[data-row]>td:nth-child(6)::before{content:"Every (hrs)"}
  .bld-page .rx-table tr[data-row]>td:nth-child(7)::before{content:"Instructions"}

  /* action bar docks to the bottom edge (shared); totals above the buttons */
  .bld-page .bld-bar{flex-direction:column;align-items:stretch;gap:10px}
  .bld-page .bar-sum{justify-content:space-between;gap:14px}
  .bld-page .bar-mac{flex:1 1 auto;max-width:250px}
  .bld-page .bar-legend{gap:2px 8px}
  .bld-page .bar-legend .mac-dot{margin-right:4px}
  .bld-page .bar-actions{margin-left:0}
  .bld-page .bar-save{flex:1;min-width:0}
  .bld-page .bld-bar-rx .bar-sum{display:none}
}

/* latest lab report of the chosen patient (public/js/labstrip.js) */
.bld-labs{margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--border-subtle)}
.bld-labs-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:var(--fs-sm);font-weight:500;color:var(--text-2)}
.bld-labs-h .i{color:var(--text-3)}
.bld-labs-h .card-link{margin-left:auto;font-weight:400}
.bld-labs-list{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:8px 0 0;padding:0}
.bld-labs-list li{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text)}
.bld-labs-list .u{margin-left:2px;color:var(--text-3)}
.bld-labs-n{color:var(--text-2)}
.bld-labs-ok{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:var(--fs-sm);color:var(--text-3)}
/* ---------------- latest blood pressure in the patient strip (views/charts.js bpCell, public/js/bpstrip.js) ---------------- */
.bld-pstrip .bld-bp-st{margin-top:3px;white-space:normal;overflow:visible}
.bld-pstrip .bld-bp-st .status{max-width:100%;height:auto;min-height:22px;padding-top:2px;padding-bottom:2px;white-space:normal;line-height:1.3} /* a long category wraps inside its column */
.bld-bp-child{font-size:var(--fs-xs);font-weight:400;color:var(--text-3)}
.bld-pstrip .bld-bp-when{display:block;margin-top:2px;font-size:var(--fs-xs);font-weight:400;color:var(--text-3)} /* date of the reading, under the pill */
.bld-pstrip .bld-bp>dd:first-of-type{white-space:normal} /* "162/101 mmHg" wraps before the unit instead of being cut off */
@media (max-width:640px){.bld-pstrip .bld-bp{grid-column:span 2}}
/* ---------------- energy target (views/charts.js targetField, public/js/target.js): field + quick buttons ---------------- */
.bld-target{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--border-subtle)}
.bld-target-f{flex:0 1 240px;min-width:180px;margin:0}
/* phones: Next visit and Target energy as wide as the date field above them */
@media (max-width:640px){.bld-next-f,.bld-target-f{flex:1 1 100%}}
.bld-target-q{gap:6px}
.bld-target-q .btn[aria-pressed="true"]{background:var(--primary-soft);border-color:var(--primary-soft-border);color:var(--primary-text)}
.bld-target .hint{flex-basis:100%;margin:0;font-variant-numeric:tabular-nums}
/* nutrition summary: target and planned − target under the TDEE line */
.nsum-goal,.nsum-oil{margin:4px 0 0;font-size:var(--fs-sm);color:var(--text-2);font-variant-numeric:tabular-nums}
.nsum-goal-k{color:var(--text-3)}
.nsum-goal-d{color:var(--text-3)}

/* ---- parity round: phones — the action bar never runs wider than the screen (320–375 px) ---- */
@media (max-width:640px){
  .bld-page .bar-sum{flex-wrap:wrap;row-gap:8px}
  .bld-page .bar-mac{flex:1 1 0;max-width:none;min-width:0}
  .bld-page .bar-mac .macbar{width:100%}
  .bld-page .bar-legend{flex-wrap:wrap}
  .bld-page .bar-actions{flex-wrap:wrap;width:100%}
  .bld-page .bar-actions .bar-save{flex:1 1 auto} /* wraps onto its own full row only when the three buttons do not fit */
  .bld-page .bar-actions>.btn-quiet,.bld-page .bar-actions>.bar-more{flex:1 1 0}
  .bld-page .bar-actions>.bar-more>summary{width:100%;justify-content:center}
}
/* find a patient by typing (public/js/patientpick.js), under the patient list */
.bld-pfind{margin-top:6px}
.bld-pfind .ss-input{width:100%}
/* "Print the latest lab results" choice in both builders */
.bld-showlabs{display:flex;flex-direction:column;gap:2px;margin:12px 0 0}
.bld-showlabs .r{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:500}
/* ---- target split (views/charts.js targetField, public/js/target.js): carbs, protein and fat in %, live comparison ---- */
.bld-mt{flex:1 1 100%;min-width:0;margin:6px 0 0;padding:0;border:0}
.bld-mt legend{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px;margin:0 0 6px;padding:0;font-size:var(--fs-sm);font-weight:500;color:var(--text-2)}
.bld-mt legend .muted{font-weight:400}
.bld-mt-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;max-width:420px}
.bld-mt-f{min-width:0;margin:0}
.bld-mt .hint{margin:6px 0 0;font-variant-numeric:tabular-nums}
.bld-mt-cmp{max-width:520px;margin:10px 0 0}
.bld-mt-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.bld-mt-table th,.bld-mt-table td{height:auto;padding:5px 8px;border-bottom:1px solid var(--border-subtle);background:transparent;text-align:left;font-size:var(--fs-sm);font-weight:400;vertical-align:middle}
.bld-mt-table th:first-child,.bld-mt-table td:first-child{padding-left:0}
.bld-mt-table th:last-child,.bld-mt-table td:last-child{padding-right:0}
.bld-mt-table tbody tr:hover>td{background:transparent}
.bld-mt-table thead th{font-size:var(--fs-xs);font-weight:500;color:var(--text-3);border-bottom-color:var(--border)}
.bld-mt-table tbody th{color:var(--text-2);white-space:nowrap}
.bld-mt-table tbody tr:last-child>*{border-bottom:0}
.bld-mt-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bld-mt-note{margin:6px 0 0;font-size:var(--fs-xs);line-height:1.5;color:var(--text-3)}
.nsum-mt .bld-mt-cmp{max-width:none;margin:0}
/* the Difference header: the short form in the narrow summary card and on phones */
.bld-mt-short{display:none;text-decoration:none;cursor:help}
.nsum-mt .bld-mt-long{display:none}.nsum-mt .bld-mt-short{display:inline}
.nsum-mt .bld-mt-table th,.nsum-mt .bld-mt-table td{padding:4px 3px}
.nsum-mt .bld-mt-table th:first-child,.nsum-mt .bld-mt-table td:first-child{padding-left:0}
/* the narrow summary card and phones: "(incl. fiber)" of the carbs row on a second, quieter line (public/js/target.js) */
.nsum-mt .bld-mt-incl{display:block;font-size:var(--fs-xs);color:var(--text-3);line-height:1.3}
@media (max-width:640px){.bld-mt-incl{display:block;font-size:var(--fs-xs);color:var(--text-3);line-height:1.3}}
@media (max-width:640px){.bld-mt-long{display:none}.bld-mt-short{display:inline}.bld-mt-g{max-width:none}.bld-mt-table th,.bld-mt-table td{padding:5px 4px}.bld-mt-table th:first-child,.bld-mt-table td:first-child{padding-left:0}}
/* ---- templates (views/charts.js, views/templates.js; lib/templates.js) ---- */
/* Save as template (saved editor header) and Start from a template (new chart or prescription): a small form in a menu */
.bld-head .bld-tpl{position:static}
.bld-tpl:not([open])>.menu,.tpl-rename:not([open])>.menu{display:none}
.bld-tpl[open]>summary{background:var(--pressed)}
.bld-tpl-menu{width:320px;max-width:calc(100vw - 32px);text-align:left}
.bld-tpl-menu form{display:block;margin:0}
.bld-tpl-f{display:block;margin:2px 10px 6px}
.bld-tpl-f input,.bld-tpl-f select{width:100%;margin-top:4px}
.bld-tpl-hint{margin:0 10px 6px;font-size:var(--fs-xs);line-height:1.5;color:var(--text-3);white-space:normal}
.menu .bld-tpl-hint a{display:inline;width:auto;height:auto;padding:0;border-radius:0;background:none;color:var(--link);font-size:inherit;white-space:normal;text-decoration:underline}
.bld-tpl-menu button[type=submit]{font-weight:500}
/* Patient copy box (both builders): what the patient's link shows and the print page starts with */
.bld-copy{display:flex;flex-direction:column;gap:2px;margin:14px 0 0;padding:12px 0 0;border:0;border-top:1px solid var(--border-subtle)}
.bld-copy legend{float:left;width:100%;margin:0 0 6px;padding:0;font-size:var(--fs-sm);font-weight:500;color:var(--text-2)}
.bld-copy legend .muted{font-weight:400}
.bld-copy .r{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:500}
.bld-copy .hint{margin:0 0 6px 24px}
/* Templates page and a template's page */
.tpl-page{display:flex;flex-direction:column;gap:20px}
.tpl-list .tpl-note{margin:0 16px 12px}
/* the screen-reader-only Actions header is positioned: keep it inside the table's own scroll box on phones */
.tpl-meal .table-scroll{position:relative}
/* the meal tables of a template's page have three columns: they fit the card at any width (no 760 px minimum) */
.tpl-meal .table-scroll>table{min-width:0}
/* Templates lists: the Rename menus must escape the card, so, as on the patient list (30-patients.css .pt-card), these
   tables never scroll sideways: the rows stack on narrower screens */
.tpl-list{overflow:visible}
.tpl-list>.toolbar{border-radius:var(--r-lg) var(--r-lg) 0 0}
.tpl-list>.table-scroll{overflow:visible}
.tpl-list>.table-scroll>table{min-width:0}
/* rows of two or three lines keep some air above and below (as the patient list's, .pt-table td) */
.tpl-table td{padding-top:8px;padding-bottom:8px}
.tpl-table .tpl-c-name{min-width:220px}
.tpl-table .tpl-c-name small{display:block;margin-top:2px;color:var(--text-3)}
.tpl-table .tpl-c-what,.tpl-table .tpl-c-target{color:var(--text-2)}
.tpl-table .tpl-c-when{white-space:nowrap;color:var(--text-3)}
.tpl-table td.actions{white-space:nowrap}
.tpl-table .row-actions{justify-content:flex-end;flex-wrap:nowrap}
.tpl-rename{position:relative}
.tpl-menu{width:300px;max-width:calc(100vw - 32px);text-align:left}
.tpl-menu form{display:block;margin:0}
.tpl-menu-f{display:block;margin:4px 10px 8px}
.tpl-menu-f input{width:100%;margin-top:4px}
.tpl-name-bn{margin:2px 0 0;font-size:var(--fs-md);color:var(--text-2)}
.tpl-layout>.tpl-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.tpl-layout>.tpl-main>*{margin:0}
.tpl-side{position:sticky;top:76px;display:flex;flex-direction:column;gap:20px;min-width:0}
.tpl-side>.card{margin:0}
.tpl-use form>label{margin:0 0 10px}
.tpl-use-text{margin:0 0 12px;font-size:var(--fs-sm);color:var(--text-3)}
.tpl-note{margin:0 0 20px}
.tpl-facts{--dl-min:130px}
.tpl-facts dd small{display:block;margin-top:2px;font-size:var(--fs-xs);font-weight:400;line-height:1.45;color:var(--text-3);font-variant-numeric:normal}
.tpl-sum-note{margin:12px 0 0}
.tpl-sum .alert{margin:12px 0 0}
.tpl-meal .card-head{align-items:baseline}
.tpl-meal-k{font-weight:600;white-space:nowrap}
.tpl-meal-k .u{margin-left:3px}
.tpl-items td small{display:block;margin-top:1px;color:var(--text-3)}
.tpl-items .tpl-c-food{min-width:200px}
.tpl-items .tpl-f-en{font-weight:500}
.tpl-items .tpl-c-amt{white-space:nowrap}
.tpl-items tr.is-manual .tpl-f-en{font-style:italic}
.tpl-items tr.tpl-or td{height:auto;padding:0 16px;border-bottom:0;font-size:var(--fs-xs);color:var(--text-3)}
.tpl-items tr.tpl-or span{display:inline-block;padding:0 0 2px}
.tpl-advice ul,.tpl-advice ol{margin:0;padding-left:20px}
.tpl-advice li+li{margin-top:4px}
.tpl-tests{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding-left:18px;font-size:var(--fs-sm)}
.tpl-notes{margin:0 0 14px}
.tpl-notes .body p{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--text-2)}
.tpl-sources{margin:0;padding-left:20px;font-size:var(--fs-sm)}
.tpl-sources li+li{margin-top:8px}
.tpl-sources small{display:block;margin-top:2px;line-height:1.5;color:var(--text-3)}
/* one column: Use for a patient comes first, above the long preview */
@media (max-width:1100px){.tpl-side{position:static}.tpl-layout>.tpl-side{order:-1}}
/* Templates lists, narrower screens: each row stacks as name / target / contents / saved, then its buttons in a row; a
   Rename menu spans the row (as the patient list's row menus do) */
@media (max-width:1180px){
  .tpl-table thead{display:none}
  .tpl-table,.tpl-table tbody{display:block}
  .tpl-table tbody tr{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:12px 16px 10px;border-bottom:1px solid var(--border-subtle)}
  .tpl-table tbody tr:last-child{border-bottom:0}
  .tpl-table tbody tr:hover>td{background:none}
  .tpl-table td{display:block;height:auto;min-width:0;padding:0!important;border:0}
  .tpl-table .tpl-c-name{min-width:0}
  .tpl-table td.tpl-c-target,.tpl-table td.tpl-c-what,.tpl-table td.tpl-c-when{font-size:var(--fs-sm)}
  .tpl-table td.tpl-c-when::before{content:"Saved "}
  .tpl-table td.actions{width:auto;margin-top:6px;text-align:left;white-space:normal}
  .tpl-table .row-actions{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:4px}
  .tpl-table td.actions .btn{margin:0}
  .tpl-table .tpl-rename{position:static}
  .tpl-table .tpl-menu{left:16px;right:16px;width:auto;max-width:360px}
}
@media (max-width:640px){
  .tpl-list .tpl-note{margin:0 12px 12px}
  .tpl-table .tpl-c-name{min-width:180px}
  .tpl-items .tpl-c-food{min-width:150px}
  .tpl-items .tpl-c-amt{white-space:normal}
}
/* ---- meal times, the two extra meals and the daily salt (views/charts.js, public/js/dietchart.js) ---- */
/* each meal's optional Time in its header, after the title and its count; on phones on a line of its own under them, so the
   title and the subtotal keep their line */
.bld-meal>.card-head>.bld-mtime{display:inline-flex;align-items:center;gap:6px;margin:0 auto 0 0;font-size:var(--fs-sm);font-weight:400;color:var(--text-3);white-space:nowrap}
.bld-mtime input[type=time]{width:auto;height:30px;margin:0;padding:0 8px;box-shadow:none}
@media (min-width:641px){.bld-mtime input[type=time]{font-size:var(--fs-sm)}}
@media (max-width:640px){.bld-meal>.card-head>.bld-mtime{order:3;flex:1 1 100%}.bld-mtime input[type=time]{height:32px}}
/* "Add early morning, empty stomach" just above Morning and "Add bedtime" just below Dinner (the shared quiet small button) */
.bld-xadd{margin:-4px 0 12px}
.bld-meal+.bld-xadd{margin-top:-6px}
/* a template's page (views/templates.js): a meal's time beside its name, in the quiet ink of the card's sub-line */
.tpl-meal .tpl-meal-time{font-size:var(--fs-sm);font-weight:400;color:var(--text-3);font-variant-numeric:tabular-nums}
/* ---- sleep and stress reminder (views/charts.js WELL_STRIP, public/js/wellstrip.js): the lab strip's look, a quiet button beside each note ---- */
.bld-well{margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--border-subtle)}
.bld-well-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:var(--fs-sm);font-weight:500;color:var(--text-2)}
.bld-well-row+.bld-well-row{margin-top:8px}
.bld-well-row>.i{flex:none;color:var(--text-3)}
.bld-well-t{min-width:0;overflow-wrap:anywhere}
.bld-well-row .btn{margin-left:auto;font-weight:400}
.bld-well-row .btn[aria-disabled="true"],.bld-well-row .btn[aria-disabled="true"]:hover{opacity:1;cursor:default;background:transparent;color:var(--text-3)} /* added: a quiet status, not a greyed-out button */
/* ---- condition guidance (views/guidance.js, public/js/guidance.js): the "What to eat and avoid" card before Suggestions
   (three lists side by side, the shared grid-3), the picker, the conflict note and the sources under them; the suggestion
   under the patient strips takes the sleep and stress note's look (.bld-well) ---- */
.bld-guide .bld-note{margin:0 0 12px}
.bld-guide-lists{row-gap:12px}
.bld-guide-lists>label{margin:0}
.bld-guide-lists textarea{min-height:150px}
.bld-guide-pick{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px;margin:14px 0 0}
.bld-guide-pf{flex:1 1 260px;max-width:440px;margin:0}
.bld-guide-pick>.hint{flex:1 1 100%;margin:0}
.bld-guide-conflict{margin:14px 0 0}
.bld-guide-notes{margin:4px 0 0;padding-left:18px}
.bld-guide-notes li+li{margin-top:4px}
.bld-guide-pair{display:block;font-weight:500}
.bld-guide-src{margin:10px 0 0}