/* MOBILE UX R1: the real page is the workspace, the output is the result. Original design. */
:root {
  --bg:#f3f5fa; --surface:#fff; --ink:#18233d; --ink-2:#49566f; --ink-3:#626e84;
  --line:#d7deeb; --line-2:#edf0f7; --accent:#334bd5; --accent-hover:#253bab;
  --accent-soft:#edf0ff; --focus:#174fc7; --r-panel:16px; --r-ctl:10px;
}
body { line-height:1.5; }
.site { min-height:68px; border-bottom-color:var(--line-2); }
.brand { letter-spacing:-.025em; color:var(--ink); }
.mark { flex:none; }
.mark path { stroke:var(--accent); }
.tasks { background:var(--line-2); }
.tasks a[aria-current=page] { color:var(--accent); box-shadow:0 2px 6px #18233d0a; }
.btn { border-color:var(--line); transition:background-color 160ms ease,border-color 160ms ease; }
.btn.primary { box-shadow:0 3px 8px #334bd51a; }
.btn:disabled { opacity:.55; }
.ui-icon { width:20px; height:20px; flex:none; vertical-align:middle; }
.panel-head h2, #h-review { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.panel-head h2 .ui-icon, #h-review .ui-icon { color:var(--accent); }
.task-head { padding-top:20px; padding-bottom:12px; }
.task-head h1 { font-size:22px; letter-spacing:-.04em; }
.hero { gap:40px; padding:44px 0; }
.hero-title { font-size:clamp(30px,4.3vw,52px); font-weight:750; letter-spacing:-.045em; }
.hero-lead { line-height:1.65; }
.hero-demo { position:relative; padding:50px 30px 30px; min-height:270px; border:0; background:linear-gradient(135deg,#e8edff,#f8faff); border-radius:24px; box-shadow:inset 0 0 0 1px #334bd512; }
.demo-label { position:absolute; top:18px; left:24px; color:var(--ink-2); font-size:13px; font-weight:600; }
.demo-doc { height:80px; border-radius:4px; box-shadow:4px 4px 0 0 #d7deeb; }
.demo-page { height:44px; border-radius:6px; }
.hero-templates { border-color:var(--line-2); }
.ht-item { background:#f8f9ff; }
.panel { border-color:var(--line-2); box-shadow:0 2px 12px #18233d04; padding:18px; }
.layout { gap:12px; }
.layout .work { background:#f8faff; border-color:#dfe5f6; }
.rail-hint { margin:0 0 8px; line-height:1.5; color:var(--ink-2); }
.filter { gap:6px; }
.fbtn.on { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.page-surface { min-height:0; min-width:0; display:flex; flex-direction:column; flex:1; }
.layout .work .page-rail { position:relative; min-height:0; overflow-x:auto; overflow-y:auto; overscroll-behavior-x:contain; touch-action:pan-x pan-y pinch-zoom; scrollbar-width:none; scroll-snap-type:x proximity; scroll-padding-inline:6px; margin:0 -6px; padding:4px 6px 10px; }
.page-rail::-webkit-scrollbar { display:none; }
.layout .work .page-rail .cards { position:relative; display:flex; gap:12px; margin:0; padding:4px 18px 10px 0; width:max-content; min-width:100%; }
.layout .work .page-rail .card { display:flex; flex:0 0 220px; width:220px; padding:10px; gap:10px; background:#fff; border:1px solid var(--line); border-radius:12px; scroll-snap-align:start; }
.layout .work .page-rail .card.flash { border-color:var(--accent); background:var(--accent-soft); }
.layout .work .page-rail .card-top { min-height:28px; flex-wrap:wrap; gap:6px; }
.page-rail .cap { flex:1; }
.layout .work .page-rail .cap-text { font-size:13px; line-height:1.4; white-space:normal; }
.layout .work .page-rail .thumb-btn { grid-area:auto; cursor:grab; }
.page-rail .thumb { aspect-ratio:3 / 4; border-color:var(--line); box-shadow:0 3px 12px #18233d0d; }
.page-rail .thumb img { user-select:none; -webkit-user-drag:none; }
.page-rail.panning { scroll-snap-type:none; cursor:grabbing; user-select:none; }
.page-rail.panning .thumb-btn { cursor:grabbing; }
.page-grip { margin-left:auto; color:var(--ink-2); cursor:grab; touch-action:none; }
.page-grip.sorting { background:var(--accent-soft); outline:2px solid var(--accent); }
.layout .work .page-rail .badge { position:static; transform:none; align-self:flex-start; }
.layout .work .page-rail .card-actions { grid-area:auto; gap:8px; display:flex; align-items:center; justify-content:space-between; }
.page-rail .moves { gap:4px; }
.rail-nav { display:flex; justify-content:center; align-items:center; gap:12px; padding-top:6px; flex:none; }
.rail-position { min-width:64px; text-align:center; color:var(--ink-2); font-size:13px; font-variant-numeric:tabular-nums; }
.rail-arrow { border-color:transparent; background:transparent; }
.rail-arrow:hover:not(:disabled) { background:var(--accent-soft); border-color:transparent; }
.rail-arrow:disabled { opacity:.35; }
.review-list .linkrow { padding:8px 6px; }
.review-list .pos { color:var(--accent); }
.results { margin:12px 0 0; padding:0; border:0; }
.results h3 { margin:0 0 14px; color:var(--ok); font-size:18px; }
.result { display:flex; flex-direction:column; gap:16px; }
.rthumb { width:150px; max-width:100%; max-height:200px; object-fit:contain; align-self:center; border:1px solid var(--line); box-shadow:0 5px 18px #18233d12; }
.rbody { width:100%; }
.rname { font-size:16px; }
.rbody .btn.primary { width:100%; min-height:48px; }
.result-config { border-top:1px solid var(--line); margin-top:16px; padding-top:8px; }
.result-config > summary { min-height:44px; display:flex; align-items:center; color:var(--accent); font-weight:600; font-size:14px; }
.result-config > summary::before { content:'▸'; width:1.2em; }
.result-config[open] > summary::before { content:'▾'; }
.support summary, .rbody details > summary, .site-foot .about summary { min-height:44px; }
.site-foot a { display:inline-flex; align-items:center; min-height:44px; }
.skip { min-height:44px; }
.confirm { background:#f8faff; }
.cond, .tpl-drawer { border-color:var(--line); }
.file.open { background:var(--accent-soft); }
.file-detail { background:#f8faff; }
@media(min-width:960px) {
  .layout { grid-template-columns:minmax(235px,270px) minmax(0,1fr) minmax(275px,310px); }
  .layout .review .create-row { margin:0 -18px; padding:12px 18px 18px; bottom:-18px; }
  .page-rail .thumb { max-height:310px; }
}
@media(min-width:721px) and (max-width:959px) {
  .layout { grid-template-columns:240px minmax(0,1fr); }
  .page-surface { max-height:680px; }
}
@media(max-width:720px) {
  body { padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
  .site { display:grid; grid-template-columns:minmax(0,1fr) auto; padding:6px 12px 0; gap:2px 6px; }
  .site .brand { font-size:13px; min-width:0; white-space:normal; gap:6px; line-height:1.25; min-height:44px; }
  .brand .mark { width:24px; height:24px; }
  .site .langs-nav { grid-column:2; grid-row:1; margin:0; }
  .langs { gap:0; }
  .langs a { padding:0 5px; min-width:44px; min-height:44px; font-size:12px; }
  .site .tasks { grid-row:2; grid-column:1/-1; margin:4px 0 8px; border-radius:10px; }
  .tasks a { font-size:13px; min-height:44px; padding:0 5px; }
  main { padding:0 12px 20px; }
  .task-head { padding:14px 2px 8px; }
  .task-head h1 { font-size:19px; }
  body:not(.is-empty) .intro { display:none; }
  .hero { padding:16px 2px 24px; gap:22px; }
  .hero-title { font-size:32px; max-width:12em; margin-bottom:14px; }
  .hero-lead { font-size:16px; margin-bottom:18px; }
  .hero-demo { padding:46px 20px 20px; min-height:230px; border-radius:18px; }
  .demo-doc { height:64px; }
  .demo-page { height:38px; }
  .hero-templates { padding:12px; }
  .ws-top { margin:0 0 10px; padding:4px 0; }
  .mtabs { background:#e8ecf7; }
  .mtab { font-size:14px; gap:5px; }
  .mtab .ui-icon { width:18px; height:18px; }
  .mtab.on { color:var(--accent); }
  .mbadge { background:#dbe1f3; font-size:11px; min-width:18px; padding:0 4px; }
  .panel { padding:14px; border-radius:14px; }
  .panel h2 { font-size:16px; }
  .panel-head { margin-bottom:6px; gap:4px; }
  .panel-head .count { font-size:13px; }
  .layout .work .page-rail .card { flex-basis:200px; width:200px; gap:8px; padding:8px; }
  .rail-hint { font-size:13px; margin-bottom:6px; }
  .layout .work .page-rail { margin:0 -6px; max-height:480px; }
  .page-rail .thumb { max-height:248px; }
  .filter { margin:6px 0; flex-wrap:nowrap; overflow:auto; scrollbar-width:none; }
  .filter::-webkit-scrollbar { display:none; }
  .fbtn { flex:none; white-space:nowrap; }
  .fbtn { font-size:13px; padding-right:10px; }
  .move-help { margin-bottom:4px; }
  .keys summary { min-height:44px; }
  .sample-note { padding:6px 8px; gap:4px; }
  .actionbar { padding:10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -4px 18px #18233d08; }
  .actionbar .btn { font-size:14px; padding:0 12px; }
  .ab-summary { font-size:13px; }
  .rthumb { width:140px; max-height:180px; }
  .result { gap:12px; }
  .site-foot { padding:12px 16px 20px; }
}
@media(max-width:350px) {
  .site .brand { font-size:12px; gap:4px; }
  .brand .mark { width:20px; height:20px; }
  .langs a { padding:0 4px; }
  .mtab .ui-icon { display:none; }
  .layout .work .page-rail .card { flex-basis:192px; width:192px; }
}
@media(prefers-reduced-motion:reduce) { .btn { transition:none; } .page-rail { scroll-behavior:auto; } }