/* ===================================================================
 * ARGOS Design System  —  argos-ds.css
 * スイート共通のトークン＆コンポーネント。全アプリで読み込んで使用。
 * 既存スタイルと衝突しないよう接頭辞は a- / --a- で統一。
 * =================================================================== */

:root {
  /* ---- surfaces ---- */
  --a-bg: #02060F; --a-bg-1: #060B1A; --a-surface: #0B1124; --a-surface-2: #0E1630;
  --a-border: #1A2447; --a-border-2: #243156; --a-line-soft: #111B2E;
  /* ---- text ---- */
  --a-text: #F0F4FA; --a-text-2: #B8C2DC; --a-text-3: #7B8AAD; --a-text-4: #4A5878;
  /* ---- accents ---- */
  --a-cyan: #38BDF8; --a-cyan-bright: #7DD3FC;
  --a-gold: #D4A24E; --a-gold-bright: #E8B962;
  --a-eq: #34D399; --a-eq-bright: #6EE7B7;
  --a-board: #A78BFA; --a-bench: #FB7185; --a-ana: #FB923C; --a-red: #F87171;
  /* ---- type ---- */
  --a-sans: "IBM Plex Sans JP", system-ui, -apple-system, sans-serif;
  --a-mono: "IBM Plex Mono", ui-monospace, monospace;
  /* ---- shape / motion ---- */
  --a-r-sm: 6px; --a-r: 9px; --a-r-lg: 13px; --a-r-pill: 999px;
  --a-shadow: 0 4px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  --a-shadow-pop: 0 12px 40px -12px rgba(0,0,0,.7);
  --a-t: .18s cubic-bezier(.2,.7,.3,1);
  /* per-context accent (override on a wrapper to retheme accents) */
  --a-accent: var(--a-cyan); --a-accent-bright: var(--a-cyan-bright); --a-accent-rgb: 56,189,248;
}

/* ---- base helpers ---- */
.a-mono { font-family: var(--a-mono); }
.a-eyebrow { font-family: var(--a-mono); font-size: .64rem; letter-spacing: .34em; text-transform: uppercase; color: var(--a-text-4); }
.a-muted { color: var(--a-text-3); }
.a-hr { height: 1px; border: 0; background: var(--a-border); margin: 18px 0; }

/* ---- buttons ---- */
.a-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--a-mono); font-size: .76rem; letter-spacing: .06em; line-height: 1;
  padding: 10px 16px; border-radius: var(--a-r-sm); cursor: pointer; white-space: nowrap;
  border: 1px solid var(--a-border-2); background: var(--a-bg-1); color: var(--a-text-2);
  transition: border-color var(--a-t), box-shadow var(--a-t), background var(--a-t), transform var(--a-t);
}
.a-btn:hover { border-color: var(--a-accent); color: var(--a-accent-bright); box-shadow: 0 0 14px rgba(var(--a-accent-rgb), .22); }
.a-btn:active { transform: translateY(1px); }
.a-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.a-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--a-accent-rgb), .35); }
.a-btn--primary { background: linear-gradient(180deg, rgba(var(--a-accent-rgb),.18), rgba(var(--a-accent-rgb),.05)); border-color: rgba(var(--a-accent-rgb),.5); color: var(--a-accent-bright); }
.a-btn--gold { --a-accent: var(--a-gold); --a-accent-bright: var(--a-gold-bright); --a-accent-rgb: 212,162,78; background: linear-gradient(180deg, rgba(212,162,78,.18), rgba(212,162,78,.05)); border-color: rgba(212,162,78,.5); color: var(--a-gold-bright); }
.a-btn--danger { --a-accent-rgb: 248,113,113; color: var(--a-red); border-color: rgba(248,113,113,.4); }
.a-btn--sm { padding: 6px 11px; font-size: .68rem; }
.a-btn--lg { padding: 13px 22px; font-size: .82rem; }

/* ---- cards ---- */
.a-card {
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid var(--a-border); border-radius: var(--a-r-lg);
  background: linear-gradient(180deg, var(--a-surface), var(--a-bg-1));
  box-shadow: var(--a-shadow); padding: 20px;
}
.a-card--accent::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--a-accent); box-shadow: 0 0 14px var(--a-accent); }
.a-card--link { text-decoration: none; color: inherit; transition: transform var(--a-t), border-color var(--a-t), box-shadow var(--a-t); }
.a-card--link:hover { transform: translateY(-6px); border-color: rgba(var(--a-accent-rgb),.5); box-shadow: 0 14px 40px -16px rgba(var(--a-accent-rgb),.4); }

