/* ArcShare clipboard content. Shared tokens and primitives: workspace-ui.css. */
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; max-width:100%; overflow-x:hidden; }
:root { --clip-max:1080px; }
.clip-shell { width:min(var(--workspace-max),calc(100% - var(--arc-page-gutter) - var(--arc-page-gutter))); margin:0 auto; padding:32px 0 56px; }
.clip-landing,.clip-workspace,.clip-expired { min-height:calc(100vh - var(--arc-nav-h) - 102px); }
.clip-hero { max-width:none; margin:0 0 24px; text-align:left; }
.clip-eyebrow,.clip-kicker { font-family:var(--mono); font-size:var(--text-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--acc2); }
.clip-hero h1 { font-size:var(--text-title); line-height:1.2; letter-spacing:-.6px; margin:0 0 8px; color:var(--t0); font-weight:650; }
.clip-hero p { font-size:14px; line-height:1.5; color:var(--t2); max-width:720px; margin:0; }
.clip-trust { display:flex; justify-content:flex-start; gap:8px; flex-wrap:wrap; margin-top:16px; }
.clip-trust span { font-family:var(--mono); font-size:var(--text-xs); color:var(--t3); padding:5px 9px; border:1px solid var(--b2); background:var(--s1); border-radius:var(--arc-radius-md); }
.clip-start-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.clip-panel,.clip-composer,.clip-items-section { background:var(--s1); border:1px solid var(--b2); border-radius:var(--arc-radius-md); box-shadow:none; }
.clip-panel { padding:20px; }
.clip-panel-head,.clip-composer-head,.clip-items-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.clip-panel-head { margin-bottom:20px; }
.clip-panel h2,.clip-items-head h2 { font-size:16px; letter-spacing:-.35px; margin-top:4px; }
.clip-step { font-family:var(--mono); font-size:var(--text-xs); color:var(--t3); padding:5px 8px; border:1px solid var(--b2); border-radius:7px; display:none; }
.clip-label { display:flex; justify-content:space-between; gap:10px; margin:12px 0 6px; font-size:12px; font-weight:600; color:var(--t2); font-family:var(--sans); }
.clip-label span { font-weight:400; color:var(--t3); }
.clip-input { width:100%; height:44px; border:1px solid var(--b2); background:var(--s2); color:var(--t0); border-radius:var(--arc-radius-sm); padding:0 12px; outline:none; font-size:13.5px; }
.clip-input:focus,#clip-input:focus { border-color:var(--acc2); box-shadow:none; }
.clip-code-input { font-family:var(--mono); letter-spacing:.08em; }
.clip-primary,.clip-secondary,.clip-tertiary,.clip-back,.clip-reopen { border:0; cursor:pointer; font:inherit; }
.clip-primary { height:42px; padding:0 16px; background:var(--acc); color:#fff; border-radius:var(--arc-radius-md); font-size:13px; font-weight:700; transition:opacity .12s,transform .12s; }
.clip-primary:hover { opacity:.9; }
.clip-primary:active { transform:none; }
.clip-panel>.clip-primary { width:100%; margin-top:16px; }
.clip-secondary,.clip-tertiary { display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0 11px; border:1px solid var(--b2); background:var(--s2); color:var(--t1); border-radius:8px; font-size:var(--text-xs); font-weight:600; white-space:nowrap; }
.clip-secondary:hover,.clip-tertiary:hover { background:var(--s3); border-color:var(--b3); color:var(--t0); }
.clip-tertiary { background:transparent; }
.clip-tertiary.danger { color:var(--red); }
.clip-tertiary.danger:hover { background:var(--reb); border-color:var(--rer); }
.clip-join-row { display:grid; grid-template-columns:1fr auto; gap:8px; }
.clip-reopen { width:100%; margin-top:10px; padding:9px 12px; border:1px dashed var(--b2); background:transparent; color:var(--t2); border-radius:var(--arc-radius-md); font-size:var(--text-xs); text-align:left; }
.clip-reopen:hover { border-color:var(--b3); background:var(--s2); color:var(--t0); }
.clip-note { margin:16px auto 0; max-width:760px; text-align:center; color:var(--t3); font-size:var(--text-xs); line-height:1.6; }
.clip-workspace-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; }
.clip-workspace-title { display:flex; align-items:center; gap:12px; }
.clip-workspace-title h1 { font-family:var(--mono); font-size:26px; letter-spacing:.12em; margin-top:2px; }
.clip-back { width:36px; height:36px; border:1px solid var(--b2); background:var(--s1); color:var(--t2); border-radius:var(--arc-radius-md); font-size:18px; }
.clip-back:hover { color:var(--t0); border-color:var(--b3); }
.clip-live { display:flex; align-items:center; gap:8px; font-size:var(--text-xs); color:var(--t3); }
.clip-live span { width:8px; height:8px; border-radius:50%; background:var(--amb); box-shadow:none; }
.clip-live.online span { background:var(--go); box-shadow:none; }
.clip-live.offline span { background:var(--red); box-shadow:none; }
.clip-live strong { font-weight:600; }
.clip-sharebar { display:flex; align-items:center; gap:14px; padding:13px 15px; background:var(--s1); border:1px solid var(--b2); border-radius:var(--arc-radius-md); margin-bottom:10px; }
.clip-share-code { display:flex; align-items:center; gap:9px; min-width:0; }
.clip-share-code span,.clip-expiry { font-size:var(--text-xs); color:var(--t3); }
.clip-share-code strong { font-family:var(--mono); font-size:14px; letter-spacing:.1em; }
.clip-share-actions { display:flex; gap:7px; margin-left:auto; }
.clip-expiry { font-family:var(--mono); white-space:nowrap; }
.clip-qr-wrap { display:flex; align-items:center; gap:16px; padding:16px; background:var(--s1); border:1px solid var(--b2); border-radius:var(--arc-radius-md); margin-bottom:10px; }
.clip-qr-wrap img { width:112px; height:112px; background:#fff; border-radius:8px; padding:5px; }
.clip-qr-wrap div { display:grid; gap:4px; }
.clip-qr-wrap strong { font-size:13px; }
.clip-qr-wrap span { font-size:var(--text-xs); color:var(--t2); line-height:1.5; }
.clip-composer { padding:18px; margin:14px 0; }
.clip-composer-head { align-items:center; }
.clip-composer-head>div:first-child { display:grid; gap:3px; }
.clip-composer-head span { font-size:var(--text-xs); color:var(--t3); }
.clip-composer-actions { display:flex; gap:6px; }
#clip-input { width:100%; min-height:128px; max-height:320px; resize:vertical; margin-top:12px; border:1px solid var(--b2); background:var(--bg); color:var(--t0); border-radius:var(--arc-radius-sm); padding:13px 14px; outline:none; font-family:var(--mono); font-size:12.5px; line-height:1.65; }
#clip-input::placeholder { font-family:var(--sans); color:var(--t3); }
.clip-composer-foot { display:flex; align-items:center; gap:10px; margin-top:9px; }
.clip-composer-foot>span { font-family:var(--mono); font-size:var(--text-xs); color:var(--t3); }
.clip-keyhint { margin-left:auto; }
.clip-add { height:36px; }
.clip-items-section { padding:18px; }
.clip-items-head { align-items:center; margin-bottom:14px; }
.clip-empty { padding:50px 16px; text-align:center; border:1px dashed var(--b2); border-radius:var(--arc-radius-md); background:var(--bg); }
.clip-empty-icon { width:52px; height:52px; display:grid; place-items:center; margin:0 auto 12px; border-radius:var(--arc-radius-md); background:var(--s2); border:1px solid var(--b2); font-family:var(--mono); font-weight:700; color:var(--acc2); }
.clip-empty h3 { font-size:14px; margin-bottom:5px; }
.clip-empty p { font-size:var(--text-xs); color:var(--t3); }
.clip-items { display:grid; gap:9px; }
.clip-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:14px; background:var(--bg); border:1px solid var(--b2); border-radius:var(--arc-radius-md); }
.clip-item-main { min-width:0; }
.clip-item-meta { display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.clip-kind { font-family:var(--mono); font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--acc2); padding:3px 6px; border-radius:5px; background:var(--acb); }
.clip-item-time { font-family:var(--mono); font-size:var(--text-xs); color:var(--t3); }
.clip-item-text { font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--t1); white-space:pre-wrap; word-break:break-word; max-height:260px; overflow:auto; }
.clip-item-link { color:var(--acc2); text-decoration:none; word-break:break-all; }
.clip-item-link:hover { text-decoration:underline; }
.clip-item-actions { display:flex; align-items:flex-start; gap:6px; }
.clip-copy.ok { color:var(--go); border-color:var(--gor); background:var(--gob); }
.clip-delete { width:34px; padding:0; color:var(--t3); }
.clip-delete:hover { color:var(--red); background:var(--reb); border-color:var(--rer); }
.clip-expired { display:grid; place-items:center; text-align:center; align-content:center; max-width:560px; margin:0 auto; }
.clip-expired-icon { width:66px; height:66px; display:grid; place-items:center; border-radius:var(--arc-radius-md); background:var(--s1); border:1px solid var(--b2); font-size:28px; margin-bottom:16px; }
.clip-expired h1 { font-size:28px; letter-spacing:-.6px; }
.clip-expired p { color:var(--t2); font-size:13px; line-height:1.6; margin:8px 0 20px; }
.clip-toast { position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,10px); z-index:2000; padding:9px 14px; background:var(--t0); color:var(--bg); border-radius:var(--arc-radius-md); font-size:var(--text-xs); font-weight:600; opacity:0; pointer-events:none; transition:opacity .16s,transform .16s; box-shadow:var(--sh2); }
.clip-toast.show { opacity:1; transform:translate(-50%,0); }
[hidden] { display:none !important; }
@media (max-width:760px) {.clip-shell { width:min(var(--workspace-max),calc(100% - var(--arc-page-gutter) - var(--arc-page-gutter))); padding:32px 0 56px; }
.clip-landing,.clip-workspace,.clip-expired { min-height:calc(100vh - 94px); }
.clip-hero { margin-top:0; margin-bottom:24px; text-align:left; max-width:none; margin:0 0 24px; }
.clip-hero h1 { font-size:var(--text-title); letter-spacing:-.6px; line-height:1.2; font-weight:650; margin:0 0 8px; }
.clip-start-grid { grid-template-columns:1fr; }
.clip-panel { padding:20px; }
.clip-workspace-head { align-items:flex-start; }
.clip-workspace-title h1 { font-size:21px; }
.clip-live strong { display:none; }
.clip-sharebar { align-items:flex-start; flex-wrap:wrap; }
.clip-share-actions { order:3; width:100%; margin-left:0; }
.clip-share-actions .clip-secondary { flex:1; }
.clip-expiry { margin-left:auto; }
.clip-qr-wrap { align-items:flex-start; }
.clip-qr-wrap img { width:96px; height:96px; }
.clip-composer { padding:14px; }
.clip-composer-head { align-items:flex-start; }
.clip-keyhint { display:none; }
.clip-add { margin-left:auto; }
.clip-item { grid-template-columns:1fr; }
.clip-item-actions { justify-content:flex-end; }
.clip-copy { flex:1; }}
@media (prefers-reduced-motion:reduce) {* { scroll-behavior:auto !important; }
.clip-primary,.clip-toast { transition:none; }}