/* Same calm tokens; the stand chrome is separate from the phone's shared components. */
html,body{height:100%;margin:0;background:var(--ground);color:var(--ink)}
body{height:100vh;height:var(--stand-height,100dvh);display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;font:15px/1.5 var(--font-ui)}
*{box-sizing:border-box}
button{font:inherit;cursor:pointer;min-height:var(--size-target-min);touch-action:manipulation}
a{color:var(--act-text);text-underline-offset:3px}
button,input,select,summary{outline-offset:3px}
:focus-visible{outline:var(--size-focus-width) solid var(--act-text)}
::selection{background:var(--act);color:var(--on-act)}
.stand-header{display:flex;align-items:center;gap:var(--space-compact);padding:var(--space-inline) max(var(--space-compact),env(safe-area-inset-right)) var(--space-inline) max(var(--space-compact),env(safe-area-inset-left));padding-top:max(var(--space-inline),env(safe-area-inset-top));border-bottom:var(--size-border-outer) solid var(--rule);min-width:0}
.stand-brand{flex:1;min-width:0;text-align:center}
.stand-brand h1{font:var(--font-weight-regular) 18px/1.2 var(--font-book);margin:0}
.stand-brand p{font-size:var(--type-caption-size);line-height:1.4;margin:0;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toolbar-button,.close-panel{display:flex;align-items:center;justify-content:center;gap:var(--space-inline);padding:0 var(--space-compact);color:var(--act-text);flex:none;border-radius:var(--radius)}
.toolbar-button svg,.close-panel svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:var(--size-icon-stroke);stroke-linecap:round;stroke-linejoin:round}
.toolbar-button span{font-size:var(--type-meta-size)}.close-panel{width:var(--size-target-min)}
.desktop-system{display:none}
.layout{display:grid;grid-template-rows:minmax(0,1fr);height:100%;min-height:0;min-width:0;overflow:hidden}
.phone{width:100%;min-width:0;min-height:0;height:100%;display:grid;grid-template-rows:minmax(0,1fr);margin:0 auto;padding-bottom:env(safe-area-inset-bottom)}
iframe{display:block;width:100%;height:100%;min-height:0;min-width:0;border:0;background:var(--ground)}
.status{display:none;font-size:var(--type-caption-size);line-height:1.5;color:var(--ink2);overflow-wrap:anywhere;padding-top:var(--space-inline)}
#sidebar,.right{position:fixed;inset:0 auto 0 0;z-index:20;width:min(360px,calc(100% - 24px));height:100vh;height:var(--stand-height,100dvh);background:var(--ground);display:flex;flex-direction:column;visibility:hidden;overflow:hidden;border-right:var(--size-border-outer) solid var(--rule);padding-top:env(safe-area-inset-top)}
.right{left:auto;right:0;border-right:0;border-left:var(--size-border-outer) solid var(--rule)}
body[data-panel=sidebar] #sidebar,body[data-panel=guide] .right{visibility:visible}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-compact);flex:none;padding:var(--space-compact) var(--space-control);border-bottom:var(--size-border-outer) solid var(--rule)}
.panel-heading h2{font:var(--font-weight-regular) 22px/1.3 var(--font-book);margin:0}
.panel-scroll{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--frame) var(--ground);min-height:0;flex:1;padding:0 var(--space-control) max(var(--space-control),env(safe-area-inset-bottom));scroll-padding:var(--space-control)}
h2{font:var(--font-weight-regular) 22px/1.3 var(--font-book);margin:var(--space-control) 0 var(--space-group)}
label{display:block;margin:var(--space-group) 0 var(--space-micro);font-size:var(--type-meta-size)}
input,select{width:100%;min-width:0;min-height:var(--size-target-min);padding:var(--space-compact);border:var(--size-border-outer) solid var(--frame);border-radius:var(--radius);background:var(--raised);color:var(--ink);font:inherit;caret-color:var(--act-text)}
/* 16px fields prevent focus zoom in iOS Safari without disabling user zoom. */
input,select{font-size:var(--type-action-size)}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-compact);margin:var(--space-group) 0}
.actions button{padding:var(--space-compact) var(--space-group);border:var(--size-border-outer) solid var(--frame);background:transparent;color:var(--ink);border-radius:var(--radius)}
.actions button[aria-pressed=true]{background:var(--act);color:var(--on-act)}
.cases{min-width:0}
.case{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:var(--size-border-outer) solid var(--rule);padding:var(--space-group) 0;color:var(--ink);overflow-wrap:anywhere}
.case[aria-current=true]{color:var(--act-text);font-weight:var(--font-weight-semibold)}
.case small{display:block;color:var(--ink2);font-size:var(--type-caption-size);font-weight:var(--font-weight-regular)}
details{border-top:var(--size-border-outer) solid var(--rule);padding:var(--space-compact) 0}
details:first-child{border-top:0}
summary{cursor:pointer;min-height:var(--size-target-min);align-content:center}
#guide p{margin:var(--space-compact) 0 var(--space-control)}
.notice{padding:var(--space-group) 0;border-top:var(--size-border-outer) solid var(--rule);color:var(--ink2);font-size:var(--type-meta-size)}
.system-link{display:inline-flex;align-items:center;min-height:var(--size-target-min);margin-top:var(--space-compact)}
#panel-backdrop{position:fixed;inset:0;z-index:19;background:var(--ink);opacity:.28;cursor:pointer}
@media(hover:hover){.case:hover{background:var(--raised)}.toolbar-button:hover,.close-panel:hover{background:var(--raised)}}
/* Persistent columns also need height: shell + system chrome + title/date + tabs + one row ≈ 560px.
   Below 600px, drawers leave the short viewport to the prototype. */
/* 288px navigation + 393px phone + 24px gap + 32px insets = 737px. */
@media(min-width:768px) and (min-height:600px){
 .stand-header{padding:8px 24px}.stand-brand{text-align:left}.stand-brand h1{font-size:22px}.toolbar-button span{font-size:var(--type-body-size)}
 .layout{grid-template-columns:288px minmax(0,1fr);gap:24px;padding:var(--space-control);max-width:1440px;width:100%;margin:0 auto}
 #sidebar{position:static;visibility:visible;width:auto;height:auto;padding:0;border:0;border-right:var(--size-border-outer) solid var(--rule)}
 .nav-toggle{display:none}.panel-heading{padding:0 var(--space-control) var(--space-compact) 0}.panel-scroll{padding-left:0}
 .phone{max-width:393px;max-height:888px;grid-template-rows:minmax(0,1fr) auto}
 iframe{border:var(--size-border-outer) solid var(--frame);border-radius:var(--radius-sheet)}.status{display:block}
 .right .panel-heading{padding:var(--space-compact) var(--space-control)}.right .panel-scroll{padding-left:var(--space-control)}
}
/* 288px sidebar + 393px phone + 280px guide + 48px gaps + 32px insets = 1041px. */
@media(min-width:1080px) and (min-height:600px){
 .layout{grid-template-columns:288px minmax(0,1fr) minmax(240px,280px)}
 .right{position:static;visibility:visible;width:auto;height:auto;padding:0;border:0}
 .right .panel-heading{display:none}.right .panel-scroll{padding:0}
 .right h2{margin-top:0}.guide-toggle{display:none}.desktop-system{display:block}
}
@media(max-width:359px){.toolbar-button{padding:0 var(--space-inline)}.toolbar-button span{display:none}.stand-brand h1{font-size:18px}}