:root { --color-primary:#1e40af; --color-primary-dark:#172e78; --color-secondary:#3b82f6; --color-accent:#b45309; --color-background:#f6f8fc; --color-surface:#fff; --color-foreground:#14213d; --color-text:#243454; --color-muted:#68758b; --color-border:#dce5f3; --color-good:#08775a; --color-good-bg:#e6f6f0; --color-caution:#9a5a00; --color-caution-bg:#fff5dd; --color-over:#b42318; --color-over-bg:#fef0ef; --shadow:0 12px 32px rgba(30,64,175,.08); --radius:14px; font-family:"Fira Sans", "Noto Sans KR", system-ui, sans-serif; color:var(--color-text); background:var(--color-background); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--color-background); font-size:15px; line-height:1.5; }
button, input, select { font:inherit; }
button { cursor:pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline:3px solid #60a5fa; outline-offset:2px; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:100; background:#fff; padding:10px 14px; color:var(--color-primary); border-radius:8px; box-shadow:var(--shadow); }.skip-link:focus { top:16px; }
.app-shell { min-height:100dvh; display:grid; grid-template-columns:232px minmax(0,1fr); }
.sidebar { background:#10265e; color:#dce8ff; padding:24px 14px; display:flex; flex-direction:column; min-height:100dvh; position:sticky; top:0; height:100dvh; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.08em; color:#fff; padding:0 10px 30px; }.brand-mark { display:inline-grid; place-items:center; width:35px; height:35px; background:#d97706; color:#fff; border-radius:8px; font-size:12px; letter-spacing:0; }
.nav-list { display:grid; gap:6px; }.nav-item { display:flex; align-items:center; gap:11px; border:0; min-height:46px; padding:0 12px; color:#cfdaef; background:transparent; border-radius:9px; text-align:left; transition:background .18s ease, color .18s ease; }.nav-item:hover { background:rgba(255,255,255,.1); color:#fff; }.nav-item.active { background:#25458c; color:#fff; font-weight:700; }.nav-icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.sidebar-note { margin-top:auto; padding:14px 11px; display:flex; gap:9px; align-items:flex-start; border-top:1px solid rgba(255,255,255,.14); font-size:12px; }.sidebar-note strong { display:block; color:#fff; font-size:12px; }.sidebar-note small { color:#b5c8ec; }.dot { display:block; width:8px; height:8px; border-radius:100%; margin-top:5px; flex:0 0 auto; }.dot-amber { background:#f7b955; box-shadow:0 0 0 3px rgba(247,185,85,.15); }
.workspace { min-width:0; }.topbar { min-height:92px; padding:20px clamp(20px,4vw,48px); display:flex; align-items:center; justify-content:space-between; gap:20px; background:rgba(255,255,255,.88); border-bottom:1px solid var(--color-border); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); }.topbar h1 { color:var(--color-foreground); font-size:22px; margin:1px 0 0; letter-spacing:-.02em; }.eyebrow,.section-label { margin:0; color:#5a6b8c; font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }.top-actions { display:flex; align-items:center; gap:12px; }.updated { color:var(--color-muted); font-size:12px; }
main { max-width:1580px; margin:0 auto; padding:28px clamp(20px,4vw,48px) 48px; }.view { display:none; }.view.active { display:block; animation:fade-in .18s ease-out; }@keyframes fade-in { from { opacity:.4; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }
.status-banner { display:flex; align-items:flex-start; gap:11px; padding:13px 16px; border:1px solid #f1d398; border-radius:10px; background:#fffbeb; color:#714a04; margin-bottom:20px; }.status-banner.is-ready { background:#effaf6; border-color:#a8e4cc; color:#075a45; }.status-banner strong,.status-banner span { display:block; }.status-banner span:not(.status-icon) { font-size:13px; margin-top:2px; }.status-icon { width:20px; height:20px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; font-family:serif; font-weight:700; flex:0 0 auto; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }.kpi-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); padding:18px; box-shadow:0 3px 10px rgba(30,64,175,.025); }.kpi-card p,.kpi-card span { margin:0; color:var(--color-muted); font-size:12px; }.kpi-card strong { display:block; color:var(--color-foreground); font-family:"Fira Code", ui-monospace, monospace; letter-spacing:-.04em; font-size:28px; line-height:1.2; margin:8px 0 12px; }
.content-grid { display:grid; gap:18px; }.dashboard-grid { grid-template-columns:minmax(0,1.7fr) minmax(300px,.9fr); }.cost-grid { grid-template-columns:minmax(320px,.7fr) minmax(0,1.3fr); }.inventory-grid { grid-template-columns:minmax(320px,1fr) minmax(300px,.8fr); margin-bottom:18px; }.panel { min-width:0; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-bottom:18px; }.content-grid .panel { margin-bottom:0; }.panel-heading,.view-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:16px; }.panel-heading h2,.panel-heading h3,.view-heading h2 { color:var(--color-foreground); margin:2px 0 0; letter-spacing:-.02em; }.panel-heading h2 { font-size:18px; }.panel-heading h3 { font-size:16px; }.view-heading { margin-bottom:22px; }.view-heading h2 { font-size:25px; }.view-heading p:not(.eyebrow) { color:var(--color-muted); margin:6px 0 0; }.inline-select { display:grid; gap:5px; color:var(--color-muted); font-size:12px; font-weight:700; }.inline-select select { min-width:160px; }
.button { min-height:42px; border-radius:8px; border:1px solid transparent; padding:0 14px; font-weight:700; font-size:13px; transition:background .18s ease, transform .18s ease, border-color .18s ease; }.button:active { transform:scale(.98); }.button.primary { color:#fff; background:var(--color-primary); }.button.primary:hover { background:var(--color-primary-dark); }.button.secondary { background:#fff; color:var(--color-primary); border-color:#b9cbe9; }.button.secondary:hover { background:#eef4ff; }.text-button { border:0; background:transparent; color:var(--color-primary); font-size:13px; font-weight:700; padding:5px; text-decoration:underline; text-underline-offset:3px; }.text-button:hover { color:var(--color-primary-dark); }
.chart-summary { display:flex; align-items:center; gap:18px; padding:9px 0 17px; }.chart-summary p { margin:0; display:grid; gap:1px; }.chart-summary p strong { font-family:"Fira Code",monospace; font-size:25px; color:var(--color-foreground); }.chart-summary p span { color:var(--color-muted); font-size:12px; }.meter { height:10px; min-width:180px; flex:1; background:#e9eef7; border-radius:999px; overflow:hidden; }.meter span { height:100%; display:block; background:linear-gradient(90deg,#3b82f6,#d97706); border-radius:inherit; }
.table-wrap { overflow-x:auto; scrollbar-color:#afbdd4 transparent; }.table-wrap table { border-collapse:collapse; width:100%; min-width:600px; }.table-wrap th { color:#62728e; background:#f7f9fd; font-size:11px; letter-spacing:.04em; text-align:left; text-transform:uppercase; white-space:nowrap; padding:10px 11px; border-bottom:1px solid var(--color-border); }.table-wrap td { padding:12px 11px; border-bottom:1px solid #edf1f7; white-space:nowrap; vertical-align:middle; }.table-wrap tr:last-child td { border-bottom:0; }.table-wrap tbody tr:hover { background:#f9fbff; }.table-wrap td strong { display:block; color:var(--color-foreground); font-size:13px; }.table-wrap td small { display:block; color:var(--color-muted); font-size:11px; margin-top:2px; }.numeric { font-family:"Fira Code",ui-monospace,monospace; }.code { font-family:"Fira Code",ui-monospace,monospace; font-size:11px!important; }.empty-cell { text-align:center; color:var(--color-muted); padding:26px!important; }.badge { display:inline-flex; align-items:center; min-height:24px; border-radius:999px; padding:2px 8px; font-size:11px; font-weight:700; }.badge.good { color:var(--color-good); background:var(--color-good-bg); }.badge.caution { color:var(--color-caution); background:var(--color-caution-bg); }.badge.over { color:var(--color-over); background:var(--color-over-bg); }.badge.neutral { color:#41516e; background:#eaf0f9; }.good-text { color:var(--color-good); }.caution-text { color:var(--color-caution); }.over-text,.danger-text { color:var(--color-over); }
.alert-list { display:grid; }.alert-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; padding:13px 0; border-bottom:1px solid #edf1f7; }.alert-item:first-child { padding-top:1px; }.alert-item:last-child { border-bottom:0; }.alert-signal { width:9px; height:9px; border-radius:50%; background:#e8a322; }.alert-signal.strong { background:#d14343; }.alert-item strong,.alert-item small { display:block; }.alert-item strong { color:var(--color-foreground); font-size:13px; }.alert-item small { color:var(--color-muted); font-size:11px; }.alert-item b { color:var(--color-over); font-family:"Fira Code",monospace; font-size:13px; }.empty-state { min-height:145px; display:grid; align-content:center; gap:6px; text-align:center; padding:20px; color:var(--color-muted); border:1px dashed #ccd8ea; border-radius:10px; background:#fbfcff; }.empty-state strong { color:var(--color-text); }.empty-state span { font-size:13px; }
.audit-panel { margin-bottom:0; }.timeline { list-style:none; padding:0; margin:0; display:grid; gap:0; }.timeline li { display:grid; grid-template-columns:20px 1fr; gap:8px; min-height:46px; position:relative; }.timeline li>span { width:8px; height:8px; border:2px solid #fff; border-radius:50%; background:#3b82f6; box-shadow:0 0 0 2px #bcd2fb; margin:4px 0 0 2px; z-index:1; }.timeline li:not(:last-child)::before { content:""; position:absolute; left:5px; top:13px; bottom:-3px; border-left:1px solid #dce5f3; }.timeline strong,.timeline small { display:block; }.timeline strong { font-size:13px; color:var(--color-foreground); }.timeline small { color:var(--color-muted); font-size:11px; }.timeline-empty { display:block!important; color:var(--color-muted); font-size:13px; }
form { display:grid; gap:14px; } label { display:grid; gap:6px; color:#41516e; font-size:12px; font-weight:700; } input,select { width:100%; min-height:42px; border:1px solid #bdcbe0; background:#fff; color:var(--color-foreground); border-radius:8px; padding:0 10px; font-weight:400; } input:hover,select:hover { border-color:#7695cb; }.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.field-help { margin:0; color:var(--color-muted); font-size:12px; }.form-message { min-height:18px; margin:0; color:var(--color-primary); font-size:12px; }.impact-list { display:grid; gap:0; }.impact-list>div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid #edf1f7; }.impact-list>div:last-child { border-bottom:0; }.impact-list strong,.impact-list span { display:block; }.impact-list strong { font-size:13px; }.impact-list span { font-family:"Fira Code",monospace; color:var(--color-muted); font-size:12px; }.search-field { min-width:min(260px,40vw); }.definition-list { margin:0; display:grid; gap:0; }.definition-list div { padding:12px 0; display:grid; grid-template-columns:120px 1fr; gap:10px; border-bottom:1px solid #edf1f7; }.definition-list dt { color:var(--color-foreground); font-weight:700; font-size:13px; }.definition-list dd { color:var(--color-muted); margin:0; font-size:12px; }
.recipe-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.recipe-card { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; }.recipe-card header { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }.recipe-card h3 { color:var(--color-foreground); font-size:18px; margin:2px 0 0; }.recipe-card dl { margin:18px 0 14px; padding:11px 0; border-top:1px solid #e9eef6; border-bottom:1px solid #e9eef6; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.recipe-card dl div { display:grid; gap:2px; }.recipe-card dt { color:var(--color-muted); font-size:11px; }.recipe-card dd { margin:0; color:var(--color-foreground); font-family:"Fira Code",monospace; font-size:12px; font-weight:600; }.recipe-lines { display:grid; }.recipe-lines>div { display:grid; grid-template-columns:74px 1fr auto auto; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid #f0f3f8; font-size:12px; }.recipe-lines>div:last-child { border-bottom:0; }.recipe-lines b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.recipe-lines span:not(.component-type) { color:var(--color-muted); font-family:"Fira Code",monospace; }.recipe-lines strong { font-family:"Fira Code",monospace; color:var(--color-foreground); }.component-type { color:#50668e; background:#eef3fb; border-radius:4px; padding:1px 4px; font-family:"Fira Code",monospace; font-size:9px; text-align:center; }
.ingredient-picker { min-width:0; margin:2px 0 0; padding:14px; border:1px solid #c9d8ee; border-radius:10px; background:#f8fbff; }.ingredient-picker legend { padding:0 5px; color:var(--color-foreground); font-size:14px; font-weight:700; }.picker-toolbar { display:flex; align-items:end; gap:10px; margin:12px 0; }.picker-toolbar .search-field { flex:1; min-width:0; }.picker-toolbar .button { white-space:nowrap; }.picker-results { max-height:230px; overflow:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding-right:2px; }.picker-item { display:flex; align-items:center; gap:9px; min-height:50px; padding:8px; border:1px solid #dce5f3; border-radius:8px; background:#fff; cursor:pointer; transition:background .18s ease,border-color .18s ease,box-shadow .18s ease; }.picker-item:hover { border-color:#7695cb; box-shadow:0 1px 4px rgba(30,64,175,.1); }.picker-item.selected { border-color:#365fa9; background:#eef4ff; }.picker-item.added { opacity:.62; cursor:default; background:#f3f6fa; }.picker-item input { width:18px; min-height:18px; flex:0 0 auto; accent-color:var(--color-primary); }.picker-item span { min-width:0; }.picker-item strong,.picker-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.picker-item strong { color:var(--color-foreground); font-size:12px; }.picker-item small { color:var(--color-muted); font-family:"Fira Code",monospace; font-size:10px; margin-top:1px; }.picker-item em { margin-left:auto; color:var(--color-good); font-size:11px; font-style:normal; font-weight:700; }.picker-empty { grid-column:1 / -1; margin:4px 0; color:var(--color-muted); font-size:12px; }.draft-component-list { display:grid; gap:7px; }.draft-component { display:grid; grid-template-columns:minmax(130px,1fr) 100px 80px 100px auto; align-items:end; gap:8px; padding:10px; border:1px solid #dce5f3; border-radius:9px; background:#fff; }.draft-component-name { min-width:0; padding-bottom:5px; }.draft-component-name strong,.draft-component-name small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.draft-component-name strong { color:var(--color-foreground); font-size:13px; }.draft-component-name small { margin-top:2px; color:var(--color-muted); font-family:"Fira Code",monospace; font-size:10px; }.draft-component label { gap:4px; font-size:10px; }.draft-component input,.draft-component select { min-height:38px; padding-inline:8px; }.remove-component { min-height:38px; border:1px solid #efc1bd; border-radius:7px; padding:0 9px; color:var(--color-over); background:#fff7f6; font-weight:700; font-size:12px; transition:background .18s ease,border-color .18s ease; }.remove-component:hover { background:#fef0ef; border-color:#dd9089; }.draft-empty { min-height:96px; }
.recipe-builder { display:grid; grid-template-columns:minmax(240px,.86fr) minmax(360px,1.14fr); gap:12px; align-items:start; }.recipe-pool,.recipe-selection { min-width:0; border:1px solid var(--color-border); border-radius:10px; background:#fbfcff; padding:13px; }.recipe-selection { background:#fff; border-color:#b9cbe9; }.recipe-builder-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px; }.recipe-builder-heading h3 { margin:2px 0 0; color:var(--color-foreground); font-size:15px; }.recipe-builder .search-field { width:100%; margin-bottom:9px; }.recipe-pool-list { max-height:392px; overflow:auto; display:grid; gap:5px; padding-right:2px; }.recipe-pool-item { display:flex; width:100%; min-height:50px; align-items:center; justify-content:space-between; gap:10px; padding:8px 9px; border:1px solid #e0e8f4; border-radius:8px; color:var(--color-text); background:#fff; text-align:left; transition:background .18s ease,border-color .18s ease,box-shadow .18s ease; }.recipe-pool-item:hover { border-color:#7795c7; background:#f3f7ff; box-shadow:0 1px 4px rgba(30,64,175,.08); }.recipe-pool-item:active { transform:scale(.99); }.recipe-pool-item span { min-width:0; }.recipe-pool-item strong,.recipe-pool-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.recipe-pool-item strong { color:var(--color-foreground); font-size:12px; }.recipe-pool-item small { color:var(--color-muted); font-family:"Fira Code",monospace; font-size:10px; margin-top:2px; }.recipe-pool-item b { flex:0 0 auto; min-width:42px; min-height:32px; display:grid; place-items:center; color:var(--color-primary); border:1px solid #b9cbe9; border-radius:6px; font-size:11px; }.recipe-pool-item:hover b { color:#fff; border-color:var(--color-primary); background:var(--color-primary); }.recipe-selection .draft-component-list { max-height:392px; overflow:auto; padding-right:2px; }.recipe-selection .draft-component { grid-template-columns:minmax(132px,1fr) 86px 70px 88px auto; border-color:#d9e4f3; box-shadow:0 1px 2px rgba(30,64,175,.025); }.recipe-selection .draft-empty { min-height:250px; }.recipe-builder .picker-empty { margin:28px 0; text-align:center; }
#drafts-view .cost-grid { grid-template-columns:minmax(760px,1.55fr) minmax(360px,.85fr); align-items:start; }
#drafts-view .impact-panel { position:sticky; top:112px; }
@media (min-width:1440px) and (min-height:900px) { #drafts-view .cost-grid { grid-template-columns:minmax(900px,1.6fr) minmax(420px,.8fr); } #drafts-view .recipe-builder { grid-template-columns:minmax(320px,.82fr) minmax(440px,1.18fr); } #drafts-view .recipe-pool-list,#drafts-view .recipe-selection .draft-component-list { height:clamp(330px,calc(100dvh - 510px),420px); max-height:none; } }
@media (max-width:1530px) { #drafts-view .cost-grid { grid-template-columns:1fr; } #drafts-view .impact-panel { position:static; } }
#drafts-view { min-width:0; overflow-x:hidden; }
#drafts-view .cost-grid { grid-template-columns:minmax(0,1.6fr) minmax(320px,.8fr); gap:20px; }
#drafts-view .form-panel { padding:22px; }
#drafts-view .impact-panel { align-self:start; max-height:calc(100dvh - 132px); overflow:auto; scrollbar-gutter:stable; }
#drafts-view .recipe-builder { grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:14px; }
#drafts-view .recipe-pool,#drafts-view .recipe-selection { min-width:0; min-height:0; padding:14px; border-radius:12px; }
#drafts-view .recipe-pool { border-top:3px solid #91a8cf; background:#f8faff; }
#drafts-view .recipe-selection { border-top:3px solid var(--color-primary); background:#fff; }
#drafts-view .recipe-pool-list,#drafts-view .recipe-selection .draft-component-list { overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; }
#drafts-view .recipe-pool-item { min-width:0; }
#drafts-view .recipe-pool-item b { min-width:46px; min-height:34px; }
#drafts-view .recipe-selection .draft-component { grid-template-columns:minmax(0,1fr) 82px 68px 84px auto; }
.draft-configuration-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (min-width:1440px) and (min-height:900px) { #drafts-view .cost-grid { grid-template-columns:minmax(0,1.6fr) minmax(380px,.8fr); } #drafts-view .recipe-builder { grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); } }
@media (max-width:1530px) { #drafts-view .cost-grid { grid-template-columns:1fr; } #drafts-view .impact-panel { max-height:none; overflow:visible; } }
.toast { position:fixed; z-index:30; left:50%; bottom:24px; transform:translate(-50%,20px); max-width:min(460px,calc(100vw - 32px)); opacity:0; pointer-events:none; background:#10265e; color:#fff; border-radius:9px; padding:12px 16px; box-shadow:0 14px 38px rgba(15,23,42,.25); font-size:13px; transition:opacity .18s ease, transform .18s ease; }.toast.show { opacity:1; transform:translate(-50%,0); }.toast.warning { background:#8b5606; }.toast.error { background:#a82520; }.divider { border-top:1px solid #e6edf7; margin:20px 0 15px; }
@media (max-width:1100px) { .app-shell { grid-template-columns:192px minmax(0,1fr); }.sidebar { padding-inline:10px; }.dashboard-grid,.cost-grid { grid-template-columns:1fr; }.kpi-grid { grid-template-columns:repeat(2,1fr); }.recipe-cards { grid-template-columns:1fr; } }
@media (max-width:760px) { .app-shell { display:block; }.sidebar { position:static; height:auto; min-height:0; padding:12px 14px; display:block; }.brand { padding:0 4px 10px; }.nav-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }.nav-item { min-height:48px; justify-content:center; padding:4px; font-size:10px; gap:4px; flex-direction:column; line-height:1.1; text-align:center; }.nav-icon { height:14px; }.sidebar-note { display:none; }.topbar { position:static; min-height:76px; padding:15px 20px; }.topbar h1 { font-size:19px; }.top-actions { justify-content:flex-end; }.updated { display:none; }.top-actions .button { min-height:38px; font-size:11px; padding:0 10px; } main { padding:20px 16px 34px; }.kpi-grid { grid-template-columns:1fr 1fr; gap:10px; }.kpi-card { padding:14px; }.kpi-card strong { font-size:22px; margin:6px 0 8px; }.inventory-grid { grid-template-columns:1fr; }.view-heading { display:grid; gap:14px; }.inline-select { width:100%; }.inline-select select { min-width:0; }.field-grid { grid-template-columns:1fr; }.panel { padding:16px; border-radius:11px; }.panel-heading { align-items:flex-start; }.search-field { width:100%; min-width:0; }.panel-heading:has(.search-field) { display:grid; }.recipe-card { padding:16px; }.recipe-card dl { grid-template-columns:1fr 1fr; }.recipe-lines>div { grid-template-columns:65px minmax(0,1fr) auto; }.recipe-lines>div strong { grid-column:2 / -1; }.status-banner { padding:12px; }.definition-list div { grid-template-columns:1fr; gap:2px; }.chart-summary { gap:10px; }.meter { min-width:0; }.chart-summary p strong { font-size:21px; }.picker-toolbar { display:grid; align-items:stretch; }.picker-toolbar .button { min-height:44px; }.picker-results { grid-template-columns:1fr; max-height:260px; }.draft-component { grid-template-columns:minmax(0,1fr) 1fr; align-items:end; }.draft-component-name { grid-column:1 / -1; }.remove-component { min-height:44px; }.recipe-builder { grid-template-columns:1fr; }.recipe-pool-list,.recipe-selection .draft-component-list { max-height:290px; }.recipe-selection .draft-component { grid-template-columns:minmax(0,1fr) 1fr; }.recipe-selection .draft-component-name { grid-column:1 / -1; } }