/* BeamCue v2 core — reset, chrome, and controls shared by every v2 page.
 * Consumes /tokens.v2.css only. Never load site.css beside this.
 */
*, *::before, *::after { box-sizing: border-box; }

body.v2 {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:where(body.v2) :where(a) { color: inherit; text-decoration: none; }
:where(body.v2) :where(h1, h2, h3) {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.96;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
:where(body.v2) :where(p) { margin: 0; }
/* Korean separates words with spaces but allows a line break inside one, which
   leaves 사람들/이 split across two lines on a narrow screen. Keep a word whole,
   and let a token that cannot fit on a line of its own break rather than spill. */
body.v2:lang(ko) {
  word-break: keep-all;
  overflow-wrap: anywhere;
  /* The mono face carries no Hangul, so Korean in a label or a line of fine
     print fell back to whatever the system had and kept the Latin tracking with
     it: spaced-out syllables in a face that matches nothing else on the page.
     Korean gets a real face behind the mono, and labels a tracking that suits a
     script with no uppercase to separate. */
  --font-mono: "JetBrains Mono Variable", ui-monospace, "Noto Sans KR Variable", "Apple SD Gothic Neo", monospace;
  --track-label: 0.06em;
}
:where(body.v2) :where(img) { max-width: 100%; }
/* zero-specificity reset: component rules must still win on size */
:where(body.v2) :where(button, input, select, textarea) { font: inherit; }

:where(body.v2) :focus-visible { outline: 3px solid var(--sig); outline-offset: 2px; }

.v2-skip {
  position: fixed; top: 12px; left: 16px; z-index: 100;
  width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  padding: 10px 14px; border-radius: var(--radius-control);
  background: var(--sig); color: var(--bg); font-weight: 700; white-space: nowrap;
}
.v2-skip:focus-visible { width: auto; height: auto; overflow: visible; clip-path: none; }
.v2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- controls ---------- */
.v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: var(--control-height); padding: 0 18px;
  border: 1px solid var(--line-2); border-radius: var(--radius-control);
  background: transparent; color: var(--fg);
  font-family: var(--font-body); font-size: 14px; font-weight: 700; white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-short) var(--ease-out),
              border-color var(--duration-short) var(--ease-out);
}
.v2-btn:hover { background: var(--bg-3); border-color: var(--fg-3); }
.v2-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.v2-btn-sig { background: var(--sig); border-color: var(--sig); color: var(--bg); }
.v2-btn-sig:hover { background: var(--sig-hover); border-color: var(--sig-hover); color: var(--bg); }
.v2-btn-quiet { border-color: transparent; color: var(--fg-2); }
.v2-btn-danger { border-color: var(--line-2); color: var(--danger); background: transparent; }
.v2-btn-danger:hover { background: var(--danger-dim); border-color: var(--danger); }
.v2-btn-lg { min-height: var(--control-height-lg); padding: 0 26px; font-size: 16px; }
.v2-btn-sm { min-height: var(--control-height-sm); padding: 0 12px; font-size: 13px; border-radius: 7px; }

.v2-field, :where(body.v2) .v2-input {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: var(--control-height); padding: 0 13px;
  border: 1px solid var(--line-2); border-radius: var(--radius-control);
  background: var(--bg-2); color: var(--fg); font-size: 14px;
}
:where(body.v2) .v2-input::placeholder { color: var(--fg-3); }
:where(body.v2) select.v2-input { appearance: none; cursor: pointer; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%), linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.v2-field svg { flex: none; color: var(--fg-3); }
.v2-field-wrap { position: relative; display: flex; align-items: center; }
.v2-field-wrap svg { position: absolute; left: 13px; color: var(--fg-3); pointer-events: none; }
.v2-field-wrap .v2-input { padding-left: 38px; }

.v2-label {
  margin: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3);
}
.v2-label.sig { color: var(--sig); }
.v2-mono { font-family: var(--font-mono); letter-spacing: 0.05em; }
.v2-muted { color: var(--fg-2); }

.v2-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 26px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: var(--radius-round);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-3);
}
.v2-chip i { display: block; width: 6px; height: 6px; border-radius: var(--radius-round); }
.v2-chip.on { border-color: var(--sig); color: var(--sig); background: var(--sig-dim); }

.v2-panel { border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--bg-2); }

/* ---------- page scaffolding ---------- */
.v2-page { padding: 64px 56px; }
.v2-sec { padding: 92px 56px; border-bottom: 1px solid var(--line); }
.v2-sec-head { max-width: 840px; margin-bottom: 52px; }
.v2-sec-head h2 { font-size: clamp(34px, 4vw, 56px); letter-spacing: -0.042em; margin-top: 16px; }
.v2-sec-head p { color: var(--fg-2); font-size: 17px; line-height: 1.62; margin-top: 20px; max-width: 680px; }
.v2-micro { font-family: var(--font-mono); font-size: 12px; line-height: 1.7; letter-spacing: 0.05em; color: var(--fg-3); }