/* ---- section heading ---- */
.a-h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; font-family: var(--a-sans); font-size: 1.05rem; font-weight: 600; color: var(--a-text); }
.a-h3 .a-bar { width: 3px; height: 16px; border-radius: 2px; background: var(--a-accent); box-shadow: 0 0 10px var(--a-accent); }
.a-hint { color: var(--a-text-3); font-size: .8rem; margin: 0 0 14px; line-height: 1.6; }

/* ---- chips & badges ---- */
.a-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--a-mono); font-size: .66rem; letter-spacing: .06em; padding: 4px 10px; border-radius: var(--a-r-pill); border: 1px solid var(--a-border-2); color: var(--a-text-3); background: var(--a-bg-1); white-space: nowrap; }
.a-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--a-mono); font-size: .62rem; font-weight: 500; letter-spacing: .04em; padding: 3px 9px; border-radius: var(--a-r-pill); border: 1px solid; }
.a-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.a-badge--ok { color: var(--a-eq-bright); border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.12); }
.a-badge--warn { color: var(--a-gold-bright); border-color: rgba(212,162,78,.4); background: rgba(212,162,78,.12); }
.a-badge--danger { color: var(--a-bench); border-color: rgba(251,113,133,.4); background: rgba(251,113,133,.12); }
.a-badge--info { color: var(--a-cyan-bright); border-color: rgba(56,189,248,.4); background: rgba(56,189,248,.12); }
.a-badge--idle { color: var(--a-text-3); border-color: var(--a-border-2); background: var(--a-bg-1); }

/* ---- tabs ---- */
.a-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--a-border); flex-wrap: wrap; }
.a-tab { background: none; border: 0; color: var(--a-text-3); font-family: var(--a-sans); font-size: .92rem; font-weight: 500; padding: 11px 18px; cursor: pointer; border-bottom: 2px solid transparent; transition: color var(--a-t), border-color var(--a-t); }
.a-tab:hover { color: var(--a-text); }
.a-tab.is-active { color: var(--a-accent-bright); border-bottom-color: var(--a-accent); }

/* ---- segmented control ---- */
.a-seg { display: inline-flex; border: 1px solid var(--a-border-2); border-radius: var(--a-r-sm); overflow: hidden; }
.a-seg button { background: var(--a-bg-1); border: 0; color: var(--a-text-3); font-family: var(--a-mono); font-size: .72rem; padding: 8px 14px; cursor: pointer; transition: background var(--a-t), color var(--a-t); }
.a-seg button.is-active { background: linear-gradient(180deg, rgba(var(--a-accent-rgb),.25), rgba(var(--a-accent-rgb),.08)); color: var(--a-accent-bright); }

/* ---- forms ---- */
.a-field { display: flex; flex-direction: column; gap: 5px; }
.a-label { font-family: var(--a-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--a-text-3); }
.a-input, .a-textarea, .a-select { background: var(--a-bg-1); border: 1px solid var(--a-border-2); color: var(--a-text); border-radius: 7px; padding: 9px 11px; font-family: var(--a-mono); font-size: .84rem; transition: border-color var(--a-t), box-shadow var(--a-t); width: 100%; box-sizing: border-box; }
.a-textarea { font-size: .8rem; line-height: 1.6; resize: vertical; min-height: 120px; }
.a-input::placeholder, .a-textarea::placeholder { color: var(--a-text-4); }
.a-input:focus, .a-textarea:focus, .a-select:focus { outline: none; border-color: var(--a-accent); box-shadow: 0 0 0 2px rgba(var(--a-accent-rgb), .18); }
.a-input.is-invalid, .a-textarea.is-invalid { border-color: var(--a-red); box-shadow: 0 0 0 2px rgba(248,113,113,.18); }

/* ---- KPI ---- */
.a-kpi { border: 1px solid var(--a-border); border-radius: var(--a-r); background: var(--a-surface-2); padding: 13px 15px; }
.a-kpi .k { font-family: var(--a-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--a-text-3); }
.a-kpi .v { font-size: 1.32rem; font-weight: 600; margin-top: 5px; font-family: var(--a-mono); color: var(--a-accent-bright); }
.a-kpi .s { font-size: .72rem; color: var(--a-text-3); margin-top: 3px; }

/* ---- table ---- */
.a-table { width: 100%; border-collapse: collapse; font-family: var(--a-mono); font-size: .8rem; }
.a-table th, .a-table td { padding: 7px 10px; text-align: right; border-bottom: 1px solid rgba(26,36,71,.6); white-space: nowrap; }
.a-table th:first-child, .a-table td:first-child { text-align: left; font-family: var(--a-sans); color: var(--a-text-2); }
.a-table thead th { color: var(--a-text-3); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--a-border-2); }
.a-table tbody tr:hover { background: rgba(var(--a-accent-rgb), .05); }
.a-table tr.is-total td { font-weight: 600; color: var(--a-text); border-top: 1px solid var(--a-border-2); }

