/* 旅程一覧（/plans、11/10 Takeru）。1行に1つの旅程：左に小さな地図（1.414:1）、名前と要点、右に操作。
   刻みは白銀比（system.css の --s-*）。主ボタンは行ごとの「編集する」だけ */
.page-plans main { --pl-rule: var(--semantic-color-border-default, #d5dde4); --pl-muted: var(--semantic-color-text-muted, #55616b); --pl-ao: var(--component-button-primary-background, #1d4a6e); }
.page-plans main > .plans-lead { margin-top: var(--s-n2); margin-bottom: 0; font-size: var(--s-0); line-height: var(--lh-body); color: var(--pl-muted); }
.page-plans main > .plans-page { margin-top: var(--s-6); margin-bottom: var(--s-8); }

.plans-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-n2) var(--s-0); padding: 0 0 var(--s-0); border-bottom: 1px solid var(--ds-ink, #151515); }
.plans-head__count { margin: 0; font-size: var(--s-n1); line-height: var(--lh-body); color: var(--pl-muted); }
.plans-head__new { display: inline-flex; align-items: center; gap: var(--s-n4); min-height: 48px; }
.plans-head__new .ico--plus { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* 旅程がまだないとき：行のかわりに、ひとことと入口だけ */
.plans-none { display: grid; justify-items: start; gap: var(--s-n2); padding: var(--s-4) 0; border-top: 1px solid var(--ds-ink, #151515); border-bottom: 1px solid var(--pl-rule); }
.plans-none__title { margin: 0; font-size: var(--s-2); font-weight: 700; line-height: var(--lh-head); letter-spacing: .02em; }
.plans-none__text { margin: 0 0 var(--s-n2); text-wrap: pretty; word-break: auto-phrase; font-size: var(--s-0); line-height: var(--lh-body); color: var(--pl-muted); }
.plans-none .btn { margin: 0; text-decoration: none; }
.plans-none .nw { white-space: nowrap; }

.plans-list { list-style: none; margin: 0; padding: 0; }
.plans-row { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) auto; grid-template-areas: "map body acts"; align-items: center; gap: var(--s-0) var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--pl-rule); }
.plans-row.is-flash { animation: pick-flash 1.6s cubic-bezier(.25, .8, .25, 1); }
.plans-row__map { grid-area: map; display: block; overflow: hidden; aspect-ratio: 1.414 / 1; border: 1px solid var(--pl-rule); border-radius: 4px; background: #f4f7fa; }
.plans-row__map .plans-row__fig { margin: 0; width: 100%; height: 100%; }
.plans-row__map svg { display: block; width: 100%; height: 100%; }
.plans-row__map .tour-map__stop { pointer-events: none; }
.plans-row__body { grid-area: body; min-width: 0; }
.plans-row__name { margin: 0; font-size: var(--s-2); font-weight: 700; line-height: var(--lh-head); letter-spacing: .02em; overflow-wrap: anywhere; }
.plans-row__name a { color: inherit; text-decoration: none; }
.plans-row__name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.plans-row__facts { display: flex; flex-wrap: wrap; gap: 0 var(--s-0); margin: var(--s-n4) 0 0; font-size: var(--s-0); line-height: var(--lh-body); }
.plans-row__stops { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-n4); max-width: 46em; margin: var(--s-n4) 0 0; font-size: var(--s-n1); line-height: var(--lh-body); color: var(--pl-muted); }
.plans-row__sep { color: var(--pl-rule); }
.plans-row__rest { margin-left: var(--s-n4); }
.plans-row__upd { margin: var(--s-n4) 0 0; font-size: var(--s-n2); line-height: var(--lh-body); color: var(--pl-muted); }
.plans-row__acts { grid-area: acts; display: flex; align-items: center; gap: var(--s-n4); }
.plans-row__acts .btn { min-height: 48px; margin: 0; white-space: nowrap; }
.plans-row__acts > .btn { min-width: 7.5em; justify-content: center; }
.plans-row__more > summary.plans-row__more-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; min-width: 0; height: 48px; padding: 0; }
.plans-row__more .ico--more { width: 22px; height: 22px; fill: currentColor; }
.plans-row__more .menu__pop { width: max-content; min-width: 13em; padding: var(--s-n4) 0; }
.plans-menu { list-style: none; margin: 0; padding: 0; }
.plans-menu button { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 var(--s-0); font: inherit; font-size: var(--s-n1); text-align: left; color: var(--ds-ink, #151515); background: none; border: 0; cursor: pointer; }
.plans-menu button:hover { background: #f4f7fa; }
.plans-menu button:focus-visible { outline: 2px solid var(--ds-ink, #151515); outline-offset: -2px; }
.plans-menu button:disabled { color: var(--pl-muted); cursor: default; background: none; }
.plans-menu .is-danger { color: #b3261e; }
.plans-menu li + li:last-child { border-top: 1px solid var(--pl-rule); }

.plans-trash { margin: var(--s-4) 0 0; }
.plans-trash__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-n4) var(--s-0); }
.plans-trash__note { margin: 0; font-size: var(--s-n1); line-height: var(--lh-body); color: var(--pl-muted); }
.plans-trash__btn { display: inline-flex; align-items: center; gap: var(--s-n4); min-height: 48px; padding: 0; font: inherit; font-size: var(--s-n1); font-weight: 700; color: var(--pl-ao); background: none; border: 0; cursor: pointer; }
.plans-trash__btn:hover { text-decoration: underline; text-underline-offset: .2em; }
.plans-trash__btn .ico--chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .28s cubic-bezier(.45, 0, .1, 1); }
.plans-trash__btn[aria-expanded="true"] .ico--chev { transform: rotate(180deg); }
.plans-trash__body { margin: var(--s-n2) 0 0; }
.plans-trash__body .plan__trash-list { margin: 0; border-top: 1px solid var(--pl-rule); }
.plans-trash__body .plan__trash-list > li { padding: var(--s-n2) 0; column-gap: var(--s-0); }
.plans-trash__body .plan__trash-name { font-size: var(--s-0); }
.plans-trash__body .plan__trash-meta { font-size: var(--s-n2); }
.plans-trash__body .plan__trash-btn { min-height: 48px; }
.plans-trash__body .note { margin: var(--s-n2) 0 0; font-size: var(--s-n2); color: var(--pl-muted); }

/* 名前を変える（一覧の「…」から） */
.dialog--rename .rename { width: min(30rem, calc(100vw - 32px)); max-width: none; box-sizing: border-box; padding: var(--s-1); border-radius: 4px; }
.rename .share__head h2 { font-size: var(--s-1); }
.rename__field { display: grid; gap: var(--s-n4); margin: var(--s-0) 0 0; }
.rename__label { font-size: var(--s-n1); font-weight: 700; }
.rename__field input { height: 48px; box-sizing: border-box; width: 100%; padding: 0 var(--s-n2); font: inherit; font-size: var(--s-0); }
.rename__hint { margin: var(--s-n4) 0 0; font-size: var(--s-n2); color: var(--pl-muted); }
.rename__acts { display: flex; justify-content: flex-end; gap: var(--s-n4); margin: var(--s-1) 0 0; }
.rename__acts .btn { min-height: 48px; margin: 0; }

/* 狭い PC・タブレット：操作は内容の下へ */
@media (max-width: 1099px) {
  .plans-row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); grid-template-areas: "map body" "map acts"; align-items: start; row-gap: var(--s-0); }
  .plans-row__acts { align-self: end; }
}
/* スマホ：地図と名前を横に、操作は行の下に全幅。立ち寄り先は出さない */
@media (max-width: 599px) {
  .page-plans main > .plans-page { margin-top: var(--s-4); }
  .plans-head__new { width: 100%; justify-content: center; }
  .plans-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-areas: "map body" "acts acts"; gap: var(--s-0) var(--s-0); padding: var(--s-1) 0; }
  .plans-row__name { font-size: var(--s-1); }
  .plans-row__facts { font-size: var(--s-n1); gap: 0 var(--s-n2); }
  .plans-row__stops { display: none; }
  .plans-row__acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 48px; }
  .plans-row__acts > .btn { min-width: 0; }
  .plans-row__more .menu__pop { right: 0; }
}
@media (prefers-reduced-motion: reduce) { .plans-row.is-flash { animation: none; } .plans-trash__btn .ico--chev { transition: none; } }