/* "Use with the Codeshed app" dialog (#link-app): opened by the paid print workshop, sticker sheet and batch buttons
   while this computer isn't linked to a subscribed app. Claude, 1 Nov 2026; plain styling on the studio's tokens. */
.link-app { width:min(520px, calc(100vw - 32px)); }
.link-app-body { padding:4px 22px 22px; display:grid; gap:14px; }
.link-app-eyebrow { margin:0; font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--orange-text, #98501D); }
.link-app-lead { margin:0; }
.link-app-steps { margin:0; padding:0; list-style:none; counter-reset:step; display:grid; gap:10px; }
.link-app-steps li { counter-increment:step; display:grid; grid-template-columns:28px 1fr; column-gap:10px; }
.link-app-steps li::before { content:counter(step); grid-row:span 2; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:13px; background:var(--timber, #D9822B); color:#292C28; }
.link-app-steps b { font-weight:700; }
.link-app-steps span { color:var(--muted, #6C7068); font-size:14px; }
.link-app-qr { display:grid; gap:4px; padding:16px; border:1px dashed var(--line, #E5E5DD); border-radius:14px; background:var(--soft, #F1F1EA); text-align:center; }
.link-app-qr span { color:var(--muted, #6C7068); font-size:14px; }
.link-app .hint { margin:0; }
/* Working link and Save to my app (Claude, 2 Nov 2026): one view at a time, the pairing QR, messages. */
.link-app-view { display:grid; gap:14px; }
.link-app-view[hidden] { display:none; }
.link-app-view > .btn { justify-self:start; }
.link-app-qr .link-qr { justify-self:center; width:232px; height:232px; background:#FFFFFF; border-radius:10px; }
.link-app-qr .link-qr svg { display:block; width:232px; height:232px; }
.link-app-msg { margin:0; min-height:1.4em; font-weight:600; }
.link-app .check { display:flex; gap:8px; align-items:center; }
.link-app .check[hidden], .link-app .hint[hidden] { display:none; }
.app-entry { margin-top:8px; }
/* Editing a code from My codes: the bar above the studio (Claude, 2 Nov 2026). */
.edit-bar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin:0 0 14px; padding:12px 14px;
  border:1px solid var(--timber, #D9822B); border-radius:14px; background:var(--soft, #F1F1EA); }
.edit-bar[hidden] { display:none; }
.edit-bar-text { display:grid; gap:2px; min-width:0; flex:1 1 260px; }
.edit-bar-text b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reprint { margin:4px 0 0; padding:8px 10px; border-radius:10px; font-size:14px; font-weight:600; line-height:1.4; }
.reprint[hidden] { display:none; }
.reprint::before { margin-right:6px; }
.reprint-ok { background:rgba(62,122,78,.12); color:var(--green, #3E7A4E); }
.reprint-ok::before { content:"✓"; }
.reprint-warn { background:rgba(217,130,43,.16); color:var(--orange-text, #98501D); border:1px solid var(--timber, #D9822B); }
.reprint-warn::before { content:"⚠"; }
.reprint-info { background:var(--paper, #FFFFFF); color:var(--muted, #6C7068); font-weight:500; }
.reprint-help { font-size:13px; color:var(--muted, #6C7068); }
.reprint-help summary { cursor:pointer; font-weight:600; color:var(--ink); padding:4px 0; }
.reprint-help ul { margin:4px 0 0; padding-left:18px; display:grid; gap:4px; }
.edit-bar-eyebrow { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-text, #98501D); }
.edit-bar-btns { display:flex; gap:8px; flex-wrap:wrap; }
/* Until the apps are out (APP_AVAILABLE in scripts/build.mjs), "Save to my app" isn't offered. */
html:not([data-app-link]) [data-save-app] { display:none; }

/* "Your codes, in your pocket": the app's store buttons ("Coming soon" until APP_AVAILABLE in scripts/build.mjs). */
.store-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 10px}
.store-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:8px 18px 8px 14px;border-radius:12px;background:var(--ink,#1d1b19);color:var(--paper,#fff);text-decoration:none;line-height:1.15}
.store-btn .ui-icon{width:22px;height:22px;flex:none}
.store-btn span{display:flex;flex-direction:column}
.store-btn small{font-size:11px;opacity:.85}
.store-btn b{font-size:17px;letter-spacing:-.2px}
.store-btn[aria-disabled="true"]{cursor:default;opacity:.72}
a.store-btn[href]:hover{opacity:.9}
.get-app-note{color:var(--muted);font-size:13px}

/* The link code as text, to type into the app instead of scanning. */
.link-typed-row { font-size:13px; color:var(--muted); }
.link-typed { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:18px; letter-spacing:2px; color:var(--ink); display:block; margin-top:4px; }