/* Tempo: shared application identity. Screen-specific sizing remains user controlled. */
:root {
  --bg: #f7f8fc;
  --surface: #ffffff;
  --ink: #17213c;
  --text: var(--ink);
  --muted: #66718a;
  --line: #e4e8f1;
  --primary: #6050dc;
  --purple: #eeebff;
  --green: #e7f5ef;
  --radius: 12px;
  --surface-soft: #f8f9fd;
  --surface-hover: #f2f0ff;
  --control-border: #ccd3e2;
  --focus: #9184ee;
  --shadow: 0 3px 16px #17213c05;
  --sidebar: #17213c;
  --sidebar-ink: #d9def0;
  --sidebar-muted: #a6b2cd;
  --action: #6050dc;
  --action-hover: #5040c6;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] {
  --bg: #101627;
  --surface: #192237;
  --ink: #edf0fa;
  --text: var(--ink);
  --muted: #aab6ce;
  --line: #34405a;
  --primary: #b4aaff;
  --purple: #302c50;
  --green: #193e36;
  --surface-soft: #151d30;
  --surface-hover: #282c49;
  --control-border: #52607e;
  --focus: #b4aaff;
  --shadow: none;
  --sidebar: #10182d;
  --action: #7160e8;
  --action-hover: #6250d8;
}
::selection { background: var(--purple); color: var(--ink); }
h1, h2, h3 { color: var(--ink); }
h1 { font-weight: 720; letter-spacing: -.9px; }
h2, h3 { font-weight: 650; }
.brand, .sidebar .brand { font-size: 21px; font-weight: 750; letter-spacing: -.85px; gap: 10px; }
.brand-light { font-weight: inherit; }
.brand img, .sidebar .brand img { width: 36px; height: 36px; flex: none; border-radius: 8px; }
.workspace { grid-template-columns: 236px minmax(0, 1fr); }
.sidebar {
  background: var(--sidebar); color: var(--sidebar-ink); border: 0;
  padding: 28px 16px 20px;
}
.sidebar .brand { color: #fff; padding: 0 6px; }
.sidebar nav { margin-top: 38px; }
.sidebar .nav-label { color: var(--sidebar-muted); font-size: 11px; letter-spacing: 1.5px; margin: 0 14px 12px; }
.sidebar .nav-item { color: var(--sidebar-ink); padding: 13px 14px; margin: 4px 0; border-radius: 9px; font-size: 14px; gap: 13px; }
.sidebar .nav-item:hover { background: #ffffff0c; color: #fff; }
.sidebar .nav-item.active { background: #7465e83b; color: #fff; box-shadow: inset 3px 0 #a899ff; }
.sidebar .nav-item.active .menu-icon { color: #c1b8ff; }
.sidebar .nav-item:focus-visible { outline-color: #c1b8ff; }
.sidebar-context { color: var(--sidebar-muted); border-top: 1px solid #ffffff19; margin-top: auto; padding: 20px 12px 0; }
.sidebar-context .context-dot { background: #8fdfc5; }
.topbar { min-height: 76px; height: auto; padding: 14px 32px; background: var(--surface); gap: 16px; }
.topbar-actions { gap: 12px; }
.topbar-team { gap: 10px; }
.team-context-icon { color: var(--primary); background: var(--purple); border-radius: 9px; }
.team-context-title { color: var(--ink); }
.topbar .breadcrumb strong { color: var(--muted); font-weight: 500; }
.appearance-controls { gap: 6px; }
.appearance-controls label { border-color: var(--line); background: var(--surface-soft); border-radius: 8px; padding: 5px 7px; }
.appearance-controls select { color: var(--ink); }
.avatar { background: var(--purple); color: var(--primary); font-weight: 700; }
.account-dropdown { background: var(--surface); border-color: var(--line); box-shadow: 0 12px 40px #10182d20; border-radius: 12px; }
#content { max-width: 1600px; padding: 28px 32px 36px; }
.page-heading { margin-bottom: 22px; gap: 16px; }
.page-heading h1 { margin-bottom: 6px; }
.card { border-color: var(--line); box-shadow: var(--shadow); }
.button { border-radius: 8px; gap: 8px; padding: 10px 15px; min-height: 38px; font-weight: 650; background: var(--surface); color: var(--ink); border-color: var(--control-border); }
.button.primary, .button.white { color: #fff; background: var(--action); box-shadow: 0 2px 5px #6050dc16; }
.button.primary:hover, .button.white:hover { background: var(--action-hover); }
.button.secondary { background: var(--surface); border-color: var(--control-border); color: var(--ink); }
.button.secondary:hover { background: var(--surface-hover); border-color: var(--primary); }
.button.text { min-height: 32px; background: transparent; border-color: transparent; color: var(--primary); }
.icon-button { border-radius: 8px; color: var(--muted); }
.icon-button:hover { color: var(--primary); background: var(--purple); }
:is(button,a,input,select,textarea,summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
:is(.field input,.field select,.field textarea,.search input) { background: var(--surface); border-color: var(--control-border); color: var(--ink); border-radius: 8px; }
.field input::placeholder,.field textarea::placeholder,.search input::placeholder { color: var(--muted); opacity: .85; }
.field input:focus,.field select:focus,.field textarea:focus { border-color: var(--primary); }
input[type="checkbox"],input[type="radio"] { accent-color: var(--primary); }
.chip, .tag-part { border-radius: 6px; font-weight: 550; }
.chip { color: var(--primary); background: var(--purple); }
.library-toolbar { padding: 18px 20px; }
th { color: var(--muted); background: var(--surface-soft); font-weight: 600; }
td { border-color: var(--line); }
.library-table tbody tr:hover, .plan-list-row:hover { background: var(--surface-hover); }
.plan-list-row { background: var(--surface); padding-top: 17px; padding-bottom: 17px; }
.plan-view-switch { background: var(--surface-soft); padding: 4px; border-radius: 9px; }
.plan-view-switch button.selected { background: var(--surface); color: var(--primary); box-shadow: 0 1px 5px #17213c0d; }
.hero { min-height: 204px; background: var(--purple); border: 1px solid var(--line); border-radius: 12px; padding: 28px 32px; }
.hero h2 { color: var(--ink); font-weight: 700; }
.hero p,.hero .eyebrow { color: var(--muted); }
.hero-art { color: var(--primary); opacity: .7; }
.stat { padding: 20px; }
.stat-icon { border-radius: 10px; }
.event-card { padding: 20px; }
.event-top { margin-bottom: 16px; }
.event-page { max-width: none; }
.event-page-top { margin-bottom: 20px; }
.event-layout { gap: 20px; }
.event-column,.event-side { gap: 20px; }
.event-panel { padding: 20px; }
.event-panel h2,.event-panel .section-heading { margin-bottom: 16px; }
.plan-item { background: var(--surface); border-color: var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; }
.plan-section { background: var(--purple); border-color: transparent; color: var(--primary); }
.plan-item summary strong { line-height: 1.5; }
.lineup-position-group { background: var(--surface-soft); border-color: var(--line); border-radius: 9px; }
.lineup-position-group h4 { color: var(--ink); }
.person-row { border-color: var(--line); }
.event-person-name strong { font-weight: 650; }
.status-planned { color: var(--primary)!important; }
.event-status-help { margin-bottom: 12px; }
.arrangement-grid .arrangement-card { border-radius: 10px; background: var(--surface); box-shadow: none; padding: 18px; }
.song-media-zone.file-drop-zone { background: var(--surface); }
.song-media-zone.file-drop-zone.is-drag-over { background: var(--purple); border-color: var(--primary); }
.attachment-tile { background: var(--surface-soft); border-radius: 8px; border-color: var(--line); }
.attachment-tile:hover { background: var(--surface-hover); border-color: var(--primary); }
.attachment-thumb { background: var(--surface); border-color: var(--line); }
.media-type-button { border-radius: 10px; background: var(--surface); border-color: var(--line); }
.media-type-button:hover { background: var(--surface-hover); border-color: var(--primary); }
.media-type-button[aria-pressed=true] { background: var(--purple); border-color: var(--primary); }
.media-type-button[aria-pressed=true] .media-type-count { background: var(--surface); color: var(--primary); }
.media-type-icon { color: var(--primary); }
.media-source-option,.media-disk-picker,.media-timeline { background: var(--surface-soft); }
.library-file-row { border-color: var(--line); }
#dialog { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 80px #10182d33; }
#dialog::backdrop { background: #10182d80; backdrop-filter: blur(3px); }
.modal-header,.modal-footer { border-color: var(--line); }
.modal-footer { background: var(--surface-soft); }
.app-footer { color: var(--muted); padding: 20px 32px; font-size: 12px; }
.demo-banner { background: var(--purple); color: var(--primary); border-color: var(--line); padding-left: 32px; padding-right: 32px; }
/* Login carries the same identity as the workspace. */
.login-story { background: #17213c; color: #fff; padding: 44px 52px; }
.login-story .brand,.login-story h1 { color: #fff; }
.login-story .eyebrow { color: #b9afff; }
.story-content p,.story-footer { color: #bac5e0; }
.story-caption { color: #cec7ff; }
.sound-art { gap: 12px; }
.sound-art i { background: #9c8aff; }
.sound-art i:nth-child(3n) { background: #d1c9ff; }
.login-main { background: var(--surface); }
.login-box .eyebrow { color: var(--muted); }
@media (max-width: 1180px) and (min-width: 801px) {
  .workspace { grid-template-columns: 210px minmax(0,1fr); }
  .sidebar { padding-left: 12px; padding-right: 12px; }
  .sidebar .brand { font-size: 19px; }
  #content { padding: 24px; }
  .topbar { padding: 12px 24px; flex-wrap: wrap; }
  .topbar-actions { margin-left: auto; }
}
@media (max-width: 800px) {
  .workspace { display: block; }
  .sidebar { position: relative; height: auto; padding: 16px 18px 12px; display: flex; gap: 14px; }
  .sidebar .brand { font-size: 20px; }
  .sidebar nav { margin: 0; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 2px 1px 6px; scrollbar-width: thin; }
  .sidebar .nav-label,.sidebar-context { display: none; }
  .sidebar .nav-item { flex: 0 0 auto; width: auto; min-width: 0; margin: 0; padding: 10px 12px; font-size: 13px; }
  .sidebar .nav-item.active { box-shadow: inset 0 -2px #b9afff; }
  .topbar { padding: 12px 18px; gap: 12px; }
  .topbar-actions { gap: 8px; }
  #content { padding: 22px 18px 28px; }
  .page-heading { gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
  .event-panel { padding: 16px; }
  .event-layout { grid-template-columns: 1fr; gap: 16px; }
  .hero { padding: 24px; min-height: 190px; }
  .app-footer { padding: 16px 18px; }
  .demo-banner { padding-left: 18px; padding-right: 18px; }
  .login-story { padding: 26px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto!important; transition-duration: .01ms!important; animation-duration: .01ms!important; }
}

/* Personal and team settings share navigation while preserving existing editors. */
.settings-tabs {display:flex;gap:6px;border-bottom:1px solid var(--line);padding-bottom:12px}
.settings-tabs button,.settings-link {border:0;background:transparent;color:var(--muted);padding:10px 14px;border-radius:10px;text-align:left;font:inherit;cursor:pointer}
.settings-tabs button[aria-pressed="true"],.settings-link[aria-current="page"] {background:var(--purple);color:var(--primary);font-weight:700}
.settings-context {margin:16px 0}
.settings-layout {display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px;align-items:start}
.settings-nav {display:grid;gap:6px;position:sticky;top:16px}
.settings-content {min-width:0;display:grid;gap:18px}
.settings-content > .page-heading {margin-bottom:0}
.settings-content .date-settings-card {margin:0;max-width:none}
.settings-content .profile-layout {grid-template-columns:minmax(170px,220px) minmax(0,1fr)}
.settings-content .profile-main {min-width:0}
.settings-fonts summary {cursor:pointer;font-weight:600;padding:12px 0}
.settings-font-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
@media(max-width:1000px){.settings-layout {grid-template-columns:1fr}.settings-nav {position:static;display:flex;flex-wrap:wrap}}
@media(max-width:650px){.settings-content .profile-layout {grid-template-columns:1fr}.settings-font-grid {grid-template-columns:1fr}}

.settings-font-grid .field {margin:0;gap:6px}
.settings-font-grid {row-gap:12px}

/* Account pages use one type scale and the same spacing across all four tabs. */
#content .profile-main {font-size:calc(var(--font-body) * var(--text-scale,1));line-height:1.5}
#content .profile-tabs {gap:24px}
#content .profile-tabs button {font-size:calc(var(--font-body) * var(--text-scale,1));font-weight:550;line-height:1.5}
#content .profile-tabs button[aria-selected="true"] {font-weight:650}
#content .profile-panel h2 {font-size:calc(20px * var(--text-scale,1));font-weight:650;line-height:1.35;margin-bottom:18px}
#content .profile-section-heading h2 {margin-bottom:0}
#content .profile-panel :is(.field,.profile-security-row,.login-history summary) {font-size:calc(var(--font-body) * var(--text-scale,1))}
#content .profile-panel :is(.profile-security-row p,.profile-security-row small,.profile-team-info p) {font-size:calc(var(--font-small) * var(--text-scale,1));line-height:1.5}
#content .profile-panel .button {font-size:calc(var(--font-body) * var(--text-scale,1));min-height:38px;padding:8px 12px}
.profile-summary [hidden] {display:none!important}
.profile-team-list {border-top:1px solid var(--line)}
.profile-team-row {display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.profile-team-row:last-child {border-bottom:0;padding-bottom:0}
.profile-team-avatar {width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--purple);color:var(--primary);font-size:calc(var(--font-body) * var(--text-scale,1));font-weight:700}
.profile-team-info {min-width:0}
.profile-team-title {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.profile-team-title strong {font-size:calc(var(--font-subheading) * var(--text-scale,1));font-weight:650;line-height:1.35;overflow-wrap:anywhere}
.profile-team-role {display:inline-flex;align-items:center;padding:3px 8px;border-radius:6px;background:var(--purple);color:var(--primary);font-size:calc(var(--font-small) * var(--text-scale,1));font-weight:600;line-height:1.35}
.profile-team-info p {margin:5px 0 0;color:var(--muted)}
.profile-team-actions {display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.profile-ownership-notice {padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft)}
.profile-ownership-notice p {margin:0 0 8px;font-size:calc(var(--font-body) * var(--text-scale,1));line-height:1.5}
.profile-ownership-notice ul {margin:0 0 14px;padding-left:20px;font-size:calc(var(--font-body) * var(--text-scale,1));line-height:1.6}
@media(max-width:760px){.profile-team-row{grid-template-columns:42px minmax(0,1fr)}.profile-team-actions{grid-column:2;justify-content:flex-start}.profile-team-actions .button{padding:7px 9px}}
@media(max-width:600px){#content .profile-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;border:0}#content .profile-tabs button{border:1px solid var(--line);border-radius:8px;padding:9px 8px;background:var(--surface);text-align:center}#content .profile-tabs button[aria-selected="true"]{border-color:var(--primary);background:var(--purple)}}
.event-wrapper.plan-attendance-accepted {--attendance-accent:#269b68}
.event-wrapper.plan-attendance-declined {--attendance-accent:#d25162}
.event-wrapper.plan-attendance-neutral {--attendance-accent:#9ba4b8}
.event-wrapper .plan-list-row,.event-wrapper .event-card,.event-wrapper .calendar-event {border-inline-start:4px solid var(--attendance-accent);border-radius:10px}
.event-wrapper.plan-attendance-accepted .date-tile {background:light-dark(#e2f5eb,#153d31);color:light-dark(#176d47,#8ee1b8)}
.event-wrapper.plan-attendance-declined .date-tile {background:light-dark(#fbe9ec,#4b202b);color:light-dark(#a82943,#f9a3b6)}
.event-dashboard {margin:0 0 18px;padding-bottom:18px}
.event-my-response {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:12px 20px}
.event-my-response>div:first-child {display:flex;align-items:center;gap:10px}
.event-my-response>div:first-child strong {font-size:calc(var(--font-small) * var(--text-scale,1))}
.event-my-response-actions {display:flex;gap:8px;flex-wrap:wrap}
.event-my-response-actions .button {font-size:calc(var(--font-small) * var(--text-scale,1));padding:7px 12px}
.event-my-response-actions [data-status="accepted"] {color:light-dark(#147c4b,#6ee0a5)}
.event-my-response-actions [data-status="declined"] {color:light-dark(#b3324e,#ff8da4)}
.event-dashboard-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:0 20px}
.event-dashboard-stat {display:flex;flex-direction:column;gap:5px;padding:13px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft)}
.event-dashboard-stat strong {font-size:calc(24px * var(--text-scale,1));font-weight:700;line-height:1.1}
.event-dashboard-stat span {font-size:calc(var(--font-caption) * var(--text-scale,1));color:var(--muted)}
.lineup-flat-assignment{display:block;padding:0 16px 10px 44px}
@media(max-width:760px){.event-header-main{flex-wrap:wrap}.event-header-actions{width:100%;min-width:0;justify-content:flex-start}}

/* Keep desktop navigation in its own viewport; only the content pane scrolls. */
@media (min-width: 901px) {
  .workspace { height: 100dvh; min-height: 0; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
  .workspace > .sidebar { position: static; height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .workspace > .workspace-main { min-height: 0; overflow-y: auto; }
  .workspace-main > main, .workspace-main > .app-footer, .workspace-main > .demo-banner { flex-shrink: 0; }
}
.sidebar .sidebar-marketing { margin-top: 20px; border-top: 1px solid #ffffff19; border-radius: 0; }
@media (max-width: 900px) {
  .workspace > .sidebar { position: relative; height: auto; display: flex; padding: 16px 18px 12px; }
  .sidebar nav { margin: 0; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 2px 1px 6px; scrollbar-width: thin; }
  .sidebar .nav-label, .sidebar-context { display: none; }
  .sidebar .nav-item { flex: 0 0 auto; width: auto; min-width: 0; margin: 0; padding: 10px 12px; font-size: 13px; }
  .sidebar .sidebar-marketing { border-top: 0; border-left: 1px solid #ffffff19; }
}

.event-my-response-compact{appearance:none;background:none;border:0;padding:4px 0;min-height:32px;font:inherit;font-weight:700;cursor:pointer}.event-my-response-compact.status-accepted{color:light-dark(#147c4b,#6ee0a5)}.event-my-response-compact.status-declined{color:light-dark(#b3324e,#ff8da4)}.event-my-response-compact:hover{text-decoration:underline}.event-my-response-compact:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:3px}

/* Event view preferences and print source selection. */
#dialog.plan-pdf-dialog{width:min(760px,calc(100vw - 32px));max-width:760px}
.plan-pdf-song{padding:16px 0;border-bottom:1px solid var(--line,#ddd)}
.plan-pdf-check{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.plan-pdf-check input{width:20px;height:20px;flex-shrink:0}
.plan-pdf-source{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:center}
.plan-pdf-source .field{margin:0 0 8px}
.plan-pdf-thumbnail{width:112px;height:112px;background:#f4f3f7;border:1px solid #ddd;border-radius:10px;display:grid;place-items:center;cursor:pointer;overflow:hidden;font-size:30px;color:#655776}
.plan-pdf-thumbnail img{width:100%;height:100%;object-fit:contain}
.event-view-options fieldset{display:grid;gap:12px;margin:0 0 16px;padding:16px;border:1px solid var(--line,#ddd);border-radius:10px}
.plan-row-heading.handle-on-right>.drag-handle{order:10}
#dialog.plan-pdf-dialog .dialog-footer{position:sticky;bottom:-32px;background:var(--surface,#fff);padding:12px 0;margin-bottom:0;z-index:1}