:root {
  --draft-live: #16804e;
  --draft-mock: #b96734;
  --draft-friends: #3866a5;
  --draft-danger: #b63b33;
  --draft-danger-dark: #8f2b26;
  --draft-panel-shadow: 9px 9px 0 color-mix(in srgb, var(--green) 72%, transparent);
}

.draft-hub { overflow: hidden; background-image: repeating-linear-gradient(0deg, transparent 0, transparent 39px, color-mix(in srgb, var(--line) 38%, transparent) 40px), repeating-linear-gradient(90deg, transparent 0, transparent 39px, color-mix(in srgb, var(--line) 24%, transparent) 40px); }
.draft-hub-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: 2.5rem; padding-bottom: 3.5rem; }
.draft-hub-section .section-content { min-width: 0; }
.mode-picker { margin-top: 0; }
.mode-picker-heading, .panel-heading, .mode-panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.panel-heading { flex-wrap: wrap; }
.panel-heading > .save-controls { flex: 1 1 100%; justify-content: flex-start; }
.mode-picker-heading h1, .panel-heading h2, .mode-panel-heading h2 { margin: .2rem 0 0; font-size: clamp(1.35rem, 2.2vw, 2rem); letter-spacing: -.8px; }
.mode-count, .mode-meta, .save-status { color: var(--muted); font: .63rem var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.mode-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.mode-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: .7rem; min-height: 7.35rem; border: 1px solid var(--line); border-top: 4px solid var(--mode-color); background: color-mix(in srgb, var(--surface) 92%, var(--mode-color)); color: var(--ink); padding: .85rem 1.05rem .8rem; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.mode-card[data-mode="live"] { --mode-color: var(--draft-live); }
.mode-card[data-mode="mock"] { --mode-color: var(--draft-mock); }
.mode-card[data-mode="friends"] { --mode-color: var(--draft-friends); }
.mode-card:hover, .mode-card:focus-visible { border-color: var(--mode-color); transform: translateY(-2px); }
.mode-card.is-selected { border-color: var(--mode-color); background: var(--surface); box-shadow: 5px 5px 0 color-mix(in srgb, var(--mode-color) 65%, transparent); }
.mode-index { grid-row: 1 / span 3; color: var(--mode-color); font: .65rem var(--mono); }
.mode-card-title { font: 600 1.05rem var(--display); }
.mode-card-copy { grid-column: 2; align-self: center; max-width: 17rem; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.mode-card-state { grid-column: 2; color: var(--mode-color); font: .58rem var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.draft-history-stack { display: grid; gap: .7rem; margin-top: 1rem; }
.draft-history-panel, .completed-drafts-panel { min-width: 0; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 96%, transparent); padding: 1rem 1.25rem; }
.draft-history-panel.is-hidden { display: none; }
.history-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.history-heading h2 { margin: .2rem 0 0; font-size: clamp(1.2rem, 2vw, 1.7rem); letter-spacing: 0; }
.history-count { color: var(--muted); font: .63rem var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.draft-history-status { min-height: 1rem; margin: 0; color: var(--muted); font: .63rem var(--mono); }
.draft-history-list { display: grid; gap: .6rem; margin-top: 1rem; }
.draft-history-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); border-left: 3px solid var(--green); padding: .7rem 0 0 .8rem; }
.draft-history-row.is-in-progress { border-left-color: #c47a2c; }
.draft-history-copy { display: grid; gap: .3rem; min-width: 0; }
.draft-history-copy strong { overflow-wrap: anywhere; font: 600 .9rem var(--display); }
.draft-history-meta { color: var(--muted); font: .61rem var(--mono); text-transform: uppercase; letter-spacing: .03em; }
.draft-history-status-label { width: max-content; padding: .2rem .4rem; font: .57rem var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.is-complete .draft-history-status-label { background: #d9f0df; color: #176238; }
.is-in-progress .draft-history-status-label { background: #f8e7ce; color: #8a501c; }
.draft-history-actions { display: flex; flex: 0 0 auto; gap: .4rem; }
.draft-history-action, .draft-history-delete { border: 1px solid var(--green); background: var(--green); color: #fff; padding: .65rem .8rem; font: 600 .6rem var(--mono); text-transform: uppercase; text-decoration: none; cursor: pointer; }
.draft-history-delete { border-color: var(--draft-danger); background: var(--draft-danger); color: #fff; }
.draft-history-action:hover, .draft-history-action:focus-visible { border-color: var(--green-dark); background: var(--green-dark); }
.draft-history-delete:hover, .draft-history-delete:focus-visible { border-color: var(--draft-danger-dark); background: var(--draft-danger-dark); }
.draft-history-empty { margin: 1rem 0 0; color: var(--muted); font-size: .8rem; }
.history-more { display: block; margin-top: .9rem; }
.draft-workspace { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(20rem, .88fr); align-items: start; gap: 1rem; margin-top: .95rem; }
.setup-panel, .mode-panel { min-width: 0; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 96%, transparent); }
.setup-panel { padding: 1.05rem 1.25rem .9rem; }
.save-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .45rem; }
.saved-configs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.saved-config-button, .text-button { border: 1px solid var(--line); background: color-mix(in srgb, var(--green) 7%, var(--surface)); color: var(--green-dark); padding: .48rem .6rem; cursor: pointer; font: .6rem var(--mono); text-transform: uppercase; letter-spacing: .03em; }
.saved-config-button:hover, .saved-config-button:focus-visible, .saved-config-button.is-selected { border-color: var(--green); background: var(--soft-green); color: var(--green-dark); }
.saved-config-empty { color: var(--muted); font: .6rem var(--mono); text-transform: uppercase; letter-spacing: .03em; }
.text-button { border-color: var(--green); color: var(--green-dark); white-space: nowrap; }
.text-button:hover, .text-button:focus-visible { background: var(--green); color: #fff; }
.settings-context { margin: .35rem 0 1.1rem; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.setup-panel.is-locked .setup-fields { opacity: .45; pointer-events: none; }
.setup-group { border-top: 1px solid var(--line); padding-top: .85rem; }
.group-label { margin: 0 0 .65rem; color: var(--muted); font: .62rem var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.field-grid label, .slot-grid label, .mode-field { display: grid; gap: .35rem; color: var(--muted); font: .61rem var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.field-grid select, .field-grid input, .slot-grid input, .mode-field input, .mode-field select { width: 100%; min-width: 0; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: .65rem; font: .75rem var(--sans); text-transform: none; }
.roster-details { margin-top: .85rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.roster-details summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; min-height: 3.1rem; cursor: pointer; list-style: none; }
.roster-details summary::-webkit-details-marker { display: none; }
.roster-details summary > span:first-child { color: var(--ink); font: 600 .78rem var(--display); }
.roster-summary { overflow: hidden; color: var(--muted); font: .6rem var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.details-icon { color: var(--green); font: 1rem var(--mono); }
.roster-details[open] .details-icon { transform: rotate(45deg); }
.roster-details-content { padding: 0 0 1rem; }
.slot-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; }
.slot-grid label { min-width: 0; }
.slot-grid input { padding: .55rem .5rem; }
.save-status { min-height: 1rem; margin: .75rem 0 0; color: var(--green-dark); text-transform: none; letter-spacing: 0; }
.mode-panel { display: flex; min-height: 16.8rem; flex-direction: column; padding: 1.15rem 1.4rem 1rem; }
.mode-panel[data-mode-panel="live"] { --mode-color: var(--draft-live); }
.mode-panel[data-mode-panel="mock"] { --mode-color: var(--draft-mock); }
.mode-panel[data-mode-panel="friends"] { --mode-color: var(--draft-friends); }
.mode-panel:not(.is-selected) { display: none; }
.mode-panel .chart-overline { color: var(--mode-color); }
.mode-panel-heading { align-items: flex-start; }
.mode-panel-heading h2 { max-width: 18rem; color: var(--ink); font-size: clamp(1.55rem, 2.7vw, 2.35rem); line-height: 1; }
.mode-chip { flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--mode-color) 42%, var(--line)); background: color-mix(in srgb, var(--mode-color) 12%, var(--surface)); color: var(--mode-color); padding: .35rem .45rem; font: .55rem var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.mode-panel-copy { max-width: 28rem; margin: 1rem 0 1.2rem; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.mode-signal { display: flex; align-items: center; gap: .7rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .8rem 0; }
.signal-mark { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; background: var(--mode-color); color: #fff; font: 1rem var(--mono); }
.mode-signal div { display: grid; gap: .15rem; }
.mode-signal strong { font: .77rem var(--display); }
.mode-signal span, .role-note { color: var(--muted); font-size: .7rem; }
.mode-field { max-width: 15rem; margin-top: .15rem; }
.mode-field input, .mode-field select { margin-top: .1rem; padding: .7rem; }
.mode-panel-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: 1.25rem; }
.mode-panel .primary-button { flex: 0 0 auto; border: 1px solid var(--mode-color); background: var(--mode-color); padding: .7rem .85rem; font: 600 .66rem var(--mono); text-transform: uppercase; }
.mode-panel .primary-button:hover, .mode-panel .primary-button:focus-visible { border-color: color-mix(in srgb, var(--mode-color) 80%, #000); background: color-mix(in srgb, var(--mode-color) 80%, #000); }
.friends-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 18rem; border: 1px solid var(--line); margin-top: .1rem; }
.choice-button { border: 0; border-right: 1px solid var(--line); background: var(--surface); color: var(--muted); padding: .65rem .55rem; cursor: pointer; font: .6rem var(--mono); text-transform: uppercase; }
.choice-button:last-child { border-right: 0; }
.choice-button.is-selected { background: color-mix(in srgb, var(--draft-friends) 13%, var(--surface)); color: var(--draft-friends); box-shadow: inset 0 -2px 0 var(--draft-friends); }
.friends-role-panel { display: none; margin-top: .85rem; }
.friends-role-panel.is-selected { display: block; }
.join-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.role-note { display: block; margin-top: .6rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.site-footer { background: var(--paper); }

@media (max-width: 900px) {
  .draft-hub-section { grid-template-columns: 1fr; gap: 1rem; padding-top: 2.5rem; }
  .draft-workspace { grid-template-columns: 1fr; }
  .mode-panel { min-height: 0; }
}

@media (max-width: 560px) {
  .draft-hub-section { padding: 2rem 1rem 3rem; }
  .mode-picker { margin-top: 0; }
  .mode-picker-heading { align-items: flex-start; flex-direction: column; gap: .4rem; }
  .mode-options { gap: .35rem; }
  .mode-card { min-height: 7.4rem; padding: .7rem .55rem .65rem; column-gap: .35rem; }
  .mode-index { font-size: .52rem; }
  .mode-card-title { font-size: .76rem; line-height: 1.05; }
  .mode-card-copy { align-self: start; margin-top: .3rem; font-size: .62rem; line-height: 1.25; }
  .mode-card-state { font-size: .48rem; line-height: 1.2; }
  .setup-panel, .mode-panel { padding: 1rem; }
  .panel-heading { align-items: flex-start; flex-direction: column; gap: .75rem; }
  .save-controls { width: 100%; }
  .saved-configs { justify-content: flex-start; flex: 1 1 auto; }
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .roster-details summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: .45rem; }
  .roster-summary { font-size: .52rem; }
  .mode-panel-heading { gap: .6rem; }
  .mode-panel-heading h2 { font-size: 1.7rem; }
  .mode-chip { font-size: .47rem; }
  .mode-panel-footer { align-items: flex-start; flex-direction: column; }
  .mode-panel .primary-button { width: 100%; border-radius: 999px; text-align: center; }
  .draft-history-panel, .completed-drafts-panel { padding: 1rem; }
  .draft-history-row { align-items: flex-start; flex-direction: column; }
  .draft-history-actions { width: 100%; }
  .draft-history-action, .draft-history-delete, .history-more, .saved-config-button, .text-button { border-radius: 999px; }
  .draft-history-action, .draft-history-delete { flex: 1; text-align: center; }
  .site-footer { padding-inline: 1rem; }
}