/* 図形式エディタのページの骨組み。02-editor-ui-spec.md 2章 */

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bgColor-default);
  color: var(--fgColor-default);
  font: var(--text-body-shorthand-medium);
  overflow: hidden;
}

#g-app {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.g-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding-inline: var(--stack-padding-normal);
  background: var(--rewis-blue);
  color: #fff;
}
.g-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.g-header__home { flex: none; display: block; border-radius: var(--borderRadius-small, 3px); }
.g-header__home:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.g-header__logo { height: 28px; display: block; }
.g-header__title {
  font: var(--text-title-shorthand-small);
  color: #fff;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.g-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: #fff;
}
.g-header .g-btn--invisible {
  color: #fff;
}
.g-header .g-btn--invisible:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
.g-header .g-btn--invisible:active:not(:disabled) { background: rgba(255, 255, 255, 0.24); }

.g-page-header {
  flex: none;
  background: var(--bgColor-muted);
  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
  padding-inline: var(--stack-padding-normal);
}

.g-status-row {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-condensed);
  padding-block: var(--space-sm);
  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
}
.g-status-row__docs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--stack-gap-normal);
}
.g-status-doc {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font: var(--text-body-shorthand-medium);
}
.g-status-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--stack-gap-condensed);
}

.g-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.g-view {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--stack-padding-normal);
}

.g-view--centered {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--stack-padding-spacious);
}

.g-start-card {
  max-width: 480px;
  width: 100%;
}
/* 開始画面の下の「初めての方は、先に 操作マニュアル をご覧ください。」 */
.g-start-card__manual {
  padding: var(--stack-padding-condensed) var(--stack-padding-normal);
  border-top: var(--borderWidth-thin) solid var(--borderColor-muted);
  font: var(--text-body-shorthand-small);
  color: var(--fgColor-muted);
}
.g-start-card__manual-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline: 4px;
  font-weight: 600;
  color: var(--fgColor-accent);
  vertical-align: bottom;
}

/* ヘッダーの「操作マニュアル」（リンクを g-btn の見た目にする） */
.g-header__manual { text-decoration: none; }
@media (max-width: 600px) {
  /* 幅が狭いときは本のアイコンだけにして、ログイン中の表示と並べる */
  .g-header__manual { font-size: 0; gap: 0; padding-inline: 8px; }
  /* タイトルは折り返さず、入りきらない分は … で省く */
  .g-header__left { min-width: 0; }
  .g-header__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
}

.g-issues-backdrop {
  position: fixed;
  inset: 0;
  z-index: 950;
}
.g-issues-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: var(--overlay-width-small);
  max-width: 100vw;
  border-radius: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--stack-padding-normal);
  box-sizing: border-box;
}
.g-issues-drawer__switch {
  display: flex;
  align-items: center;
  gap: var(--stack-gap-condensed);
  margin-bottom: var(--stack-gap-normal);
}
.g-issues-drawer__switch .g-icon-btn { margin-left: auto; }
.g-issues-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-condensed);
}
.g-issues-drawer__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
  text-align: left;
  padding: var(--space-sm);
  border: var(--borderWidth-thin) solid var(--borderColor-muted);
  border-radius: var(--borderRadius-medium);
  background: var(--bgColor-default);
  cursor: pointer;
  font: var(--text-body-shorthand-medium);
}
.g-issues-drawer__item:hover { background: var(--bgColor-muted); }
.g-issues-drawer__item:focus-visible { outline: var(--focus-outline); outline-offset: var(--outline-focus-offset); }
.g-issues-drawer__location {
  font: var(--text-body-shorthand-small);
  color: var(--fgColor-muted);
  margin-top: var(--space-xxs);
}
.g-issues-drawer__empty { color: var(--fgColor-muted); font: var(--text-body-shorthand-medium); }

/* 10章 キャンバスの共通部品 */

.g-workspace {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 260px 1fr 320px;
  height: 100%;
}
@media (max-width: 1099px) {
  .g-workspace { grid-template-columns: 200px 1fr 260px; }
}

.g-ws-left,
.g-ws-right {
  background: var(--bgColor-default);
  overflow-y: auto;
  padding: var(--stack-padding-normal);
  box-sizing: border-box;
}
.g-ws-left { border-right: var(--borderWidth-thin) solid var(--borderColor-default); }
.g-ws-right { border-left: var(--borderWidth-thin) solid var(--borderColor-default); }

