/* tool.css (owner U1): the intake tool on the home page and /app/new/ (PRODUCT_V2 2.2 Home section 1, 3.3), plus the
   legacy rules the v1 order page /o/ still uses (U2's status page links this file; kept as they were).
   Built on the DS tokens and components (base.css imports ds/tokens.css + ds/components.css): this file only lays
   out the tool and draws the AI log, the one signature motion (2.3). No module-owned buttons, chips or tiles here.
   Logical properties only, so Arabic mirrors by itself; media (viewer, strip, waveform) stays left to right. */

/* ---------- home ---------- */
.u1-home{position:relative;z-index:var(--z-base);width:min(960px,100%);margin:0 auto;padding:clamp(12px,4vh,48px) var(--pad) calc(var(--h-bar) + var(--s-10))}
html:has(.u1-bar:not([hidden])){scroll-padding-bottom:calc(var(--u1-bar-h,var(--h-bar)) + env(safe-area-inset-bottom) + var(--s-4))}
.u1-hero{text-align:center;max-height:820px;transition:max-height var(--dur-4) var(--ease),opacity var(--dur-3) var(--ease) .2s,transform var(--dur-4) var(--ease) .1s}
.u1-hero.away{opacity:0;transform:translateY(-24px);max-height:0;overflow:hidden;pointer-events:none}
.u1-hero .ds-hero{max-width:16ch;margin-inline:auto}
html[lang=ar] .u1-hero .ds-hero{max-width:20ch} /* each line is its own block; «واستلمه جاهزًا للنشر.» needs ~18.3ch in Noto Kufi (gate check 5: max 2 lines) */
.u1-line{display:block;overflow:hidden;padding-block:var(--clip-pad)}
.u1-line>span{display:inline-block;transform:translateY(110%);animation:u1-rise var(--dur-5) var(--ease) forwards}
.u1-line:nth-child(2)>span{animation-delay:.12s}
.u1-shine{background:linear-gradient(100deg,var(--fg) 20%,var(--red-2) 40%,var(--fg) 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:u1-rise var(--dur-5) var(--ease) .12s forwards,u1-shine 4s linear 1s 1 both} /* decoration stops by --decor-stop (WCAG 2.2.2) */
.u1-hero .ds-lede{margin:var(--s-5) auto 0;text-align:center}
@keyframes u1-rise{to{transform:none}}
@keyframes u1-shine{from{background-position:100% 0}to{background-position:-150% 0}}
.u1-under{margin:var(--s-4) 0 0;text-align:center;font-size:var(--fs-sm)}

/* ---------- the tool ---------- */
.u1-tool{position:relative;margin:clamp(28px,5vh,52px) auto 0;display:grid;gap:var(--s-4)}
.u1-tool[data-mode=app]{margin-top:0}
.u1-drop{min-height:260px}
.u1-drop .ds-dropzone__title{text-wrap:balance}
.u1-err{margin:0;color:var(--red-2);font-size:var(--fs-sm);min-height:0}
.u1-err:empty{display:none}

/* scanning view: viewer + frames (left to right in every language) + the AI log */
.u1-scan{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border-radius:var(--r-xl);overflow:hidden;background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));box-shadow:var(--edge-2),var(--shadow-2)}
@media (max-width:720px){.u1-scan{grid-template-columns:1fr}}
.u1-viewer{position:relative;aspect-ratio:16/10;background:#000;overflow:hidden;direction:ltr}
.u1-viewer video{width:100%;height:100%;object-fit:contain;display:block}
.u1-beam{position:absolute;inset-inline:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--red-2),transparent);box-shadow:0 0 18px 4px var(--red-glow);animation:u1-beam 2.2s var(--ease-io) 3 forwards}
.u1-tool:not(.is-reading) .u1-beam,.u1-plan:not([hidden])~* .u1-beam{animation:none;opacity:0}
@keyframes u1-beam{0%{top:0}50%{top:calc(100% - 2px)}100%{top:0;opacity:0}}
.u1-tag{position:absolute;inset-inline-start:var(--s-3);top:var(--s-3);padding:6px 10px;border-radius:var(--r-xs);background:rgba(0,0,0,.6);color:var(--fg);font:500 var(--fs-xs)/1.3 var(--font-mono);unicode-bidi:isolate}
html[lang=ar] .u1-tag{font-family:var(--font-text)}
.u1-strip{grid-column:1;display:grid;grid-template-columns:repeat(8,1fr);gap:3px;padding:3px;background:#000;direction:ltr}
.u1-strip img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--ink-2);animation:u1-pop var(--dur-3) var(--ease) both}
@media (max-width:720px){.u1-strip{grid-column:auto}}
@keyframes u1-pop{from{opacity:0;transform:scale(.92)}}
.u1-logwrap{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;min-width:0}
@media (max-width:720px){.u1-logwrap{grid-column:auto;grid-row:auto}}
.u1-log{flex:1;max-height:300px;overflow:auto;padding:var(--s-5) var(--s-5) var(--s-3);display:flex;flex-direction:column;gap:4px;color:var(--fg-2);font:400 var(--fs-xs)/1.7 var(--font-label)}
html[lang=ar] .u1-log{font:400 var(--fs-sm)/1.9 var(--font-text)}
.u1-log p{margin:0;animation:u1-in var(--dur-3) var(--ease) both}
.u1-log p:last-child{color:var(--fg)}
.u1-cursor{display:inline-block;width:8px;height:1em;margin-inline-start:6px;background:var(--red-2);vertical-align:-2px;animation:u1-blink 1s steps(1) infinite}
@keyframes u1-blink{50%{opacity:0}}
@keyframes u1-in{from{opacity:0;transform:translateY(4px)}}
.u1-wave{display:flex;align-items:center;gap:2px;height:44px;padding:0 var(--s-5) var(--s-4);direction:ltr}
.u1-wave i{flex:1;height:4%;border-radius:2px;background:linear-gradient(180deg,var(--red-2),var(--red-wash));transition:height var(--dur-4) var(--ease)}

