/* 画面の配置（部品の見た目は ds.css） */
html { background: var(--surface); }
body { min-height: 100vh; overflow-wrap: anywhere; }
h1, h2, h3, p { margin: 0; }
.app-main { max-width: var(--content-max); margin: 0 auto; padding: var(--space-3) var(--space-3) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.app-head { max-width: var(--content-max); margin: 0 auto; }
.tp-header { padding-left: var(--space-3); padding-right: var(--space-3); }
.app-header-wrap { background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.app-header-wrap .tp-header { border-bottom: 0; max-width: var(--content-max); margin: 0 auto; }
.app-home-title { display: flex; align-items: center; gap: var(--space-1); }
.app-sub { font-size: 16px; line-height: 26px; color: var(--ink-muted); }
.app-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.app-subrow { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); justify-content: center; }
.app-section-title { font-size: 22px; line-height: 32px; font-weight: 700; margin-top: var(--space-2); }
.app-text { font-size: 18px; line-height: 30px; }
.app-search { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: stretch; }
.app-search .tp-field__input { flex: 1 1 160px; min-width: 0; }
.app-search .tp-btn { width: auto; flex: 0 0 auto; min-height: var(--field-height); padding: 0 var(--space-3); }
.app-hit { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: var(--space-2) var(--space-3); border: 2px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.app-hit__name { font-size: 20px; line-height: 28px; font-weight: 700; }
.app-hit__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: 16px; color: var(--ink-muted); }
.app-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.app-textarea { width: 100%; min-height: 120px; padding: var(--space-2) var(--space-3); border: 2px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 18px; line-height: 30px; resize: vertical; }
.app-textarea--prompt { min-height: 240px; font-size: 16px; line-height: 26px; }
.app-select { width: 100%; height: var(--field-height); padding: 0 var(--space-2); border: 2px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 18px; }
.app-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-2); margin: 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.app-kv dt { font-size: 16px; line-height: 30px; color: var(--ink-muted); }
.app-kv dd { margin: 0; font-size: 18px; line-height: 30px; font-weight: 700; }
.app-warnings { margin: 4px 0 0; padding-left: 1.2em; font-size: 16px; line-height: 26px; }
.app-target { font-size: 18px; line-height: 30px; }
.app-target strong { font-size: 20px; }
.app-group { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-2); }
.app-other { margin-top: var(--space-1); }
.app-details { margin: 0; font-size: 16px; line-height: 26px; }
.app-details div { display: flex; gap: var(--space-1); }
.app-details dt { color: var(--ink-muted); flex: none; }
.app-details dd { margin: 0; }
.app-steps { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--space-2); font-size: 18px; line-height: 30px; }
.app-required { color: var(--danger); }
.app-error-summary:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
#toast-region { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0 var(--space-3) var(--space-3); pointer-events: none; }
#toast-region .tp-notice { max-width: var(--content-max); margin: 0 auto; pointer-events: auto; }
#dialog-layer:not(:empty) { position: fixed; inset: 0; z-index: 30; }
#dialog-layer .tp-scrim { min-height: 100%; height: 100%; }
.tp-tabs { position: sticky; top: 0; z-index: 5; }
[hidden] { display: none !important; }
h1[tabindex="-1"]:focus { outline: none; }
/* 下に重ねた知らせの高さ（app.js が --toast-space に入れる）の分だけ、画面の下に余白を取る */
body.has-toast .app-main { padding-bottom: calc(var(--toast-space, 220px) + var(--space-3)); }
#toast-keep:not(:empty) + #toast-now:not(:empty) { margin-top: var(--space-2); }
@media (max-width: 389px) { #toast-region { padding: 0 var(--space-1) var(--space-1); } }
/* 幅が狭い画面で、次の画面へ移る知らせを画面の一番上に普通の段として出す（app.js の showToast）。重ねないので影は付けない */
#toast-inline:not(:empty) { max-width: var(--content-max); margin: 0 auto; padding: var(--space-2) var(--space-1) 0; }
#toast-inline .tp-notice { box-shadow: none; }