/* Demo 02: Inbox sorted by 8 AM. Every rule is scoped to #demo-inbox. Stream and drawer are absolute and --stage-h
   holds the height per breakpoint, so the stage never jumps mid-play. Motion is WAAPI from inbox.js. */
#demo-inbox .stage{--stage-h:440px;background:var(--navy-950)}
#demo-inbox .ib{--sc:260px;position:relative;display:grid;grid-template-columns:var(--sc) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:10px 14px;min-height:var(--stage-h);padding:12px 14px 14px;font-size:.875rem;line-height:1.4}
#demo-inbox .tg{grid-column:1/-1;font:500 .6875rem/1.4 var(--font-mono);letter-spacing:.04em;color:var(--navy-400)}
#demo-inbox ol,#demo-inbox ul{list-style:none}

/* incoming stream */
#demo-inbox .inc,#demo-inbox .lane{min-width:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
#demo-inbox .inc{position:relative;display:flex;flex-direction:column;padding:10px}
#demo-inbox .inc h4,#demo-inbox .lane h4{display:flex;align-items:baseline;gap:8px;font:700 .6875rem/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
#demo-inbox .inc h4 span{font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--mute)}
#demo-inbox .stream{position:absolute;top:38px;left:10px;right:10px;z-index:2;display:grid;gap:6px}
#demo-inbox .try{margin-top:auto}
#demo-inbox .try p{margin-bottom:6px;font:500 .6875rem/1.3 var(--font-mono);color:var(--soft)}
#demo-inbox .try div{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#demo-inbox .try .chip{justify-content:center;min-height:44px;padding:5px 8px;font-size:.8125rem;text-align:center}
#demo-inbox .chip[aria-disabled=true]{opacity:.45;cursor:default}

/* lanes */
#demo-inbox .lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-width:0}
#demo-inbox .lane{--c:var(--navy-200);--hb:var(--navy-800);padding:0 8px 8px}
#demo-inbox .lane[data-l="0"]{--c:var(--amber-300);--hb:var(--amber-950)}
#demo-inbox .lane[data-l="1"]{--c:var(--blue-300);--hb:var(--blue-900)}
#demo-inbox .lane h4{margin:0 -8px 8px;padding:9px 10px;border-radius:11px 11px 0 0;background:var(--hb);color:var(--c)}
#demo-inbox .lane h4 b{margin-left:auto;font-size:.875rem;letter-spacing:0;color:var(--ink)}
#demo-inbox .lane ul{display:grid;gap:6px}

/* email cards (paper) */
#demo-inbox li{position:relative}
#demo-inbox .card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 8px;width:100%;min-height:44px;padding:8px 10px;font:inherit;text-align:left;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-1);cursor:pointer}
#demo-inbox .card:hover{border-color:var(--blue-300)}
#demo-inbox .card:focus-visible{border-radius:var(--r-sm)}
#demo-inbox .open .card{border-color:var(--blue-500);box-shadow:var(--glow)}
#demo-inbox .fr,#demo-inbox .sj{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#demo-inbox .fr{font-weight:700;font-size:.8125rem}
#demo-inbox .sj{grid-column:1/-1;font-size:.8125rem;color:var(--ink-2)}
#demo-inbox .why{padding:4px 6px;border-radius:5px;font:600 .6875rem/1 var(--font-mono);white-space:nowrap;background:var(--gray-100);color:var(--gray-600);opacity:0}
#demo-inbox li[data-l="0"] .why{background:var(--amber-50);color:var(--amber-700)}
#demo-inbox li[data-l="1"] .why{background:var(--blue-100);color:var(--blue-700)}
#demo-inbox li.done .why{background:var(--green-50);color:var(--green-700)}
#demo-inbox .hit .why{opacity:1}
#demo-inbox mark{position:relative;isolation:isolate;background:none;color:inherit}
#demo-inbox mark i{position:absolute;inset:-1px -2px;z-index:-1;border-radius:3px;background:var(--rh-sky);box-shadow:inset 0 -2px 0 var(--blue-300);transform:scaleX(0);transform-origin:0 50%}
#demo-inbox .hit mark i{transform:none}

/* the one shared beam */
#demo-inbox .beam{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:var(--r-sm);pointer-events:none}
#demo-inbox .beam i{position:absolute;inset:0;opacity:0;background:linear-gradient(rgba(47,128,237,0) 35%,rgba(47,128,237,.18) calc(100% - 2px),var(--rh-blue) calc(100% - 2px))}

