/* BYA FCP. Same typography and spacing as the rest of BYA PLATFORM, with its own accent pair. */
:root{
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 color:#1b2430;background:#f6f5f7;font-synthesis:none;
 --ink:#1b2430;--paper:#fff;--muted:#6a7480;--line:#e0dde3;
 --accent:#c2255c;--accent-soft:#fdeef3;--second:#22b8cf;--second-soft:#e8f9fc;
 --danger:#c2255c;--ok:#0f8a6a;
 --radius:16px;--shadow:0 10px 30px #1b243010;
}
*{box-sizing:border-box}
body{margin:0}
.shell{max-width:1180px;margin:auto;padding:0 40px;min-height:100dvh;display:flex;flex-direction:column}

header{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:800;font-size:20px;letter-spacing:.5px}
.brand-sub{display:block;font-size:9px;letter-spacing:3px;margin-top:3px;color:var(--muted);font-weight:700}
.account{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--muted)}
.header-right{display:flex;align-items:center;gap:14px;min-width:0}
/* The way back out to the BYA PLATFORM catalogue, worded and drawn as the other applications do. */
.portal-link{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:42px;padding:0 15px;
 border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);
 font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap;
 transition:border-color .14s,color .14s,background-color .14s}
.portal-link:hover{border-color:var(--accent);color:var(--accent)}
.portal-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.portal-link svg{width:16px;height:16px;flex:none}

main{flex:1;padding:48px 0 80px}
.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--accent);margin:0 0 16px}
h1{font-size:clamp(32px,4.4vw,52px);line-height:1.08;letter-spacing:-1.6px;font-weight:600;margin:0}
h1 em{font-style:normal;color:var(--accent)}
.lead{color:var(--muted);font-size:15px;line-height:1.75;max-width:520px;margin:20px 0 0}

/* Controls. Every interactive element is drawn here rather than left with user-agent styling. */
.act{
 display:inline-flex;align-items:center;justify-content:center;gap:9px;
 font:inherit;font-size:13px;font-weight:650;line-height:1;cursor:pointer;
 padding:13px 20px;border-radius:11px;border:1px solid transparent;
 background:var(--accent);color:#fff;text-decoration:none;
 transition:transform .14s,filter .14s,border-color .14s,background-color .14s;
}
.act:hover{filter:brightness(1.07);transform:translateY(-1px)}
.act:active{transform:translateY(0)}
.act.ghost{background:var(--paper);color:var(--ink);border-color:var(--line)}
.act.ghost:hover{border-color:var(--accent);color:var(--accent);filter:none}
.act.subtle{background:transparent;color:var(--muted);padding:9px 12px}
.act.subtle:hover{color:var(--accent);filter:none}
.act.danger{background:transparent;color:var(--danger);border-color:var(--line)}
.act.danger:hover{border-color:var(--danger);filter:none}
.act[aria-disabled="true"],.act:disabled{opacity:.45;pointer-events:none;transform:none}
.act svg{width:15px;height:15px;flex:none}
:is(.act,.chip,.field,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:11px}

.field{width:100%;font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.field:focus{border-color:var(--accent)}
textarea.field{resize:vertical;min-height:132px;line-height:1.6;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}

/* Layout */
.board{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;margin-top:44px;align-items:start}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}
.panel h2{font-size:16px;margin:0;letter-spacing:-.3px}
.panel-head .count{font-size:11px;color:var(--muted);background:var(--second-soft);color:#0d7c8c;padding:5px 10px;border-radius:20px;font-weight:650}
.label{display:block;font-size:12px;font-weight:650;margin:20px 0 8px;color:var(--ink)}
.label:first-of-type{margin-top:0}
.hint{color:var(--muted);font-size:12px;line-height:1.65;margin:9px 0 0}

/* Destination chips: the multi-destination picker. */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
 display:inline-flex;align-items:center;gap:9px;cursor:pointer;
 padding:9px 14px 9px 11px;border:1px solid var(--line);border-radius:30px;
 font-size:12.5px;font-weight:600;background:var(--paper);color:var(--ink);
 transition:border-color .14s,background-color .14s,color .14s;
}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip .tick{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);flex:none;position:relative;transition:inherit}
.chip:hover{border-color:var(--accent)}
.chip:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.chip:has(input:checked) .tick{border-color:var(--accent);background:var(--accent)}
.chip:has(input:checked) .tick::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg)}
.chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.chip small{color:var(--muted);font-weight:500}
.chip:has(input:checked) small{color:inherit;opacity:.75}

/* File drop area */
.drop{
 /* A label is inline by default, which collapses the box and spills the block child out of it. */
 display:block;
 border:1.5px dashed var(--line);border-radius:14px;padding:26px;text-align:center;cursor:pointer;
 color:var(--muted);font-size:13px;transition:border-color .14s,background-color .14s,color .14s;
}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.drop strong{display:block;color:var(--ink);font-size:13.5px;margin-bottom:5px}
.drop.over strong{color:var(--accent)}
.drop input{display:none}

