/* Studio and register surfaces. Extends app.css; every value here is one of its
   tokens, so light/dark and the type scale keep working without duplication. */

/* ------------------------------------------------------------------ badges */
/* A badge states a CHECKED fact. It is deliberately plain — no pill gradients,
   no colour-coded reassurance — because the moment a badge looks like a reward
   people start collecting them instead of earning them. */
.badge{display:inline-block;padding:2px 8px;border:1px solid var(--rule2);border-radius:2px;
  font:500 .705rem/1.5 var(--sans);letter-spacing:.075em;text-transform:uppercase;
  color:var(--ink2);background:transparent;vertical-align:baseline;white-space:nowrap}
.badge.homeowner,.badge.verified{border-color:var(--accent);color:var(--accent)}
.badge.designer{border-color:var(--rule2);color:var(--ink2)}
.badge.published,.badge.active{border-color:var(--accent);color:var(--accent)}
.badge.pending{border-color:var(--sun);color:var(--sun)}
.badge.rejected,.badge.suspended{border-color:var(--hot);color:var(--hot)}
.badge.draft{border-color:var(--rule);color:var(--muted)}

/* ------------------------------------------------------------------- forms */
label{display:block;font:500 .735rem/1.4 var(--sans);color:var(--muted);
  letter-spacing:.11em;text-transform:uppercase;margin:15px 0 5px}
input[type=text],input[type=number],input[type=url],input[type=password],input[type=date],
select,textarea{
  width:100%;padding:11px 13px;font:400 .98rem/1.5 var(--sans);
  border:1px solid var(--rule2);border-radius:2px;background:var(--card);color:var(--ink)}
textarea{min-height:132px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.grid2{display:grid;gap:0 20px;grid-template-columns:repeat(auto-fit,minmax(184px,1fr))}
.hint{font-size:.775rem;color:var(--muted);margin:5px 0 0;line-height:1.5;max-width:52ch}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;align-items:center}
.actions .hint{margin:0}

.msg{padding:11px 14px;border-radius:2px;font-size:.9rem;margin:16px 0;
  border-left:2.5px solid var(--rule2);background:var(--paper2);color:var(--ink2)}
.msg.err{border-left-color:var(--hot);color:var(--hot)}
.msg.good{border-left-color:var(--accent);color:var(--accent)}

/* -------------------------------------------------------------- sign-in */
.signin{display:flex;flex-direction:column;gap:9px;margin:20px 0 4px}
.signin a,.signin button{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 18px;border-radius:2px;font:500 .97rem/1 var(--sans);text-decoration:none;
  border:1px solid var(--rule2);background:var(--card);color:var(--ink);cursor:pointer;width:100%}
.signin a:hover{border-color:var(--accent);color:var(--accent)}
.signin a[aria-disabled=true]{opacity:.42;pointer-events:none}
.signin .g span{font:700 1.02rem/1 var(--sans);color:#4285f4}
details.owner{margin-top:12px;border:1px solid var(--rule);border-radius:2px;padding:11px 14px;
  background:var(--paper2)}
details.owner summary{cursor:pointer;font-size:.845rem;color:var(--muted)}
details.owner[open] summary{margin-bottom:4px}

/* -------------------------------------------------------- the works grid */
/* Photographs carry this page, so the chrome around them is close to nothing:
   a hairline, and type underneath. */
.worklist{display:grid;gap:26px 22px;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  margin-top:6px}
.worktile{text-decoration:none;color:inherit;display:block}
.worktile img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  background:var(--paper2);border:1px solid var(--rule);border-radius:2px}
.worktile .noimg{display:grid;place-items:center;width:100%;aspect-ratio:4/3;
  background:var(--paper2);border:1px solid var(--rule);border-radius:2px;
  color:var(--rule2);font:400 .8rem var(--mono)}
.worktile h3{margin:11px 0 2px;font:600 1.02rem/1.32 var(--serif);letter-spacing:-.005em}
.worktile:hover h3{color:var(--accent)}
.worktile .s{color:var(--muted);font-size:.83rem;margin:0}
.worktile .s + .s{margin-top:5px}