/* drawer: covers the stream and Needs you (or the two right lanes for a Needs you card) */
#demo-inbox .dr{position:absolute;grid-row:2;grid-column:1/-1;top:0;bottom:0;left:0;z-index:5;width:calc(var(--sc) + 14px + (100% - var(--sc) - 34px)/3);overflow-y:auto;overscroll-behavior:contain;padding:12px 16px 14px;border-radius:var(--r-md);box-shadow:var(--sh-3)}
#demo-inbox .dr.R{left:auto;right:0;width:calc((100% - var(--sc) - 34px)*2/3 + 10px)}
#demo-inbox .dh{display:flex;align-items:center;justify-content:space-between;gap:10px}
#demo-inbox .dh p{min-width:0;overflow-wrap:anywhere;font:500 .75rem/1.35 var(--font-mono);color:var(--soft)}
#demo-inbox .dr h4{margin:8px 0 10px;font:700 1rem/1.35 var(--font-sans);color:var(--ink)}
#demo-inbox .dr mark{padding:0 2px;border-radius:3px;background:var(--rh-sky);box-shadow:inset 0 -2px 0 var(--blue-300)}
#demo-inbox .dr dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0 0 12px;font-size:.8125rem}
#demo-inbox .dr dt,#demo-inbox .mv span{font:600 .6875rem/1.75 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
#demo-inbox .dr dd{margin:0;color:var(--ink-2)}
#demo-inbox .dr label{display:block;margin-bottom:4px;font:600 .75rem var(--font-mono);color:var(--soft)}
#demo-inbox .dr textarea{display:block;min-height:0;padding:8px 10px;font-size:.875rem;line-height:1.5;resize:vertical}
#demo-inbox .act,#demo-inbox .mv,#demo-inbox .opts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
#demo-inbox .nt{margin-top:10px;font-size:.8125rem;color:var(--soft)}
#demo-inbox .dr .btn{gap:8px}
#demo-inbox .dr [aria-disabled=true]{cursor:default}
#demo-inbox .go[aria-disabled=true]{opacity:.6}
#demo-inbox .send[disabled]{opacity:1;cursor:default;color:var(--soft);border-style:dashed}
#demo-inbox .send.on{color:var(--ok);border:1.5px solid var(--ok)}
#demo-inbox .bill.on{color:var(--ok);background:var(--ok-wash);border-color:var(--ok)}
#demo-inbox .ck{width:18px;height:18px;flex:none}

@media (max-width:900px){
  #demo-inbox .stage{--stage-h:600px}
  #demo-inbox .ib{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 176px minmax(0,1fr)}
  #demo-inbox .dr,#demo-inbox .dr.R{grid-row:2/4;grid-column:1;left:0;right:0;width:auto}
  #demo-inbox .try div{grid-template-columns:repeat(4,minmax(0,1fr))}
  #demo-inbox .lane .card{grid-template-columns:minmax(0,1fr)}
  #demo-inbox .lane .why{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
@media (max-width:600px){
  #demo-inbox .stage{--stage-h:552px}
  #demo-inbox .ib{gap:8px;padding:10px}
  #demo-inbox .try div{grid-template-columns:1fr 1fr}
  #demo-inbox .lanes{gap:6px}
  #demo-inbox .lane{padding:0 5px 5px}
  #demo-inbox .lane h4{flex-direction:column;align-items:flex-start;gap:3px;margin:0 -5px 6px;padding:6px 5px;letter-spacing:0;text-transform:none}
  #demo-inbox .lane h4 b{margin-left:0}
  #demo-inbox .lane ul{gap:5px}
  #demo-inbox .lane .card{padding:6px}
  #demo-inbox .lane .fr{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow-wrap:anywhere;font-size:.75rem;line-height:1.25}
  #demo-inbox .lane .sj{position:absolute;width:1px;height:1px;clip-path:inset(50%);white-space:nowrap}
  #demo-inbox .dr{padding:12px 14px}
  #demo-inbox .dr textarea{font-size:1rem}
  #demo-inbox .dr dl{grid-template-columns:minmax(0,1fr);gap:2px}
  #demo-inbox .dr dd + dt{margin-top:6px}
}
@media (prefers-reduced-motion:reduce){#demo-inbox .beam{display:none}}
html[data-motion=off] #demo-inbox .beam{display:none}