/* app/ui.css — shared primitives (D-078). Tokens stay in brand.css. */

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--space-4);margin-bottom:var(--space-3);
  overflow:hidden;max-width:100%;
}
.field{min-width:0;max-width:100%}
.hint{font-size:var(--fs-sm);color:var(--muted);font-weight:500;margin:0 0 var(--space-3);line-height:var(--lh)}

.search{
  width:100%;min-height:var(--tap);padding:0 14px;border:2px solid var(--line);
  border-radius:var(--r-md);font-size:1.05rem;font-weight:600;outline:none;background:var(--card);
}
.search:focus{border-color:var(--brand-2);box-shadow:0 0 0 4px color-mix(in srgb, var(--brand-2) 18%, transparent)}
.search:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}

.groups{display:flex;gap:var(--space-2);overflow-x:auto;padding:10px 0 6px;scrollbar-width:none}
.groups::-webkit-scrollbar{display:none}
.groups button{
  flex:0 0 auto;min-height:44px;padding:0 var(--space-3);border-radius:999px;border:1.5px solid var(--line);
  background:var(--card);color:var(--ink);font-weight:700;font-size:.8rem;cursor:pointer;
  touch-action:manipulation;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.groups button.on{background:var(--card);color:var(--brand);border-color:var(--brand)}
.groups button .gcount{margin-inline-start:5px;opacity:.65;font-weight:700;font-size:.78rem}
.groups button.on .gcount{opacity:.95}
.groups button.empty-g{opacity:.72;border-style:dashed;color:var(--muted)}
.groups button.empty-g.on{opacity:1;border-style:solid;color:var(--brand)}
@media(max-width:719px){
  .groups button{min-height:var(--tap)}
}
.family-tabs{display:flex;gap:var(--space-2);margin:4px 0 2px}
.family-tabs button{
  flex:1;min-height:var(--tap);padding:10px var(--space-3);border-radius:var(--r-md);border:1.5px solid var(--line);
  background:var(--card);font-weight:900;font-size:.92rem;cursor:pointer;touch-action:manipulation;color:var(--ink);
}
.family-tabs button.on{
  border-color:var(--brand);background:var(--warn-bg);
}
.dias{
  display:flex;flex-wrap:wrap;gap:var(--space-2);padding-bottom:2px;
}
.dias button{
  flex:1 1 calc(25% - 8px);min-width:62px;max-width:92px;min-height:var(--tap);
  border-radius:var(--r-md);border:2px solid var(--line);
  background:var(--card);font-weight:800;font-size:.95rem;cursor:pointer;direction:ltr;line-height:1.15;
  touch-action:manipulation;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur-fast) var(--ease);
}
@media(max-width:420px){
  .dias button{flex:1 1 calc(33.33% - 8px);min-width:56px;font-size:.9rem}
}
@media(min-width:720px){
  .dias button:hover:not(.on){border-color:var(--line);background:var(--surface)}
}
.dias button small{display:block;font-size:.58rem;color:var(--muted);font-weight:600}
.dias button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.dias button.on small{color:#aab8d0}
.dias button:active{transform:scale(0.97)}

.stepper{
  display:flex;align-items:stretch;width:100%;max-width:100%;
  border:2px solid var(--line);border-radius:var(--r-md);overflow:hidden;direction:ltr;background:var(--card);
  min-height:var(--tap);
}
.stepper:focus-within{border-color:var(--warn);box-shadow:0 0 0 4px color-mix(in srgb, var(--warn) 22%, transparent)}
.stepper.err,.draw-step.err{border-color:var(--bad);background:color-mix(in srgb, var(--bad) 8%, var(--card))}
.stepper button{
  width:var(--tap);flex:0 0 var(--tap);min-height:var(--tap);border:0;background:var(--bg);
  font-size:1.45rem;font-weight:700;cursor:pointer;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;line-height:1;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
  transition:background-color var(--dur) var(--ease),transform var(--dur-fast) var(--ease);
}
.stepper button:first-child{box-shadow:inset -1px 0 0 var(--line)}
.stepper button:last-child{box-shadow:inset 1px 0 0 var(--line)}
.stepper button:active{background:var(--brand-soft);transform:scale(0.97)}
.stepper input{
  flex:1;min-width:0;border:0;outline:none;text-align:center;font-size:1.2rem;font-weight:800;
  padding:12px 2px;background:transparent;min-height:var(--tap);
  width:auto;
  appearance:textfield;-moz-appearance:textfield;
}
.stepper input[type=number]::-webkit-outer-spin-button,
.stepper input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;display:none;
}
.draw-dia-step .draw-dia-chip{
  flex:1;width:auto;min-width:0;min-height:var(--tap);height:auto;border-radius:0;border:0;
}
.stepper input:focus-visible{outline:2px solid var(--brand-2);outline-offset:-2px}

:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=button]):not([type=submit]):not([type=reset])),
textarea,
select{
  box-sizing:border-box;
  width:100%;
  min-height:var(--tap);
  padding:0 13px;
  border:2px solid var(--line);
  border-radius:var(--r-md);
  font:inherit;
  font-weight:600;
  color:var(--ink);
  outline:none;
  background:var(--card);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
textarea{min-height:72px;padding:12px 13px;resize:vertical}
input[type=date]{
  min-width:0;max-width:100%;font-size:16px;
  display:block;
  -webkit-appearance:none;appearance:none;
}
input[type=date]::-webkit-datetime-edit{min-width:0;padding:0}
input[type=date]::-webkit-date-and-time-value{text-align:start;min-width:0}
input[type=date]::-webkit-calendar-picker-indicator{margin-inline:8px 0;cursor:pointer}
.search,
.input,
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=button]):not([type=submit]):not([type=reset]):focus),
textarea:focus,
select:focus{
  outline:none;
}
.search:focus,
.input:focus,
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=button]):not([type=submit]):not([type=reset]):focus),
textarea:focus,
select:focus{
  border-color:var(--brand-2);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand-2) 18%, transparent);
}
.input.err,
input.err,textarea.err,select.err{
  border-color:var(--bad);background:color-mix(in srgb, var(--bad) 8%, var(--card));
}
.stepper input{
  width:auto;flex:1;border:0;box-shadow:none;padding:12px 2px;background:transparent;
  appearance:textfield;-moz-appearance:textfield;
}