/* the plan */
.u1-plan{display:grid;gap:var(--s-6);padding:clamp(18px,3vw,28px);border-radius:var(--r-xl);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  box-shadow:var(--edge),var(--sheen);opacity:0;transform:translateY(12px);transition:opacity var(--dur-4) var(--ease),transform var(--dur-4) var(--ease)}
.u1-plan.in{opacity:1;transform:none}
.u1-plan-h:focus:not(:focus-visible){outline:none}
.u1-row{display:grid;gap:var(--s-3);min-width:0}
.u1-plan>*,.u1-row>*{min-width:0;max-width:100%}
.u1-row .ds-seg{flex-wrap:wrap;max-width:100%}
.u1-row .ds-seg>button{flex:1 1 auto;min-width:min-content}
.u1-note{margin:0}
.u1-files{display:grid;gap:var(--s-3)}
.u1-files-more>summary{cursor:pointer;color:var(--fg-2);font-size:var(--fs-sm);padding-block:var(--s-2);list-style:none;display:flex;align-items:center;gap:var(--s-2);min-height:24px}
.u1-files-more>summary:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-o);border-radius:var(--r-xs)}
.u1-filelist{max-height:380px;overflow:auto}
.u1-role{min-width:min(220px,100%)}
.u1-add{justify-self:start;cursor:pointer}
.u1-skills{--min:180px}
/* every service tile fills its grid cell (same width and height on a 390 px phone, EN and AR) */
.u1-skills>li{display:flex;min-width:0}
.u1-skills>li>.ds-tile{width:100%;height:100%}
/* file rows: tick, thumb, name, then role menu + move / remove (3.3 step 6) */
.u1-file-tick{flex:none;width:18px;height:18px;margin:0;accent-color:var(--red)}
.u1-file-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--s-1)}
.u1-private{margin-top:var(--s-1);font-size:var(--fs-sm)}
.u1-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);padding-block:var(--s-2)}
.u1-bulk .u1-role{min-width:min(180px,100%)}
.u1-files-foot{justify-content:space-between}
.u1-long-tiers{display:grid}
.u1-shapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
@media (max-width:640px){.u1-shapes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.u1-shape-tile{min-height:96px;align-items:flex-start}
.u1-glyph{display:grid;place-items:center;width:28px;height:28px;margin-bottom:var(--s-1)}
.u1-glyph i{display:block;border-radius:3px;box-shadow:inset 0 0 0 1.5px currentColor}
.u1-short{justify-self:start}
.u1-notes{min-height:56px;resize:vertical}
.u1-mine{padding:var(--s-4);border-radius:var(--r-lg);background:var(--glass-2);box-shadow:var(--edge)}
.u1-mine .ds-small{margin:0}
.u1-large{display:grid;gap:var(--s-3);justify-items:start}

/* the sticky price bar (one primary button); on phones it never hides the focused field (R-AR A33) */
.u1-bar{position:fixed;inset-inline:0;bottom:0;transform:translateY(110%);transition:transform var(--dur-4) var(--ease);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
.u1-bar.in{transform:none}
.u1-tool[data-mode=app] .u1-bar{position:sticky}
.u1-bar .u1-go{margin-inline-start:auto;min-width:min(240px,46vw)}
.u1-bar .ds-bar__label{white-space:normal;max-width:52ch}
@media (max-width:520px){.u1-bar{flex-wrap:wrap}.u1-bar .u1-go{flex:1 1 100%;min-width:0}}

/* actions inside a DS sheet footer (tool.js sheet()) */
.u1-sheet-actions{display:contents}
.ds-sheet__foot:has(>.u1-sheet-actions:empty){display:none}

/* the type picker sheet (typepicker.js) */
.u1-groups{--min:200px}
.u1-pick-tiles{--min:180px}
.u1-pick-foot{display:grid;gap:var(--s-3);margin-top:var(--s-5)}

@media (prefers-reduced-motion:reduce){.u1-line>span{transform:none;animation:none}.u1-shine{animation:none;color:var(--fg);background:none}.u1-beam{display:none}.u1-cursor{animation:none}}

/* ---------- legacy: the v1 order page /o/ (U2's src/pages/status.mjs + status.js) ---------- */
body:not(.tool) main{position:relative;z-index:1;width:min(920px,100%);margin:0 auto;padding:clamp(12px,4vh,48px) var(--pad) 140px}
.ai-line{display:flex;gap:12px;align-items:flex-start;font:500 clamp(18px,1.8vw,22px)/1.35 var(--display);letter-spacing:-.01em}
html[lang=ar] .ai-line{line-height:1.7;font-size:clamp(17px,1.7vw,21px)}
.orb{flex:none;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--red-2) 40%,#5a0c08 75%);box-shadow:0 0 22px rgba(225,37,27,.55);animation:orb 3s ease-in-out infinite}
@keyframes orb{50%{transform:scale(1.08);box-shadow:0 0 34px rgba(225,37,27,.8)}}
.prompt{position:relative;margin-top:18px;border-radius:16px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s}
.prompt:focus-within{box-shadow:inset 0 0 0 1px var(--fg-3),0 0 0 4px rgba(225,37,27,.12)}
.prompt textarea{width:100%;min-height:58px;max-height:180px;resize:none;border:0;background:none;color:var(--fg);font:400 15px/1.5 var(--text);padding:16px;padding-inline-start:46px;outline:none}
.prompt .spark{position:absolute;inset-inline-start:16px;top:17px;width:18px;height:18px;color:var(--red-2)}
.pipe{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:26px}
@media (max-width:640px){.pipe{grid-template-columns:repeat(3,1fr)}}
.node{position:relative;border-radius:14px;padding:14px 12px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--fg-3);transition:all .5s var(--ease)}
.node i{display:block;width:10px;height:10px;border-radius:50%;background:var(--line-2);margin-bottom:10px}
.node.done{color:var(--fg-2)}.node.done i{background:var(--ok)}
.node.now{color:#fff;box-shadow:inset 0 0 0 1.5px var(--red);background:rgba(225,37,27,.08)}.node.now i{background:var(--red-2);animation:ping-red 1.6s infinite}
@keyframes ping-red{0%{box-shadow:0 0 0 0 rgba(255,74,61,.6)}70%{box-shadow:0 0 0 10px rgba(255,74,61,0)}100%{box-shadow:0 0 0 0 rgba(255,74,61,0)}}
.feed{margin-top:22px;font:400 13px/1.8 var(--mono);color:var(--fg-2);max-height:260px;overflow:auto}
html[lang=ar] .feed{font-size:14px;line-height:1.9}
.feed p{margin:0;display:flex;gap:12px}.feed time{color:var(--fg-3);flex:none;unicode-bidi:isolate}
.big-title{font:800 clamp(36px,6vw,72px)/.95 var(--display);letter-spacing:-.04em;margin:0}
html[lang=ar] .big-title{line-height:1.3;font-size:clamp(32px,5.4vw,64px)}
.eta{margin-top:14px;color:var(--fg-2)}.eta b{color:#fff}
.player{width:100%;border-radius:16px;background:#000;display:block;max-height:72vh}
.reveal{animation:reveal 1s var(--ease) both}@keyframes reveal{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 20px;border-radius:14px;border:0;cursor:pointer;font:600 15px var(--text);text-decoration:none}
.btn-red{background:var(--red);color:#fff}.btn-ghost{background:rgba(255,255,255,.06);color:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.bubble{margin-top:16px;padding:18px 20px;border-radius:18px;border-end-start-radius:6px;background:rgba(225,37,27,.1);box-shadow:inset 0 0 0 1px rgba(225,37,27,.4);white-space:pre-wrap;font-size:16px}
.file-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}
.file-row span{color:var(--fg-3);font-size:14px;overflow-wrap:anywhere}
.rev-row{padding:0 10px 10px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.rev-row small{color:var(--fg-3);padding-inline-start:36px}
.keep{color:var(--fg-3);font-size:13px;margin-top:28px}

.u1-files-more>summary::-webkit-details-marker{display:none}
.u1-file-pick{flex:none}
@media(pointer:coarse){.u1-files-more>summary{min-height:var(--tap)}}
@media(max-width:520px){.u1-file-actions{flex-basis:100%;justify-content:flex-start;padding-inline-start:var(--s-2)}}