/* ArcShare shared tokens. Compatibility aliases support existing utility pages.
   ArcShare "Workbench": putty room, paper, ink; azure = your action, acid = what ArcShare hands back.
   Bricolage Grotesque (display), Hanken Grotesk (interface), Martian Mono (codes) — SIL OFL, bundled. */
@font-face { font-family:'Bricolage Grotesque'; src:url('/fonts/bricolage-grotesque.woff2') format('woff2'); font-weight:200 800; font-stretch:75% 100%; font-style:normal; font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; src:url('/fonts/hanken-grotesk.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Martian Mono'; src:url('/fonts/martian-mono.woff2') format('woff2'); font-weight:100 800; font-stretch:75% 112.5%; font-style:normal; font-display:swap; }
/* Metric-matched local fallbacks keep text steady while the bundled faces load (and where a CSP blocks fonts). */
@font-face { font-family:'Hanken Fallback'; src:local('Arial'),local('Helvetica'),local('Liberation Sans'); size-adjust:97%; ascent-override:100%; descent-override:26%; }
@font-face { font-family:'Bricolage Fallback'; src:local('Arial'),local('Helvetica'),local('Liberation Sans'); size-adjust:98%; ascent-override:95%; descent-override:26%; }
@font-face { font-family:'Martian Fallback'; src:local('Menlo'),local('Consolas'),local('DejaVu Sans Mono'),local('Liberation Mono'); size-adjust:96%; }
:root {
  color-scheme: dark;
  --arc-nav-h:72px;
  --arc-content-max:1180px;
  --arc-page-gutter:24px;
  --arc-bg:#111216;
  --arc-s1:#1C1E24;
  --arc-nav-bg:#111216;
  --arc-s2:#191B21;
  --arc-s3:#262930;
  --arc-s4:#33373F;
  --arc-b1:rgba(240,238,232,.06);
  --arc-b2:rgba(240,238,232,.11);
  --arc-b3:rgba(240,238,232,.18);
  --arc-b4:rgba(240,238,232,.28);
  --arc-t0:#F0EEE8;
  --arc-t1:#DAD8D2;
  --arc-t2:#B0AFA9;
  --arc-t3:#A6A59F;
  --arc-t4:#A6A59F;
  --arc-acc:#2F6BF2;
  --arc-acc2:#8FB2FF;
  --arc-acb:rgba(79,134,255,.15);
  --arc-acr:rgba(143,178,255,.36);
  --arc-ice:#DDFB3C;
  --arc-ink:#15161A;
  --arc-ticket:#23262D;
  --arc-ticket-line:#3A3E47;
  --arc-go:#4FD69C;
  --arc-gob:rgba(79,214,156,.10);
  --arc-gor:rgba(79,214,156,.28);
  --arc-red:#FF8A8A;
  --arc-reb:rgba(255,110,110,.10);
  --arc-rer:rgba(255,110,110,.28);
  --arc-amb:#F2BE5C;
  --arc-ambb:rgba(242,190,92,.10);
  --arc-ambr:rgba(242,190,92,.28);
  /* Secondary categorical accent: a cool cyan (the system has no violet). */
  --arc-pur:#6FC3DF;
  --arc-purb:rgba(111,195,223,.12);
  --arc-shadow-xs:0 1px 0 rgba(0,0,0,.35);
  --arc-shadow-sm:0 1px 0 rgba(0,0,0,.35),0 0 0 1px var(--arc-b1);
  --arc-shadow-md:0 1px 0 rgba(0,0,0,.4),0 20px 34px -18px rgba(0,0,0,.8);
  --arc-shadow-lg:0 1px 0 rgba(0,0,0,.4),0 34px 46px -22px rgba(0,0,0,.85),0 0 0 1px var(--arc-b2);
  --arc-sans:'Hanken Grotesk','Hanken Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --arc-mono:'Martian Mono','Martian Fallback',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --arc-radius-xs:6px;
  --arc-radius-sm:10px;
  --arc-radius-md:14px;
  --arc-radius-lg:18px;
  --arc-radius-xl:22px;
  --arc-ease:cubic-bezier(.2,.8,.2,1);
  --arc-spring:cubic-bezier(.3,1.45,.55,1);
  --arc-display:'Bricolage Grotesque','Bricolage Fallback','Hanken Grotesk',system-ui,sans-serif;
  --arc-acid:#DDFB3C;
  --arc-acid-ink:#15161A;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --text-xs:12px;
  --text-sm:13px;
  --text-base:14px;
  --text-md:16px;
  --text-lg:18px;
  --text-title:30px;
  --control-h:40px;
  --control-touch-h:44px;
  --control-action-h:36px;
  --workspace-max:960px;
  --receiver-max:720px;

  /* Canonical variables used by the newer pages. */
  --bg:var(--arc-bg);
  --s1:var(--arc-s1);
  --s2:var(--arc-s2);
  --s3:var(--arc-s3);
  --s4:var(--arc-s4);
  --b1:var(--arc-b1);
  --b2:var(--arc-b2);
  --b3:var(--arc-b3);
  --b4:var(--arc-b4);
  --t0:var(--arc-t0);
  --t1:var(--arc-t1);
  --t2:var(--arc-t2);
  --t3:var(--arc-t3);
  --t4:var(--arc-t4);
  --acc:var(--arc-acc);
  --acc2:var(--arc-acc2);
  --acb:var(--arc-acb);
  --acr:var(--arc-acr);
  --go:var(--arc-go);
  --gob:var(--arc-gob);
  --gor:var(--arc-gor);
  --red:var(--arc-red);
  --reb:var(--arc-reb);
  --rer:var(--arc-rer);
  --amb:var(--arc-amb);
  --ambb:var(--arc-ambb);
  --ambr:var(--arc-ambr);
  --pur:var(--arc-pur);
  --purb:var(--arc-purb);
  --ice:var(--arc-ice);
  --ink:var(--arc-ink);
  --ticket:var(--arc-ticket);
  --ticket-line:var(--arc-ticket-line);
  --ease:var(--arc-ease);
  --spring:var(--arc-spring);
  --display:var(--arc-display);
  --acid:var(--arc-acid);
  --acid-ink:var(--arc-acid-ink);
  --blue:var(--arc-acc2);
  --blb:var(--arc-acb);
  --blr:var(--arc-acr);
  --sans:var(--arc-sans);
  --mono:var(--arc-mono);
  --nav-bg:var(--arc-nav-bg);
  --nav-h:var(--arc-nav-h);
  --sh:var(--arc-shadow-sm);
  --sh2:var(--arc-shadow-md);
  --sh-lg:var(--arc-shadow-lg);

  /* Compatibility aliases used by older and utility pages. */
  --bg2:var(--arc-s1);
  --bg3:var(--arc-s2);
  --bg4:var(--arc-s3);
  --bg5:var(--arc-s4);
  --surface:var(--arc-s1);
  --surface-2:var(--arc-s2);
  --surface-3:var(--arc-s3);
  --text:var(--arc-t0);
  --text2:var(--arc-t2);
  --text3:var(--arc-t3);
  --text4:var(--arc-t4);
  --border:var(--arc-b2);
  --border2:var(--arc-b3);
  --border3:var(--arc-b4);
  --border-2:var(--arc-b3);
  --border-3:var(--arc-b4);
  --r1:var(--arc-b1);
  --r2:var(--arc-b2);
  --r3:var(--arc-b3);
  --r4:var(--arc-b4);
  --r:var(--arc-radius-lg);
  --r-sm:var(--arc-radius-sm);
  --ra:var(--arc-radius-xl);
  --rb:var(--arc-radius-lg);
  --rc:var(--arc-radius-md);
  --rd:var(--arc-radius-sm);
  --re:var(--arc-radius-xs);
  --r-xs:var(--arc-radius-xs);
  --r-md:var(--arc-radius-md);
  --r-lg:var(--arc-radius-lg);
  --r-xl:var(--arc-radius-xl);
  --acc-2:var(--arc-acc2);
  --acc-bg:var(--arc-acb);
  --acc-bg-strong:var(--arc-acr);
  --acc-rim:var(--arc-acr);
  --blue-dim:var(--arc-acb);
  --blue-txt:var(--arc-acc2);
  --green:var(--arc-go);
  --green-bg:var(--arc-gob);
  --green-br:var(--arc-gor);
  --green-dim:var(--arc-gob);
  --green-txt:var(--arc-go);
  --go-bg:var(--arc-gob);
  --go-rim:var(--arc-gor);
  --red-bg:var(--arc-reb);
  --red-br:var(--arc-rer);
  --red-dim:var(--arc-reb);
  --red-rim:var(--arc-rer);
  --amber:var(--arc-amb);
  --amber-bg:var(--arc-ambb);
  --amber-br:var(--arc-ambr);
  --amber-dim:var(--arc-ambb);
  --amb-bg:var(--arc-ambb);
  --amb-rim:var(--arc-ambr);
  --pur-bg:var(--arc-purb);
  --shadow:var(--arc-shadow-sm);
  --shadow-xs:var(--arc-shadow-xs);
  --shadow-sm:var(--arc-shadow-sm);
  --shadow-md:var(--arc-shadow-md);
  --shadow-lg:var(--arc-shadow-lg);
  --shadow-soft:var(--arc-shadow-md);
  --input-bg:var(--arc-s2);
  --input-br:var(--arc-b2);
  --btn:var(--arc-t0);
  --btn-txt:var(--arc-bg);
  --panel:var(--arc-s1);
  --panel2:var(--arc-s2);
  --muted:var(--arc-t2);
  --muted2:var(--arc-t3);
  --line:var(--arc-b2);
  --accent:var(--arc-acc);
}

html[data-theme='light'] {
  color-scheme: light;
  --arc-bg:#ECE9E2;
  --arc-s1:#FFFFFF;
  --arc-nav-bg:#ECE9E2;
  --arc-s2:#E4E0D7;
  --arc-s3:#D9D4C9;
  --arc-s4:#C9C3B6;
  --arc-b1:rgba(21,22,26,.06);
  --arc-b2:rgba(21,22,26,.11);
  --arc-b3:rgba(21,22,26,.18);
  --arc-b4:rgba(21,22,26,.28);
  --arc-t0:#15161A;
  --arc-t1:#2A2C33;
  --arc-t2:#4F5159;
  --arc-t3:#595B63;
  --arc-t4:#595B63;
  --arc-acc:#1463FF;
  --arc-acc2:#0F55E0;
  --arc-acb:rgba(20,99,255,.10);
  --arc-acr:rgba(20,99,255,.32);
  --arc-ticket:#15161A;
  --arc-ticket-line:#2E3038;
  --arc-go:#09663F;
  --arc-gob:rgba(11,118,80,.08);
  --arc-gor:rgba(11,118,80,.22);
  --arc-red:#B7243F;
  --arc-reb:rgba(183,36,63,.07);
  --arc-rer:rgba(183,36,63,.22);
  --arc-amb:#8A5708;
  --arc-ambb:rgba(160,104,16,.09);
  --arc-ambr:rgba(160,104,16,.24);
  --arc-pur:#0E6E8C;
  --arc-purb:rgba(14,110,140,.09);
  --arc-shadow-xs:0 1px 0 rgba(21,22,26,.06);
  --arc-shadow-sm:0 1px 0 rgba(21,22,26,.06),0 0 0 1px var(--arc-b1);
  --arc-shadow-md:0 1px 0 rgba(21,22,26,.06),0 18px 30px -18px rgba(21,22,26,.42);
  --arc-shadow-lg:0 1px 0 rgba(21,22,26,.06),0 30px 44px -22px rgba(21,22,26,.5),0 0 0 1px var(--arc-b1);
  --nav-bg:var(--arc-nav-bg);
  --btn:var(--arc-t0);
  --btn-txt:#ffffff;
  --input-bg:#ffffff;
  --input-br:var(--arc-b3);
  --acc-hover:#0F55E0;
}


html,
body {
  background:var(--bg)!important;
  color:var(--t0)!important;
  font-family:var(--sans)!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:'ss01' 0;
}

button,
input,
select,
textarea {
  font-family:inherit;
}

button, a, summary, [role='button'], input, label { touch-action:manipulation; }

a {
  text-underline-offset:3px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline:2px solid var(--acc2)!important;
  outline-offset:2px!important;
}

::selection { background:var(--acid); color:var(--acid-ink); }
html { scrollbar-color:var(--arc-s4) transparent; }
input, textarea { caret-color:var(--acc); }

:root { --acc-hover:#2459D6; --layer-nav:200; --layer-menu:20; --layer-dialog:900; --layer-toast:950; }

/* Explicit primitives. Route owners retain layout and specialized states. */
body.arc-ui { margin:0; font-size:var(--text-base); line-height:1.5; }
html.arc-ui-ready { scroll-padding-top:calc(var(--arc-nav-h) + 12px); }
body.arc-ui :is(td, th, .arc-status) { font-variant-numeric:tabular-nums; }
.arc-skip-link {
  position:fixed; top:8px; left:var(--arc-page-gutter); z-index:calc(var(--layer-nav) + 1);
  padding:10px 14px; border-radius:var(--arc-radius-sm); background:var(--s1);
  color:var(--t0); box-shadow:none; transform:translateY(calc(-100% - 48px));
}
.arc-skip-link:focus { transform:none; box-shadow:var(--shadow-md); }
.arc-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.arc-page-header { margin-bottom:24px; }
/* Workbench type scale: every section page opens with the same display headline.
   Only the Send & Receive home keeps the oversized "Files in, link out." hero. */
body.arc-ui .arc-page-title { margin:0 0 10px; color:var(--t0); font:800 clamp(34px,2.2vw + 20px,56px)/.98 var(--display); letter-spacing:-.04em; font-variation-settings:'opsz' 72; text-wrap:balance; }
body.arc-ui .arc-workspace-title { font:800 clamp(48px,7vw,108px)/.9 var(--display); letter-spacing:-.04em; font-variation-settings:'opsz' 96,'wdth' 92; text-wrap:balance; }
body.arc-ui:not(.arc-page-home) .arc-workspace-title { font:800 clamp(34px,2.2vw + 20px,56px)/.98 var(--display); letter-spacing:-.04em; font-variation-settings:'opsz' 72; }
body.arc-ui .arc-page-description { margin:0; max-width:64ch; color:var(--t2); font:500 16px/1.5 var(--sans); text-wrap:pretty; }
.arc-surface { background:var(--paper); border:0; border-radius:var(--arc-radius-lg); box-shadow:var(--shadow-paper); }
/* Buttons: paper with an ink edge; primary actions are azure with a pressed-key edge. */
body.arc-ui .arc-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:8px 15px; border:1px solid transparent; border-radius:var(--arc-radius-md); background:var(--paper); color:var(--t0); font:650 14px/1.2 var(--sans); text-decoration:none; cursor:pointer; box-shadow:inset 0 0 0 1.5px var(--b3); }
body.arc-ui .arc-btn:hover { background:var(--paper); border-color:transparent; color:var(--t0); box-shadow:inset 0 0 0 1.5px var(--t0); }
body.arc-ui .arc-btn-primary { background:var(--acc); border-color:var(--acc); color:#fff; box-shadow:0 2px 0 color-mix(in srgb,var(--arc-acc) 55%,#000),0 12px 22px -14px var(--arc-acc); }
body.arc-ui .arc-btn-primary:hover { background:var(--acc-hover); border-color:var(--acc-hover); color:#fff; }
body.arc-ui .arc-btn:active:not(:disabled) { transform:translateY(2px); box-shadow:none; }
body.arc-ui .arc-btn-danger { color:var(--red); }
body.arc-ui .arc-btn-danger:hover { background:var(--reb); border-color:var(--rer); color:var(--red); }
body.arc-ui .arc-icon-btn { width:38px; height:38px; min-width:38px; padding:0; }
/* Fields: a slot pressed into the surface, ringed in azure when active. */
body.arc-ui .arc-input { color:var(--t0); background:var(--bg); border:1px solid var(--b3); border-radius:var(--arc-radius-sm); padding:9px 12px; font:15px/1.45 var(--sans); min-width:0; }
body.arc-ui .arc-input:focus { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); outline:0; }
body.arc-ui :is(input,select).arc-input { min-height:var(--control-h); }
body.arc-ui .arc-input::placeholder { color:var(--t4); opacity:1; }
.arc-label { color:var(--t1); font:650 13px/1.5 var(--sans); letter-spacing:0; text-transform:none; }
.arc-tabs { display:flex; gap:16px; border-bottom:1px solid var(--b2); }
.arc-segmented { display:inline-flex; gap:2px; padding:3px; background:var(--bg); border:1px solid var(--b2); border-radius:var(--arc-radius-sm); }
.arc-status { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:var(--arc-radius-xs); color:var(--t2); background:var(--s2); font:500 12px/1.4 var(--sans); }
.arc-status-success { color:var(--go); background:var(--gob); }
.arc-status-warning { color:var(--amb); background:var(--ambb); }
.arc-status-error { color:var(--red); background:var(--reb); }
.arc-empty { padding:32px 16px; color:var(--t2); font:500 15px/1.5 var(--sans); text-align:center; }
.arc-state { width:min(440px,100%); margin:0 auto; padding:30px 28px 26px; border-radius:var(--arc-radius-lg); background:var(--paper); box-shadow:var(--shadow-paper); text-align:left; }
.arc-state-icon { display:grid; place-items:center; width:56px; height:56px; margin-bottom:18px; border-radius:14px; background:var(--bg); color:var(--t1); transform:rotate(-4deg); box-shadow:inset 0 0 0 1px var(--b2); }
.arc-state-icon .arc-icon { width:24px; height:24px; }
.arc-state-title { margin:0 0 6px; color:var(--t0); font:800 28px/1.05 var(--display); letter-spacing:-.035em; }
.arc-state-sub { margin:0; color:var(--t2); font:500 15px/1.5 var(--sans); }
.arc-state-link { display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:12px; color:var(--acc2); font:650 14.5px var(--sans); text-decoration:none; }
.arc-state-link:hover { text-decoration:underline; text-underline-offset:3px; }
.arc-alert { padding:12px 16px; border:1px solid var(--b2); border-radius:var(--arc-radius-sm); color:var(--t1); background:var(--s2); font:13.5px/1.5 var(--sans); }
.arc-alert-success { color:var(--go); border-color:var(--gor); background:var(--gob); }
.arc-alert-warning { color:var(--amb); border-color:var(--ambr); background:var(--ambb); }
.arc-alert-error { color:var(--red); border-color:var(--rer); background:var(--reb); }
input,select,textarea { accent-color:var(--acc); }
:is(button,input,select,textarea):disabled { cursor:not-allowed; opacity:.55; }
:is(.toast,.clip-toast) { max-width:calc(100vw - 32px); box-shadow:var(--shadow-lg); font-size:13.5px; }

/* Transparent assets derived from the original ArcShare artwork. */
.arc-brand { display:inline-flex; align-items:center; color:var(--t0); text-decoration:none; }
.arc-original-mini, .arc-original-mobile-mark {
  display:block; width:36px; height:24px; flex:none;
  background:transparent center / contain no-repeat;
}
.arc-original-mobile-mark { display:none; }
html[data-theme='dark'] .arc-original-mini,
html[data-theme='dark'] .arc-original-mobile-mark {
  background-image:url('/logo-dark-icon.png');
}
html[data-theme='light'] .arc-original-mini,
html[data-theme='light'] .arc-original-mobile-mark {
  background-image:url('/logo-light-icon.png');
}

/* Shared application header.
   The original ArcShare logo, all ten destinations as direct tabs, and the theme control.
   Wide screens fit everything on one row. Below 1280px the tabs move to a second row that
   scrolls sideways, so no destination is ever hidden behind a menu. --arc-nav-h always
   equals the rendered header height; sticky bars, sidebars and full-height workspaces
   offset from it. */
@media (max-width:1279px) { :root { --arc-nav-brand-h:60px; --arc-nav-strip-h:52px; --arc-nav-h:112px; } }
@media (max-width:768px) { :root { --arc-nav-brand-h:56px; --arc-nav-strip-h:52px; --arc-nav-h:108px; } }
html:has(> body:is([data-arc-shell='detail'],[data-arc-shell='compact'])), body:is([data-arc-shell='detail'],[data-arc-shell='compact']) { --arc-nav-h:64px; }

body.arc-ui > .topnav {
  position:sticky; top:0; z-index:var(--layer-nav); width:100%;
  height:var(--arc-nav-h); min-height:var(--arc-nav-h);
  padding:0 max(28px, env(safe-area-inset-right)) 0 max(28px, env(safe-area-inset-left));
  display:flex; align-items:center; gap:20px;
  background:color-mix(in srgb,var(--nav-bg) 90%,transparent);
  border:0; border-bottom:1px solid var(--b2); box-shadow:none;
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  flex-shrink:0; font-family:var(--sans);
}
/* Before arcshare-ui.js renders the header, keep each page's static markup invisible but
   at the final height, so there is no flash of an older nav and no layout shift. */
body.arc-ui > .topnav:not(.arc-app-nav):not(.arc-detail-nav) > * { visibility:hidden; }
body.arc-ui > .topnav.arc-app-nav { display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:'brand tabs right'; column-gap:24px; }
body.arc-ui .nav-logo { grid-area:brand; display:flex; align-items:center; justify-content:flex-start; height:100%; margin:0; flex:none; border-radius:var(--arc-radius-sm); }
body.arc-ui .nav-logo img { display:none; width:auto; height:50px; object-fit:contain; }
html[data-theme='dark'] body.arc-ui .nav-logo img.logo-dark { display:block; }
html[data-theme='light'] body.arc-ui .nav-logo img.logo-light { display:block; }
body.arc-ui .topnav .arc-original-mobile-mark { display:none; }

/* The tab strip */
.arc-nav-strip { grid-area:tabs; position:relative; display:flex; align-items:center; min-width:0; height:100%; }
body.arc-ui .nav-links {
  display:flex; align-items:center; gap:2px; width:100%; min-width:0; padding:4px 2px;
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  scroll-padding-inline:44px;
}
body.arc-ui .nav-links::-webkit-scrollbar { display:none; }
body.arc-ui .nav-link {
  position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 14px;
  color:var(--t2); border:0; border-radius:var(--arc-radius-sm); background:transparent;
  font:600 15px/1 var(--sans); white-space:nowrap; text-decoration:none; cursor:pointer;
}
body.arc-ui .nav-link:hover { background:color-mix(in srgb,var(--t0) 6%,transparent); color:var(--t0); }
body.arc-ui .nav-link, .arc-nav-scroll, body.arc-ui .nav-theme-btn { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
body.arc-ui .nav-link:active { background:color-mix(in srgb,var(--t0) 10%,transparent); }
body.arc-ui .nav-link.active, body.arc-ui .nav-link[aria-current='page'] {
  background:var(--paper); color:var(--t0); font-weight:700;
  box-shadow:inset 0 0 0 1px var(--paper-edge),0 1px 0 var(--paper-edge),0 6px 14px -10px rgba(0,0,0,.35);
}
/* Admin is a full destination, set slightly apart from the product tabs. */
body.arc-ui .nav-link.arc-nav-admin { margin-inline-start:13px; }
body.arc-ui .nav-link.arc-nav-admin::before { content:''; position:absolute; inset-inline-start:-8px; top:12px; bottom:12px; width:1px; background:var(--b3); }
/* Edge fades show that the strip continues; scroll buttons appear for mouse users. */
.arc-nav-strip::before, .arc-nav-strip::after { content:''; position:absolute; top:0; bottom:0; z-index:1; width:44px; pointer-events:none; opacity:0; transition:opacity .15s var(--ease); }
.arc-nav-strip::before { left:0; background:linear-gradient(90deg,var(--nav-bg) 30%,transparent); }
.arc-nav-strip::after { right:0; background:linear-gradient(270deg,var(--nav-bg) 30%,transparent); }
.arc-nav-strip.can-prev::before, .arc-nav-strip.can-next::after { opacity:1; }
.arc-nav-scroll {
  position:absolute; top:50%; z-index:2; display:none; width:32px; height:32px; margin-top:-16px; padding:0; place-items:center;
  border:0; border-radius:50%; background:var(--paper); color:var(--t0); box-shadow:inset 0 0 0 1px var(--paper-edge),0 4px 10px -6px rgba(0,0,0,.45); cursor:pointer;
}
.arc-nav-scroll .arc-icon { width:16px; height:16px; }
.arc-nav-scroll-prev { left:2px; } .arc-nav-scroll-prev .arc-icon { transform:scaleX(-1); }
.arc-nav-scroll-next { right:2px; }
@media (hover:hover) and (pointer:fine) {
  .arc-nav-strip.can-prev .arc-nav-scroll-prev, .arc-nav-strip.can-next .arc-nav-scroll-next { display:grid; }
}

body.arc-ui .nav-right { grid-area:right; display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-left:auto; flex-shrink:0; }
body.arc-ui .nav-theme-btn {
  width:44px; height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--arc-radius-sm); background:var(--paper); color:var(--t1); padding:0; cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--paper-edge);
}
body.arc-ui .nav-theme-btn:hover { color:var(--t0); box-shadow:inset 0 0 0 1.5px var(--t0); }
body.arc-ui .arc-theme-label, body.arc-ui .nav-tpill, body.arc-ui .nav-pip { display:none; }
.arc-icon { width:18px; height:18px; display:inline-block; background:currentColor; mask:var(--icon) center/contain no-repeat; -webkit-mask:var(--icon) center/contain no-repeat; flex-shrink:0; }

/* Compact context header for recipient and single-item views (see PAGE_META in arcshare-ui.js). */
.arc-detail-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:650 14px var(--sans); color:var(--t1); padding-inline-start:16px; border-inline-start:1px solid var(--b2); }
.arc-detail-spacer { flex:1; }
.arc-detail-action { min-height:44px; display:inline-flex; align-items:center; padding:0 16px; color:var(--t0); background:var(--paper); border:0; border-radius:var(--arc-radius-sm); box-shadow:inset 0 0 0 1px var(--paper-edge); text-decoration:none; font:650 14px var(--sans); }
.arc-detail-action:hover { box-shadow:inset 0 0 0 1.5px var(--t0); }
body[data-arc-shell='detail'], body[data-arc-shell='compact'] { padding-top:0; }
:where(button, a, summary, input, textarea, select, [tabindex]):focus-visible { outline:2px solid var(--acc2); outline-offset:3px; }
body.arc-ui .nav-links .nav-link:focus-visible { outline-offset:-2px; }

