/* インフラをコードで。style.css と flow.css の上に重ねる */
:root { --code: #0f172a; }
.fhead p a, .nlink a, .nsrc a, .srcl a, .seealso a { color: #1d4ed8; text-underline-offset: 2px; }
.hint { display: inline-block; vertical-align: middle; font-size: 10.5px; font-weight: 700; line-height: 1.5; color: #475569; background: #f8fafc; border: 1px dashed #94a3b8; border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.aitag { font-size: 12px; font-weight: 700; color: #6d28d9; background: #ede9fe; border-radius: 6px; padding: 2px 8px; margin-right: 8px; vertical-align: middle; }
.srcl, .seealso { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.seealso { font-size: 13px; color: var(--ink2); }
.ncard { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ncard h3 { margin: 0; font-size: 15px; }
.ncard p { margin: 0; font-size: 13px; color: var(--ink2); }
.ncard .nsrc { margin-top: auto; padding-top: 2px; font-size: 12px; color: var(--muted); }
.ncard .nlink { font-size: 12.5px; font-weight: 700; }
.ncard .nlink a { text-decoration: none; }
.cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* なぜ */
.whybox { padding: 6px 14px 10px; overflow-x: auto; }
.whytable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.whytable th, .whytable td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.whytable thead th { font-size: 12px; color: var(--muted); }
.whytable tbody th { width: 11em; font-weight: 700; }
.whytable td:nth-child(2) { color: #92400e; }
.whytable td:nth-child(3) { color: #047857; font-weight: 600; }
.whyhint { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

/* Terraform の流れと plan */
.tfflow, .gogrid { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gogrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tfflow li, .gogrid li { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ink2); }
.tfflow .fn, .gogrid .fn { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 11.5px/22px var(--latin); text-align: center; }
.tfflow b, .gogrid b { font-size: 14.5px; color: var(--ink); }
.planbox { padding: 14px 16px; }
.plchoices { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.plchoices button { appearance: none; font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--line); background: var(--paper); color: var(--ink2); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.plchoices button:hover { border-color: #94a3b8; color: var(--ink); }
.plchoices button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pllay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; }
.pllay h3 { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.plcode, .plout { margin: 0; font-family: var(--latin); font-size: 12px; line-height: 1.65; background: var(--code); color: #cbd5e1; border-radius: 10px; padding: 9px 0; overflow-x: auto; }
.plcode .cl, .plout .pl { display: block; padding: 0 12px; white-space: pre; min-height: 1.65em; }
.plcode .cl.add { background: rgba(34, 197, 94, .16); color: #bbf7d0; }
.plcode .cl.del { background: rgba(239, 68, 68, .16); color: #fecaca; }
.plout .pl.add { color: #86efac; }
.plout .pl.upd { color: #fcd34d; }
.plout .pl.del { color: #fca5a5; }
.plout .pl.rep { color: #fda4af; font-weight: 600; }
.plout .pl.cmt { color: #94a3b8; }
.plout .pl.sum { color: #fff; font-weight: 700; }
.plsay { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-top: 12px; }
.plsay p { margin: 0; flex: 1 1 360px; font-size: 13.5px; color: var(--ink2); }
.risk { flex: none; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px; }
.risk.low { background: #ecfdf5; color: #047857; }
.risk.mid { background: #fffbeb; color: #b45309; }
.risk.high { background: #fef2f2; color: #b91c1c; }

/* Kubernetes */
.k8sgrid { margin-bottom: 10px; }
.kbox { padding: 14px 16px; }
.kctrl { display: flex; gap: 6px; flex-wrap: wrap; }
.kctrl button { appearance: none; font: inherit; font-size: 13px; font-weight: 700; border: 1px solid var(--line); background: var(--paper); color: var(--ink2); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.kctrl button:hover:not(:disabled) { border-color: #94a3b8; color: var(--ink); }
.kctrl button:disabled { opacity: .4; cursor: default; }
.kstate { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.kstate > div { background: var(--line2); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; }
.kstate span { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.kstate b { font-size: 15px; }
.kdes { background: #eef2ff !important; }
.kpods { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; min-height: 64px; }
.pod { border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; background: var(--paper); transition: opacity .3s, border-color .3s; }
.pod b { font-family: var(--latin); font-size: 12.5px; }
.pod span { font-family: var(--latin); font-size: 12px; font-weight: 600; }
.pod.v1 span { color: #1d4ed8; }
.pod.v2 span { color: #7c3aed; }
.pod i { font-style: normal; font-size: 11.5px; color: var(--ink2); }
.pod.run { border-color: #86efac; background: #f0fdf4; }
.pod.start { border-color: #fcd34d; background: #fffbeb; }
.pod.term { opacity: .45; text-decoration: line-through; }
.klog { list-style: none; margin: 10px 0 0; padding: 8px 12px; background: #f8fafc; border: 1px solid var(--line2); border-radius: 10px; font-size: 12.5px; color: var(--ink2); display: flex; flex-direction: column; gap: 2px; }
.klog li:first-child { color: var(--ink); font-weight: 700; }
.gohint { margin: 0; font-size: 13px; color: var(--ink2); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }

/* Ansible の playbook を読む（an-） */
.an-h { margin: 20px 0 10px; font-size: 15px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.an-terms { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.an-terms div { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; }
.an-terms dt { font-size: 14px; font-weight: 700; }
.an-terms dd { margin: 3px 0 0; font-size: 12.5px; color: var(--ink2); }
#ansible .srcl { margin: 8px 0 0; }
.an-files { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.an-files button { appearance: none; font: 600 12.5px var(--latin); border: 1px solid var(--line); background: var(--paper); color: var(--ink2); border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.an-files button:hover { border-color: #94a3b8; color: var(--ink); }
.an-files button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.an-read { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 14px; align-items: start; }
.an-file { background: var(--code); border-radius: 12px; overflow: hidden; min-width: 0; }
.an-path { margin: 0; padding: 7px 12px; background: #1e293b; color: #cbd5e1; font: 500 12px var(--latin); overflow-wrap: anywhere; }
.an-lines { padding: 8px 0; overflow-x: auto; font-family: var(--latin); font-size: 12.5px; line-height: 1.6; }
.an-ln { display: flex; align-items: baseline; width: 100%; min-width: max-content; padding: 0 12px 0 0; border: 0; border-left: 3px solid transparent; background: transparent; color: #e2e8f0; font: inherit; text-align: left; }
button.an-ln { cursor: pointer; }
button.an-ln:hover { background: rgba(148, 163, 184, .14); }
.an-ln.on { background: rgba(250, 204, 21, .16); border-left-color: #facc15; }
.an-no { flex: none; width: 2.6em; padding-right: 8px; text-align: right; color: #64748b; user-select: none; }
.an-tag { flex: none; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: #334155; color: #f8fafc; font: 600 10.5px/18px var(--latin); text-align: center; }
.an-tag.sp { visibility: hidden; }
.an-ln.on .an-tag { background: #facc15; color: #0f172a; }
.an-tx { white-space: pre; }
.an-note { position: sticky; top: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.an-nk { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.an-nn { width: 22px; height: 22px; border-radius: 50%; background: #facc15; color: #0f172a; font: 600 12px/22px var(--latin); text-align: center; }
.an-note h3 { margin: 0; font-size: 16px; }
.an-note p { margin: 0; font-size: 13px; color: var(--ink2); }
.an-note .an-tip { font-size: 12.5px; background: #fffbeb; border-radius: 8px; padding: 6px 10px; }
.an-note .nsrc { font-size: 12px; color: var(--muted); }
.an-note .nlink { font-size: 12.5px; font-weight: 700; }
.an-note .nlink a { text-decoration: none; }
#ansible p code, #ansible label code { font: 600 12px var(--latin); background: var(--line2); border-radius: 5px; padding: 0 5px; overflow-wrap: anywhere; }
.an-nav { display: flex; gap: 6px; margin-top: 4px; }
.an-nav button { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.an-nav button[disabled] { color: #94a3b8; cursor: default; }
.an-run { padding: 14px 16px; display: grid; gap: 10px; }
.an-ctrl { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.an-go { appearance: none; font: inherit; font-size: 13.5px; font-weight: 700; color: #fff; background: var(--ink); border: 0; border-radius: 10px; padding: 8px 14px; cursor: pointer; }
.an-go:hover { background: #1e293b; }
.an-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink2); cursor: pointer; }
.an-chk input { width: 16px; height: 16px; accent-color: #0d9488; }
.an-btn { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; border: 1px solid var(--line); background: var(--paper); color: var(--ink2); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.an-btn:hover:not(:disabled) { border-color: #94a3b8; color: var(--ink); }
.an-btn:disabled { opacity: .4; cursor: default; }
.an-state { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 12.5px; }
.an-state b { font-size: 12px; color: var(--muted); }
.an-state span { background: var(--line2); border-radius: 999px; padding: 2px 10px; }
.an-out { margin: 0; font-family: var(--latin); font-size: 12px; line-height: 1.6; background: var(--code); color: #cbd5e1; border-radius: 10px; padding: 9px 0; overflow-x: auto; max-height: 420px; overflow-y: auto; }
.an-l { display: block; padding: 0 12px; white-space: pre; min-height: 1.6em; }
.an-l.cmd { color: #f8fafc; font-weight: 600; }
.an-l.mute { color: #94a3b8; white-space: pre-wrap; font-family: var(--sans); }
.an-l.hd { color: #e2e8f0; font-weight: 600; }
.an-l.ok { color: #86efac; }
.an-l.ch { color: #fcd34d; }
.an-l.ng { color: #fca5a5; }
.an-l.rc { color: #fff; font-weight: 700; background: rgba(148, 163, 184, .16); }
.an-l.dh { color: #94a3b8; }
.an-l.da { color: #bbf7d0; background: rgba(34, 197, 94, .14); }
.an-l.dd { color: #fecaca; background: rgba(239, 68, 68, .14); }
.an-say { margin: 0; font-size: 13.5px; color: var(--ink2); }
.an-say:empty { display: none; }
.an-cards { margin-top: 12px; }
.an-files button:focus-visible, button.an-ln:focus-visible, .an-nav button:focus-visible, .an-go:focus-visible, .an-chk input:focus-visible, .an-btn:focus-visible, #ansible .fhead a:focus-visible, #ansible .srcl a:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
@media (max-width: 1100px) {
  .an-read { grid-template-columns: minmax(0, 1fr); }
  .an-note { position: static; }
  .an-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .an-terms { grid-template-columns: minmax(0, 1fr); }
}

/* チェックリスト */
.cklist { padding: 10px 16px; }
.mlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.mlist label { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; cursor: pointer; padding: 5px 0; }
.mlist input { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: #0d9488; cursor: pointer; }
.mlist input:checked + span { color: var(--muted); text-decoration: line-through; }
.ckfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ckcount { font-family: var(--latin); font-size: 13px; color: var(--muted); }
.ckreset { appearance: none; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink2); cursor: pointer; }

.plchoices button:focus-visible, .kctrl button:focus-visible, .mlist input:focus-visible, .ckreset:focus-visible, .ncard a:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

@media (max-width: 1100px) {
  .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pllay { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .cgrid, .tfflow, .gogrid, .mlist, .kstate { grid-template-columns: minmax(0, 1fr); }
  .whytable tbody th { width: auto; }
  .whytable, .whytable tbody, .whytable tr, .whytable th, .whytable td { display: block; }
  .whytable thead { display: none; }
  .whytable tr { padding: 8px 0; border-bottom: 1px solid var(--line2); }
  .whytable th, .whytable td { border: 0; padding: 2px 0; }
  .whytable td:nth-child(2)::before { content: '手: '; color: var(--muted); }
  .whytable td:nth-child(3)::before { content: 'コード: '; color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) {
  .pod { transition: none; }
}