/* 画面図の見た目。screens.py から書き出したもの。手で直さない。 */

/* ---- 画面図（写真ではなく描いたもの） ---- */
.ui { container-type: inline-size; width: 100%; }
.ui-in {
  font-size: 1cqw;                     /* 以降の em はすべてこの1%を基準にする */
  font-family: var(--font-body);
  color: #e8edf7;
  background: #10131a;
  border: 1px solid var(--line-strong);
  border-radius: 0.85em;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  line-height: 1.35;
  user-select: none;
  text-align: left;   /* 中央寄せの帯の中に置いても、画面の中身は左から始める */
}
.ui-mac .ui-in { display: grid; grid-template-rows: auto auto 1fr auto; }

/* 題の帯 */
.ui-title { display: flex; align-items: center; gap: 1em; padding: 0.75em 1em; background: #1b1f27; }
.ui-lights { display: flex; gap: 0.5em; }
.ui-lights i { width: 0.78em; height: 0.78em; border-radius: 50%; display: block; }
.ui-lights i:nth-child(1) { background: #ff5f57; }
.ui-lights i:nth-child(2) { background: #febc2e; }
.ui-lights i:nth-child(3) { background: #28c840; }
.ui-nav { display: flex; gap: 0.9em; color: #8d97a8; font-size: 1.05em; margin-left: 0.4em; }
.ui-title .name { font-size: 1.05em; font-weight: 600; }
.ui-title .grow { flex: 1; }
.ui-seg { display: flex; gap: 0.75em; color: #9aa4b6; font-size: 1em; }
.ui-seg .on { color: #e8edf7; }
.ui-find {
  display: flex; align-items: center; gap: 0.5em;
  background: #262b35; border-radius: 0.5em; padding: 0.35em 0.8em;
  color: #8d97a8; font-size: 0.95em; min-width: 17em;
}

/* 仕事の帯（タブ） */
.ui-tabs { display: flex; align-items: center; gap: 0.5em; padding: 0.5em 0.9em; background: #171b22; }
.ui-tab {
  display: flex; align-items: center; gap: 0.45em;
  padding: 0.4em 0.9em; border-radius: 0.5em;
  background: #22262f; color: #aab3c2; font-size: 0.95em;
  max-width: 9.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-tab.sel { background: #1d3a2a; color: #d6f0e0; box-shadow: inset 0 0 0 1px #3f7d5c; }
.ui-tab .dot { width: 0.55em; height: 0.55em; border-radius: 50%; background: #7a828f; flex: none; }
.ui-tab.run .dot { background: #4ade80; box-shadow: 0 0 0.5em #4ade80; }
.ui-tab.wait .dot { background: #f0c977; box-shadow: 0 0 0.5em #f0c977; }
.ui-tab.done .dot { background: #7fd8e3; }
.ui-tabs .plus { color: #8d97a8; padding: 0 0.4em; }

/* 三面 */
.ui-body { display: grid; grid-template-columns: 11.5em 1fr 0; min-height: 0; }
.ui-body.with-term { grid-template-columns: 11.5em 1fr 27em; }
.ui-side { background: #151920; padding: 0.7em 0; overflow: hidden; border-right: 1px solid #23272f; }
.ui-main { background: #10131a; overflow: hidden; display: flex; flex-direction: column; }
.ui-term { background: #0c0e13; border-left: 1px solid #23272f; overflow: hidden; display: flex; flex-direction: column; }

/* 左（サイドバー） */
.ui-side .head { color: #7f8899; font-size: 0.86em; padding: 0.55em 1em 0.3em; letter-spacing: .02em; }
.ui-side .headrow { display: flex; align-items: center; gap: 0.45em; }
.ui-side .headrow .badge { background: #2a3040; color: #aab3c2; border-radius: 1em;
  padding: 0 0.45em; font-size: 0.9em; }
.ui-side .headrow .clear { margin-left: auto; color: #6f7889; }
.ui-row { display: flex; align-items: center; gap: 0.45em; padding: 0.28em 1em; font-size: 0.92em; color: #ccd4e2; white-space: nowrap; }
.ui-row.sel { background: #2a3040; color: #fff; }
.ui-row .tw { color: #6f7889; width: 0.7em; font-size: 0.8em; flex: none; }
.ui-row.d1 { padding-left: 1.9em; }
.ui-row.d2 { padding-left: 2.8em; }
.ui-row.d3 { padding-left: 3.7em; }
.ui-drop { margin: 0.35em 0.7em 0.6em; padding: 0.75em; border: 1px dashed #333a46; border-radius: 0.5em;
  color: #6f7889; font-size: 0.82em; text-align: center; }

/* 折り紙の入れ物（フォルダ）と書類 */
.uic { width: 1.05em; height: 1.05em; flex: none; display: block; }

/* 中（一覧） */
.ui-crumb { padding: 0.5em 1em; color: #aab3c2; font-size: 0.92em; border-bottom: 1px solid #1d212a; }
.ui-cols { display: grid; padding: 0.4em 1em; color: #7f8899; font-size: 0.86em;
  border-bottom: 1px solid #1d212a; background: #141821; }
.ui-list { flex: 1; overflow: hidden; }
.ui-item { display: grid; align-items: center; padding: 0.32em 1em; font-size: 0.92em; color: #d3dae6; }
.ui-item:nth-child(even) { background: rgba(255,255,255,0.014); }
.ui-item .nm { display: flex; align-items: center; gap: 0.5em; white-space: nowrap; overflow: hidden; }
.ui-item .tw { color: #6f7889; font-size: 0.8em; width: 0.7em; flex: none; }
.ui-item .num { color: #8d97a8; text-align: right; font-variant-numeric: tabular-nums; }
.ui-item .when { color: #8d97a8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-badge { font-size: 0.78em; padding: 0 0.35em; border-radius: 0.3em; margin-left: 0.35em; }
.ui-badge.m { color: #f0c977; box-shadow: inset 0 0 0 1px rgba(240,201,119,.5); }
.ui-badge.u { color: #7fd8e3; box-shadow: inset 0 0 0 1px rgba(127,216,227,.5); }
.ui-badge.a { color: #4ade80; box-shadow: inset 0 0 0 1px rgba(74,222,128,.5); }

/* 一覧を絵で見る */
.ui-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.8em; padding: 1em; }
.ui-cell { text-align: center; }
.ui-thumb { display: block; width: 100%; height: auto; aspect-ratio: 4/3;
  object-fit: cover; border-radius: 0.35em; background: #232a36; }
.ui-cell .cap { font-size: 0.78em; color: #aab3c2; margin-top: 0.35em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 右（ターミナル） */
.ui-term .bar { display: flex; align-items: center; gap: 0.5em; padding: 0.55em 0.9em; background: #14171e; font-size: 0.92em; color: #cbd3e0; }
.ui-term .out { flex: 1; padding: 0.7em 0.9em; font-family: var(--font-mono); font-size: 0.85em; color: #c6ccd8; overflow: hidden; }
.ui-term .out div { margin: 0.18em 0; white-space: pre-wrap; word-break: break-word; }
.ui-term .u { color: #9aa4b6; }
.ui-term .b { color: #e8edf7; }
.ui-term .g { color: #4ade80; }
.ui-term .y { color: #f0c977; }
.ui-term .c { color: #7fd8e3; }
.ui-term .dim { color: #7f8899; }
.ui-term .ask { background: #20242d; padding: 0.3em 0.6em; border-radius: 0.3em; color: #e8edf7; }
.ui-term .foot { padding: 0.5em 0.9em; border-top: 1px solid #1d212a; font-family: var(--font-mono);
  font-size: 0.8em; color: #f0c977; display: flex; justify-content: space-between; }

/* 下の帯 */
.ui-status { display: flex; align-items: center; gap: 0.6em; padding: 0.45em 1em;
  background: #14171e; color: #8d97a8; font-size: 0.84em; border-top: 1px solid #1d212a; }

/* 呼び出しの窓 */
.ui-veil { position: relative; }
.ui-veil::after { content: ""; position: absolute; inset: 0; background: rgba(4,7,14,0.55); }
.ui-palette {
  position: absolute; z-index: 2; left: 50%; top: 12%; transform: translateX(-50%);
  width: 60%; background: #1a1f2b; border: 1px solid #39404f; border-radius: 0.7em;
  box-shadow: 0 2em 5em rgba(0,0,0,0.6); overflow: hidden;
}
.ui-palette .q { padding: 0.8em 1em; font-size: 1.05em; color: #e8edf7; border-bottom: 1px solid #262c38; }
.ui-palette .q .cur { color: #f0c977; }
.ui-palette .g { padding: 0.4em 1em 0.2em; color: #7f8899; font-size: 0.8em; }
.ui-palette .it { display: flex; align-items: center; gap: 0.6em; padding: 0.4em 1em; font-size: 0.92em; color: #ccd4e2; }
.ui-palette .it.sel { background: #2a3040; }
.ui-palette .it .k { margin-left: auto; color: #7f8899; font-size: 0.85em; font-family: var(--font-mono); }

/* 文書として読む面 */
.ui-doc { padding: 1.1em 1.4em; overflow: hidden; }
.ui-doc h1 { font-size: 1.5em; margin: 0 0 0.5em; color: #fff; }
.ui-doc h2 { font-size: 1.15em; margin: 1em 0 0.4em; color: #f0f4fb; }
.ui-doc p, .ui-doc li { font-size: 0.95em; color: #c6ccd8; margin: 0.35em 0; }
.ui-doc ul { margin: 0.3em 0 0.3em 1.2em; padding: 0; }
.ui-doc code { font-family: var(--font-mono); font-size: 0.9em; background: #1b2130; padding: 0.1em 0.35em; border-radius: 0.25em; }
.ui-doc table { width: auto; border-collapse: collapse; margin: 0.6em 0; font-size: 0.9em; }
.ui-doc th, .ui-doc td { border: 1px solid #2a3040; padding: 0.3em 0.7em; text-align: left; white-space: nowrap; }
.ui-doc th { background: #1b2130; color: #e8edf7; }

/* iPhone */
.ui-phone { container-type: inline-size; width: 100%; }
.ui-phone .ui-in {
  font-size: 3.5cqw; border-radius: 2.4em; border: 0.55em solid #23262e;
  background: #000; box-shadow: 0 2em 4em rgba(0,0,0,0.55);
  display: grid; grid-template-rows: auto auto 1fr auto;
  aspect-ratio: 660/1434;
}
.ui-phone .sts { display: flex; align-items: center; padding: 0.9em 1.4em 0.3em; font-size: 0.95em; color: #fff; font-weight: 600; }
.ui-phone .sts .grow { flex: 1; }
.ui-phone .sts .rec { width: 0.5em; height: 0.5em; border-radius: 50%; background: #f2792b; }
.ui-phone .nav { display: flex; align-items: center; gap: 0.8em; padding: 0.7em 1em 0.9em; }
.ui-phone .rnd { width: 2.6em; height: 2.6em; border-radius: 50%; background: #1c1f26; color: #cfd6e2;
  display: flex; align-items: center; justify-content: center; font-size: 1.05em; flex: none; }
.ui-phone .ttl { flex: 1; text-align: center; font-size: 1.25em; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-phone .body { overflow: hidden; }
.ui-phone .term { font-family: var(--font-mono); font-size: 0.74em; color: #c6ccd8; padding: 0 0.9em; }
.ui-phone .term div { margin: 0.25em 0; white-space: pre-wrap; word-break: break-word; }
.ui-phone .keys { display: flex; gap: 0.35em; padding: 0.5em 0.6em; background: #14161b; }
.ui-phone .keys span { flex: 1; text-align: center; background: #2c2f38; color: #e8edf7;
  border-radius: 0.35em; padding: 0.45em 0; font-size: 0.85em; font-family: var(--font-mono); }
.ui-phone .keys span.on { background: #2b7fff; }
.ui-phone .kb { background: #1b1d23; padding: 0.6em 0.4em 1.2em; }
.ui-phone .kb .r { display: flex; gap: 0.35em; justify-content: center; margin: 0.3em 0; }
.ui-phone .kb .r b { background: #3a3d46; color: #fff; border-radius: 0.3em; font-weight: 500;
  width: 2.3em; text-align: center; padding: 0.5em 0; font-size: 0.9em; }
.ui-phone .kb .r b.wide { width: 4.6em; }
.ui-phone .kb .r b.sp { width: 9.6em; }
.ui-phone .plist .it { display: flex; align-items: center; gap: 0.7em; padding: 0.6em 1.1em;
  border-bottom: 1px solid #1b1e25; font-size: 1em; color: #e4e9f2; }
.ui-phone .plist .tx { display: block; min-width: 0; }
.ui-phone .plist .tx b { display: block; font-weight: 400; }
.ui-phone .plist .tx i { display: block; font-style: normal; color: #7f8899; font-size: 0.78em; }
.ui-phone .plist .it .usub { margin-left: auto; color: #6f7889; font-size: 1.2em; flex: none; }
.ui-phone .sec { padding: 0.8em 1.1em 0.3em; color: #7f8899; font-size: 0.85em; }
.ui-phone .doc { padding: 0.9em 1.1em; }
.ui-phone .doc h1 { font-size: 1.3em; margin: 0 0 0.4em; color: #fff; }
.ui-phone .doc h2 { font-size: 1.05em; margin: 0.8em 0 0.3em; color: #eef2f9; }
.ui-phone .doc p, .ui-phone .doc li { font-size: 0.9em; color: #c6ccd8; margin: 0.3em 0; }
.ui-phone .doc ul { margin: 0.2em 0 0.2em 1.1em; padding: 0; }

@media (max-width: 700px) {
  /* 幅が狭いときは、ターミナルの面を落として一覧を読ませる */
  .ui-body.with-term { grid-template-columns: 9.5em 1fr; }
  .ui-body.with-term .ui-term { display: none; }
}

.ui-set .ui-in { background: #1c1f26; }
.ui-set .tabs { display: flex; justify-content: center; gap: 0.6em; padding: 0.9em 1em 1.1em; }
.ui-set .tabs .t { display: grid; justify-items: center; gap: 0.35em; padding: 0.6em 0.9em;
  border-radius: 0.6em; color: #8d97a8; font-size: 0.95em; min-width: 5.2em; }
.ui-set .tabs .t.on { background: #2b2f38; color: #eef2f9; }
.ui-set .tabs .t svg { width: 1.9em; height: 1.9em; }
.ui-set .pane { border-top: 1px solid #2a2e37; padding: 1.4em 1.6em 1.6em; }
.ui-set .sw { display: flex; align-items: center; gap: 0.7em; font-size: 1.15em; color: #eef2f9; }
.ui-set .box { width: 1.15em; height: 1.15em; border-radius: 0.25em; background: #2b7fff;
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.85em; }
.ui-set .note { color: #9aa4b6; font-size: 0.95em; margin: 0.6em 0 0; line-height: 1.6; }
.ui-set .rule { border-top: 1px solid #2a2e37; margin: 1.1em 0; }
.ui-set .line { display: flex; align-items: center; gap: 0.6em; color: #cfd6e2; font-size: 1em; margin: 0.45em 0; }
.ui-set .qr { display: block; width: 13em; height: 13em; margin: 0.4em auto 0.5em; }
.ui-set .cap { text-align: center; color: #9aa4b6; font-size: 0.95em; }
.ui-set .ubtn { display: inline-block; background: #2b2f38; color: #eef2f9;
  border-radius: 0.45em; padding: 0.45em 1em; font-size: 1em; }

/* カラム表示。左から順に潜っていき、いちばん右で中身を確かめる */
.ui-cols3 { display: grid; grid-template-columns: 1fr 1fr 1.4fr; min-height: 0; flex: 1; }
.ui-cols3 .col { border-right: 1px solid #1d212a; overflow: hidden; }
.ui-cols3 .col:last-child { border-right: 0; }
.ui-cols3 .it { display: flex; align-items: center; gap: 0.5em; padding: 0.34em 0.9em;
  font-size: 0.92em; color: #d3dae6; white-space: nowrap; }
.ui-cols3 .it.sel { background: #2a3040; color: #fff; }
.ui-cols3 .it .arrow { margin-left: auto; color: #6f7889; font-size: 0.85em; }
.ui-cols3 .peek { padding: 0.9em; }
.ui-cols3 .peek .card { background: #161b25; border: 1px solid #232a36;
  border-radius: 0.5em; padding: 0.85em; }
.ui-cols3 .peek h4 { margin: 0 0 0.5em; font-size: 1em; color: #fff; }
.ui-cols3 .peek dl { display: grid; grid-template-columns: auto 1fr; gap: 0.24em 0.8em;
  margin: 0; font-size: 0.86em; }
.ui-cols3 .peek dt { color: #7f8899; }
.ui-cols3 .peek dd { margin: 0; color: #ccd4e2; }

/* iPad。iPhone と同じ中身を、左に一覧・右に中身の形で置く */
.ui-pad { container-type: inline-size; width: 100%; }
.ui-pad .ui-in {
  font-size: 1.35cqw; border-radius: 1.6em; border: 0.5em solid #23262e;
  background: #000; box-shadow: 0 2em 4em rgba(0,0,0,0.55);
  display: grid; grid-template-rows: auto 1fr; aspect-ratio: 1366/1024;
}
.ui-pad .sts { display: flex; align-items: center; padding: 0.7em 1.4em 0.2em; font-size: 0.95em; color: #fff; font-weight: 600; }
.ui-pad .sts .grow { flex: 1; }
.ui-pad .cols { display: grid; grid-template-columns: 21em 1fr; min-height: 0; }
.ui-pad .side { background: #14161b; border-right: 1px solid #23262e; overflow: hidden; }
.ui-pad .side .top { display: flex; align-items: center; gap: 0.6em; padding: 0.7em 1em; color: #e8edf7; font-size: 1.05em; font-weight: 600; }
.ui-pad .seg { display: flex; gap: 0.3em; margin: 0.2em 0.9em 0.8em; background: #23262e; border-radius: 0.5em; padding: 0.22em; }
.ui-pad .seg span { flex: 1; text-align: center; padding: 0.35em 0; border-radius: 0.4em; font-size: 0.92em; color: #aab3c2; }
.ui-pad .seg span.on { background: #3a3d46; color: #fff; }
.ui-pad .side .it { display: flex; align-items: center; gap: 0.65em; padding: 0.5em 1em; border-bottom: 1px solid #1b1e25; font-size: 0.95em; color: #e4e9f2; }
.ui-pad .side .it.sel { background: #2a3040; }
.ui-pad .side .tx { display: block; min-width: 0; }
.ui-pad .side .tx b { display: block; font-weight: 400; }
.ui-pad .side .tx i { display: block; font-style: normal; color: #7f8899; font-size: 0.78em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-pad .side .pill { margin-left: auto; font-size: 0.76em; padding: 0.05em 0.5em; border-radius: 1em; flex: none; }
.ui-pad .main { background: #000; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.ui-pad .main .bar { display: flex; align-items: center; justify-content: center; padding: 0.6em; color: #fff; font-size: 1.05em; font-weight: 600; border-bottom: 1px solid #1b1e25; }
.ui-pad .term { font-family: var(--font-mono); font-size: 0.8em; color: #c6ccd8; padding: 0.7em 1em; overflow: hidden; }
.ui-pad .term div { margin: 0.2em 0; white-space: pre-wrap; word-break: break-word; }

/* Mac と iPhone を並べて置く。下辺を揃えると、机の上に置いた形に見える */
.ui-duo { display: grid; grid-template-columns: 1fr 0.26fr; gap: 2.2%; align-items: end; }
/* 狭い画面では横に並べると iPhone が小指の爪ほどになる。Mac を全幅にして、
   iPhone はその下に重ねて置く（手元の機械という関係が形で伝わる） */
@media (max-width: 760px) {
  .ui-duo { grid-template-columns: 1fr; gap: 0; }
  .ui-duo .phone { width: 46%; margin: -9% 2% 0 auto; }
}

/* 配色の見本。アプリの TerminalTheme.swift の色をそのまま使う */
.ui-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2%; }
@media (max-width: 720px) { .ui-themes { grid-template-columns: repeat(2, 1fr); } }
/* 文字の大きさは札の幅で決める（3列でも2列でも、中の1行が切れない） */
.ui-theme { container-type: inline-size; border-radius: 0.8em; overflow: hidden; border: 1px solid var(--line-strong); background: #10131a; }
.ui-theme .sample {
  font-size: 5.1cqw; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.5; padding: 1.1em 1.1em 1.3em; position: relative;
}

.ui-theme .sample .dots { display: flex; gap: 0.45em; margin-bottom: 0.85em; }
.ui-theme .sample .dots i { width: 0.62em; height: 0.62em; border-radius: 50%; display: block; opacity: 0.85; }
.ui-theme .sample .row { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.ui-theme .sample .caret { display: inline-block; width: 0.55em; height: 1em; vertical-align: -0.15em; }
.ui-theme .sample .swatches { display: flex; gap: 0.3em; margin-top: 0.8em; }
.ui-theme .sample .swatches i { width: 1.05em; height: 0.5em; border-radius: 0.15em; display: block; }
.ui-theme .sample .photo { position: absolute; inset: 0; z-index: 0; }
.ui-theme .sample .tint { position: absolute; inset: 0; z-index: 1; }
.ui-theme .sample .lines { position: relative; z-index: 2; }
.ui-theme .name {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.6em;
  padding: 0.7em 0.9em; background: #171b22; color: #e8edf7; font-size: 4cqw; font-weight: 600;
}
.ui-theme .name .note { flex-basis: 100%; font-weight: 400; color: #8d97a8; font-size: 0.85em; }