@media (max-width:1279px) {
  body.arc-ui > .topnav.arc-app-nav {
    grid-template-columns:minmax(0,1fr) auto; grid-template-rows:var(--arc-nav-brand-h) var(--arc-nav-strip-h);
    grid-template-areas:'brand right' 'tabs tabs'; padding-block:0;
  }
  body.arc-ui .arc-app-nav .arc-nav-strip { margin-inline:calc(-1 * max(28px, env(safe-area-inset-left))) calc(-1 * max(28px, env(safe-area-inset-right))); border-top:1px solid var(--b1); }
  body.arc-ui .arc-app-nav .nav-links { padding-inline:max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right)); }
  body.arc-ui .nav-logo img { height:46px; }
}
@media (max-width:768px) {
  :root { --text-title:26px; }
  :root { --control-action-h:44px; }
  :root { --arc-page-gutter:16px; }
  body.arc-ui .arc-btn { min-height:44px; }
  body.arc-ui .arc-icon-btn { width:44px; height:44px; min-width:44px; }
  body.arc-ui :is(input,select).arc-input { min-height:44px; }
  body.arc-ui > .topnav { padding:0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); gap:12px; }
  body.arc-ui .arc-app-nav .arc-nav-strip { margin-inline:calc(-1 * max(16px, env(safe-area-inset-left))) calc(-1 * max(16px, env(safe-area-inset-right))); }
  body.arc-ui .arc-app-nav .nav-links { padding-inline:max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); scroll-snap-type:x proximity; }
  body.arc-ui .arc-app-nav .nav-link { scroll-snap-align:start; padding:0 13px; font-size:15px; }
  body.arc-ui .nav-logo img { height:42px; }
  .arc-detail-title { font-size:13px; }
}
@media (max-width:420px) {
  /* The page heading names the shared item; a truncated toolbar title adds nothing. */
  body.arc-ui .arc-detail-nav .arc-detail-title { display:none; }
  /* Narrow phones use the original icon crop of the ArcShare artwork (see test/logo.browser.js). */
  html[data-theme='dark'] body.arc-ui .topnav .nav-logo img.logo-dark,
  html[data-theme='light'] body.arc-ui .topnav .nav-logo img.logo-light { display:none; }
  body.arc-ui .topnav .arc-original-mobile-mark { display:block; width:52px; height:36px; }
  .arc-detail-title { padding-inline-start:12px; }
}
@media (prefers-reduced-motion:no-preference) {
  body.arc-ui :is(.arc-btn,.nav-link,.nav-theme-btn,.arc-detail-action) { transition:background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease); }
  body.arc-ui .nav-links { scroll-behavior:smooth; }
}
@keyframes arc-pop { from { opacity:0; transform:translateY(-4px) scale(.985); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto; transition-duration:0s !important; animation-duration:0s !important; } }

