/* Brewery demo: readable controls and vertical details at all widths. */
:root{font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;color:#213c42;background:#edf3f3;font-size:16px;line-height:1.65;--ink:#213c42;--teal:#146969;--line:#c8d8da;--amber:#98611a}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button{border:1px solid var(--teal);border-radius:5px;padding:10px 17px;background:var(--teal);color:white;cursor:pointer;font-weight:700;white-space:normal}button.secondary{background:white;color:var(--teal)}button:disabled{opacity:.48;cursor:not-allowed}a{color:#12656c;text-underline-offset:4px}button:hover:not(:disabled){filter:brightness(.93)}:focus-visible{outline:3px solid #d09433;outline-offset:3px}label{display:block;font-weight:700;margin:14px 0 5px}input,select,textarea{display:block;width:100%;max-width:100%;min-width:0;border:1px solid #a9bfc4;border-radius:4px;padding:10px 12px;color:var(--ink);background:white}input[type=checkbox]{display:inline-block;width:20px;height:20px;vertical-align:middle;margin-right:9px}textarea{min-height:90px;resize:vertical}p{margin:9px 0 16px}h1{font-size:27px;line-height:1.5;margin:7px 0}h2{font-size:21px;line-height:1.55;margin:0 0 18px}h3{font-size:18px;margin:17px 0 10px}small,.small{font-size:14px;color:#526b71}.app{max-width:1340px;margin:auto;padding:24px}.mast{background:#174d54;color:white;padding:25px 28px;border-radius:8px;position:relative;overflow:hidden}.mast:after{content:"";position:absolute;inset:0 0 0 72%;background:repeating-linear-gradient(120deg,transparent 0 35px,#ffffff08 35px 37px);pointer-events:none}.mast p{margin-bottom:0}.eyebrow{font-size:14px;letter-spacing:.08em;color:#c4e6e5}.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:15px 0 20px}.steps a{border:1px solid var(--line);padding:9px 10px;text-decoration:none;background:#fff;border-radius:4px;font-size:14px;line-height:1.6}.steps a[aria-current=page]{background:#d7ebea;border-color:#599698;color:#124f53;font-weight:700}.layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,1fr);gap:22px;align-items:start}.panel{padding:25px;background:#fff;border:1px solid var(--line);border-radius:8px;min-width:0;margin-bottom:20px}.panel:last-child{margin-bottom:0}.notice{border:1px solid #b2cece;border-radius:5px;background:#e8f3f3;padding:15px 18px}.notice.amber{background:#fff6e5;border-color:#dfc18b;color:#71501d}.notice.error{background:#fff0ee;border-color:#d29d94;color:#8b312b}.message{position:sticky;top:6px;z-index:3;background:#fff;color:#234c40;border:1px solid #69a78f;padding:13px 17px;margin:12px 0;border-radius:5px}.message:empty{display:none}.status{display:inline-block;font-size:14px;font-weight:700;padding:3px 9px;border-radius:4px;background:#e4eeee;color:#305960}.status.pending{background:#fff0d9;color:#845111}.status.confirmed{background:#dfefe8;color:#256043}.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 8px}.fieldgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}.fieldgrid>div{min-width:0}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}.metric{background:white;border:1px solid var(--line);border-radius:6px;padding:17px}.metric strong{display:block;font-size:27px;color:#175d64}.metric span{font-size:14px}.records{display:grid;gap:14px}.record{border:1px solid var(--line);padding:18px;border-radius:5px;background:#fff}.record.selected{background:#eef7f5;border-color:#5a9b96}.recordhead{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-bottom:12px}.recordhead strong{font-size:18px}.kv{margin:0;display:grid;grid-template-columns:minmax(100px,.8fr) minmax(0,1.4fr);gap:0 14px}.kv dt,.kv dd{border-bottom:1px solid #e0eaec;margin:0;padding:10px 0;overflow-wrap:anywhere}.kv dt{font-size:14px;font-weight:700;color:#536a70}.kv dd{font-size:16px}.table{width:100%;border-collapse:collapse;table-layout:fixed;margin:12px 0;font-size:16px}.table th,.table td{text-align:left;vertical-align:top;padding:12px 10px;border-bottom:1px solid #d6e2e4;overflow-wrap:anywhere}.table th{font-size:14px;background:#e8f1f2;color:#315760}.tankgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.tank{border:1px solid #adc7ca;padding:18px;background:#fff;border-radius:6px;min-width:0}.tank h3{margin:0 0 5px}.tank meter{width:100%;height:22px;display:block;margin:10px 0}.tank .quantity{font-size:21px;font-weight:700}.tank button{width:100%;margin-top:10px}.chart{width:100%;display:block;background:#f4f8f8;border:1px solid #d8e5e7;border-radius:5px}.chart text{font-family:inherit;font-size:16px;fill:#415c62}.chartnotes{font-size:14px;color:#536b71;margin:9px 0 18px}.barrow{display:grid;grid-template-columns:150px minmax(0,1fr) 90px;gap:12px;align-items:center;margin:13px 0}.bar{height:14px;background:#e4eeee}.bar i{display:block;height:100%;background:#268589}.bar i.amber{background:#ce923a}.barrow b{text-align:right}.phone{max-width:390px;height:650px;margin:0 auto;border:7px solid #25474d;border-radius:28px;background:white;overflow:hidden;box-shadow:0 9px 22px #22454a12}.phonebar{background:#164e55;color:white;padding:13px 20px;font-size:14px;display:flex;justify-content:space-between}.phonescreen{height:calc(100% - 49px);overflow-y:auto;overscroll-behavior:contain;padding:22px 20px}.phonescreen h2{font-size:23px}.phone-layout{grid-template-columns:minmax(340px,.85fr) minmax(0,1.15fr)}.phone-layout>.panel{margin:0}.phonehint{margin:12px auto;max-width:390px;font-size:14px}.chain{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.chain span{background:#e8f2f1;border:1px solid #bdd5d5;padding:10px 12px;border-radius:4px}.chain b{font-weight:400}.checks label{font-size:16px;padding:9px 0;margin:0}.footer{font-size:14px;color:#526c73;margin:26px 0 4px}.footer details{margin-top:15px}.footer summary{cursor:pointer;color:#1e6268}.reset{margin-top:12px}.plainlist{padding-left:22px}.plainlist li{margin:9px 0}.reportpreview{background:#fff;border:1px solid #b9cbd0;padding:24px;line-height:1.8}.reportpreview h3{border-bottom:1px solid #66858c;padding-bottom:10px}.stack{display:grid;gap:17px}.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}.help p:last-child{margin-bottom:0}.muted{color:#526d74}.widepanel{margin-bottom:22px}svg{max-width:100%}details summary{font-size:16px}button svg{width:18px}a,button,dt,dd,p,h1,h2,h3{overflow-wrap:anywhere}
@media(max-width:1100px){.layout{grid-template-columns:1fr}.phone-layout{grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr)}.tankgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.app{padding:15px}.mast{padding:20px}h1{font-size:24px}.phone-layout{grid-template-columns:1fr}.panel{padding:20px}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics{grid-template-columns:1fr}.metric strong{font-size:24px}.fieldgrid,.split{grid-template-columns:1fr}.table,.table tbody,.table tr,.table th,.table td{display:block;width:auto}.table thead{display:none}.table tr{border:1px solid var(--line);margin-bottom:12px}.table td{display:grid;grid-template-columns:95px minmax(0,1fr);gap:12px}.table td:before{content:attr(data-label);font-size:14px;font-weight:700;color:#536c73}.barrow{grid-template-columns:110px minmax(0,1fr) 72px;gap:7px}.barrow b{font-size:14px}.chart text{font-size:19px}.phone{max-width:390px;width:100%;height:650px}.kv{grid-template-columns:95px minmax(0,1fr)}}
@media(max-width:420px){.app{padding:10px}.tankgrid{grid-template-columns:1fr}.panel{padding:17px}.phone{border-width:5px}.phonescreen{padding:18px 15px}.actions button{flex:1 1 auto}.record{padding:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.chartvalues{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:0;list-style:none;margin:12px 0}.chartvalues li{padding:9px;border:1px solid var(--line);border-radius:4px;min-width:0}.chartvalues span{display:block;font-size:14px;overflow-wrap:anywhere}.chartvalues strong{display:block;font-size:16px}@media(max-width:760px){.chartvalues{grid-template-columns:repeat(2,minmax(0,1fr))}}