/* HARI：夜の建築。群青の空、ガラスの中から漏れる暖かい灯り、黄色い鉄骨のトラス、白く光る細い文字の看板 */
:root {
  --bg: #0b1430;
  --surface: #121d40;
  --surface-2: #18264f;
  --ink: #eef2fb;
  --muted: #9aa6c4;
  --line: #24345f;
  --accent: #f2b13c;      /* 灯りと鉄骨の黄色 */
  --accent-ink: #1a1306;
  --hot: #ff7a3c;
  --ok: #7fc47a;
  --badge: #ff7a3c;
  --pmark: linear-gradient(135deg, #ffd27a, #f2b13c);
  --side-dark: #070d22;
  --side-ink: #fff7e6;
  --side-pill: rgba(10, 18, 44, .72);
  --human-bg: rgba(242, 177, 60, .1);
  --human-line: rgba(242, 177, 60, .5);
  --human-node: #ffd27a;
  --bar-ink: #ffd27a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 30px -14px rgba(0, 0, 0, .7);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .45), 0 22px 44px -16px rgba(0, 0, 0, .8);
  --font-head: "Noto Sans JP", sans-serif;
  /* メニュー：灯りのともったガラスの箱の中に、黄色い鉄骨の木の枝のようなトラス */
  --side:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='300'><g stroke='%23f2b13c' stroke-width='3' fill='none' stroke-linecap='round' opacity='.45'><path d='M60 300 V170 L20 110 M60 170 L100 110 M60 170 L60 100'/><path d='M180 300 V170 L140 110 M180 170 L220 110 M180 170 L180 100'/><path d='M0 100 H240'/></g><g stroke='%23f2b13c' stroke-width='1.5' opacity='.3'><path d='M20 110 L60 100 L100 110 L140 110 L180 100 L220 110'/></g></svg>") 0 0 / 240px 300px repeat-y,
    radial-gradient(90% 40% at 50% 10%, rgba(255, 236, 196, .55), transparent 70%),
    linear-gradient(180deg, #fff3d6 0%, #f7deaa 30%, #e8c27c 100%);
}
body.resident {
  background:
    radial-gradient(50% 40% at 80% -10%, rgba(80, 120, 220, .45), transparent 70%),
    radial-gradient(40% 30% at 30% 110%, rgba(242, 177, 60, .16), transparent 70%),
    linear-gradient(180deg, #13245a 0%, #0b1430 45%, #080f24 100%);
  background-attachment: fixed;
}
/* メニューは、夜に灯るガラスの箱。上の庇（ひさし）は黒い鉄 */
.r-side { border-top: 14px solid #0d1328; border-radius: 6px 6px 22px 22px; box-shadow: 0 0 60px -6px rgba(255, 200, 110, .45), 0 30px 60px -20px rgba(0, 0, 0, .8); }
.r-side, .r-side .r-menu a { color: #2b1d06; }
.r-ptag { border: 0; background: #0d1328; color: #fff; font-family: "Inter", sans-serif; font-weight: 300; letter-spacing: .3em; }
.r-menu a.on { background: rgba(13, 19, 40, .88); color: #fff3d6; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .7); }
.r-menu a.on .ic { color: #f2b13c; }
.r-pill { background: rgba(255, 252, 244, .9); color: #2b1d06; }
.r-pill.dark { background: #0d1328; color: #fff3d6; }
/* 見出し：白く光る、細い看板の文字 */
.r-head h1 { font-weight: 300; letter-spacing: .14em; color: #fff; text-shadow: 0 0 18px rgba(200, 220, 255, .55); }
.r-crumb::before { content: "ARCHITECTURE STUDIO"; font-family: "Inter", sans-serif; font-weight: 300; letter-spacing: .3em; color: #ffd27a; margin-right: 8px; }
.r-card { background: linear-gradient(180deg, rgba(24, 38, 79, .92), rgba(18, 29, 64, .92)); box-shadow: inset 0 1px 0 rgba(255, 220, 160, .1), var(--shadow); }
.r-note .ic, .r-card h3 .ic { color: var(--accent); }
.r-kic { background: rgba(242, 177, 60, .14); color: #ffd27a; }
.r-lead { border-left: 4px solid #f2b13c; }
.r-btn { box-shadow: 0 0 0 1px var(--line), 0 6px 12px -8px rgba(0, 0, 0, .6); color: var(--ink); background: var(--surface-2); }
.r-btn.primary { background: linear-gradient(180deg, #ffd27a, #f2b13c); color: #1a1306; box-shadow: 0 0 24px -4px rgba(255, 210, 122, .6); }
.r-node.human, .r-node.human .who, .r-legend .human::before { color: #1a1306; }
.r-node.human { border-color: #1a1306; box-shadow: 0 4px 0 #070d22, 0 0 18px -4px rgba(255, 210, 122, .5); }
.r-node.human small { color: rgba(26, 19, 6, .72); }
.r-node.sys { border-color: var(--muted); }
.r-node.has .r-n { background: var(--accent); color: #1a1306; }
.r-wf-bar { background: #070d22; box-shadow: inset 0 0 0 1px rgba(242, 177, 60, .35); }
.r-wf-lines { color: #6f7ea6; }
.r-ava { box-shadow: 0 0 0 2px #121d40, 0 4px 10px -3px rgba(0, 0, 0, .6); }
.toast { background: var(--accent); color: #1a1306; }
.r-msg p { color: var(--ink); }
.r-chat-head { background: linear-gradient(135deg, #13245a, #0b1430); color: #fff; box-shadow: inset 0 -3px 0 #f2b13c; }
.r-chat-x { color: #fff3d6; }
textarea, input { color: var(--ink); }
.r-rules textarea, .r-chat-ask input { background: var(--surface-2); }
.wait .r-state { background: rgba(255, 122, 60, .18); }
.r-flow li.human, .r-kcol.human { background: rgba(242, 177, 60, .1); }

/* ── 計画の流れ（発散と収束） ── */
.pf-wrap { display: grid; gap: 16px; }
@media (min-width: 1180px) { .pf-wrap { grid-template-columns: 230px minmax(0, 1fr) 280px; align-items: start; } }
.pf-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.pf-st { position: relative; display: grid; gap: 8px; padding: 14px; border-radius: 6px; color: #1a1306;
  background: linear-gradient(180deg, #fff6df, #f3dca8); box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 10px 22px -12px rgba(0, 0, 0, .7); }
.pf-st:not(:last-child)::after { content: ""; position: absolute; left: 50%; top: 100%; width: 3px; height: 18px; margin: 4px 0 0 -1.5px; background: #f2b13c; }
.pf-st:not(:last-child)::before { content: ""; position: absolute; left: 50%; top: calc(100% + 18px); margin-left: -7px; border: 7px solid transparent; border-top-color: #f2b13c; }
.pf-st b { font-size: 15px; letter-spacing: .04em; }
.pf-st.past { opacity: .62; }
.pf-st.on { background: linear-gradient(180deg, #ffe7a6, #f2b13c); box-shadow: 0 0 0 2px #fff, 0 0 30px -2px rgba(255, 210, 122, .8); }
.pf-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; cursor: pointer; font-size: 12px; }
.pf-who em { font-style: normal; font-weight: 700; }
.pf-say { flex-basis: 100%; font-style: normal; font-size: 11px; color: rgba(26, 19, 6, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-who.working em::after { content: "作業中"; margin-left: 6px; padding: 0 6px; border-radius: 99px; font-size: 10px; color: #fff; background: #1a1306; }
.pf-who.got .r-ava { animation: pfGot 1.2s ease-out; }
@keyframes pfGot { 0% { box-shadow: 0 0 0 0 rgba(242, 177, 60, .9); } 100% { box-shadow: 0 0 0 16px rgba(242, 177, 60, 0); } }
.pf-fig { margin: 0; padding: 12px; border-radius: 10px; background: radial-gradient(70% 50% at 50% 0%, rgba(80, 120, 220, .25), transparent 70%), #0a1230; box-shadow: inset 0 0 0 1px #24345f, var(--shadow); }
.pf-fig svg { display: block; width: 100%; height: auto; }
.pf-band { fill: transparent; }
.pf-band:nth-child(odd) { fill: rgba(255, 255, 255, .02); }
.pf-band.on { fill: rgba(242, 177, 60, .12); }
.pf-cap { fill: #ffd27a; font-size: 15px; font-weight: 700; letter-spacing: .1em; }
.pf-big { fill: #ffffff; font-size: 22px; font-weight: 300; letter-spacing: .14em; opacity: .9; }
.pf-edge { stroke: #7aa6e8; stroke-width: 7; stroke-dasharray: 3 7; opacity: .45; fill: none; }
.pf-force ellipse { stroke-width: 1; }
.pf-force text { font-size: 12.5px; font-weight: 700; fill: #eef2fb; }
.pf-force.want ellipse { fill: rgba(255, 220, 120, .16); stroke: rgba(255, 220, 120, .5); }
.pf-force.cost ellipse { fill: rgba(120, 200, 230, .16); stroke: rgba(120, 200, 230, .5); }
.pf-force.law ellipse { fill: rgba(140, 220, 160, .14); stroke: rgba(140, 220, 160, .45); }
.pf-force.tech ellipse { fill: rgba(200, 190, 255, .14); stroke: rgba(200, 190, 255, .45); }
.pf-end { fill: #ff7a3c; }
.pf-dot { fill: #fff; stroke: #f2b13c; stroke-width: 3; }
.pf-dot-glow { fill: rgba(255, 210, 122, .4); }
.pf-dot-name { fill: #fff; font-size: 14px; font-weight: 700; paint-order: stroke; stroke: #0a1230; stroke-width: 5px; }
#pfDot { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.pf-side { display: grid; gap: 12px; }
.pf-side h3 { margin: 0; font-size: 15px; }
.pf-projects { display: grid; gap: 8px; }
.pf-projects button { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.pf-projects button small { color: var(--muted); font-size: 11.5px; }
.pf-projects button.on { border-color: #f2b13c; box-shadow: 0 0 0 1px #f2b13c, 0 0 20px -6px rgba(242, 177, 60, .7); }
.pf-card { padding: 14px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.pf-card h4 { margin: 2px 0 6px; font-size: 18px; font-weight: 500; letter-spacing: .06em; }
.pf-now, .pf-h { margin: 10px 0 4px; font-size: 11.5px; color: #ffd27a; letter-spacing: .08em; }
.pf-now { margin-top: 0; }
.pf-w { margin: 0; font-size: 13px; }
.pf-note { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.pf-card ul { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 2px; }
.pf-ok li::marker { content: "✓  "; color: #7fc47a; }
.pf-open li::marker { content: "～  "; color: #ff7a3c; }
@media (prefers-reduced-motion: reduce) { #pfDot { transition: none; } .pf-who.got .r-ava { animation: none; } }