/* ============================================================
   蓋然 WBS — design tokens
   Blueprint drafting theme: precision, structure, uncertainty
   resolved line by line, like ink on a drafting sheet.
   ============================================================ */
:root {
  --paper: #0F2A4A;        /* blueprint background */
  --paper-raised: #14335A; /* panel background, one step up */
  --grid-line: #1D4372;    /* faint drafting grid */
  --rule: #2C5588;         /* structural rule / border */
  --ink: #EAF2FF;          /* primary text, near-white blue */
  --ink-dim: #93AFD1;      /* secondary text */
  --ink-faint: #5E7DA3;    /* tertiary / placeholder */
  --accent: #7FD1E8;       /* cyan drafting accent, links/focus */
  --amber: #E8A33D;        /* attention */
  --green: #6FCF97;        /* 完了 = resolved */
  --red: #E36464;          /* danger */
  --review: #C792EA;       /* review markers — distinct from status/critical-path colors */

  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-sans: 'IBM Plex Sans JP', 'Hiragino Sans', sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
}
body {
  min-height: 100vh;
  background-color: var(--paper);
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
textarea, input, select { font-family: inherit; }
::selection { background: var(--accent); color: var(--paper); }

/* ---------------- scrollbars ---------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 5px; }

/* ================= AUTH SCREEN ================= */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  padding: 40px 32px;
  position: relative;
}
.auth-card::before {
  content: '';
  position: absolute;
  top: 10px; left: 10px; right: 10px; bottom: 10px;
  border: 1px dashed var(--rule);
  pointer-events: none;
}
.auth-brand { text-align: center; margin-bottom: 32px; }
.auth-mark {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: 10px;
}
.auth-title {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}
.auth-sub {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.6;
}
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label, .modal-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-dim);
  margin-bottom: 14px;
}
.auth-form input, .modal-card input[type="password"], .modal-card input[type="text"] {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: 10px 12px;
  font-size: 14px;
}
.auth-form input:focus, .modal-card input:focus { outline: none; border-color: var(--accent); }
.auth-note { font-size: 12px; color: var(--amber); margin: 0 0 4px; }
.auth-error { font-size: 12px; color: var(--red); min-height: 16px; }

.btn-primary {
  background: var(--accent);
  color: var(--paper);
  border: none;
  padding: 11px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.03em;
  margin-top: 6px;
}
.btn-primary:hover { filter: brightness(1.1); }

/* ================= APP LAYOUT ================= */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--rule);
  background: rgba(15, 42, 74, 0.9);
  backdrop-filter: blur(4px);
  position: sticky;
  top: 0;
  z-index: 10;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar-left, .topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.brand-mark {
  font-family: var(--font-mono);
  color: var(--accent);
  letter-spacing: 0.25em;
  font-size: 13px;
  margin-right: 6px;
}
.project-select {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: 7px 10px;
  font-size: 13px;
  min-width: 160px;
}
.icon-btn {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  padding: 7px 10px;
  font-size: 12px;
  white-space: nowrap;
}
.icon-btn:hover { border-color: var(--accent); color: var(--ink); }
.icon-btn:disabled { opacity: 0.35; cursor: default; border-color: var(--rule); color: var(--ink-faint); }
.icon-btn:disabled:hover { border-color: var(--rule); color: var(--ink-faint); }
.icon-btn.danger:hover { border-color: var(--red); color: var(--red); }

.view-toggle {
  display: flex;
  border: 1px solid var(--rule);
  overflow: hidden;
  margin-left: 4px;
}
.view-toggle-btn {
  background: transparent;
  border: none;
  color: var(--ink-dim);
  padding: 7px 12px;
  font-size: 12px;
  font-family: var(--font-mono);
}
.view-toggle-btn.active {
  background: var(--accent);
  color: var(--paper);
  font-weight: 600;
}
.view-toggle-btn:not(.active):hover { color: var(--ink); }

.topbar-menu {
  position: relative;
  margin-left: 4px;
}
.topbar-menu-btn.topbar-menu-btn { /* specificity bump over .icon-btn */
  letter-spacing: 0.05em;
}
.topbar-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  box-shadow: 0 8px 24px rgba(6, 16, 30, 0.5);
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 6px;
}
.topbar-menu-item {
  background: transparent;
  border: none;
  color: var(--ink-dim);
  text-align: left;
  padding: 9px 10px;
  font-size: 13px;
  font-family: var(--font-sans);
  cursor: pointer;
}
.topbar-menu-item:hover { background: var(--paper); color: var(--ink); }
.topbar-menu-item.danger { color: var(--red); }
.topbar-menu-item.danger:hover { background: rgba(227, 100, 100, 0.12); color: var(--red); }
.topbar-menu-divider {
  height: 1px;
  background: var(--rule);
  margin: 6px 4px;
}

.username-display {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
}

.progress-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.progress-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  text-align: right;
}
.progress-bar {
  width: 160px;
  height: 6px;
  background: var(--rule);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--green);
  transition: width 0.25s ease;
}