/* Sitework · shared surfaces and type */
:root {
  --canvas: #fff; --ink: #202c27; --muted: #59655f; --line: #dde3de;
  --wine: #284e40; --wine-dark: #18382c; --wine-soft: #e8f0eb;
  --blue: #285343; --blue-bg: #edf4ef; --radius: 7px; --shadow: none;
  font-family: "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
}
body { background: var(--canvas); color: var(--ink); }
button, select, input, textarea { font-family: inherit; }
button:active:not(:disabled) { transform: none; }
:focus-visible { outline: 2px solid #397b60; outline-offset: 3px; }
.app-shell { grid-template-columns: 208px minmax(0,1fr); }
.sidebar { padding: 28px 12px 18px; background: #f6f7f4; color: var(--ink); border-right: 1px solid var(--line); }
.brand { padding: 0 9px 32px; gap: 10px; }
.brand-mark, .login-brand .brand-mark {
  background: var(--wine); color: white; width: 34px; height: 34px;
  border-radius: 5px; font: italic 700 26px/1 Georgia,serif; display: grid; place-items: center;
}
.brand strong, .login-brand strong { color: var(--ink); font-size: 21px; line-height: 1.15; letter-spacing: -.045em; }
.brand small { color: var(--muted); font-size: 11px; margin-top: 3px; }
.nav-list { gap: 3px; }
.nav-item { color: #4a574f; font-weight: 550; min-height: 41px; padding: 9px 12px; border-radius: 5px; }
.nav-item:hover, .nav-item.active { color: #18382c; background: #e5ebe4; box-shadow: none; }
.nav-glyph { color: currentColor; width: 17px; height: 17px; display: inline-grid; place-items: center; }
.nav-glyph svg { display: block; width: 17px; height: 17px; }
.sidebar-foot { color: var(--muted); border-color: var(--line); }
.topbar { padding: 12px clamp(20px,3.5vw,52px); min-height: 76px; }
.topbar h1 { font-size: 17px; letter-spacing: -.025em; font-weight: 600; }
.site-context, .account-name { color: var(--muted); }
.topbar-tools button, .topbar-tools select, .topbar #logout-btn { background: white; border: 1px solid var(--line); border-radius: 5px; }
main { max-width: 1450px; padding: 32px clamp(20px,3.5vw,52px) 72px; }
.eyebrow, .focus-head .eyebrow, .voice-intro .eyebrow { color: #587063; letter-spacing: .08em; font-size: 11px; font-weight: 650; }
.page-head, .focus-head, .hq-heading { margin-bottom: 24px; }
.focus-head { border: 0; padding: 0; }
.page-head h2, .focus-head h2, .hq-heading h2, .voice-intro h2 { color: var(--ink); font-size: clamp(24px,2.6vw,34px); letter-spacing: -.04em; font-weight: 600; }
.focus-count, .manager-metrics strong, .hq-kpi strong { color: var(--ink); font-weight: 580; font-variant-numeric: tabular-nums; }
.card, .panel, .simple-list, .voice-review, .work-order-hero, .detail-hero, .guided-next-step, .work-next, .speech-entry, .voice-photo-choice { border-radius: 7px; box-shadow: none; border-width: 1px; border-color: var(--line); }
.simple-list { border-width: 1px 0; border-radius: 0; }
.case-row, .task-row { min-height: 65px; padding: 12px 6px; gap: 12px; }
.case-row { grid-template-columns: 34px minmax(0,1fr) auto; }
.case-thumb { width: 34px; height: 34px; border-radius: 5px; }
.case-placeholder { background: #edf0eb; color: #53695c; font-weight: 600; }
.case-content strong, .task-title { color: var(--ink); font-size: 14px; line-height: 1.45; font-weight: 600; }
.case-content small, .task-meta, .step-owner-inline { color: var(--muted); font-size: 12px; margin-top: 3px; }
.case-row:hover, .task-row:hover, .hq-kpi:hover, .manager-metrics button:hover { background: #f6f8f5; }
.pill { border-radius: 5px; font-weight: 550; }
.issue-status-tabs { display:flex; gap: 4px; border-bottom: 1px solid var(--line); }
.issue-status-tabs button, .issue-status-tabs button.active {
  background: transparent; color: var(--muted); border: 0; border-radius: 0;
  box-shadow: none; border-bottom: 2px solid transparent; padding: 8px 10px;
}
.issue-status-tabs button.active { border-color: var(--wine); color: var(--wine); }
.issue-status-tabs button span { border-radius: 4px; background: #edf1ed; padding: 1px 4px; }
.issue-list-controls .simple-search { max-width: 430px; }
.manager-metrics, .hq-kpis { gap: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.manager-metrics button, .hq-kpi, .hq-kpi.amber { padding: 16px; min-height: 90px; border: 0; border-right: 1px solid var(--line); border-radius: 0; }
.hq-kpi { border-bottom: 1px solid var(--line); color: var(--ink); }
.manager-columns { gap: clamp(20px,3vw,44px); }
.voice-home-cta, .manager-publish-cta { color: var(--ink); background: #f3f6f2; padding: 12px 16px; border-radius: 5px; }
.voice-home-cta strong, .manager-publish-cta strong { font-size: 16px; font-weight: 600; }
.manager-publish-cta p, .manager-publish-cta .eyebrow { color: var(--muted); }
.voice-home-cta .btn, .manager-publish-cta .btn, .login-submit { color: white; background: var(--wine); border-color: var(--wine); border-radius: 5px; min-height: 44px; font-size: 14px; }
.voice-home-cta .btn:hover:not(:disabled), .manager-publish-cta .btn:hover:not(:disabled) { color: white; background: var(--wine-dark); }
.voice-method, .voice-method.selected, .speech-entry, .step-owner-card, .created-transcript, .issue-transcript-panel, .voice-draft-summary { background: #f4f7f3; color: var(--ink); border-color: #c7d5cb; }
.voice-method.selected { border-color: var(--wine); }
.voice-method strong, .step-owner-card strong, .speech-entry>label, .created-transcript strong, .issue-transcript-panel strong { color: var(--wine-dark); }
.record-button { width: 150px; height: 150px; box-shadow: none; background: #eaf1eb; color: var(--wine-dark); border: 1px solid #cad9ce; }
.record-button:hover { background: #e0ebe2; }
.record-button.recording, .skeleton { animation: none; }
.skeleton { background: #f1f3f0; }
.voice-stage { min-height: 220px; }
.voice-review textarea[name="transcript"] { border: 1px solid #92a99a; background: white; }
.hq-table-wrap thead th, .table th { background: #f2f5f1; color: var(--muted); font-weight: 600; }
.hq-site-link { color: var(--wine); }
.hq-bars .received, .hq-legend span:before { background: #415b50; }
.hq-bars .resolved, .hq-legend .resolved:before { background: #83a78f; }
#login-screen { background: #fafbf8; }
.login-shell { display: grid; min-height: 100dvh; grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: clamp(22px,4vw,56px); gap: clamp(32px,7vh,80px); }
.login-brand { position: static; align-self: start; }
.login-panel { width: min(100%,390px); margin: 0 auto; align-self: start; }
.login-panel h1 { margin: 9px 0 26px; font-size: 34px; font-weight: 600; }
.login-form:has(#login-error:empty) #login-error { display:none; }
.demo-login button { color: var(--wine); background: #fff; border: 1px solid var(--line); }
.demo-staff-picker>summary { color: var(--wine); }
@media (max-width:850px) {
  main { padding: 24px 16px calc(94px + env(safe-area-inset-bottom)); }
  .mobile-nav { box-shadow: none; }
  .mobile-nav .voice-nav, .mobile-nav .voice-nav.active { background: var(--wine); }
  .topbar { padding: 12px 16px; min-height: 65px; }
}
@media (max-width:600px) {
  .case-row { grid-template-columns: 32px minmax(0,1fr); column-gap: 10px; row-gap: 5px; }
  .case-row>.pill { grid-column: 2; justify-self: start; max-width: 100%; white-space: normal; }
  .issue-status-tabs { gap: 0; flex-wrap: nowrap; overflow-x: auto; }
  .issue-status-tabs button { flex-shrink: 0; padding: 6px 8px; }
  .voice-home-cta { flex-direction: row; align-items: center; gap: 10px; }
  .hq-kpi, .manager-metrics button { padding: 12px; }
  .login-shell { padding: 24px; gap: 50px; }
}
@media print {
  main { margin: 0; padding: 0; max-width: none; }
}