/* GRRM browser tools */
.grrm-tool {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 24px clamp(16px, 3vw, 32px) 56px;
  color: #26343d;
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.grrm-tool h2 { margin: 1.8rem 0 .8rem; padding-left: .75rem; border-left: 4px solid #245d72; font-size: 1.35rem; }
.grrm-tool h3 { margin: 1.3rem 0 .5rem; }
.grrm-tool p { margin: .85rem 0; }
.grrm-tool code { display: inline; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; background: #f2f5f7; padding: .1rem .25rem; border-radius: 3px; }
.tool-breadcrumb { color: #64737b; font-size: .9rem; }
.tool-breadcrumb a { color: #176481; text-decoration: underline; text-underline-offset: .15em; }
.tool-label, .network-paste label { display: block; margin: 1rem 0 .35rem; font-weight: 700; }
.grrm-tool textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: .8rem;
  border: 1px solid #b8c6cc;
  border-radius: 6px;
  background: #fff;
  color: #1c272d;
  font: 14px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  tab-size: 4;
}
.grrm-tool input[type="file"] { max-width: 100%; }
.grrm-tool :focus-visible { outline: 3px solid #3085a5; outline-offset: 2px; }
.tool-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1rem 0; }
.tool-button {
  border: 1px solid #9aadb6;
  border-radius: 5px;
  padding: .55rem .9rem;
  background: #f4f7f8;
  color: #20343d;
  font: inherit;
  cursor: pointer;
}
.tool-button:hover { background: #e7eff2; }
.tool-button.primary { color: #fff; background: #245d72; border-color: #245d72; }
.tool-button.primary:hover { background: #17485a; }
.tool-notes { margin: 1.6rem 0; padding: .85rem 1rem; border: 1px solid #d7e0e4; border-radius: 6px; background: #f8fafb; }
.tool-notes summary, .network-paste summary { cursor: pointer; font-weight: 700; }
.tool-notes ul { padding-left: 1.4rem; }
.tool-notes li { margin: .45rem 0; }
#grrm-check-status, #network-status { min-height: 1.6em; font-weight: 650; }
.check-summary { padding: .8rem 1rem; border-radius: 6px; background: #f1f5f7; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-item { padding: .8rem 1rem; margin: .65rem 0; border-left: 5px solid #71818a; background: #f6f8f9; border-radius: 4px; }
.check-item.error { border-color: #b3261e; background: #fff4f2; }
.check-item.warning { border-color: #ad6b00; background: #fff9ed; }
.check-item.info { border-color: #26728d; background: #f0f8fb; }
.check-item strong { display: block; }
.check-line { color: #53646d; font: .88em ui-monospace, SFMono-Regular, Consolas, monospace; }
.network-file-grid, .network-mapping-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .8rem; }
.network-file { display: grid; gap: .5rem; padding: 1rem; border: 1px solid #d3dfe4; border-radius: 6px; background: #f8fafb; font-weight: 700; }
.network-file input { width: 100%; min-width: 0; font-weight: 400; }
.network-paste { margin: 1rem 0; padding: .75rem 1rem; border: 1px solid #d7e0e4; border-radius: 6px; }
.network-mapping { margin: 1.2rem 0; padding: 1rem; border: 1px solid #c9d8de; border-radius: 6px; background: #f6fafb; }
.network-mapping-grid label { display: grid; gap: .25rem; font-weight: 650; }
.network-mapping select { width: 100%; min-width: 0; padding: .45rem; font: inherit; }
.network-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 1rem 0; }
.network-toolbar label { display: flex; flex: 1 1 340px; min-width: 0; align-items: center; gap: .6rem; }
.network-toolbar input[type="range"] { flex: 1; min-width: 120px; }
.network-canvas-wrap { height: min(72vh, 760px); min-height: 380px; overflow: hidden; border: 1px solid #cdd9de; border-radius: 8px; background: #fbfdfe; }
#network-svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#network-svg:active { cursor: grabbing; }
.network-edge { stroke: #73838a; stroke-opacity: .42; stroke-width: 1.4; }
.network-edge.filtered { display: none; }
.network-node circle { fill: #3d829a; stroke: #fff; stroke-width: 1.5; }
.network-node text { fill: #20343d; font: 11px system-ui, sans-serif; pointer-events: none; }
.network-node:hover circle, .network-node:focus circle { fill: #df8a2f; stroke: #7b4414; stroke-width: 2; }
.network-node:focus { outline: none; }
.network-stats { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; color: #53646d; font-size: .92rem; }
.tool-hint { color: #53646d; font-size: .92rem; }
@media (max-width: 600px) {
  .grrm-tool { padding: 18px 16px 40px; font-size: 15px; }
  .network-canvas-wrap { min-height: 330px; height: 62vh; }
}
@media print {
  .network-toolbar, .tool-actions, .network-file-grid, .tool-notes { display: none; }
  .network-canvas-wrap { height: 650px; }
}