.g-ws-canvas {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bgColor-muted);
}

.g-ws-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--stack-gap-condensed);
  padding: var(--space-sm) var(--stack-padding-normal);
  background: var(--bgColor-default);
  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
}

.g-ws-canvas-host {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

.g-ws-ribbon {
  flex: none;
  overflow-x: auto;
  border-top: var(--borderWidth-thin) solid var(--borderColor-default);
  background: var(--bgColor-default);
}

.g-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.g-canvas-bg { fill: var(--bgColor-muted); cursor: grab; }

.g-node__body {
  fill: var(--bgColor-default);
  stroke: var(--borderColor-emphasis);
  stroke-width: 1;
  cursor: grab;
}
.g-node.is-selected .g-node__body { stroke: var(--borderColor-accent-emphasis); stroke-width: 2; }
.g-node.is-dimmed { opacity: 0.45; }
.g-node__name {
  font: var(--text-body-shorthand-medium);
  font-weight: var(--base-text-weight-semibold);
  fill: var(--fgColor-default);
}
.g-node__no-platform {
  font: var(--text-caption-shorthand);
  fill: var(--fgColor-muted);
}

.g-port { fill: var(--bgColor-default); stroke: var(--fgColor-default); stroke-width: 1; }
.g-port.is-highlight { stroke: var(--borderColor-accent-emphasis); stroke-width: 2; }
.g-port__label {
  font: var(--text-caption-shorthand);
  fill: var(--fgColor-default);
  pointer-events: none;
}
.g-port__hit { fill: transparent; cursor: pointer; }

/* 10.6 リボン */
.g-rb-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-xs);
  padding: var(--space-sm);
  overflow-x: auto;
}
.g-rb-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xxs);
  min-width: 120px;
  padding: var(--space-sm);
  padding-top: calc(var(--space-sm) + 4px);
  background: var(--bgColor-default);
  border: var(--borderWidth-thin) solid var(--borderColor-default);
  border-radius: var(--borderRadius-medium);
  cursor: pointer;
  text-align: left;
  font: var(--text-body-shorthand-small);
}
.g-rb-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--rb-color, transparent);
  border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;
}
.g-rb-item.is-selected { background: var(--bgColor-accent-muted); border-color: var(--borderColor-accent-emphasis); }
.g-rb-item__grabber { color: var(--fgColor-muted); cursor: grab; }
.g-rb-item__row1 { display: flex; align-items: center; gap: var(--space-xs); }
.g-rb-item__row2 { color: var(--fgColor-muted); }
.g-rb-item__badges { display: flex; gap: var(--space-xxs); flex-wrap: wrap; }

.g-rb-conn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xxs);
  min-width: 56px;
  padding: var(--space-xs);
  background: transparent;
  border: var(--borderWidth-thin) solid transparent;
  border-radius: var(--borderRadius-medium);
  cursor: pointer;
  font: var(--text-caption-shorthand);
}
.g-rb-conn.is-selected { background: var(--bgColor-accent-muted); border-color: var(--borderColor-accent-emphasis); }
.g-rb-conn__line { display: block; width: 100%; border-top: 2px solid currentColor; }
.g-rb-conn__line.is-dashed { border-top-style: dashed; }
.g-rb-closed {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  color: var(--fgColor-muted);
  font: var(--text-caption-shorthand);
  padding: var(--space-sm);
}

.g-ws-left__title { font: var(--text-body-shorthand-medium); font-weight: var(--base-text-weight-semibold); margin: 0 0 var(--space-sm); }
.g-ws-left__note,
.g-ws-right__note { color: var(--fgColor-muted); font: var(--text-body-shorthand-small); margin: 0; }
.g-ws-toolbar__sep { width: var(--borderWidth-thin); align-self: stretch; background: var(--borderColor-muted); }

/* 11章 駅タブ */
.g-search-field {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: var(--space-sm);
}
.g-search-field svg {
  position: absolute;
  left: var(--space-sm);
  color: var(--fgColor-muted);
  pointer-events: none;
}
.g-search-field .g-input { padding-left: calc(var(--space-sm) * 2 + 14px); }

.g-ws-left__list { margin-top: var(--space-sm); }

.g-list__item--row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.g-list__item-id { color: var(--fgColor-muted); font: var(--text-body-shorthand-small); }
.g-list__item--row .g-list__item-id { margin-left: auto; }

