/* V19: a warmer evolution of V18 gold, with quiet neutrals and charcoal text.
   Action fill and text-link colors are separate to preserve readable contrast. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  color: #2d2926;
  background: #faf9f7;
  --surface: #fff;
  --muted: #68615b;
  --line: #e3ded8;
  --action: #ffad24;
  --action-hover: #f29b12;
  --accent: #90500d;
  --accent-hover: #713b08;
  --focus: #90500d;
  --radius: 6px;
}
* { box-sizing: border-box }
body { margin: 0; font-size: 15px }
main { max-width: 1120px; margin: auto; padding: 0 40px 28px }
header, .toolbar, .branch-heading, .meta { display: flex; align-items: center; justify-content: space-between; gap: 18px }
header { min-height: 88px; border-bottom: 1px solid var(--line) }
.wordmark { font-size: 20px; font-weight: 700; letter-spacing: .025em; text-decoration: none; color: inherit }
.wordmark span { display: inline-block; margin-left: 16px; border-left: 1px solid var(--line); padding-left: 16px; color: var(--muted); font-size: 14px; font-weight: 400; letter-spacing: 0 }
h1 { font-size: 32px; line-height: 1.2; font-weight: 650; letter-spacing: -.025em; margin: 12px 0 20px }
h2 { font-size: 21px; font-weight: 600 }
h3 { font-size: 16px; overflow-wrap: anywhere; margin: 0 }
p { line-height: 1.6; color: var(--muted) }
strong { color: #2d2926; font-weight: 600; overflow-wrap: anywhere }
a { color: var(--accent); text-underline-offset: 3px }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted) }
.auth-page { max-width: 448px; margin: 72px auto 0 }
.auth-page > p { margin: 12px 0 }
.code-card { margin: 28px 0 24px; padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface) }
label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 10px }
input { min-width: 0; width: 100%; padding: 12px; border: 1px solid #918478; border-radius: var(--radius); background: var(--surface); color: inherit; font: inherit }
button, .primary-link { display: inline-block; border: 1px solid #b97615; border-radius: var(--radius); background: var(--action); color: #2d2926; padding: 11px 16px; font: inherit; font-size: 14px; font-weight: 550; cursor: pointer; text-decoration: none; text-align: center }
button:hover, .primary-link:hover { background: var(--action-hover) }
button:disabled { opacity: .55; cursor: default }
button:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px }
.code-actions { margin-top: 24px }
.auth-page .code-actions > * { width: 100% }
.note, #status { font-size: 13px; color: var(--muted) }
.code-card .note { margin: 12px 0 0; line-height: 1.6 }
.back-link { display: inline-block; margin-bottom: 24px; font-size: 13px; text-decoration: none }
.text-button { display: block; border: 0; padding: 0; margin-top: 22px; background: none; color: var(--accent); font-weight: 400; font-size: 13px; text-decoration: underline; text-underline-offset: 3px }
.text-button:hover { background: none; color: var(--accent-hover) }
#loading { padding: 72px 0; text-align: center; color: var(--muted) }
#status { max-width: 448px; margin: 20px auto; line-height: 1.6 }
#status:not(:empty) { padding: 12px 16px; border-left: 3px solid var(--accent); background: #fff3e2; color: #744516 }
.intro { padding: 40px 0 24px }
.toolbar { padding: 18px 0; border-top: 1px solid var(--line); flex-wrap: wrap }
.toolbar code { font-size: 13px; overflow-wrap: anywhere }
.toolbar button, .credentials-panel button { padding: 7px 12px; background: var(--surface); border-color: var(--line); color: var(--accent) }
.toolbar button:hover, .credentials-panel button:hover { background: #fff3e2 }
.branches { display: grid; gap: 12px }
article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px }
.branch-heading { justify-content: flex-start; flex-wrap: wrap }
.branch-heading h3 { overflow-wrap: anywhere }
article p { color: #443a32; margin: 12px 0; overflow-wrap: anywhere }
.meta { font-size: 12px; color: var(--muted); flex-wrap: wrap }
.meta code { overflow-wrap: anywhere }
.badge, .count { font-size: 12px; padding: 3px 8px; border-radius: 4px; background: #fff3e2; color: #744516 }
.count { vertical-align: middle; margin-left: 7px }
.credentials-panel { margin-top: 28px; padding-bottom: 16px; color: var(--muted) }
.credentials-panel summary { cursor: pointer; font-size: 14px }
.credentials-panel button { margin-left: 10px }
/* One semantic input; slots are decorative and preserve native input behavior. */
.code-entry { position: relative; display: inline-block; width: 100%; border-radius: var(--radius); margin: 6px 0 }
.code-slots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) 10px repeat(3,minmax(0,1fr)); gap: 6px; pointer-events: none }
.code-slots span { display: flex; align-items: center; justify-content: center; height: 54px; border: 1px solid #918478; border-radius: var(--radius); background: var(--surface); font-size: 25px; font-weight: 500; font-variant-numeric: tabular-nums }
.code-slots i { align-self: center; justify-self: center; height: 1px; background: #918478; width: 8px }
input.code-input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: text; font-size: 24px; padding: 0 }
.code-input:focus-visible { outline: none }
.code-entry:focus-within .code-slots span[data-active] { border-color: var(--accent); outline: 3px solid #efc18c }
.code-entry[data-complete] .code-slots span { border-color: var(--accent) }
.code-entry[data-invalid] .code-slots span { border-color: #b33b3b; background: #fffafa }
[hidden] { display: none !important }
@media (max-width: 600px) {
  main { padding: 0 20px 24px }
  header { min-height: 72px; gap: 8px }
  .wordmark { font-size: 17px }
  .wordmark span { margin-left: 8px; padding-left: 8px; font-size: 12px }
  .auth-page { margin-top: 40px }
  h1 { font-size: 28px }
  .code-card { padding: 22px 18px }
  .code-slots { gap: 5px; grid-template-columns: repeat(3,minmax(0,1fr)) 8px repeat(3,minmax(0,1fr)) }
  .code-slots span { height: 48px; font-size: 23px }
  .meta { align-items: flex-start; flex-direction: column }
  .meta code, .toolbar code { font-size: 11px }
  article { padding: 17px }
}
@media (forced-colors: active) {
  .code-entry:focus-within { outline: 2px solid Highlight }
  .code-entry:focus-within .code-slots span[data-active] { border: 3px solid Highlight }
}

#user-nav { display:flex; align-items:center; gap:20px; font-size:13px }
#repositories h2 { margin:0; font-size:18px }
#account-page #git-credentials { margin-top:28px }
@media(max-width:600px) { #user-nav { gap:12px; font-size:12px } }

.account-actions { margin-top:36px; padding-top:20px; border-top:1px solid var(--line) }
.account-actions .text-button { margin:0 }

.windows-setup { margin:24px 0; padding:20px; border:1px solid var(--line); border-radius:12px }
.windows-setup h3 { margin-top:0 }
.windows-setup textarea { box-sizing:border-box; width:100%; resize:vertical; font:12px/1.6 monospace; padding:12px; border:1px solid var(--line); border-radius:6px; background:var(--paper, #fff); color:inherit }

.clone-panel { margin:0 0 28px; padding-top:20px; border-top:1px solid var(--line) }
.clone-panel h2 { margin:0 0 12px; font-size:16px }
.clone-box { display:flex; align-items:center; gap:12px; padding:8px 8px 8px 16px; border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:0 1px 2px #2d292608 }
.clone-box code { flex:1; min-width:0; overflow-wrap:anywhere; font-size:13px; line-height:1.6 }
.clone-box button { display:flex; align-items:center; justify-content:center; flex:0 0 40px; width:40px; height:40px; padding:0; background:transparent; border-color:transparent; color:var(--muted) }
.clone-box button:hover { background:#fff3e2; border-color:var(--line); color:var(--accent) }
.clone-panel .note { margin:10px 0 0 }
.clone-panel .note:empty { display:none }