/* A normal-flow footer for pages that already render the attribution. */
body.arc-footer-shell { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
body.arc-footer-shell > #app { flex-shrink:0; }
#vlyntro-built-by { display:flex; flex-shrink:0; justify-content:center; align-items:center; gap:10px; margin-top:auto; padding:64px 20px 24px; color:var(--t2); font:500 12px var(--sans); }
#vlyntro-built-by a { display:inline-flex; align-items:center; gap:8px; color:var(--t2); text-decoration:none; opacity:.85; }
#vlyntro-built-by a:hover, #vlyntro-built-by a:focus-visible { opacity:1; color:var(--t0); }
#vlyntro-built-by svg { display:block; flex:none; width:26px; height:26px; stroke:none; }
.vlyntro-wordmark { font:800 16px/1 var(--sans); letter-spacing:-.045em; }

/* One floating description, anchored and clamped by arc-tooltip.js. */
.arc-tooltip { position:fixed; inset:auto; margin:0; z-index:var(--layer-tooltip,1000); box-sizing:border-box; width:max-content; max-width:280px; padding:7px 10px; border:0; border-radius:var(--arc-radius-sm); background:var(--arc-ticket); color:#E8F1FA; box-shadow:var(--shadow-md); font:500 12.5px/1.45 var(--sans); overflow-wrap:anywhere; }
.arc-tooltip[hidden] { display:none; }
.arc-tooltip::backdrop { background:transparent; pointer-events:none; }
@media print { body.arc-ui > .topnav, #vlyntro-built-by { display:none !important; } }
@media (max-width:768px) {
  #vlyntro-built-by { padding-top:32px; }
  #vlyntro-built-by a { min-height:44px; }
}
@media (prefers-reduced-motion:no-preference) {
  #vlyntro-built-by a { transition:color .12s, opacity .12s; }
}

/* Workbench materials, shared by every route: paper, the cutting mat and its ruler marks.
   Patterns are SVG so no route needs CSS gradients for them. */
:root {
  --paper:#23262D;
  --paper-edge:rgba(240,238,232,.10);
  --mat:#191B21;
  --mat-tick:rgba(240,238,232,.30);
  --mat-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 .5H32M.5 0V32' fill='none' stroke='%23F0EEE8' stroke-opacity='.05'/%3E%3C/svg%3E");
  --tick-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='14'%3E%3Crect width='1.5' height='12'/%3E%3Crect x='8' width='1' height='5'/%3E%3Crect x='16' width='1' height='8'/%3E%3Crect x='24' width='1' height='5'/%3E%3C/svg%3E");
  --tick-y:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='32'%3E%3Crect width='12' height='1.5'/%3E%3Crect y='8' width='5' height='1'/%3E%3Crect y='16' width='8' height='1'/%3E%3Crect y='24' width='5' height='1'/%3E%3C/svg%3E");
  --tick-ruler:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='24'%3E%3Crect width='2' height='22'/%3E%3Crect x='10' width='1' height='9'/%3E%3Crect x='20' width='1' height='9'/%3E%3Crect x='25' width='1' height='14'/%3E%3Crect x='30' width='1' height='9'/%3E%3Crect x='40' width='1' height='9'/%3E%3C/svg%3E");
  --azure-soft:#1B2A4A;
  --marker:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 3.2 100 0v8L0 10z' fill='%23DDFB3C'/%3E%3C/svg%3E");
  --azure-soft-ink:#BFD3FF;
  --kind-pdf:#D9352F;
  --kind-img:#0E7C66;
  --shadow-paper:0 1px 0 rgba(0,0,0,.4),0 20px 34px -18px rgba(0,0,0,.8);
  --shadow-lift:0 1px 0 rgba(0,0,0,.4),0 34px 46px -22px rgba(0,0,0,.85);
}
html[data-theme='light'] {
  --paper:#FFFFFF;
  --paper-edge:rgba(21,22,26,.12);
  --mat:#E2DED4;
  --mat-tick:rgba(21,22,26,.30);
  --mat-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 .5H32M.5 0V32' fill='none' stroke='%2315161A' stroke-opacity='.075'/%3E%3C/svg%3E");
  --azure-soft:#DCE7FF;
  --azure-soft-ink:#0F55E0;
  --shadow-paper:0 1px 0 rgba(21,22,26,.06),0 18px 30px -18px rgba(21,22,26,.45);
  --shadow-lift:0 1px 0 rgba(21,22,26,.06),0 30px 40px -22px rgba(21,22,26,.5);
}