/* Web の仕組み。style.css と flow.css の上に重ねる */
.subh { margin: 20px 0 10px; font-size: 15px; }

/* URL を分けて読む */
.urlbar { font-family: var(--latin); font-size: 17px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.up { --c: #64748b; appearance: none; border: 0; border-radius: 6px; padding: 3px 5px; font: inherit; cursor: pointer; background: color-mix(in srgb, var(--c) 12%, white); color: color-mix(in srgb, var(--c) 82%, black); overflow-wrap: anywhere; }
.up:hover { background: color-mix(in srgb, var(--c) 22%, white); }
.up.on { background: var(--c); color: #fff; }
.usep { color: var(--muted); }
.udetail { margin-top: 10px; padding: 12px 16px; }
.udetail h3 { margin: 0 0 4px; font-size: 15px; }
.udetail p { margin: 0; font-size: 13px; color: var(--ink2); }

/* URL を打ってから画面が出るまで（パソコンは左に図、右に説明） */
.jlayout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.jleft { min-width: 0; }
.jdiagram { position: relative; height: 300px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.jdiagram svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.jl { stroke: #cbd5e1; stroke-width: 2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; fill: none; }
.jl.on { stroke: #2563eb; stroke-dasharray: none; }
.jn { position: absolute; transform: translate(-50%, -50%); background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 6px 10px; text-align: center; min-width: 84px; white-space: nowrap; transition: border-color .25s, box-shadow .25s; z-index: 1; }
.jn b { display: block; font-size: 13px; }
.jn small { display: block; font-size: 10.5px; color: var(--muted); }
.jn.on { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.jpkt { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .25); transform: translate(-50%, -50%); pointer-events: none; z-index: 2; opacity: 0; }
.jctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.jctrl button { appearance: none; font: inherit; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 6px 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.jctrl button.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.jctrl button:disabled { opacity: .45; cursor: default; }
.jctrl button[aria-pressed="true"] { background: #2563eb; border-color: #2563eb; color: #fff; }
.jcount { font-family: var(--latin); font-size: 13px; font-weight: 600; color: var(--muted); min-width: 52px; text-align: center; }
.jsteps { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.jsteps button { 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: 4px 11px 4px 5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.jsteps button i { font-style: normal; font-family: var(--latin); font-size: 11px; width: 20px; height: 20px; border-radius: 50%; background: var(--line2); display: grid; place-items: center; }
.jsteps button[aria-current="step"] { border-color: #2563eb; color: #1d4ed8; background: #eff6ff; }
.jsteps button[aria-current="step"] i { background: #2563eb; color: #fff; }
.jdetail { padding: 14px 16px; display: grid; gap: 8px; }
.jdetail h3 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.jdetail h3 i { font-style: normal; font-family: var(--latin); font-size: 13px; width: 26px; height: 26px; border-radius: 50%; background: #2563eb; color: #fff; display: grid; place-items: center; flex: none; }
.jdetail p { margin: 0; font-size: 13.5px; color: var(--ink2); }
.jmeta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jmeta div { border-radius: 10px; padding: 8px 11px; font-size: 12.5px; }
.jmeta b { display: block; font-size: 11px; margin-bottom: 2px; }
.jmeta .tr { background: #fef2f2; color: #7f1d1d; }
.jmeta .lk { background: var(--line2); color: var(--ink2); }

/* HTTP のやりとり */
.hpair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hcard { padding: 13px 15px; }
.hcard h3, .apigrid h3 { margin: 0 0 8px; font-size: 14.5px; }
.hlines { display: grid; gap: 4px; }
.hl { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 4px 6px; border-radius: 6px; }
.hl:nth-child(odd) { background: var(--line2); }
.hl code { font-family: var(--latin); font-size: 12px; color: var(--ink); overflow-wrap: anywhere; }
.hl span { font-size: 12px; color: var(--ink2); }
.mtable, .rtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.mtable th, .mtable td, .rtable td { padding: 7px 8px; border-bottom: 1px solid var(--line2); text-align: left; vertical-align: top; }
.mtable th { font-size: 11.5px; color: var(--muted); }
.mtable td.c { text-align: center; font-weight: 700; }
.mtable td.yes { color: var(--k-test); }
.mtable td.no { color: #94a3b8; }
.meth { font-family: var(--latin); font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 2px 7px; color: #fff; background: #334155; white-space: nowrap; }
.meth.GET { background: #2563eb; }
.meth.POST { background: #16a34a; }
.meth.PUT, .meth.PATCH { background: #d97706; }
.meth.DELETE { background: #dc2626; }
.mnote { margin: 10px 0 0; font-size: 12.5px; color: var(--ink2); }

/* 状態コード */
.cgroups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cg { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.cg h3 { margin: 0 0 8px; font-size: 13.5px; }
.cg .cbtns { display: flex; flex-wrap: wrap; gap: 5px; }
.cbtn { --c: #64748b; appearance: none; font-family: var(--latin); font-size: 13px; font-weight: 600; border: 1px solid color-mix(in srgb, var(--c) 40%, white); background: color-mix(in srgb, var(--c) 8%, white); color: color-mix(in srgb, var(--c) 85%, black); border-radius: 8px; padding: 4px 9px; cursor: pointer; }
.cbtn.on { background: var(--c); border-color: var(--c); color: #fff; }
.g2 { --c: #16a34a; } .g3 { --c: #2563eb; } .g4 { --c: #d97706; } .g5 { --c: #dc2626; }
.cdetail { margin-top: 10px; padding: 12px 16px; display: grid; gap: 6px; }
.cdetail h3 { margin: 0; font-size: 16px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.cdetail h3 code { font-family: var(--latin); font-size: 20px; }
.cdetail p { margin: 0; font-size: 13.5px; color: var(--ink2); }
.cdetail .fix { font-size: 12.5px; background: var(--line2); border-radius: 8px; padding: 6px 10px; }
.cdetail .fix p { margin: 0 0 3px; }
.cdetail .fix ul { margin: 0; padding-left: 1.3em; }

/* 状態を覚える・速くする・画面の作り方・AI */
.stgrid3, .rdgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.spgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wcard2 { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.wcard2 h3 { margin: 0; font-size: 15px; }
.wcard2 p { margin: 0; font-size: 12.5px; color: var(--ink2); }
.wcard2 .note { font-size: 12px; background: #fffbeb; color: #78350f; border-radius: 8px; padding: 6px 10px; }
.wcard2 .ex { font-size: 11.5px; color: var(--muted); }
.wcard2 a { font-size: 12px; color: #1d4ed8; margin-top: auto; }
.apigrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.apigrid .card { padding: 13px 15px; min-width: 0; }
.apigrid .h3b { margin-top: 12px; }
.rtable code { font-family: var(--latin); font-size: 12.5px; }
.code { margin: 0; font-family: var(--latin); font-size: 12px; line-height: 1.6; background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 10px 12px; overflow-x: auto; white-space: pre; }
.kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.kinds div { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px; font-size: 12.5px; color: var(--ink2); }
.kinds b { display: block; font-size: 14px; color: var(--ink); font-family: var(--latin); }
#api .fhead a, #render .fhead a { color: #1d4ed8; font-size: 13px; margin-left: 4px; white-space: nowrap; }
.aigrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.aicard { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; display: flex; flex-direction: column; gap: 7px; }
.aicard h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.aitag { font-style: normal; font-family: var(--latin); font-size: 10.5px; font-weight: 600; background: #ede9fe; color: #5b21b6; border-radius: 5px; padding: 1px 5px; }
.aicard p { margin: 0; font-size: 12.5px; color: var(--ink2); }
.aicard .as { margin-top: auto; font-size: 11.5px; color: var(--muted); }
.aicard .as a { color: #1d4ed8; }
.aicard .tip { font-size: 11.5px; color: #5b21b6; font-weight: 700; }

/* 確かめる順・チェックリスト */
.trlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: tr; }
.trlist button { appearance: none; width: 100%; font: inherit; color: inherit; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 10px 46px; cursor: pointer; position: relative; counter-increment: tr; }
.trlist button::before { content: counter(tr); position: absolute; left: 14px; top: 10px; width: 22px; height: 22px; border-radius: 6px; background: var(--ink); color: #fff; font-family: var(--latin); font-weight: 600; font-size: 12px; display: grid; place-items: center; }
.trlist button:hover { border-color: #94a3b8; }
.trlist b { display: block; font-size: 14px; }
.trlist span { font-size: 12.5px; color: var(--ink2); }
.mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mlist label { display: flex; gap: 10px; align-items: flex-start; padding: 7px 4px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.mlist label:hover { background: var(--line2); }
.mlist input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--k-test); flex: none; }
.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; }
.mcount { font-size: 12.5px; font-weight: 700; color: var(--k-test); }
.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; }
#mistakes .src { margin-top: 14px; }

.up:focus-visible, .jctrl button:focus-visible, .jsteps button:focus-visible, .cbtn:focus-visible, .trlist button:focus-visible, .mlist input:focus-visible, .ckreset:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

@media (max-width: 1100px) {
  .cgroups, .aigrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stgrid3, .rdgrid, .spgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .jlayout { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hpair, .apigrid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .urlbar { font-size: 14px; }
  .jdiagram { height: 230px; }
  .jn { min-width: 0; padding: 5px 7px; }
  .jn b { font-size: 11.5px; }
  .jn small { display: none; }
  .jmeta, .cgroups, .aigrid, .stgrid3, .rdgrid, .spgrid, .kinds { grid-template-columns: 1fr; }
  .hl { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .jn { transition: none; }
}