.btn{
  box-sizing:border-box;
  width:auto;
  min-height:var(--tap);
  min-width:var(--tap);
  margin:0;
  padding:0 16px;
  border:1.5px solid transparent;
  border-radius:var(--r-md);
  font-family:inherit;
  font-weight:800;
  font-size:var(--fs-md);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  text-decoration:none;
  color:inherit;
  touch-action:manipulation;
  user-select:none;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.btn:hover{filter:none}
.btn:active{transform:scale(0.97)}
.btn:disabled{opacity:.55;cursor:wait;transform:none}
.btn-block{width:100%}
.btn-main{background:var(--brand-2);color:#fff;border-color:var(--brand-2)}
.btn-main:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:#fff}
.btn-ok{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn-ok:hover{background:color-mix(in srgb, var(--ok) 82%, #000);border-color:color-mix(in srgb, var(--ok) 82%, #000);color:#fff}
.btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.btn-soft{background:var(--brand-soft);color:var(--brand);border-color:var(--line)}
.btn-soft:hover{border-color:var(--brand);color:var(--brand)}
.btn-sm{padding:0 12px;font-size:var(--fs-sm);font-weight:700}
.btn-row{display:flex;gap:var(--space-2);flex-wrap:wrap}
.btn-row .btn{flex:1;min-width:0}
a.btn{color:inherit}
.btn.copied{
  background:var(--ok)!important;color:#fff;border-color:var(--ok);
  box-shadow:0 0 0 4px var(--ok-soft);
}

.chip{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  min-height:44px;padding:0 12px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  font-weight:700;font-size:var(--fs-sm);cursor:pointer;white-space:nowrap;
  touch-action:manipulation;
}
.chip-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.st-badge,.pill{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:999px;padding:4px 10px;
  font-size:var(--fs-xs);font-weight:700;
  border:1px solid var(--line);white-space:nowrap;
}
.st-badge .dot{
  width:8px;height:8px;border-radius:50%;background:var(--muted);flex-shrink:0;
}
.pill.open,.st-sent,.st-received,.st-shipping{
  background:var(--brand-soft);color:var(--brand);
}
.st-sent .dot,.st-received .dot,.st-shipping .dot{background:var(--brand)}
.st-bending{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.st-bending .dot{background:var(--ink)}
.pill.done,.st-ready{background:var(--ok-soft);color:var(--ok)}
.st-ready .dot{background:var(--ok)}
.pill.warn,.st-draft{background:var(--warn-bg);color:var(--warn)}
.st-draft .dot{background:var(--warn)}
.pill.err{background:var(--surface);color:var(--bad)}
.st-delivered{background:var(--surface);color:var(--ink)}
.st-delivered .dot{background:var(--ink)}

.empty-state{text-align:center;padding:var(--space-6) var(--space-4)}
.empty-title{margin:0 0 var(--space-2);font-size:var(--fs-lg);font-weight:800;color:var(--ink)}
.empty-body{margin:0 0 var(--space-4);font-size:var(--fs-md);color:var(--ink);line-height:var(--lh)}
.empty-state .btn{width:auto;margin:0 auto}

.more{
  margin-top:14px;border:1.5px solid var(--line);border-radius:var(--r-md);
  background:var(--card);overflow:hidden;
}
.more summary{
  list-style:none;cursor:pointer;padding:0 14px;min-height:var(--tap);
  display:flex;align-items:center;font-weight:800;font-size:.9rem;color:var(--ink);
}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:" ⌄";font-weight:900;margin-inline-start:auto}
.more[open] summary::after{content:" ⌃"}
.more-in{display:flex;flex-direction:column;gap:var(--space-2);padding:0 12px 12px}
.more-in .btn{width:100%;min-height:var(--tap);margin-top:0;text-decoration:none;box-sizing:border-box}
.more-in a.btn{color:var(--ink)}
.more-in a.btn:hover{color:var(--brand)}

.toast{
  position:fixed;
  bottom:calc(24px + env(safe-area-inset-bottom,0px) + var(--safari-bar, 0px));
  inset-inline:0;
  margin:0 auto;
  width:max-content;max-width:90vw;
  background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:999px;
  font-weight:700;font-size:.9rem;
  z-index:200;opacity:0;transform:translateY(12px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  pointer-events:none;text-align:center;
}
.toast.show{opacity:1;transform:none}
body:has(#liveCta:not([hidden])) .toast{
  bottom:calc(96px + env(safe-area-inset-bottom,0px) + var(--safari-bar, 52px));
}
.toast.ok{background:var(--ok)}
.toast.bad{background:var(--bad)}
.toast[hidden]{display:none}

.ico{
  width:18px;height:18px;flex:0 0 auto;display:block;
}
.ico[aria-hidden="true"]{pointer-events:none}

/* D-091 — splash motion grammar: track + shimmer + optional fill */
.rebar-wait{
  width:min(280px,100%);
  margin:0 auto;
  text-align:center;
}
.rebar-wait-svg{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
  direction:ltr;
}
.rebar-wait-svg .rebar-track,
.rebar-wait-svg .rebar-shimmer,
.rebar-wait-svg .rebar-fill{
  fill:none;
  stroke:var(--ink);
  stroke-width:10;
  stroke-linecap:round;
}
.rebar-wait-svg .rebar-track{opacity:.16}
.rebar-wait-svg .rebar-shimmer{
  stroke-dasharray:22 220;
  animation:rebar-travel 2.4s linear infinite;
}
.rebar-wait-svg .rebar-fill{
  visibility:hidden;
  transition:stroke-dashoffset var(--dur-bar,280ms) var(--ease-steel,var(--ease));
}
.rebar-wait.is-fill .rebar-fill{visibility:visible}
.rebar-wait.is-fill .rebar-shimmer{visibility:hidden;animation:none}
.rebar-wait-stage{
  min-height:1.4em;
  margin:10px 0 0;
  font-size:var(--fs-sm);
  font-weight:700;
}
@keyframes rebar-travel{to{stroke-dashoffset:-242}}
.iron-pulse{
  transform-origin:center;
  animation:iron-pulse 2.8s var(--ease-steel,var(--ease)) infinite;
}
@keyframes iron-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){
  .rebar-wait-svg .rebar-shimmer{animation:none;visibility:hidden}
  .rebar-wait.is-fill .rebar-fill{visibility:visible;transition:none}
  .iron-pulse{animation:none}
}

/* D-091 — login success: two paper doors from the center */
.login-doors{
  position:fixed;
  inset:0;
  z-index:400;
  display:flex;
  flex-direction:row;
  direction:ltr;
  overflow:hidden;
  pointer-events:auto;
}
html.no-login-doors .login-doors{display:none}
.login-doors-pane{
  width:50%;
  height:100%;
  background:var(--bg);
  will-change:transform;
  transition:transform var(--dur-draw,600ms) var(--ease-steel,var(--ease));
}
.login-doors-pane-left{
  box-shadow:1px 0 0 color-mix(in srgb, var(--ink) 14%, transparent);
}
.login-doors-pane-right{
  box-shadow:-1px 0 0 color-mix(in srgb, var(--ink) 14%, transparent);
}
.login-doors.is-open{pointer-events:none}
.login-doors.is-open .login-doors-pane-left{transform:translateX(-100%)}
.login-doors.is-open .login-doors-pane-right{transform:translateX(100%)}
@media (prefers-reduced-motion:reduce){
  .login-doors{display:none}
}