.files{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.files li{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;font-size:12.5px}
.files .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.files .size{color:var(--muted);font-variant-numeric:tabular-nums;flex:none}

/* The fixed one minute rule, stated rather than offered as a choice. */
.rule{margin:20px 0 0;padding:14px 16px;border-radius:12px;border:1px solid var(--line);
 border-left:3px solid var(--accent);background:var(--accent-soft);font-size:12.5px;line-height:1.65;color:var(--ink)}
.rule strong{color:var(--accent);font-weight:700}

/* Transfers waiting to be collected */
.queue{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.queue li{border:1px solid var(--line);border-radius:13px;padding:16px}
.queue .top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.queue .from{font-weight:650;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.queue .meta{font-size:11.5px;color:var(--muted);margin:0 0 13px;font-variant-numeric:tabular-nums}
.queue .act{width:100%}

/* Countdown: the short lifetime made visible instead of implied. */
.ttl{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:5px 10px;border-radius:20px;font-variant-numeric:tabular-nums;flex:none}
.ttl.calm{color:#0d7c8c;background:var(--second-soft)}

.bar{height:5px;border-radius:5px;background:var(--line);overflow:hidden;margin-top:12px}
.bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--second));transition:width .18s}

.empty{text-align:center;color:var(--muted);font-size:13px;padding:34px 16px;line-height:1.7}
.empty svg{width:34px;height:34px;opacity:.3;margin-bottom:12px}

.feedback{margin:18px 0 0;padding:13px 15px;border-radius:11px;font-size:12.5px;line-height:1.6;border:1px solid var(--line)}
.feedback.bad{border-color:var(--danger);color:var(--danger);background:var(--accent-soft)}
.feedback.good{border-color:var(--ok);color:var(--ok);background:#effaf6}
.feedback:empty{display:none}

/* Device roster */
.devices{list-style:none;margin:0;padding:0}
.devices li{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--line)}
.devices li:last-child{border-bottom:0}
.devices .who{flex:1;min-width:0}
.devices .who strong{display:block;font-size:13px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.devices .who code{font-size:10.5px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.badge{font-size:10px;font-weight:700;letter-spacing:.6px;padding:4px 9px;border-radius:20px;background:var(--second-soft);color:#0d7c8c;flex:none}

.gate{max-width:440px;margin:70px auto;text-align:center}
.gate .act{margin-top:24px}

/* Connecting state. Shown while the session is resolved against Identity, which normally takes
   one redirect and no interaction at all; the welcome below it only appears when there is no
   session to resume. */
.loader{display:flex;flex-direction:column;align-items:center;gap:22px;padding:60px 0}
.loader img{width:72px;height:72px;animation:breathe 1.9s ease-in-out infinite}
.loader p{margin:0;font-size:13px;color:var(--muted);letter-spacing:.2px}
.loader-bar{width:180px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.loader-bar span{display:block;height:100%;width:40%;border-radius:3px;
 background:linear-gradient(90deg,var(--accent),var(--second));animation:sweep 1.3s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.07);opacity:1}}
@keyframes sweep{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
@media(prefers-reduced-motion:reduce){
 .loader img{animation:none}
 .loader-bar span{width:100%;animation:none}
}

footer{padding:24px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;font-size:10px;color:var(--muted)}
footer>span:first-child{letter-spacing:2px;font-weight:700}
[hidden]{display:none!important}

@media(max-width:940px){.board{grid-template-columns:1fr}}
@media(max-width:700px){
 .shell{padding:0 20px}
 /* Brand and controls do not fit on one line at phone width, so the header takes two rows
    rather than letting the wordmark and the buttons break mid-word. */
 header{height:auto;min-height:84px;padding:16px 0;flex-wrap:wrap;gap:12px}
 .brand{font-size:18px}
 .brand span,.brand-sub,.act.subtle,.portal-link{white-space:nowrap}
 .header-right{width:100%;justify-content:flex-start}
 main{padding:26px 0 56px}
 .board{margin-top:30px;gap:18px}
 .panel{padding:20px}
 .account #person{display:none}
 /* On a narrow header the icon alone still reads as "back to the applications". */
 .header-right{gap:8px}
 .portal-link{padding:0 11px;gap:0}
 .portal-link svg+span{display:none}
 .field{font-size:16px}
 footer{flex-direction:column;gap:8px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.act:hover{transform:none}}

@media(prefers-color-scheme:dark){
 :root{
  color:#e6e8ec;background:#14161c;
  --ink:#e6e8ec;--paper:#1c1f27;--muted:#98a1ae;--line:#2f3542;
  --accent:#ff6b9d;--accent-soft:#2a1a22;--second:#4dd4e8;--second-soft:#14262b;
  --danger:#ff6b9d;--ok:#3ecf9a;--shadow:none;
 }
 .act{color:#14161c}
 .act.ghost,.act.subtle,.act.danger{color:var(--ink)}
 .act.ghost:hover,.act.danger:hover{color:var(--accent)}
 .chip:has(input:checked) .tick::after{border-color:#14161c}
 /* These three carry a teal literal chosen for a white background; on the dark surface it sinks
    into the panel. The countdown in particular has to stay readable at a glance. */
 .panel-head .count,.badge,.ttl.calm{color:var(--second)}
 .feedback.good{background:#132720}
}