/* css/requests.css — the artist's inbox.
   Tokens only, no literal colours: this renders inside the admin shell and
   has to follow whatever the surface is doing. Four of the bugs in this
   codebase were a colour hardcoded for one context in a component that
   renders in two. */

.rq{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:20px;align-items:start}
@media(max-width:900px){.rq{grid-template-columns:1fr}}

.rq-count{font-family:var(--mono,var(--mn));font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.rq-count b{font-family:var(--disp,var(--dsp));font-size:1.4rem;font-weight:400;color:var(--paper)}

.rq-list{display:flex;flex-direction:column;gap:6px}
.rq-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:var(--ink2);border:1px solid var(--line);border-radius:var(--radius-s);
  padding:11px 13px;transition:border-color .15s}
.rq-row:hover{border-color:var(--dim)}
.rq-row.on{border-color:var(--red);background:var(--ink3)}
.rq-row-t{flex:1;min-width:0}
.rq-row-t b{display:block;font-weight:400;font-size:.92rem}
.rq-row-t small{display:block;font-size:.72rem;color:var(--dim);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rq-row-m{flex:none;text-align:right}
.rq-row-m small{display:block;font-size:.62rem;color:var(--dim);margin-top:4px}
.rq-tag{font-style:normal;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:3px;padding:2px 6px;color:var(--dim)}
.rq-row.s-new .rq-tag{border-color:var(--red);color:var(--red)}
.rq-row.s-booked .rq-tag{border-color:var(--acid);color:var(--acid)}

.rq-pane{min-width:0}
.rq-pick{font-size:.82rem;color:var(--dim);padding:26px 0}

.rq-detail{border:1px solid var(--line);border-radius:var(--radius);
  background:var(--ink2);padding:18px}
.rq-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.rq-head > div{flex:1;min-width:0}
.rq-head b{display:block;font-family:var(--disp,var(--dsp));font-weight:400;font-size:1.4rem}
.rq-head small{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-top:3px}
.rq-close{background:none;border:1px solid var(--line);border-radius:var(--radius-pill);
  color:var(--dim);padding:.3rem .8rem;font-size:.66rem;cursor:pointer}
.rq-close:hover{border-color:var(--paper);color:var(--paper)}

/* the email, up top. This is the product working — the artist has what
   they need to answer without another round trip. */
.rq-reach{border:1px solid var(--red);border-radius:var(--radius-s);padding:12px 14px;
  margin-bottom:14px;background:color-mix(in srgb,var(--red) 5%,transparent)}
.rq-reach-l{display:block;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin-bottom:6px}
.rq-mail,.rq-tel{display:inline-block;margin-right:14px;color:var(--paper);
  font-size:.95rem;text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.rq-mail:hover,.rq-tel:hover{color:var(--red)}
.rq-reach small{display:block;font-size:.66rem;color:var(--dim);margin-top:8px;line-height:1.5}

.rq-wanted{font-size:.82rem;color:var(--dim);margin-bottom:12px}
.rq-wanted b{color:var(--paper);font-weight:400}

.rq-answers{display:grid;grid-template-columns:auto 1fr;gap:0;margin-bottom:14px;
  border-top:1px solid var(--faint)}
.rq-answers dt{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  padding:.5rem .9rem .5rem 0;border-bottom:1px solid var(--faint);white-space:nowrap}
.rq-answers dd{font-size:.86rem;padding:.5rem 0;border-bottom:1px solid var(--faint);
  word-break:break-word}

.rq-pics{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.rq-pics img{width:92px;height:92px;object-fit:cover;border:1px solid var(--line);
  border-radius:var(--radius-s);display:block}
.rq-pics a:hover img{border-color:var(--red)}

.rq-quote{border-top:1px solid var(--line);padding-top:14px}
.rq-quote-h{display:block;font-family:var(--disp,var(--dsp));font-weight:400;font-size:1.1rem;
  text-transform:uppercase;margin-bottom:10px}
.rq-two{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media(max-width:560px){.rq-two{grid-template-columns:1fr}}
.rq-quote label,.rq-f{display:block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:.7rem}
.rq-quote input,.rq-quote textarea{display:block;width:100%;margin-top:.3rem;
  background:var(--ink);border:1px solid var(--line);border-radius:var(--radius-s);
  padding:.6rem .7rem;font-size:.9rem;color:var(--paper);letter-spacing:normal;
  text-transform:none}
.rq-quote input:focus,.rq-quote textarea:focus{outline:0;border-color:var(--acid)}
.rq-fine{font-size:.66rem;color:var(--dim);margin:-.3rem 0 .8rem;line-height:1.5}

.rq-act{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.rq-btn{background:var(--acid);color:var(--ink);border:0;border-radius:var(--radius-pill);
  padding:.6rem 1.3rem;font-family:var(--disp,var(--dsp));font-size:.9rem;letter-spacing:.05em;
  text-transform:uppercase;cursor:pointer}
.rq-btn:disabled{opacity:.5;cursor:wait}
.rq-btn.ghost{background:none;border:1px solid var(--line);color:var(--dim);
  font-family:inherit;font-size:.72rem;letter-spacing:.08em}
.rq-btn.ghost:hover{border-color:var(--paper);color:var(--paper)}

.rq-hist{margin-top:16px;border-top:1px solid var(--faint);padding-top:12px}
.rq-hist b{display:block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin-bottom:8px}
.rq-hist p{font-size:.78rem;color:var(--dim);line-height:1.6;margin-bottom:4px}
.rq-hist i{font-style:normal;color:var(--paper);opacity:.7}

.rq-empty{border:1px dashed var(--line);border-radius:var(--radius);padding:26px 22px;
  text-align:center}
.rq-empty b{display:block;font-family:var(--disp,var(--dsp));font-weight:400;font-size:1.3rem;
  margin-bottom:8px}
.rq-empty p{font-size:.82rem;color:var(--dim);line-height:1.6;max-width:34rem;margin:0 auto 8px}
.rq-empty-cta code{color:var(--acid);font-size:.86rem}

/* the unread dot on the rail */
.adm-nav .rq-dot{margin-left:auto;flex:none;min-width:18px;height:18px;border-radius:9px;
  background:var(--red);color:#fff;font-size:.62rem;font-style:normal;display:grid;
  place-items:center;padding:0 5px}

/* the confirmation screen's contact echo — the only typo check that
   exists, since there is no confirmation email and no way back in */
.reach{border:1px solid var(--acid);border-radius:var(--radius);padding:16px 18px;
  margin-bottom:16px;background:color-mix(in srgb,var(--acid) 6%,transparent);text-align:left}
.reach b{display:block;font-family:var(--disp,var(--dsp));font-weight:400;font-size:1.5rem;
  word-break:break-all;line-height:1.15}
.reach span{display:block;font-size:1rem;color:var(--paper);opacity:.8;margin-top:4px}
.reach small{display:block;font-size:.74rem;color:var(--dim);margin-top:10px;line-height:1.6}
.reach a{color:var(--acid);text-decoration:underline;text-underline-offset:3px}

/* a mount the editor hands wholly to a module — no panel chrome of its
   own, because requests.js and booking-setup.js each draw their own */
.ed-panel-plain{margin:0}

/* ── the menu, before and after sign-in ──────────────────────────────────
   js/firebase.js toggles `authed` on <html> on the first auth answer.
   Default state is signed-OUT so the menu is never wrong on first paint:
   an artist sees "Sign in" for a frame and it becomes "Your page", rather
   than the reverse, which would offer a signed-out visitor a page that
   isn't theirs. */
.only-in{display:none}
html.authed .only-in{display:block}
html.authed .only-out{display:none}

/* ── the bell ────────────────────────────────────────────────────────────
   On the free plan nothing is emailed, so this and the rail dot are the
   only way an artist finds out a request arrived. That makes it a load-
   bearing control rather than an ornament, which is why it sits in the
   top bar on every section instead of only on Requests. */
.adm-bell{position:relative;display:inline-grid;place-items:center;
  width:38px;height:38px;flex:none;border-radius:9999px;
  border:1px solid var(--line);color:var(--dim);text-decoration:none;
  transition:border-color .18s,color .18s}
.adm-bell:hover{border-color:var(--paper);color:var(--paper)}
.adm-bell .soc-svg{width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* waiting requests: the bell stops being quiet furniture */
.adm-bell.has{border-color:var(--red);color:var(--red)}
.adm-bell-n{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;
  padding:0 5px;border-radius:9999px;background:var(--red);color:#fff;
  font-style:normal;font-size:.62rem;line-height:18px;text-align:center;
  font-family:var(--mn);letter-spacing:0}
.adm-bell-n[hidden]{display:none}

/* one soft pulse on arrival, once — a badge that throbs forever is a
   badge people learn to stop seeing */
@keyframes bell-in{0%{transform:scale(.4);opacity:0}
                   60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
.adm-bell.has .adm-bell-n{animation:bell-in .32s cubic-bezier(.65,.05,0,1)}
@media(prefers-reduced-motion:reduce){.adm-bell.has .adm-bell-n{animation:none}}

/* the lead line that replaced the "Requests go to" email field */
.ed-note-lead{margin-bottom:1rem;font-size:.8rem!important;line-height:1.65}

@media(max-width:620px){.adm-bell{width:34px;height:34px}}


/* the link out of the client form's "not open yet" screen — it replaced a
   line telling the artist to open dev tools, which is not a thing to ask
   of someone whose job is drawing */
.notopen-go{display:inline-block;margin-top:1rem;padding:.8rem 1.4rem;
  border:1px solid currentColor;border-radius:9999px;text-decoration:none;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.notopen-go:hover{opacity:.75}

/* ── the notification banner ─────────────────────────────────────────────
   Free plan sends no email, so this strip is the only way an artist finds
   out a request arrived. That makes it the most important thing on the
   screen the moment it exists — hence a full-width bar rather than a dot
   on an icon in a corner. It removes itself when the inbox is opened. */

/* ── the preview banner on the client form ───────────────────────────────
   Fixed, so it is still there at the bottom of a long form. The artist has
   to be able to tell at any point that what they are looking at is not
   going to reach anybody. */
.preview-bar{position:fixed;left:0;right:0;bottom:0;z-index:120;
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  padding:.7rem 1.1rem;background:#ffb020;color:#1c1613;
  font:12px/1.5 var(--mn,'Space Mono',monospace)}
.preview-bar b{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase}
.preview-bar span{opacity:.8}
/* keep the form's own bottom controls clear of it */
body.is-preview{padding-bottom:3.4rem}
@media(max-width:620px){.preview-bar{font-size:11px;padding:.6rem .8rem}}

/* ── unread requests ─────────────────────────────────────────────────────
   Read state is per request, so the list has to show which is which. A
   left rule and a dot, in the accent — the same language every inbox uses,
   because this is the one screen where an artist should not have to learn
   anything. */
.rq-row{position:relative}
.rq-row.unread{border-color:var(--red);
  background:color-mix(in srgb, var(--red) 6%, var(--ink2))}
.rq-row.unread .rq-row-t b{font-weight:700}
.rq-row.unread .rq-tag{border-color:var(--red);color:var(--red)}
.rq-new{position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;
  border-radius:var(--radius-s) 0 0 var(--radius-s);background:var(--red)}
.rq-row.on{border-color:var(--paper)}

/* ── the two pills in the Booking panel ──────────────────────────────────
/* the location pin beside the town on the wall. Lives here because
   css/link-wall.css is the wall's own sheet and this is one rule — move
   it there if the wall ever grows a second. */
.who-town{display:inline-flex;align-items:center;gap:.32em;white-space:nowrap}
.who-pin{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.8}

/* ── the bell, when something is waiting ─────────────────────────────────
   It was an outline with a white count floating on it — the number sat on
   the page background and was barely readable. Waiting requests turn the
   whole control solid: red field, white glyph, white count. On the free
   plan this is one of only three places an artist ever learns a request
   arrived, so it should read from across a desk. */
.adm-bell.has{background:var(--red);border-color:var(--red);color:#fff}
.adm-bell.has .soc-svg{stroke:#fff}
.adm-bell.has:hover{filter:brightness(1.12)}

/* the count rides on the solid bell — a white pill with red figures, so
   it stays legible against the field behind it */
.adm-bell.has .adm-bell-n{background:#fff;color:var(--red);
  border:2px solid var(--ink);font-weight:700}

/* Studio is not buyable yet, so the button says so instead of opening a
   modal that sells nothing */
.btn.ed-soon{opacity:.55;cursor:default;background:none;
  border:1px solid var(--line);color:var(--dim);font-weight:400}
.btn.ed-soon:hover{filter:none;border-color:var(--line);color:var(--dim)}

/* ── the wall's foot, inside the editor's phone preview ──────────────────
   The preview and the public page render the SAME markup from
   js/link-wall.js but load different stylesheets: index.html has
   css/wall.css, profile.html has css/link-wall.css. So every rule written
   for the wall has to be written twice, or the preview shows something the
   client will never see — which is how a 15px signature came out as a
   300px octopus filling the bottom of the phone.

   page-render.js puts .lw on whatever it draws into, so this scopes to the
   embedded wall without touching the editor around it. */
.lw .foot{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;
  align-items:center;gap:14px}
.lw .foot .check{display:none}          /* no client status page on free */

/* the same pill, scaled for a phone mock — the artist should see the badge
   their clients will, at the size it will be relative to the page */
.lw .foot .credit{display:inline-flex;align-items:center;gap:.4em;
  padding:9px 16px;border-radius:999px;background:var(--text);color:var(--bg);
  font-size:10px;font-weight:700;letter-spacing:.02em;text-transform:none;
  text-decoration:none;white-space:nowrap}
.lw .foot .credit i{font-style:normal;font-weight:700}
.lw .foot .credit b{color:var(--accent);font-weight:700}
.lw .foot .credit[hidden]{display:none}

/* centred, never fixed: inside a phone mock a fixed credit would escape
   the frame and pin itself to the corner of the editor */
.lw .foot .ijs{display:inline-flex;align-items:center;gap:6px;position:static;
  align-self:center;font-size:8px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;opacity:.55}
.lw .foot .ijs i{font-style:normal;color:var(--accent)}
.lw .foot .ijs img{width:13px;height:13px;flex:none;display:block;
  object-fit:contain;filter:brightness(0) invert(var(--icon-inv,1));opacity:.75}
/* the phone is narrow enough that the full string never fits */
.lw .foot .ijs .ijs-studios{display:none}

/* and the pin, same reason */
.lw #who .who-town{display:inline-flex;align-items:center;gap:.32em;white-space:nowrap}
.lw #who .who-pin{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.8}

/* the corners, inside the editor's phone preview. The overlays they open
   are appended to <body> and picked up by the rules above, so only the
   buttons themselves need a copy here. */
.lw .corners{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px}
.lw .corner{display:grid;place-items:center;width:32px;height:32px;
  border-radius:999px;border:1px solid var(--edge);background:var(--card);
  color:var(--text);cursor:pointer}
.lw .corner[hidden]{display:none}
.lw .corner b{font:400 11px/1 var(--disp)}
.lw .corner b i{font-style:normal;color:var(--accent)}
.lw .corner svg{width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── the embed snippet ───────────────────────────────────────────────────
   Selectable, scrollable, and monospaced. An artist is going to
   triple-click this and paste it into a Squarespace code block, so it has
   to survive being selected — hence no pointer-events tricks and no
   truncation with an ellipsis, which would silently copy a broken tag. */
.emb-box{margin:.9rem 0;padding:.85rem 1rem;border:1px solid var(--line);
  border-radius:var(--radius-s);background:var(--ink);overflow-x:auto}
.emb-box code{display:block;white-space:pre;font-family:var(--mn);
  font-size:.78rem;line-height:1.6;color:var(--acid);
  -webkit-user-select:all;user-select:all}

.emb-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.emb-hint{font-size:.72rem;color:var(--dim)}
@media(max-width:620px){.emb-hint{width:100%}}

/* ── the embed picker ────────────────────────────────────────────────────
   Colours are free. A dark button on a dark website is broken, not
   premium, and charging for the ability to not look broken is the kind of
   gate that makes people leave. The label and the logo cost money —
   that is vanity rather than function. */
.emb-picks{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .6rem}
.emb-pick{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  background:none;border:1px solid var(--line);border-radius:var(--radius-pill);
  color:var(--dim);padding:.45rem .85rem;font-size:.74rem}
.emb-pick:hover{border-color:var(--dim);color:var(--paper)}
.emb-pick.on{border-color:var(--acid);color:var(--acid);background:var(--ink3)}
.emb-pick i{flex:none;width:13px;height:13px;border-radius:50%;
  border:1px solid var(--line)}
.sw-dark{background:#141412}
.sw-light{background:#ffffff}
.sw-accent{background:#c22f2f}
.sw-bone{background:#efe9dd}
.sw-acid{background:#1f8a4c}

/* the stage the real button is drawn onto. Checkerboard, so a white
   button is visible and a dark one is too — the artist is choosing
   against an unknown background on their own site. */
.emb-stage{margin:.4rem 0 1rem;padding:18px;border-radius:var(--radius-s);
  border:1px solid var(--line);
  background-color:#8f8a7e;
  background-image:
    linear-gradient(45deg,rgba(0,0,0,.13) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.13) 75%),
    linear-gradient(45deg,rgba(0,0,0,.13) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.13) 75%);
  background-size:16px 16px;background-position:0 0,8px 8px}

/* the locked upgrade row, matching the one in the booking tunnel */
.emb-lock{display:flex;align-items:flex-start;gap:1rem;margin-top:1rem;
  padding-top:.8rem;border-top:1px solid var(--faint);cursor:default;opacity:.8}
.emb-lock span{flex:1;min-width:0}
.emb-lock b{display:block;font-size:.88rem;font-weight:400}
.emb-lock small{display:block;font-size:.72rem;color:var(--dim);margin-top:2px;
  line-height:1.5}
.emb-lock input[type=checkbox]{flex:none;width:17px;height:17px;margin-top:2px;
  accent-color:var(--amber);cursor:not-allowed}

/* ── the two buttons in the Booking panel ────────────────────────────────
   bk-pill, not ed-go. css/styles.css already owns .ed-go, and whatever it
   says there beat every attempt to override it from here — the primary
   button rendered almost invisible against the paper background twice.
   A class name nothing else uses cannot lose a fight with a rule I cannot
   see. Worth remembering the next time a style refuses to apply: rename
   before you add specificity. */
.bk-pills{display:flex;flex-direction:column;align-items:stretch;gap:.6rem;
  max-width:22rem;margin:1rem 0 0}
.bk-pill{display:inline-flex;align-items:center;justify-content:center;
  padding:.9rem 1.4rem;border-radius:9999px;
  background:var(--red);color:#fff;border:1px solid var(--red);
  text-decoration:none;text-align:center;
  font-family:var(--mn);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;line-height:1;
  transition:filter .18s,transform .1s}
.bk-pill:hover{filter:brightness(1.12);color:#fff}
.bk-pill:active{transform:scale(.99)}
.bk-pill.ghost{background:color-mix(in srgb,var(--red) 8%,transparent);
  color:var(--red);font-weight:400;letter-spacing:.1em}
.bk-pill.ghost:hover{background:color-mix(in srgb,var(--red) 16%,transparent);
  filter:none;color:var(--red)}
@media(max-width:620px){.bk-pills{max-width:none}}

/* ── the bell's dropdown ─────────────────────────────────────────────────
   Facebook's move: the bell opens a small panel saying WHO asked — one
   row per unread request, newest first — with the inbox link at its
   foot. It replaced the banner strip: same data, calmer shell, and one
   tap lands on the exact request instead of the top of the list. */
.adm-bellwrap{position:relative;display:inline-block}
.adm-drop{position:absolute;top:calc(100% + 10px);right:0;z-index:90;
  width:min(340px,calc(100vw - 24px));
  background:var(--ink2,#fff);border:1px solid var(--line);
  border-radius:var(--radius);padding:6px;
  box-shadow:0 18px 44px -18px rgb(0 0 0/.3)}
.adm-drop-h{padding:8px 10px 6px;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim)}
.adm-drop-row{display:block;width:100%;text-align:left;background:none;
  border:0;border-radius:10px;padding:9px 10px;cursor:pointer}
.adm-drop-row:hover{background:color-mix(in srgb,var(--paper) 5%,transparent)}
.adm-drop-row b{display:block;font-weight:700;font-size:.86rem}
.adm-drop-row b::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--red,var(--accent));margin-right:8px;
  vertical-align:2px}
.adm-drop-row small{display:block;color:var(--dim);font-size:.72rem;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-drop-empty{padding:4px 10px 10px;font-size:.78rem;color:var(--dim)}
.adm-drop-all{display:block;text-align:center;padding:10px;margin-top:4px;
  border-top:1px solid var(--faint);font-size:.72rem;letter-spacing:.08em;
  color:var(--paper);text-decoration:none}
.adm-drop-all:hover{color:var(--red,var(--accent))}

/* ── tier frames ─────────────────────────────────────────────────────────
   The amber wash that marks a corner of the UI as Artist territory. The
   .plan-badge pills themselves are defined in styles.css; these frames
   sit around the two gated corners of this sheet: the quote box in the
   inbox, and the label-and-logo lock on the embed card. */
.rq-tier{border:1px solid rgba(217,165,33,.45);border-radius:14px;
  background:rgba(232,177,60,.06);padding:16px}
.rq-quote-h{display:flex;align-items:center;gap:8px}
.emb-lock.tiered{border:1px solid rgba(217,165,33,.45);border-radius:12px;
  background:rgba(232,177,60,.06);padding:12px 14px}