/* ---------- nav ---------- */
.v2-nav {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  min-height: 78px; padding: 12px 40px; border-bottom: 1px solid var(--line);
}
.v2-brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -0.035em;
}
.v2-brand.small { font-size: 17px; }
.v2-mark { display: block; flex: none; width: 30px; height: 30px; border-radius: 9px; object-fit: contain; }
.v2-brand.small .v2-mark { width: 25px; height: 25px; border-radius: 7px; }
.v2-links { display: flex; gap: 2px; margin-right: auto; }
.v2-links a { padding: 9px 13px; border-radius: 8px; color: var(--fg-2); font-size: 14px; font-weight: 600; }
.v2-links a:hover { color: var(--fg); background: var(--bg-2); }
.v2-links a[aria-current="page"] { color: var(--fg); background: var(--bg-2); }
.v2-actions { display: flex; align-items: center; gap: 10px; }
/* Only the logout form should collapse; the language dropdown is a form too,
   and display:contents would delete the box its absolute positioning needs. */
.v2-actions > form { display: contents; }

@media (max-width: 500px) {
  /* Four actions do not fit a phone line, and wrapping left the last of them —
     Log out — alone under the other three, so a header carrying four pairs them
     in equal halves. A page that drops "My projects" carries three, which do
     fit: pairing those would put Log out back underneath, which is the thing
     being fixed. */
  .v2-actions.signed-in:has(> :nth-child(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-actions.signed-in:has(> :nth-child(4)) > *,
  .v2-actions.signed-in:has(> :nth-child(4)) .v2-lang > summary { width: 100%; }
  .v2-actions.signed-in:has(> :nth-child(4)) .v2-lang > summary { justify-content: center; }
  /* Five would leave one over; it takes the row. The logout form is
     display:contents, so its button is the grid item, not the form. */
  .v2-actions.signed-in:has(> :nth-child(4)) > *:last-child:nth-child(odd),
  .v2-actions.signed-in:has(> :nth-child(4)) > form:last-child:nth-child(odd) > button { grid-column: 1 / -1; }
}


.v2-lang { position: relative; }
.v2-lang > summary {
  display: inline-flex; align-items: center; gap: 7px; list-style: none; cursor: pointer;
  min-height: var(--control-height); padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: var(--radius-control);
  color: var(--fg-2); font-size: 13px; font-weight: 600;
}
.v2-lang > summary::-webkit-details-marker { display: none; }
.v2-lang > summary::marker { content: ""; }
.v2-lang-options {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 80;
  display: grid; gap: 3px; min-width: 180px; padding: 7px;
  border: 1px solid var(--line-2); border-radius: var(--radius-panel);
  background: var(--bg-2); box-shadow: var(--shadow-md);
  max-width: calc(100vw - 36px);
  max-height: var(--language-menu-height, calc(100dvh - 160px));
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(var(--language-menu-shift, 0px));
}
.v2-lang-options button {
  min-height: var(--control-height); padding: 0 11px; border: 0; border-radius: 7px;
  background: transparent; color: var(--fg-2); font-size: 13px; text-align: left; cursor: pointer;
}
.v2-lang-options button:hover { background: var(--bg-3); color: var(--fg); }
.v2-lang-options button[aria-current="true"] { background: var(--sig-dim); color: var(--sig); font-weight: 700; }

.v2-messages { padding: 12px 40px 0; display: grid; gap: 8px; }
.v2-message {
  padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-control);
  background: var(--bg-2); color: var(--fg-2); font-size: 14px;
}
.v2-message.error { border-color: var(--danger); background: var(--danger-dim); color: var(--fg); }
.v2-message.success { border-color: var(--sig); background: var(--sig-dim); color: var(--fg); }

/* ---------- footer ---------- */
.v2-foot {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center;
  gap: 28px; padding: 38px 56px 54px; border-top: 1px solid var(--line);
}
.v2-foot nav { display: flex; flex-wrap: wrap; gap: 22px; font-size: 14px; color: var(--fg-2); }
.v2-foot small { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); letter-spacing: 0.05em; }
.v2-foot-credit { display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.v2-foot-credit a { font-family: var(--font-body); letter-spacing: normal; line-height: 1.5; }

@media (max-width: 900px) {
  .v2-nav { padding: 12px 18px; }
  .v2-links { display: none; }
  .v2-actions { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .v2-lang-options { left: 0; right: auto; }
  .v2-btn { min-width: 0; max-width: 100%; white-space: normal; text-align: center; overflow-wrap: anywhere; padding-block: 10px; }
  .v2-page { padding: 36px 18px; }
  .v2-sec { padding: 56px 18px; }
  .v2-messages { padding: 12px 18px 0; }
  .v2-foot { grid-template-columns: 1fr; gap: 16px; padding: 32px 18px 44px; }
}