/* Personal map workshop. Operator styling remains in admin.css. */
:root {
  color-scheme: dark;
  --ink: #e0e8e5;
  --muted: #a8b8b7;
  --line: #35464a;
  --canvas: #141c1e;
  --surface: #1c272a;
  --soft: #29383b;
  --success: #bfd0bb;
  --danger: #e6aaaa;
  --accent: #bfd0bb;
  --sidebar-width: 220px;
}

body { font-size: 14px; }
h1 { font-family: Bahnschrift, "Segoe UI", sans-serif; font-size: clamp(29px, 3vw, 38px); font-weight: 500; letter-spacing: -.9px; }
h2 { font-size: 18px; font-weight: 600; }
:focus-visible { outline-color: var(--accent); }
.skip-link { background: #c0d2be; color: #17221c; }
button, .button { min-height: 42px; background: #3e5c50; border-color: #577466; color: #ecf2eb; }
button:hover, .button:hover { background: #4d6e5f; border-color: #8da893; }
button.secondary, .button.secondary { background: transparent; border-color: #4a5e60; color: var(--ink); }
button.secondary:hover, .button.secondary:hover { background: var(--soft); border-color: #7e9694; }
button.danger { background: transparent; border-color: #6a4b4d; color: var(--danger); }
button.danger:hover { background: #3c2d30; border-color: #9f6b6e; }
button.small { min-height: 38px; padding: 7px 12px; }
input, select, textarea { min-height: 44px; background: #172124; border-color: #4b5c60; color: var(--ink); }
input::placeholder, textarea::placeholder { color: #a0b1b2; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
label { color: #c3cfcb; }
.muted { color: var(--muted); }

.sidebar { padding: 30px 15px 22px; background: #10191b; border-color: #2b3a3e; }
.brand { gap: 10px; margin: 0 4px 44px; font-size: 14px; letter-spacing: -.2px; }
.brand-mark { width: 38px; height: 42px; background: #263b34; color: #c4d7c3; border: 1px solid #456054; border-radius: 12px 12px 12px 4px; }
.brand small { color: var(--muted); margin-top: 3px; font-size: 10px; }
.side-nav { gap: 8px; }
.nav-link { position: relative; min-height: 46px; padding: 12px; color: #b1c1bf; font-size: 13px; }
.nav-link svg, .nav-link .nav-trailing { color: #a4b9b4; }
.nav-link:hover { background: #1c2d2f; color: var(--ink); }
.nav-link.active { background: #2b403a; color: #e0ecdf; font-weight: 600; }
.nav-link.active svg { color: #bfd0bb; }
.nav-link.active::before { content: ""; position: absolute; left: 0; width: 3px; height: 17px; border-radius: 0 3px 3px 0; background: var(--accent); }
.sidebar-bottom { padding-top: 32px; }
#admin-link { margin-bottom: 14px; font-size: 12px; }
.back-to-game { border-color: #3d5253; background: #1c2c2e; color: #c4d3cf; font-size: 12px; }
.back-to-game:hover { background: #2a3c3c; }
.topbar { min-height: 70px; padding-inline: 36px; background: var(--canvas); border-color: #2b3a3e; }
.breadcrumb { color: var(--muted); font-size: 12px; }
.breadcrumb strong { color: #d0ddda; }
.breadcrumb-divider { color: #7e9794; }
.account-bar strong { color: #c2d0ca; }
.avatar { background: #273c35; border-color: #456054; color: #c4d7c3; }
.icon-button { background: transparent; color: var(--muted); border-color: transparent; }
.icon-button:hover { background: var(--soft); color: var(--ink); border-color: transparent; }
.main-content { max-width: 1300px; padding: 34px 36px 24px; }

.personal-heading { position: relative; display: flex; align-items: center; min-height: 210px; margin-bottom: 30px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #1b2b2e; }
.personal-heading-content { position: relative; z-index: 1; padding: 30px 32px; max-width: 66%; }
.personal-heading p { margin-top: 10px; color: #bfceca; max-width: 42ch; }
.personal-heading .button { margin-top: 22px; }
.alpine-scene { position: absolute; inset: 0 0 0 auto; width: 48%; height: 100%; object-fit: cover; object-position: 65% 60%; filter: brightness(.64) saturate(.68); mask-image: linear-gradient(to right, transparent, #000 35%); }
#account-title:focus { outline: none; }
.panel { border-radius: 10px; margin-bottom: 24px; box-shadow: none; }
.panel-heading { padding: 25px 27px 21px; }
.panel-heading h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.panel-heading p { margin-top: 7px; font-size: 13px; color: var(--muted); }
.section-count { display: inline-flex; gap: 5px; align-items: center; border: 1px solid #43584f; background: #293c34; color: #c0d2be; border-radius: 5px; padding: 2px 8px; font-size: 12px; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.toolbar { padding: 0 27px 22px; gap: 14px; }
.search-field { max-width: 440px; }
.search-field > svg { top: 14px; color: #a4b9b4; }
.search-field input { font-size: 13px; }
.toolbar select { max-width: 42%; }
.toolbar-note { color: var(--muted); }
.panel-content { padding: 0 27px 24px; }

table { font-size: 13px; }
th { padding-block: 12px; background: #182326; border-color: var(--line); color: #adbfbd; font-size: 11px; }
td { border-color: #304044; color: #bdccca; padding-block: 22px; }
th:first-child, td:first-child { padding-left: 27px; }
th:last-child, td:last-child { padding-right: 27px; }
tbody tr:hover { background: #223034; }
.map-name { font-size: 14px; min-width: 140px; }
.map-name::before { border-color: #b2c5ad; width: 10px; height: 12px; margin-right: 12px; }
.badge { font-size: 11px; border-radius: 4px; padding: 4px 8px; }
.badge.public, .badge.selected, .badge.state-promoted { background: #2a4438; color: #c2dbbe; }
.badge.private, .badge.cat, .badge[class*="state-"] { background: #303f43; color: #c2d1d1; }
.badge.state-labor { background: #473f29; color: #e0cb96; }
.badge.state-quarantined, .badge.state-withdrawn { background: #493236; color: #e6b1b1; }
td button.small:not(.danger) { border-color: #4a605c; background: #293d38; color: #d3e2d4; }
td button.small:not(.danger):hover { border-color: #8aa594; background: #3b5347; }
td > a { min-height: 38px; padding: 7px 16px; color: #c4d8c3; background: #293d38; border-color: #4a605c; }
td > a:hover { background: #3b5347; border-color: #8aa594; }
#public-table th:last-child, #public-table td:last-child { text-align: right; }
.map-controls { justify-content: flex-end; gap: 10px; }
.map-options { min-width: 120px; }
.map-options summary { width: fit-content; padding: 9px 12px; color: #c7d2cf; cursor: pointer; font-size: 12px; min-height: 38px; border: 1px solid #4a5e60; border-radius: 5px; }
.map-options summary:hover { background: var(--soft); border-color: #7e9694; }
.map-controls > .map-options[open] { flex-basis: 100%; }
.map-options[open] > summary { margin-bottom: 12px; }
.map-management, .map-options > .revisions { margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: #172124; }
.share-input { max-width: 100%; background: #141d20; color: #bfceca; border-color: #42585c; margin-top: 14px; font-size: 12px; }
.revision { border-color: var(--line); }
.revision .muted { color: var(--muted); }

.auth-panel { background: var(--surface); }
.auth-intro { background: #1b292b; padding: 32px; }
.auth-intro h2 { font-size: 23px; font-weight: 500; line-height: 1.3; letter-spacing: -.5px; max-width: 20ch; }
.auth-intro p { color: var(--muted); font-size: 14px; max-width: 35ch; }
.auth-intro .guest-discover { display: inline-flex; align-items: center; gap: 9px; color: #c0d2be; margin-top: 28px; font-size: 12px; }
.guest-discover svg { width: 17px; height: 17px; }
.auth-form { padding: 30px 32px; }
.form-help { color: var(--muted); font-size: 11px; max-width: 45ch; }
.empty-icon { background: #283b35; border-color: #42584d; color: #bdd1bb; }
.empty-state { padding: 40px 26px; }
.empty-state h3 { color: #d3ded6; font-size: 17px; }
.empty-state p { color: var(--muted); max-width: 50ch; font-size: 13px; }
.empty-state .button { margin-top: 22px; }
.inline-info { background: #233438; color: #c0cfcb; border: 1px solid var(--line); }
.inline-info a { color: #c5d8bf; }
.key-form { gap: 14px; }
.key-form .grow { max-width: 430px; }
.key-box { background: #373528; border-color: #625d3f; }
.key-box strong { color: #e0d5ab; }
.key-box p { color: #d3c9a7; }
.key-box input { min-width: 0; flex-basis: 100%; }
.err, .err:not(:empty) { color: #efb5b0; }
.notice:not(:empty) { background: #36382b; border-color: #5f6143; color: #d7dab4; }
.load-error:has(.err:not(:empty)) { padding-inline: 27px; }
.page-footer { margin-top: 28px; color: #9badac; }
.page-footer span:first-child { color: #a9bcba; }
.page-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.page-footer a { color: #afc1bc; text-decoration: none; }
.page-footer a:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .main-content { padding-inline: 26px; }
  .topbar { padding-inline: 26px; }
  .personal-heading-content { padding: 27px; }
  .map-controls { justify-content: flex-start; }
}
@media (max-width: 760px) {
  :root { --sidebar-width: 245px; }
  .sidebar { padding: 28px 18px 20px; }
  body.menu-open .sidebar { box-shadow: 8px 0 50px #0005; }
  .sidebar-backdrop:not([hidden]) { background: #070e11b3; }
  .topbar { min-height: 64px; padding: 11px 18px; }
  .main-content { padding: 22px 18px; }
  .personal-heading { min-height: 196px; margin-bottom: 22px; }
  .personal-heading-content { padding: 24px; max-width: 100%; }
  .personal-heading h1 { font-size: 29px; }
  .personal-heading p { font-size: 13px; max-width: 27ch; }
  .personal-heading .button { margin-top: 19px; font-size: 12px; }
  .alpine-scene { width: 100%; opacity: .22; object-position: 75% 55%; mask-image: linear-gradient(to right, transparent 15%, #000); }
  .panel-heading { padding: 22px 19px 19px; }
  .panel-heading p { font-size: 12px; }
  .toolbar { padding: 0 19px 19px; flex-wrap: wrap; gap: 10px; }
  .search-field { flex-basis: 100%; max-width: none; }
  .toolbar select { max-width: 100%; width: 100%; margin-left: 0; }
  tbody tr { gap: 14px 10px; padding: 22px 19px; border-color: var(--line); }
  td, td:first-child, td:last-child { padding: 0; }
  .map-name { min-width: 0; font-size: 14px; }
  .map-name::before { display: none; }
  td button.small { min-height: 40px; }
  .map-controls { gap: 10px; }
  .map-management, .map-options > .revisions { padding: 12px; }
  .share-input { margin-top: 12px; }
  #public-table td:nth-child(2)::before { color: var(--muted); }
  #public-table td:last-child { align-self: center; }
  #key-table td:nth-child(3)::before, #key-table td:nth-child(4)::before { color: var(--muted); }
  #key-table td:first-child { grid-column: 1 / -1; font-size: 13px; }
  .panel-content { padding: 0 19px 22px; }
  .auth-intro { padding: 24px; }
  .auth-intro h2 { font-size: 22px; max-width: none; }
  .auth-intro p { font-size: 13px; }
  .auth-intro .guest-discover { margin-top: 19px; }
  .auth-form { padding: 24px; }
  .auth-actions { flex-wrap: wrap; }
  .empty-state { padding: 32px 22px; }
  .load-error:has(.err:not(:empty)) { padding-inline: 19px; }
  .page-footer { gap: 16px; align-items: flex-start; font-size: 10px; }
  .page-footer nav { gap: 8px 15px; justify-content: flex-end; }
}