/* Pho Supplies visual language.  Loaded last so functional page styles can stay local. */
:root {
  --accent-color:#0B6E4F; --warning-color:#B4740E; --ground-color:#F4F6F3; --ink-color:#121A16;
  --navy:var(--accent-color); --cyan:var(--accent-color); --green:var(--accent-color); --ok:var(--accent-color);
  --amber:var(--warning-color); --warn:var(--warning-color); --wash:var(--ground-color); --bg:var(--ground-color);
  --ink:var(--ink-color); --muted:#607168; --mut:#607168; --line:#dce4de; --paper:#fff; --tap:48px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;background:var(--ground-color);color:var(--ink-color);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
button,input,textarea,select{font:inherit} button{min-height:48px;touch-action:manipulation;cursor:pointer}
input,textarea,select{border:1px solid var(--line)!important;border-radius:10px!important;background:#fff;color:var(--ink-color)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent-color);outline-offset:1px}
header,.bar{background:#fff!important;color:var(--ink-color)!important;border-bottom:1px solid var(--line);box-shadow:none!important;padding:10px 16px!important}
header h1,header>.top,header>.bar-l,header>.bar-r,header>a:not(.pho-brand),header>.sub{display:none!important}
/* pages with their own old title + VI/EN/ES in the header (Users): the shared .pho-chrome replaces both — ONLY when it
   is there (signed out, e.g. /login/, the page's own switch is the only one and must stay visible) */
header:has(.pho-chrome)>#title,header:has(.pho-chrome)>span:has(>.lang){display:none!important}
.pho-chrome{display:flex;align-items:center;gap:10px;max-width:1120px;margin:auto;min-height:52px}
.pho-brand{display:flex;align-items:center;gap:9px;min-width:0;color:var(--ink-color);text-decoration:none}
.pho-bowl{width:46px;height:46px;flex:none}.pho-bowl .steam{stroke:#bedfd3;fill:none;stroke-linecap:round;stroke-width:2.2}.pho-bowl .sticks{stroke:#997036;stroke-linecap:round;stroke-width:2.4}.pho-bowl .broth{fill:#d79632}.pho-bowl .body{fill:var(--accent-color)}
.pho-brand>span{display:flex;flex-direction:column}.pho-brand-name{display:block;font-size:17px;font-weight:750;letter-spacing:-.35px;line-height:1.05;white-space:nowrap}.pho-brand-sub{display:block;font-size:10px;color:#63766b;letter-spacing:.7px;text-transform:uppercase;white-space:nowrap;margin-top:3px}
.pho-screen-title{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:1px solid var(--line);padding-left:10px}
.pho-language{margin-left:auto;display:flex;gap:6px}.pho-language button,.lang,[data-lang]{min-width:44px;min-height:36px;border:1px solid var(--accent-color)!important;border-radius:5px!important;background:#fff!important;color:var(--accent-color)!important;padding:5px 8px!important;font-size:13px!important}.pho-language button[aria-pressed=true],.lang[aria-pressed=true],[data-lang][aria-pressed=true]{background:var(--accent-color)!important;color:#fff!important;border-color:var(--accent-color)!important}
#pho-who{background:#edf3ee!important;color:var(--ink-color)!important;border-bottom:1px solid var(--line)!important;padding:4px 12px!important;font:13px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif!important}
#pho-menu-btn,#pho-logout{min-height:44px!important;border:1px solid var(--line)!important;background:#fff!important;color:var(--ink-color)!important;border-radius:6px!important;box-shadow:none!important}
#pho-menu{top:58px!important;border-color:var(--line)!important;border-radius:10px!important;box-shadow:0 10px 30px rgba(18,26,22,.14)!important}#pho-menu a{color:var(--ink-color)!important;min-height:48px!important}#pho-menu a[aria-current]{background:#e5f2eb!important}
.wrap,main{max-width:760px!important;margin-left:auto!important;margin-right:auto!important;padding:16px!important}.wrap{padding-bottom:calc(28px + env(safe-area-inset-bottom))!important}
.card,.step,section,.panel,.product,.order,li button.row,button.row{background:#fff!important;border:1px solid var(--line)!important;border-left:3px solid var(--accent-color)!important;border-radius:9px!important;box-shadow:0 1px 2px rgba(18,26,22,.03)}
.card,.step,section,.panel{padding:14px!important;margin-top:12px}.card h2,.step h2,section h2,.panel h2{color:var(--ink-color)}
.btn,.actions button,.tools button,.save,.go,.review__send-btn{min-height:48px!important;border:1px solid var(--accent-color)!important;border-radius:7px!important;background:#fff!important;color:var(--accent-color)!important;font-weight:700!important}
.btn.go,.actions .save,.save,.go,.review__send-btn{background:var(--accent-color)!important;color:#fff!important}.btn.ghost{border-color:var(--line)!important;color:var(--ink-color)!important}
.tabs button,.area,.round,.due-chips button,.chips button,.packs button{min-height:40px;border:1px solid var(--line)!important;background:#fff!important;color:var(--ink-color)!important;border-radius:999px!important}.tabs button[aria-pressed=true],.area[aria-pressed=true],.round[aria-pressed=true],.due-chips button[aria-pressed=true],.chips button[aria-pressed=true],.packs button[aria-pressed=true]{background:var(--accent-color)!important;border-color:var(--accent-color)!important;color:#fff!important}
table{border-collapse:collapse}th{color:var(--muted)!important}td,th{border-color:var(--line)!important}.hint,.meta,.sub,.muted{color:var(--muted)!important}
dialog{border:0!important;border-radius:14px!important;box-shadow:0 20px 60px rgba(18,26,22,.28)!important}dialog::backdrop,.sheet{background:rgba(18,26,22,.45)!important}.keys button,.pad button,.count-entry__key{min-height:56px;background:#fff;border:1px solid var(--line);border-radius:9px}.count-entry__key.save-next{background:var(--accent-color)!important;color:#fff}
@media(max-width:520px){.pho-brand-sub{display:none}.pho-screen-title{order:3;flex-basis:100%;border-left:0;padding-left:47px;margin-top:-7px;font-size:13px}.pho-bowl{width:39px;height:39px}.pho-brand-name{font-size:16px}.pho-chrome{gap:7px;flex-wrap:wrap}.pho-language{margin-left:auto}}