/* Emporania "Transit": the parts several pages share. Design tiles by role (working design hero, concept, live, archived),
   the Live pane, the queue card and the before/after slider. Drawn by templates/partials/transit/tiles.html and live.html.
   Colours are tokens. Author: Jeremiah Buttler */

/* ---------- queue cards ---------- */
.queue { display: grid; gap: 12px; }
.qcard { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px 16px 14px 26px; }
.qcard__main { min-width: 0; }
.qcard__acts { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 170px; }
.qcard__note { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.qcard__dupes { grid-column: 2 / -1; font-size: 13px; }
.qcard__dupes summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.qcard__dupes ul { list-style: none; padding: 0; margin: 8px 0 4px; display: grid; gap: 6px; }
.qcard__dupes li { display: flex; gap: 8px; align-items: center; }
.qcard.is-approved { animation: q-approve 380ms var(--ease-out) forwards; }
.qcard.is-declined { animation: q-decline 380ms var(--ease-out) forwards; }
@keyframes q-approve { to { transform: translateX(80px); opacity: 0; border-color: var(--st-completed); box-shadow: 0 0 0 3px var(--st-completed); } }
@keyframes q-decline { to { transform: translateX(-80px); opacity: 0; border-color: var(--st-red); box-shadow: 0 0 0 3px var(--st-red); } }

/* ---------- before / after ---------- */
.ba { position: relative; border-radius: var(--r); overflow: hidden; --pos: 50%; }
.ba__img { line-height: 0; }
.ba__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.ba__bar { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none; }
.ba__bar::after { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.ba__handle { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba__handle:focus-visible + .ba__bar, .ba:focus-within .ba__bar { background: var(--focus); }
.ba__lbl { position: absolute; top: 6px; padding: 2px 6px; border-radius: 4px; background: rgba(17, 17, 17, .78); color: #fff; font: 700 10px/1.3 var(--font-sign); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.ba__lbl--b { left: 6px; }
.ba__lbl--a { right: 6px; background: var(--st-working); }

/* ---------- design tiles by role: .dtile is the shared base the working, concept, live and archived tiles carry ---------- */
.dtile { position: relative; min-width: 0; }
.dtile--working { border-color: color-mix(in srgb, var(--st-working) 45%, var(--line)); }
.dtile--concept .thumb img { filter: saturate(.3); }
.dtile--live .thumb { border-color: var(--line-strong); }
.dtile--archived .thumb img { filter: grayscale(1); opacity: .7; }
.livepane--sm .livepane__head { font-size: 11.5px; }

/* ---------- task card ---------- */
.taskcard { position: relative; display: grid; gap: 6px; padding: 12px 14px 12px 20px; border-radius: var(--r); }
.taskcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: var(--r) 0 0 var(--r); background: var(--st); }
.taskcard__top { display: flex; align-items: center; gap: 8px; }
.taskcard__who { margin-left: auto; }
.taskcard__title { margin: 0; font: 650 14.5px/1.35 var(--font-body); }
.taskcard__state, .taskcard__ship { margin: 0; font-size: 12.5px; color: var(--muted); }
.taskcard__req { font-size: 12.5px; color: var(--st-building-ink); }

/* ---------- design cards (concept, live, archived) ---------- */
.dcard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); transition: transform 260ms var(--ease-spring), box-shadow 200ms ease; }
.dcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.dcard__band { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--st); color: #fff; font-size: 12.5px; font-weight: 700; }
.dcard__band .sign { display: inline-flex; gap: 6px; align-items: center; }
.dcard--live .dcard__band { color: var(--bg); }
.dcard--concept .dcard__band { background: var(--surface-2); color: var(--ink-2); }
.dcard__rev { margin-left: auto; font-size: 12px; opacity: .92; }
.dcard__view { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.dcard__view .i { width: 14px; height: 14px; }
.dcard__thumb { display: block; padding: 12px 12px 0; }
.dcard__body { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.dcard__proj { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.dcard__proj .switcher__dot { width: 11px; height: 11px; }
.dcard__name { margin: 0; font: 700 18px/1.2 var(--font-sign); }
.dcard__meta { margin: 0; font-size: 13px; color: var(--muted); }
.dcard__acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.dcard--concept .thumb img { filter: saturate(.3); }
.dcard--archived .dcard__band { background: color-mix(in srgb, var(--st-red) 14%, var(--bg)); color: var(--st-red-ink); }
.dcard--archived .thumb img { filter: grayscale(1); opacity: .7; }

/* ---------- working design tile ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tiles.is-large { grid-template-columns: minmax(0, 1fr); }
.lane-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.wtile { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); transition: box-shadow 200ms ease, transform 260ms var(--ease-spring); }
.wtile:hover { box-shadow: var(--shadow-2); }
.wtile__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.wtile__title { min-width: 0; }
.wtile__title b { display: block; font: 700 17px/1.15 var(--font-sign); }
.wtile__title small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wtile__body { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; align-items: start; }
.tiles.is-large .wtile__body { grid-template-columns: minmax(0, 1fr) 240px; }
.wtile__hero { position: relative; display: grid; gap: 10px; min-width: 0; }
.wtile__frame { position: relative; display: block; border-radius: var(--r); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 55%, transparent); overflow: hidden; }
.wtile__frame .thumb { border: 0; border-radius: 0; transition: transform 400ms var(--ease-out); }
.tiles.is-large .wtile__frame .thumb { aspect-ratio: 16 / 7; }
.wtile__frame:hover .thumb { transform: scale(1.015); }
.wbadge { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 8px; border-radius: 999px; background: var(--st-working); color: #fff; font: 700 11.5px/1 var(--font-sign); letter-spacing: .06em; text-transform: uppercase; box-shadow: var(--shadow-2); }
.wbadge i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: wpulse 2s ease-out infinite; }
.wbadge b { font-size: 11px; padding-left: 6px; border-left: 1px solid rgba(255, 255, 255, .45); }
@keyframes wpulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); } 80%, 100% { box-shadow: 0 0 0 7px transparent; } }
.wtile__fs { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; background: rgba(17, 17, 17, .82); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.9); transition: opacity 160ms ease, transform 220ms var(--ease-spring); border: 0; padding: 0; text-decoration: none; }
.wtile__fs .i { width: 17px; height: 17px; }
.wtile__hero:hover .wtile__fs, .wtile__fs:focus-visible { opacity: 1; transform: none; }
.wtile__meta h3 { margin: 0 0 2px; font: 700 18px/1.2 var(--font-sign); }
.wtile__meta p { margin: 0; display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.c-waiting { color: var(--st-waiting-ink); }
.wtile__acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.wchoice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--muted); }
.wchoice .seg button { min-height: 28px; padding: 0 10px; font-size: 12px; }
.wchoice .seg button[aria-pressed="true"] { background: var(--st-working); color: #fff; }
.wchoice .seg button[disabled] { cursor: default; }
.drift { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--r); background: color-mix(in srgb, var(--st-waiting) 16%, var(--bg)); border: 1px solid color-mix(in srgb, var(--st-waiting) 50%, var(--line)); font-size: 13px; }
.drift .i { width: 16px; height: 16px; color: var(--st-waiting-ink); }
.drift span { flex: 1; min-width: 160px; }

/* the Live pane: locked slate beside a working design */
.livepane { display: grid; gap: 6px; padding: 10px; border-radius: var(--r); background: #2a2d33; color: #e5e7eb; }
:root[data-theme="dark"] .livepane { background: #1f2126; border: 1px solid #2e3036; }
.livepane__head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #fff; }
.livepane__head .i { width: 13px; height: 13px; }
.livepane__head .mono { margin-left: auto; font-size: 11px; text-transform: none; letter-spacing: 0; color: #c5c9d0; }
.livepane .thumb { filter: grayscale(.55) brightness(.92); border-color: #3a3d44; }
.livepane__thumb { display: block; border-radius: var(--r); }
.livepane .livestate { font-size: 12px; }
.livepane .livestate.ok { color: #6ee7a0; }
.livepane .livestate.warn { color: #ffd166; }
.livepane .livestate.bad { color: #ff8a80; }
.livepane__when { font-size: 11.5px; color: #a1a1aa; }

.wtile__hero--empty { display: grid; gap: 10px; }
.nowd { display: flex; gap: 12px; padding: 14px; border: 2px dashed color-mix(in srgb, var(--st-working) 40%, var(--line)); border-radius: var(--r); }
.nowd > .i { width: 28px; height: 28px; color: var(--st-working); }
.nowd p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.nowd__concepts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nowd__c { text-decoration: none; font-size: 11.5px; color: var(--muted); min-width: 0; }
.nowd__c span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowd__c .thumb { margin-bottom: 4px; }
.nowd__c .thumb img { filter: saturate(.3); }

@media (max-width: 1023px) {
  .tiles, .tiles.is-large { grid-template-columns: minmax(0, 1fr); }
  .wtile__head { grid-template-columns: auto minmax(0, 1fr); }
  .wtile__head .mline { grid-column: 1 / -1; justify-self: start; }
  .wtile__body, .tiles.is-large .wtile__body { grid-template-columns: minmax(0, 1fr); }
  .livepane { grid-template-columns: 96px 1fr; align-items: center; }
  .livepane__head { grid-column: 1 / -1; }
  .livepane__thumb { grid-row: span 2; }
  .wtile__fs { opacity: 1; transform: none; }
  .qcard { grid-template-columns: 1fr; padding-left: 24px; }
  .qcard__acts { flex-direction: row; flex-wrap: wrap; }
  .qcard__acts .btn { flex: 1; min-height: 44px; }
  .qcard__dupes { grid-column: 1; }
}