/* ---- stepper ---- */
.a-stepper { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8rem; color: var(--a-text-3); }
.a-stepper .step { display: inline-flex; align-items: center; gap: 7px; }
.a-stepper .num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--a-border-2); font-family: var(--a-mono); font-size: .66rem; color: var(--a-text-3); }
.a-stepper .step.is-active .num { background: var(--a-accent); color: var(--a-bg); border-color: var(--a-accent); }
.a-stepper .step.is-done .num { color: var(--a-eq-bright); border-color: rgba(52,211,153,.5); }
.a-stepper .sep { color: var(--a-text-4); }

/* ---- dropzone ---- */
.a-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 26px; border: 1.5px dashed var(--a-border-2); border-radius: var(--a-r); background: rgba(var(--a-accent-rgb), .03); color: var(--a-text-3); font-size: .82rem; cursor: pointer; transition: border-color var(--a-t), background var(--a-t); }
.a-dropzone:hover, .a-dropzone.is-drag { border-color: var(--a-accent); background: rgba(var(--a-accent-rgb), .08); color: var(--a-text-2); }
.a-dropzone .big { font-size: 1.4rem; color: var(--a-accent); }

/* ---- callout / note ---- */
.a-callout { border: 1px solid var(--a-border); border-left: 3px solid var(--a-accent); border-radius: 0 var(--a-r) var(--a-r) 0; background: rgba(var(--a-accent-rgb), .05); padding: 12px 14px; font-size: .84rem; color: var(--a-text-2); line-height: 1.7; }

/* ---- tooltip (data-a-tip) ---- */
[data-a-tip] { position: relative; }
[data-a-tip]:hover::after { content: attr(data-a-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); background: var(--a-bg); border: 1px solid var(--a-accent); color: var(--a-text); font-family: var(--a-sans); font-size: .72rem; line-height: 1.5; padding: 7px 10px; border-radius: var(--a-r-sm); white-space: normal; width: max-content; max-width: 260px; z-index: 60; box-shadow: var(--a-shadow-pop); }

/* ---- skeleton / spinner ---- */
.a-skeleton { background: linear-gradient(90deg, var(--a-surface) 25%, var(--a-surface-2) 37%, var(--a-surface) 63%); background-size: 400% 100%; animation: a-shimmer 1.4s ease infinite; border-radius: var(--a-r-sm); }
@keyframes a-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.a-spinner { width: 16px; height: 16px; border: 2px solid var(--a-border-2); border-top-color: var(--a-accent); border-radius: 50%; display: inline-block; animation: a-spin .8s linear infinite; }
@keyframes a-spin { to { transform: rotate(360deg); } }

/* ---- HUD bar ---- */
.a-hud { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 9px 20px; font-family: var(--a-mono); font-size: .66rem; letter-spacing: .12em; color: var(--a-text-3); text-transform: uppercase; border-bottom: 1px solid rgba(56,189,248,.16); background: linear-gradient(180deg, rgba(8,14,30,.72), rgba(8,14,30,.32)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.a-hud .brand { color: var(--a-cyan-bright); letter-spacing: .2em; font-weight: 600; }
.a-hud .back { color: var(--a-text-2); text-decoration: none; border: 1px solid var(--a-border-2); padding: 4px 10px; border-radius: var(--a-r-sm); transition: border-color var(--a-t), color var(--a-t); }
.a-hud .back:hover { border-color: var(--a-cyan); color: var(--a-cyan-bright); }
.a-hud .sep { flex: 1; }
.a-hud .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--a-eq); box-shadow: 0 0 8px var(--a-eq); display: inline-block; }

/* ---- accent context utilities ---- */
.a-acc-gold { --a-accent: var(--a-gold); --a-accent-bright: var(--a-gold-bright); --a-accent-rgb: 212,162,78; }
.a-acc-eq { --a-accent: var(--a-eq); --a-accent-bright: var(--a-eq-bright); --a-accent-rgb: 52,211,153; }
.a-acc-board { --a-accent: var(--a-board); --a-accent-bright: #C4B5FD; --a-accent-rgb: 167,139,250; }
.a-acc-bench { --a-accent: var(--a-bench); --a-accent-bright: #FDA4AF; --a-accent-rgb: 251,113,133; }
.a-acc-ana { --a-accent: var(--a-ana); --a-accent-bright: #FDBA74; --a-accent-rgb: 251,146,60; }

/* ---- layout utilities ---- */
.a-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.a-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.a-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.a-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.a-stack { display: grid; gap: 14px; }
@media (max-width: 860px) { .a-grid-2, .a-grid-3, .a-grid-4 { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .a-skeleton, .a-spinner { animation: none; }
  .a-btn, .a-card--link, .a-tab, .a-seg button { transition: none; }
}