/* --------------------------------------------------------- the composer */
.shots{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));margin-top:14px}
.shot{border:1px solid var(--rule);border-radius:2px;background:var(--card)}
.shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--paper2)}
.shot .meta{padding:9px 10px}
.shot .meta input{padding:7px 9px;font-size:.82rem}
.shot .meta .actions{margin-top:8px;gap:6px}
.shot.cover{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.drop{border:1.5px dashed var(--rule2);border-radius:2px;padding:30px 18px;text-align:center;
  color:var(--muted);font-size:.9rem;cursor:pointer;background:var(--paper2);margin-top:16px}
.drop:hover,.drop.over{border-color:var(--accent);color:var(--accent)}

/* ------------------------------------------------------------ moderation */
.queueitem{display:flex;gap:17px;align-items:flex-start}
.queueitem img{width:148px;flex:0 0 148px;aspect-ratio:4/3;object-fit:cover;border-radius:2px;
  border:1px solid var(--rule);background:var(--paper2)}
@media (max-width:600px){.queueitem{flex-direction:column}.queueitem img{width:100%;flex:none}}

/* --------------------------------------------------------- a single work */
.gallery{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:20px}
.gallery figure{margin:0}
.gallery img{width:100%;border:1px solid var(--rule);border-radius:2px;display:block}
.gallery figcaption{font-size:.83rem;color:var(--muted);margin-top:7px;font-family:var(--serif)}
.pin{position:relative;display:block}
.pin a{position:absolute;transform:translate(-50%,-50%);background:var(--card);
  border:1px solid var(--accent);color:var(--accent);border-radius:2px;padding:3px 9px;
  font:500 .74rem/1.4 var(--sans);text-decoration:none;white-space:nowrap}
.pin a:hover{background:var(--accent);color:var(--paper)}

/* the rating block: the sentence above the number is the product */
.rating{border-top:1px solid var(--rule);padding-top:13px;margin-top:13px}
.stars{font-family:var(--mono);color:var(--sun);letter-spacing:.08em}

/* Language switch. Sits at the end of the nav, before the "who" slot pushes
   right — deliberately plain, because a flag icon would be wrong (the language
   is Chinese, not a country) and a globe icon says nothing. */
nav.top a.langswitch{border:1px solid var(--rule2);padding:2px 9px;border-radius:2px;
  font-size:.77rem;letter-spacing:.06em;color:var(--muted)}
nav.top a.langswitch:hover{border-color:var(--accent);color:var(--accent)}

/* The two doors. Not a role picker: "are you a designer?" is a question a
   homeowner who once helped a friend cannot answer, but "what did you come to
   do" always has an answer. Nothing about the account is decided here. */
.doors{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:18px 0 12px}
.door{display:block;text-align:left;padding:15px 17px;border:1px solid var(--rule2);border-radius:2px;
  background:var(--card);color:var(--ink);cursor:pointer;width:100%}
.door:hover,.door[aria-pressed=true]{border-color:var(--accent)}
.door[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--accent)}
.door .dh{display:block;font:600 1.02rem/1.3 var(--serif);margin-bottom:4px}
.door .ds{display:block;font-size:.82rem;color:var(--muted);line-height:1.45}

/* A section rule that names what follows. Plain <h2> floated in the page with
   nothing above it and read as part of the block before. */
.secline{font:600 .78rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border-top:1px solid var(--rule);padding-top:12px;margin:26px 0 12px}

/* A link that has to look like the button beside it. */
a.btn{display:inline-block;background:var(--accent);color:var(--paper);text-decoration:none;
  border:1px solid var(--accent);border-radius:2px;padding:9px 17px;font:500 .9rem/1.2 var(--sans)}
a.btn:hover{background:var(--ink);border-color:var(--ink)}

/* The board. Topics are a short grid; threads are a list, because a thread's
   title is the thing being scanned and a grid makes titles compete. */
.topic{display:block;padding:13px 15px;border:1px solid var(--rule2);border-radius:2px;
  background:var(--card);text-decoration:none;color:var(--ink)}
.topic:hover{border-color:var(--accent)}
.topic .row{margin:0 0 3px}
#topics{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.thread{display:block;padding:12px 2px;border-bottom:1px solid var(--rule);
  text-decoration:none;color:var(--ink)}
.thread:hover strong{color:var(--accent)}
.thread .row{margin:0 0 3px;gap:12px}
.thread .note{margin:0}
#threads .empty{padding:22px 0}

/* The confirmation chain. An SVG rather than a generated image because the
   drawing is almost entirely words: a raster model renders text it cannot
   spell, and this has to be right in two languages and stay sharp on a phone.
   The <text> nodes carry data-i18n, so the same rewriter that translates the
   page translates the diagram. */
.chain{margin:0 0 8px;padding:0}
.chain svg{width:100%;height:auto;display:block}