.g-list__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
}
.g-list__row:last-child { border-bottom: none; }
.g-list__row.is-selected { background: var(--bgColor-accent-muted); }

.g-platform-row { cursor: grab; }
.g-platform-row .g-input { flex: 1 1 auto; }

.g-add-platform-form {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-condensed);
  margin-top: var(--space-sm);
}

/* 12章 運行系統タブ */
.g-svc-filter {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-condensed);
  margin-bottom: var(--space-sm);
}
.g-svc-row__line1 { display: flex; align-items: center; gap: var(--space-xs); }
.g-svc-row__line2 { color: var(--fgColor-muted); font: var(--text-body-shorthand-small); }
.g-svc-row__badges { display: flex; gap: var(--space-xxs); flex-wrap: wrap; margin-top: var(--space-xxs); }
.g-svc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.g-svc-headsign-row { display: flex; align-items: center; gap: var(--space-sm); }
.g-svc-headsign-row .g-input { flex: 1 1 auto; }
.g-svc-actions { display: flex; flex-wrap: wrap; gap: var(--stack-gap-condensed); margin-top: var(--space-sm); }

.g-route-line { stroke-width: 3; opacity: 0.22; pointer-events: none; }
.g-route-hit { stroke: transparent; stroke-width: 12; cursor: pointer; }

.g-edge { stroke-width: 6; fill: none; }
.g-edge--unresolved { stroke: var(--fgColor-muted); stroke-dasharray: 6 4; }
.g-edge.is-error { stroke: var(--fgColor-danger); }
.g-edge.is-warning { stroke: var(--fgColor-attention); }
.g-edge-hit { stroke: transparent; stroke-width: 14; cursor: pointer; }
.g-edge-underlay { stroke: var(--borderColor-accent-emphasis); stroke-width: 10; opacity: 0.6; }
.g-edge-arrow { pointer-events: none; }
.g-edge-arrow--unresolved { fill: var(--fgColor-muted); }

.g-edge-label {
  cursor: pointer;
  font: var(--text-caption-shorthand);
}
.g-edge-label rect {
  fill: var(--bgColor-default);
  stroke: var(--borderColor-default);
  stroke-width: 1;
}
.g-edge-label text { fill: var(--fgColor-default); }

.g-boundary-badge { pointer-events: none; font: var(--text-caption-shorthand); }
.g-boundary-badge rect { fill: var(--bgColor-accent-muted); stroke: var(--borderColor-accent-muted); }
.g-boundary-badge text { fill: var(--fgColor-accent); }

.g-stop-badge { cursor: pointer; font: var(--text-caption-shorthand); font-weight: var(--base-text-weight-semibold); }
.g-stop-badge circle { fill: var(--bgColor-default); stroke: var(--fgColor-default); stroke-width: 1; }
.g-stop-badge text { fill: var(--fgColor-default); pointer-events: none; }
.g-stop-badge.is-error circle { stroke: var(--fgColor-danger); stroke-width: 3; }
.g-stop-badge.is-warning circle { stroke: var(--fgColor-attention); stroke-width: 3; }
.g-stop-badge.is-selected circle { fill: var(--bgColor-accent-emphasis); stroke: var(--bgColor-accent-emphasis); }
.g-stop-badge.is-selected text { fill: var(--fgColor-onEmphasis); }
.g-stop-flag { font: var(--text-caption-shorthand); fill: var(--fgColor-muted); pointer-events: none; }

/* 13章 路線タブ */
.g-line-path { stroke-width: 8; fill: none; opacity: 0.35; cursor: pointer; }
.g-line-path.is-selected { opacity: 1; }
.g-line-hit { stroke: transparent; stroke-width: 16; cursor: pointer; }
.g-line-num-badge { pointer-events: none; font: var(--text-caption-shorthand); font-weight: var(--base-text-weight-semibold); }
.g-line-num-badge circle { fill: var(--bgColor-default); stroke: var(--fgColor-default); stroke-width: 1; }
.g-line-num-badge text { fill: var(--fgColor-default); }
.g-line-dir-label { font: var(--text-caption-shorthand); fill: var(--fgColor-muted); pointer-events: none; }
.g-shape-toggle { display: flex; gap: var(--stack-gap-condensed); flex-wrap: wrap; margin-top: var(--space-xs); }
.g-shape-icon { display: block; }

