/* Mobile workspace: shared engineering palette, readable density, touch first. */
:root {
  color-scheme: light;
  --bg: var(--ui-bg, #f4f6f8);
  --bg-2: #ffffff;
  --panel: #ffffff;
  --panel-2: #f4f6f8;
  --panel-3: #edf3f7;
  --line: #c6d0d9;
  --line-soft: #dce3e9;
  --text: var(--ui-text, #17212b);
  --muted: var(--ui-muted, #526171);
  --blue: #006eb6;
  --blue-2: #005b98;
  --red: #b42332;
  --green: #18764a;
  --yellow: #946000;
  --shadow: 0 2px 8px rgb(23 33 43 / 4%);
  --radius: 12px;
}

html { scroll-padding-top: 144px; }
body {
  min-height: 100dvh;
  color: var(--text);
  background: var(--bg);
  font-family: var(--ui-font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 14px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea { transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid rgb(0 110 182 / 38%);
  outline-offset: 3px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgb(0 110 182 / 12%);
}
input, select, textarea {
  min-height: 46px;
  border-color: var(--ui-input-border, #8795a3);
  border-radius: 8px;
  color: var(--text);
  background: #fff;
  font-size: 16px;
  line-height: 1.45;
}
input::placeholder, textarea::placeholder { color: #697786; opacity: 1; }
textarea { min-height: 104px; }
input:disabled, select:disabled, textarea:disabled {
  color: #607080;
  -webkit-text-fill-color: #607080;
  background: #f0f3f6;
  border-color: #dce3e9;
  opacity: 1;
}
button:disabled { opacity: .52; }
input:user-invalid, select:user-invalid, textarea:user-invalid,
[aria-invalid="true"] { border-color: var(--red); }
label { gap: 8px; }
label > span, .control-label span { color: var(--muted); font-size: 12px; font-weight: 600; }
.mobile-shell { width: min(100%, 760px); padding: 0 20px calc(32px + env(safe-area-inset-bottom)); }
.mobile-header {
  min-height: calc(80px + env(safe-area-inset-top));
  margin: 0 -20px 20px;
  padding: calc(16px + env(safe-area-inset-top)) 20px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: rgb(244 246 248 / 96%);
  backdrop-filter: blur(16px);
}
.mobile-brand { gap: 14px; }
.mobile-logo { width: 60px; height: 36px; border-radius: 0; }
.mobile-header h1 { font-size: 20px; font-weight: 650; line-height: 1.2; letter-spacing: -.025em; }
#sessionLabel { max-width: 420px; font-size: 12px; line-height: 1.45; }
.mobile-header-actions { flex-shrink: 0; }
.mobile-icon { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.panel, .controls-card, .task-card, .sheet-section, .status-card, .metric-card, .actions-panel {
  background: var(--panel);
  border-color: var(--line-soft);
  box-shadow: var(--shadow);
}
.login-panel { max-width: 460px; margin: 40px auto 0; padding: 28px; border-radius: 16px; }
.login-panel h2 { margin-bottom: 8px; font-size: 28px; line-height: 1.15; letter-spacing: -.035em; font-weight: 650; }
.login-intro { margin-bottom: 28px; color: var(--muted); }
.login-form { gap: 20px; }
.login-form > label > span { font-size: 14px; }
.remember-login-options { gap: 8px; }
.remember-login { min-height: 44px; align-items: center; }
.remember-login > span { font-size: 13px; line-height: 1.45; font-weight: 500; }
.remember-login input { flex: 0 0 18px; }
.remember-login-hint { font-size: 12px; line-height: 1.55; }
.remember-login input:disabled + span { opacity: 1; }
.storage-consent-settings { min-height: 44px; font-size: 12px; font-weight: 600; }
.storage-consent-settings:hover, .storage-consent-settings:focus-visible { color: #005b98; }
.mobile-legal-links { margin-top: 0; font-size: 12px; gap: 4px 16px; }
.mobile-legal-links a { padding-block: 10px; color: var(--blue); text-underline-offset: 3px; }
.primary-button, .secondary-button, .action-button, .danger-button,
.mini-button, .icon-button, .mobile-tab, .status-filter {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}
.primary-button, .action-button { color: #fff; border-color: var(--blue); background: var(--blue); }
.secondary-button, .mini-button, .icon-button, .mobile-tab, .status-filter { color: var(--text); background: #fff; border-color: var(--line); }
.danger-button { color: #fff; border-color: var(--red); background: var(--red); }
.icon-button { width: 44px; min-width: 44px; padding: 0; }
.app-panel, .mobile-view { gap: 16px; }
.mobile-tabs {
  top: calc(80px + env(safe-area-inset-top));
  gap: 4px;
  margin-top: -8px;
  padding: 4px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #e9eef2;
}
.mobile-tab { border-color: transparent; background: transparent; }
.mobile-tab.is-active { border-color: #d5dfe6; color: var(--blue); background: #fff; box-shadow: 0 1px 3px rgb(23 33 43 / 5%); }
.controls-card { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 16px; }
.mobile-period-filters { display: grid; min-width: 0; gap: 10px; }
.mobile-period-filters.has-year-filter { grid-template-columns: minmax(0, 1fr) minmax(92px, .45fr); }
.mobile-period-filters > label { min-width: 0; }
.mobile-period-filters select { width: 100%; min-width: 0; min-height: 46px; }
@media (max-width: 700px) {
  .controls-card .mobile-period-filters.has-year-filter { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .controls-card .mobile-period-filters.has-year-filter { grid-template-columns: 1fr; }
}
.manager-all-in-work-button.is-active { color: var(--blue); border-color: #9bc3df; background: #edf5fa; }
.sync-info, .updated { font-size: 12px; line-height: 1.5; }
.summary-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.summary-item { padding: 16px 12px; border-color: var(--line-soft); border-radius: 10px; background: #fff; }
.summary-item strong { font-size: 26px; font-weight: 600; line-height: 1.1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.summary-item span { margin-top: 8px; overflow: visible; color: var(--muted); font-size: 12px; line-height: 1.4; font-weight: 500; white-space: normal; overflow-wrap: normal; }
.status-filters { margin: -3px; padding: 3px 3px 7px; gap: 8px; scroll-padding-inline: 3px; scrollbar-color: #bdcbd6 transparent; }
.status-filter { min-height: 44px; border-color: var(--line-soft); font-size: 13px; }
.status-filter.is-active { color: #fff; background: var(--blue); border-color: var(--blue); }
.search-box { gap: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.search-box > span { font-size: 12px; }
.search-box input { min-height: 48px; padding-inline: 14px; }
.task-list { gap: 12px; }
.task-card { gap: 16px; padding: 18px; color: var(--text); border-radius: 12px; }
.task-card:active { transform: none; background: #f8fafb; }
.task-card-title { font-size: 16px; line-height: 1.4; letter-spacing: -.015em; font-weight: 600; }
.task-card-head { gap: 12px; }
.badge, .urgency-badge, .status-badge { min-height: 26px; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 1.3; }
.badge { color: var(--muted); border-color: var(--line-soft); background: #f4f6f8; }
.urgency-badge { color: #745000; border-color: #ead8a9; background: #fff8e8; }
.status-badge { color: #005b98; border-color: #c5dceb; background: #eef6fb; }
.task-card-meta { gap: 6px; }
.progress-head { font-size: 12px; font-weight: 500; }
.progress-head strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.progress-track { height: 6px; border: 0; background: #e6edf2; }
.progress-track span, .task-progress-fill, .mobile-loading-progress > span { background: var(--blue); }
.empty-state { padding: 36px 20px; border-color: var(--line); background: #fff; }
.notice { color: #745000; border-color: #e7d29e; background: #fff8e8; line-height: 1.55; }
.notice.is-error { color: #922333; border-color: #e9b9bf; background: #fff3f4; }
.mobile-push-launch { gap: 12px; padding: 14px; margin-bottom: 0; border-color: #d3e1eb; border-radius: 12px; background: #edf4f9; }
.mobile-push-launch strong { font-size: 13px; font-weight: 600; line-height: 1.45; }
.mobile-push-launch small { font-size: 12px; line-height: 1.45; white-space: normal; }
.mobile-push-launch > b { color: var(--blue); font-size: 12px; font-weight: 600; }
.mobile-push-launch-icon { color: var(--blue); border-radius: 8px; background: #dcecf6; }
.mobile-push-launch.is-active { border-color: #bbd8c8; background: #eef8f2; }
.mobile-loading-overlay { background: rgb(244 246 248 / 88%); }
.mobile-loading-card { border-color: var(--line-soft); border-radius: 16px; padding: 24px; box-shadow: 0 16px 48px rgb(23 33 43 / 12%); }
.mobile-loading-copy { gap: 10px; }
.mobile-loading-copy strong { font-size: 16px; font-weight: 600; }
.mobile-loading-copy > small { font-size: 12px; }
.mobile-loading-spinner { border-color: #dce7ef; border-top-color: var(--blue); }
.sheet-backdrop, .push-onboarding-backdrop { background: rgb(18 29 40 / 40%); backdrop-filter: blur(4px); }
.sheet-panel {
  left: 50%; right: auto; transform: translateX(-50%);
  width: min(100%, 760px);
  min-height: min(80dvh, 760px);
  max-height: calc(100dvh - max(16px, env(safe-area-inset-top)));
  border: 1px solid var(--line-soft);
  border-radius: 16px 16px 0 0;
  background: var(--bg);
  box-shadow: 0 -12px 60px rgb(23 33 43 / 16%);
}
.sheet-header { grid-row: 1; align-items: center; padding: 20px; border-color: var(--line-soft); background: #fff; }
.sheet-panel > .notice { grid-row: 2; }
.sheet-header h2 { font-size: 20px; font-weight: 650; line-height: 1.3; letter-spacing: -.025em; }
.sheet-path { max-height: 3em; overflow: auto; margin-top: 6px; font-size: 12px; line-height: 1.5; }
.sheet-content { grid-row: 3; gap: 16px; padding: 20px; overscroll-behavior: contain; scroll-padding-block: 20px; }
.sheet-section { gap: 16px; padding: 18px; border-radius: 12px; }
.sheet-section h3 { font-size: 15px; font-weight: 650; }
.compact-section { background: #fff; }
.mobile-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
input[type="range"] { min-height: 44px; height: 44px; accent-color: var(--blue); }
.range-row strong { min-height: 40px; background: #f4f6f8; border-color: var(--line-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.mini-button { font-size: 12px; padding: 10px 12px; }
.quantity-item, .role-task-card, .role-step { gap: 14px; padding: 14px; border-color: var(--line-soft); border-radius: 10px; background: #f8fafb; }
.role-step { margin-top: 12px; background: #fff; }
.role-task-title { flex-wrap: wrap; font-weight: 600; }
.role-task-title > span { min-width: 0; overflow-wrap: anywhere; }
.attachments-note { font-weight: 500; }
.quantity-item-grid { grid-template-columns: minmax(0, 1fr) 90px; gap: 12px; }
.quantity-item-footer, .role-step-controls { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.role-step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.done-toggle { min-height: 44px; gap: 10px; padding: 10px; background: #f4f6f8; font-size: 13px; font-weight: 500; }
.done-toggle input { min-height: 18px; flex: 0 0 18px; }
.sheet-actions { grid-row: 4; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-color: var(--line-soft); background: #fff; }
.quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric-card, .status-card, .actions-panel { padding: 18px; }
.metric-card span { font-size: 12px; font-weight: 600; text-transform: none; }
.metric-card strong { font-size: 28px; font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.metric-card small { font-size: 12px; }
.metric-ok { border-color: #b9d9c8; }
.metric-warning { border-color: #e7d29e; }
.metric-error { border-color: #e9b9bf; }
.pill { border-radius: 6px; font-weight: 600; background: #617181; }
.pill.ok { color: #17603e; background: #e7f4ed; }
.pill.warning { color: #745000; background: #fff4d9; }
.pill.error { color: #922333; background: #fce8eb; }
.row { border-color: var(--line-soft); padding-block: 12px; }
.row strong { font-weight: 600; }
.actions-panel h2 { font-size: 18px; font-weight: 650; }
.hint { font-size: 12px; line-height: 1.55; }
.push-onboarding-panel { width: min(100%, 760px); justify-self: center; padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); border-color: var(--line-soft); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 60px rgb(23 33 43 / 16%); overscroll-behavior: contain; }
.push-onboarding-header { gap: 14px; padding-right: 48px; }
.push-onboarding-bell { border-radius: 12px; color: var(--blue); background: #edf5fa; box-shadow: none; }
.push-onboarding-kicker { margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.push-onboarding-header h2 { font-size: 24px; line-height: 1.2; font-weight: 650; letter-spacing: -.035em; }
.push-onboarding-header p { margin-top: 12px; font-size: 14px; line-height: 1.55; }
.push-onboarding-close { top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 8px; color: var(--muted); background: #fff; }
.push-onboarding-flow { margin: 24px 0; padding: 12px; gap: 8px; background: #f4f6f8; font-size: 12px; font-weight: 500; }
.push-onboarding-flow b { width: 22px; height: 22px; flex-shrink: 0; font-size: 12px; }
.push-onboarding-flow i { color: #7c8a97; }
.push-platform-grid { gap: 12px; }
.push-platform-card { padding: 18px; border-color: var(--line-soft); border-radius: 12px; background: #fff; }
.push-platform-card header strong { font-size: 14px; font-weight: 600; }
.push-platform-card header small { font-size: 12px; line-height: 1.5; }
.push-platform-icon { background: #526171; }
.push-device-preview { min-height: 88px; margin-block: 16px; padding: 12px; gap: 6px; border-color: var(--line-soft); border-radius: 8px; background: #f4f6f8; }
.push-device-preview span, .push-device-preview em { font-size: 12px; }
.push-device-preview b { color: var(--blue); font-size: 14px; }
.push-platform-card ol { gap: 10px; padding-left: 20px; font-size: 13px; line-height: 1.55; }
.push-platform-card li::marker { color: var(--blue); font-weight: 600; }
.push-onboarding-status { margin-top: 16px; font-size: 12px; line-height: 1.5; }
.push-onboarding-status.is-success { color: #17603e; font-weight: 600; }
.push-onboarding-status.is-error { color: #922333; font-weight: 600; }
.push-onboarding-actions { bottom: calc(-20px - env(safe-area-inset-bottom)); margin: 16px -20px calc(-20px - env(safe-area-inset-bottom)); padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); gap: 10px; border-top: 1px solid var(--line-soft); box-shadow: none; }
.push-onboarding-actions button { min-height: 44px; font-size: 13px; }
.storage-consent-banner { max-width: 720px; border-color: var(--line-soft); border-radius: 12px; box-shadow: var(--shadow); background: #fff; }
.storage-consent-actions button { min-height: 44px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.storage-consent-accept { background: var(--blue) !important; }
.storage-consent-copy strong { font-weight: 600; }
.storage-consent-copy p { line-height: 1.6; }
.storage-consent-copy a { color: var(--blue); }

@media (hover: hover) {
  .primary-button:hover:not(:disabled), .action-button:hover:not(:disabled) { background: #005b98; border-color: #005b98; }
  .secondary-button:hover:not(:disabled), .mini-button:hover:not(:disabled), .icon-button:hover:not(:disabled), .status-filter:hover:not(.is-active) { border-color: #9cabb9; background: #f4f7f9; }
  .task-card:hover { border-color: #aabfcc; box-shadow: 0 4px 16px rgb(23 33 43 / 7%); }
}
@media (min-width: 700px) {
  .mobile-shell { padding-top: 16px; }
  .mobile-header { border-radius: 0 0 12px 12px; }
  .summary-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .summary-item { padding-inline: 10px; }
  .task-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .empty-state { grid-column: 1 / -1; }
  .sheet-panel { bottom: 20px; max-height: calc(100dvh - 40px); border-radius: 16px; }
  .push-onboarding-modal { align-items: center; padding: 24px; }
  .push-onboarding-panel { border-radius: 16px; }
}
@media (max-width: 480px) {
  .mobile-shell { padding-inline: 16px; }
  .mobile-header { margin-inline: -16px; padding-inline: 16px; }
  .mobile-brand { gap: 10px; }
  .mobile-logo { width: 52px; height: 32px; }
  #sessionLabel { max-width: 190px; }
  .login-panel { margin-top: 24px; padding: 24px 20px; }
  .controls-card { padding: 14px; gap: 10px; }
  .summary-item { padding: 14px 10px; }
  .task-card { padding: 16px; }
  .mobile-push-launch { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .mobile-push-launch > b { grid-column: 2; margin-top: -5px; }
  .mobile-push-launch-icon { width: 32px; height: 32px; }
  .sheet-header { padding: 16px; }
  .sheet-content { padding: 16px; }
  .sheet-section { padding: 14px; gap: 14px; }
  .sheet-actions { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); gap: 10px; }
  .sheet-actions button { font-size: 13px; padding-inline: 8px; }
  .mobile-form-grid { grid-template-columns: 1fr; }
  .quantity-item-grid { grid-template-columns: 1fr; }
  .quantity-item-footer, .role-step-controls { grid-template-columns: 1fr; }
  .role-step-grid { grid-template-columns: 1fr 1fr; }
  .role-step-grid label:last-child { grid-column: 1 / -1; }
  .push-onboarding-header { grid-template-columns: minmax(0, 1fr); }
  .push-onboarding-bell { margin-bottom: 4px; }
  .push-onboarding-header h2 { font-size: 23px; }
  .push-onboarding-flow { flex-wrap: wrap; padding-inline: 8px; }
}
@media (max-width: 350px) {
  .mobile-shell { padding-inline: 12px; }
  .mobile-header { margin-inline: -12px; padding-inline: 12px; }
  .mobile-header h1 { font-size: 18px; }
  #sessionLabel { max-width: 148px; }
  .controls-card { grid-template-columns: 1fr; }
  .summary-strip { gap: 6px; }
  .summary-item { padding: 12px 8px; }
  .summary-item span { font-size: 12px; letter-spacing: -.025em; }
  .task-card-head { grid-template-columns: 1fr; gap: 8px; }
  .urgency-badge { justify-self: start; }
  .sheet-content { padding: 12px; }
  .sheet-section { padding: 12px; }
  .push-onboarding-actions { flex-wrap: wrap; }
  .push-onboarding-actions button:last-child { flex-basis: 100%; }
}
@media (max-height: 500px) {
  .sheet-panel { min-height: 0; max-height: 100dvh; border-radius: 0; }
  .sheet-header { padding-block: 10px; }
  .sheet-path { display: none; }
  .sheet-actions { padding-block: 10px; }
  .push-onboarding-panel { max-height: 100dvh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}