.g-popover-form {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-normal);
  width: 260px;
}
.g-popover-actions { display: flex; justify-content: flex-end; gap: var(--stack-gap-condensed); }

/* 14章 乗換・駅グループタブ */
.g-tr-root { display: flex; flex-direction: column; height: 100%; }
.g-tr-pane-switch { flex: none; display: flex; gap: var(--stack-gap-condensed); padding: var(--stack-padding-normal) var(--stack-padding-normal) 0; }
.g-tr-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.g-tr-tables { max-width: 720px; margin: 0 auto; padding: var(--stack-padding-normal); display: flex; flex-direction: column; gap: var(--stack-gap-normal); }
.g-tr-group-actions { margin-left: auto; display: flex; gap: var(--stack-gap-condensed); flex-wrap: wrap; flex: none; }

.g-transfer-drag { stroke: var(--borderColor-accent-emphasis); stroke-width: 2; stroke-dasharray: 4 4; pointer-events: none; }

.g-walk-line { stroke: var(--fgColor-muted); stroke-width: 2; stroke-dasharray: 2 5; cursor: pointer; }
.g-walk-line.is-selected { stroke: var(--borderColor-accent-emphasis); stroke-width: 3; }
.g-walk-hit { stroke: transparent; stroke-width: 14; cursor: pointer; }
.g-walk-arrow { fill: var(--fgColor-muted); pointer-events: none; }
.g-walk-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 20px;
  padding-inline: 6px;
  border-radius: 10px;
  background: var(--bgColor-default);
  border: var(--borderWidth-thin) solid var(--borderColor-default);
  font: var(--text-caption-shorthand);
  color: var(--fgColor-default);
  white-space: nowrap;
  box-sizing: border-box;
}
.g-walk-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: none;
  background-color: var(--fgColor-muted);
  -webkit-mask-image: url('../../../../assets/icons/walking.svg');
  mask-image: url('../../../../assets/icons/walking.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.g-intra-badge { pointer-events: none; font: var(--text-caption-shorthand); font-weight: var(--base-text-weight-semibold); }
.g-intra-badge rect { fill: var(--bgColor-accent-muted); stroke: var(--borderColor-accent-muted); }
.g-intra-badge text { fill: var(--fgColor-accent); }

.g-tr-intra-table { overflow-x: auto; margin: var(--space-sm) 0; }
.g-tr-intra-table table { border-collapse: collapse; width: 100%; }
.g-tr-intra-table th, .g-tr-intra-table td {
  border: var(--borderWidth-thin) solid var(--borderColor-muted);
  padding: var(--space-xxs) var(--space-xs);
  text-align: center;
  font: var(--text-body-shorthand-small);
}
.g-tr-intra-table input { width: 60px; text-align: center; }
.g-tr-intra-reversed { font-style: italic; }

/* 15章 鉄道会社・車両種別・履歴タブ */
.g-single-col { max-width: 720px; margin: 0 auto; padding: var(--stack-padding-normal); display: flex; flex-direction: column; gap: var(--stack-gap-normal); }
.g-single-col--wide { max-width: 1080px; }
.g-company-detail { display: flex; flex-direction: column; gap: var(--stack-gap-condensed); padding: var(--stack-padding-condensed) 0; }
.g-history-detail { display: flex; gap: var(--stack-gap-normal); align-items: flex-start; }
.g-history-detail__list { flex: 1 1 auto; min-width: 0; }
.g-history-detail__panel { flex: none; width: 360px; }
.g-diff-table { border-collapse: collapse; width: 100%; }
.g-diff-table th, .g-diff-table td {
  border: var(--borderWidth-thin) solid var(--borderColor-muted);
  padding: var(--space-xxs) var(--space-xs);
  text-align: right;
  font: var(--text-body-shorthand-small);
}
.g-diff-table th:first-child, .g-diff-table td:first-child { text-align: left; }

/* 16章 操作ガイド */
.g-guide-backdrop {
  position: fixed;
  z-index: 1500;
  background: var(--overlay-backdrop-bgColor);
  pointer-events: none;
}
.g-guide-balloon {
  position: fixed;
  z-index: 1501;
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-condensed);
}
.g-guide-balloon__nav { display: flex; align-items: center; gap: var(--stack-gap-condensed); }
.g-guide-balloon__spacer { flex: 1 1 auto; }