/* Clock（SK's Toolbox）
   空の色は clock.js が時刻から計算して --sky-top / --sky-mid / --sky-low / --orb に入れる（テーマ「空」）。
   ほかのテーマ（オーロラ・海・さくら・森・ゆらぎ・夜・紙）は <html data-theme="…"> でトークンを入れ替え、.sky__fx で動きを付ける。
   時計と日付の大きさは --time-scale / --date-scale（clock.js が「表示」のパネルの値を入れる） */
:root {
  --sky-top: #1f2463;
  --sky-mid: #4a3f86;
  --sky-low: #f59a7c;
  --orb: #ffd2a8;
  --orb-x: 50%;
  --orb-y: 70%;
  --stars: 0;
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, .72);
  --ink-faint: rgba(255, 255, 255, .22);
  --glass: rgba(255, 255, 255, .12);
  --glass-line: rgba(255, 255, 255, .22);
  --glass-on: rgba(255, 255, 255, .9);
  --glass-on-ink: #1a1d3a;
  --shadow: 0 2px 30px rgba(10, 12, 40, .25);
  --num: Outfit, "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  /* 下のツールバー（マテリアルデザイン）の色。空・夜は M3 のダーク、紙はライト */
  --md-surface-container: #1d2024;
  --md-on-surface-variant: #c4c6d0;
  --md-secondary-container: #3e4759;
  --md-on-secondary-container: #dae2f9;
  --md-outline-variant: #44474e;
  --md-primary: #aac7ff;
  --tb-back-ink: rgba(255, 255, 255, .78);
  --tbt-ink: rgba(255, 255, 255, .92); /* パソコンのタイトルバーの文字（/toolbox/shared/m3.css） */
  --md-on-surface: #e2e2e9;
  --md-on-primary: #0a305f; --md-outline: #8e9099; --md-surface-container-highest: #333539; /* 「表示」のパネルのスイッチ */
  --md-font: Roboto, system-ui, sans-serif; /* 左上の「SK's Toolbox」（Clock は Roboto のまま） */
  --font: Outfit, "M PLUS 1", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
  color-scheme: dark;
}
:root[data-theme="night"] {
  --sky-top: #000000; --sky-mid: #000000; --sky-low: #07080d;
  --orb: #2a2f55; --stars: 0;
  --ink: #e9e9ef; --ink-soft: rgba(233, 233, 239, .55); --ink-faint: rgba(233, 233, 239, .14);
  --glass: rgba(255, 255, 255, .06); --glass-line: rgba(255, 255, 255, .12);
  --shadow: none;
}
:root[data-theme="paper"] {
  --sky-top: #f4f1ea; --sky-mid: #f1ede4; --sky-low: #e9e3d6;
  --orb: #ffffff; --stars: 0;
  --ink: #1c1b19; --ink-soft: rgba(28, 27, 25, .58); --ink-faint: rgba(28, 27, 25, .12);
  --glass: rgba(255, 255, 255, .55); --glass-line: rgba(28, 27, 25, .1);
  --glass-on: #1c1b19; --glass-on-ink: #f4f1ea;
  --shadow: none;
  --md-surface-container: #ededf4; --md-on-surface-variant: #44474e;
  --md-secondary-container: #dae2f9; --md-on-secondary-container: #3e4759;
  --md-outline-variant: #c4c6d0; --md-primary: #415f91;
  --tb-back-ink: rgba(28, 27, 25, .7);
  --tbt-ink: rgba(28, 27, 25, .85);
  --md-on-surface: #191c20;
  --md-on-primary: #ffffff; --md-outline: #74777f; --md-surface-container-highest: #e2e2e9;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: var(--sky-top);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
body.is-idle { cursor: none; }

/* ---- 空 ---- */
.sky {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%);
}
.sky__orb {
  position: absolute; left: var(--orb-x); top: var(--orb-y);
  width: 90vmax; height: 90vmax; translate: -50% -50%;
  background: radial-gradient(circle, var(--orb) 0%, transparent 60%);
  opacity: .55; filter: blur(20px);
  transition: left 2s linear, top 2s linear;
  animation: breathe 14s ease-in-out infinite;
}
@keyframes breathe { 50% { scale: 1.08; opacity: .7; } }
.sky__stars {
  position: absolute; inset: -50%;
  opacity: var(--stars); transition: opacity 3s linear;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 65%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 15%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 45%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 80%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 20% 85%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 10%, #fff 50%, transparent 51%);
  background-size: 420px 420px;
  animation: drift 240s linear infinite;
}
@keyframes drift { to { transform: rotate(360deg); } }
.sky__grain {
  position: absolute; inset: 0; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- 戻るリンク（/toolbox/shared/m3.css の .tb-back） ---- */
.brand {
  position: fixed; z-index: 2;
  top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left));
  transition: opacity .6s ease;
}

/* ---- 時計 ---- */
.clock {
  position: relative; z-index: 1;
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 16px;
  text-align: center;
}
.clock__date {
  margin: 0 0 .4em;
  font-size: min(calc(clamp(15px, 2.4vw, 26px) * var(--date-scale, 1)), 7vw); font-weight: 400; letter-spacing: .14em;
  color: var(--ink-soft);
  text-shadow: var(--shadow);
}
.clock__time {
  display: flex; align-items: baseline; justify-content: center;
  font-family: var(--num); font-weight: 200;
  line-height: 1; letter-spacing: -.02em;
  text-shadow: var(--shadow);
  white-space: nowrap;
}
/* 大きくしても、画面の幅からはみ出さないように（28vw・8vw が上限） */
.clock__hm { font-size: min(calc(clamp(88px, 21vw, 300px) * var(--time-scale, 1)), 28vw); display: inline-flex; }
.clock__sec { font-size: min(calc(clamp(28px, 6vw, 84px) * var(--time-scale, 1)), 8vw); font-weight: 300; color: var(--ink-soft); margin-left: .25em; display: inline-flex; }
.clock__ampm { font-size: min(calc(clamp(16px, 2.6vw, 34px) * var(--time-scale, 1)), 4vw); font-weight: 500; letter-spacing: .1em; color: var(--ink-soft); margin-left: .5em; }
.clock__ampm:empty, .clock__sec:empty { display: none; }
.is-nosec .clock__sec { display: none; }
.is-nodate .clock__date { display: none; }
.is-nopart .clock__part { visibility: hidden; }
.is-nosec .clock__bar { opacity: 0; }

/* 1 文字ずつの枠。数字が変わると、古い数字は上へ、新しい数字は下から */
.slot { position: relative; display: inline-grid; overflow: hidden; width: .6em; justify-items: center; }
.slot--colon { width: .3em; animation: blink 2s steps(1) infinite; }
.slot > span { grid-area: 1 / 1; }
.slot > .in { animation: roll-in .7s cubic-bezier(.22, 1, .36, 1) both; }
.slot > .out { animation: roll-out .5s cubic-bezier(.55, 0, .45, 1) both; }
@keyframes roll-in { from { transform: translateY(60%); opacity: 0; filter: blur(6px); } }
@keyframes roll-out { to { transform: translateY(-60%); opacity: 0; filter: blur(6px); } }
@keyframes blink { 50% { opacity: .35; } }

.clock__bar {
  width: min(260px, 50vw); height: 2px; margin-top: clamp(18px, 3vw, 36px);
  border-radius: 2px; background: var(--ink-faint); overflow: hidden;
  transition: opacity .4s ease;
}
.clock__bar i { display: block; height: 100%; width: 100%; background: var(--ink-soft); border-radius: inherit; transform-origin: left; transform: scaleX(0); }
.clock__part {
  margin: 14px 0 0; min-height: 1.5em;
  font-size: clamp(12px, 1.5vw, 15px); letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-soft); opacity: .8;
  text-shadow: var(--shadow);
}

/* ---- 共通の設定の画面（/toolbox/shared/settings.js）の色。空・夜は M3 のダーク、紙はライト。文字は M PLUS 1 ---- */
.tbs-overlay, .tbs-dialog-scrim {
  --md-font: "M PLUS 1", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  --md-primary: #aac7ff; --md-on-primary: #0a305f;
  --md-secondary-container: #3e4759; --md-on-secondary-container: #dae2f9;
  --md-error: #ffb4ab;
  --md-surface: #111318; --md-on-surface: #e2e2e9; --md-on-surface-variant: #c4c6d0;
  --md-surface-container-high: #282a2f; --md-surface-container-highest: #333539;
  --md-outline: #8e9099; --md-outline-variant: #44474e;
  color: var(--md-on-surface); cursor: auto;
}
:root[data-theme="paper"] .tbs-overlay, :root[data-theme="paper"] .tbs-dialog-scrim {
  --md-primary: #415f91; --md-on-primary: #ffffff;
  --md-secondary-container: #dae2f9; --md-on-secondary-container: #3e4759;
  --md-error: #ba1a1a;
  --md-surface: #f9f9ff; --md-on-surface: #191c20; --md-on-surface-variant: #44474e;
  --md-surface-container-high: #e7e8ee; --md-surface-container-highest: #e2e2e9;
  --md-outline: #74777f; --md-outline-variant: #c4c6d0;
}
body.tbs-open .dock, body.tbs-open .brand { visibility: hidden; }

/* ---- 下のツールバー（マテリアルデザインのフローティングツールバー。動かさないと消える） ---- */
.dock {
  position: fixed; z-index: 2; left: 50%; translate: -50% 0;
  bottom: max(24px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 4px;
  height: 64px; padding: 0 8px; border-radius: 32px;
  background: var(--md-surface-container); color: var(--md-on-surface-variant);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15);
  font-family: Roboto, system-ui, sans-serif;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, 0, 0, 1);
}
.dock__sep { width: 1px; height: 24px; margin: 0 4px; background: var(--md-outline-variant); }
.dock .icon-btn:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; }
/* 「24h / 12h」は文字のボタン（いつも選ばれている見た目にはしない） */
.dock .dock__text { width: auto; min-width: 56px; padding: 0 12px; border-radius: 24px; font-size: 14px; font-weight: 500; letter-spacing: .02em; }
.dock .dock__text[aria-pressed] { background: transparent; color: var(--md-on-surface-variant); }
/* 選んでいるボタンは、押したとき丸から角丸の四角に */
.dock .icon-btn[aria-pressed="true"]:not(.dock__text) { border-radius: 16px; }

body.is-idle .dock { opacity: 0; transform: translateY(12px); pointer-events: none; }
body.is-idle .brand { opacity: 0; pointer-events: none; }
body.is-idle .modes { opacity: 0; transform: translate(-50%, -12px); pointer-events: none; }

/* ---- 機能の切りかえ（時計・世界時計・アラーム・タイマー・ストップウォッチ） ---- */
.modes {
  position: fixed; z-index: 3; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%);
  display: flex; gap: 2px; padding: 4px; border-radius: 28px;
  background: var(--md-surface-container); color: var(--md-on-surface-variant);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15);
  font-family: var(--font);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, 0, 0, 1);
}
.modes__btn {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: 20px;
  background: none; cursor: pointer; font-size: 13px; font-weight: 500; white-space: nowrap;
}
.modes__btn .msr { font-size: 20px; }
.modes__btn[aria-selected="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.modes__btn[aria-selected="true"] .msr { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.modes__btn:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 1px; }
/* 時計の画面では、上の帯が重ならないように「戻る」を下げない（左上）。せまい画面では文字を隠す */
@media (max-width: 760px) {
  .modes__label { display: none; }
  .modes__btn { padding: 0 12px; }
  .modes__btn[aria-selected="true"] .modes__label { display: inline; }
}
/* 上のタブと重ならないように、せまいときは「戻る」を矢印だけに */
@media (max-width: 900px) {
  .brand > span:last-child { display: none; }
  .brand { padding-right: 10px; }
}
@media (max-width: 400px) { .modes__btn[aria-selected="true"] .modes__label { display: none; } }

/* 次のアラーム（時計の画面） */
.clock__next { display: inline-flex; align-items: center; gap: 4px; margin: 10px 0 0; padding: 4px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink-soft); font-size: 13px; }
.clock__next .msr { font-size: 16px; }

/* ---- パネル（すりガラスのカード） ---- */
.panel {
  position: relative; z-index: 1; height: 100%; overflow-y: auto;
  display: flex; justify-content: center; align-items: flex-start;
  padding: calc(max(14px, env(safe-area-inset-top)) + 72px) 16px calc(max(24px, env(safe-area-inset-bottom)) + 96px);
  font-family: var(--font); color: var(--ink);
}
.panel__card {
  width: min(560px, 100%); padding: 20px; border-radius: 32px;
  background: color-mix(in srgb, var(--glass) 80%, rgba(8, 10, 30, .25)); border: 1px solid var(--glass-line);
  backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3);
}
:root[data-theme="paper"] .panel__card { background: rgba(255, 255, 255, .62); }
.panel__card--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel__head h2, .panel__title { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: .02em; }
.panel__title { margin-bottom: 18px; }
.panel__empty { margin: 24px 8px; color: var(--ink-soft); font-size: 14px; text-align: center; }
.panel__note { margin: 16px 4px 0; color: var(--ink-soft); font-size: 12px; line-height: 1.7; }

/* パネルのボタン */
.pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border: 0; border-radius: 22px; cursor: pointer;
  background: var(--glass-on); color: var(--glass-on-ink);
  font: 500 15px/1 var(--font); letter-spacing: .02em; white-space: nowrap;
}
.pbtn .msr { font-size: 20px; }
.pbtn--tonal { background: var(--glass); color: var(--ink); border: 1px solid var(--glass-line); }
.pbtn--big { height: 56px; padding: 0 32px; border-radius: 28px; font-size: 17px; }
.pbtn:disabled { opacity: .4; cursor: default; }
.pbtns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }

/* 世界時計 */
.zones { list-style: none; margin: 0; padding: 0; }
.zone { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--glass-line); }
.zone:first-child { border-top: 0; }
.zone__sun { font-size: 22px; color: var(--ink-soft); font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.zone__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zone__rel { font-size: 12px; color: var(--ink-soft); }
.zone__name { font-size: 18px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zone__time { font-family: var(--num); font-size: 36px; font-weight: 300; letter-spacing: -.01em; }
.zone__del { color: var(--ink-soft); width: 40px; height: 40px; }

/* アラーム */
.alarms { list-style: none; margin: 0; padding: 0; }
.alarm { display: flex; align-items: center; gap: 12px; padding: 4px 4px 4px 0; border-top: 1px solid var(--glass-line); }
.alarm:first-child { border-top: 0; }
.alarm__main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 0; border-radius: 18px; background: none; color: inherit; text-align: left; cursor: pointer; }
.alarm__time { font-family: var(--num); font-size: 42px; font-weight: 300; line-height: 1.1; }
.alarm__sub { font-size: 13px; color: var(--ink-soft); }
.alarm__next { font-size: 12px; color: var(--ink-soft); opacity: .8; }
.alarm.is-off .alarm__time, .alarm.is-off .alarm__sub { opacity: .45; }
.alarm-dialog .alarm-edit { display: flex; flex-direction: column; gap: 16px; }
.alarm-edit__time { align-self: center; height: 64px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--md-surface-container-highest); color: var(--md-on-surface); font: 300 40px/1 var(--num, inherit); }
.alarm-edit__days { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.day { width: 40px; height: 40px; border: 1px solid var(--md-outline-variant); border-radius: 50%; background: none; color: var(--md-on-surface); cursor: pointer; font-size: 13px; }
.day[aria-pressed="true"] { border-color: transparent; background: var(--md-primary); color: var(--md-on-primary); }
.alarm-edit__hint { margin: -4px 0 0; text-align: center; font-size: 13px; color: var(--md-on-surface-variant); }
/* ダイアログ（M3）の色: Clock のパネルとは別に、共通の設定の画面と同じ */
.tbs-dialog-scrim .m3-field { background: var(--md-surface-container-highest); }

/* タイマー */
.tset { display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
.tset__field { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-soft); }
.tset__field input {
  width: 92px; height: 84px; border: 1px solid var(--glass-line); border-radius: 20px; background: var(--glass); color: var(--ink);
  text-align: center; font: 300 48px/1 var(--num); -moz-appearance: textfield;
}
.tset__field input::-webkit-inner-spin-button, .tset__field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tset__field input:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.tset__colon { padding-bottom: 38px; font: 300 40px/1 var(--num); color: var(--ink-soft); }
.presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 20px 0 24px; }
.chip { height: 34px; padding: 0 14px; border: 1px solid var(--glass-line); border-radius: 17px; background: var(--glass); color: var(--ink); cursor: pointer; font: 500 13px/1 var(--font); }
.tring { position: relative; width: min(280px, 70vw); aspect-ratio: 1; }
.tring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tring__track { fill: none; stroke: var(--ink-faint); stroke-width: 6; }
.tring__bar { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .3s linear; }
.tring__text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.tring__left { font: 200 clamp(48px, 13vw, 68px)/1 var(--num); letter-spacing: -.01em; }
.tring__end { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ink-soft); }
.tring__end .msr { font-size: 16px; }
.tring__end.is-paused { opacity: .5; }

/* ストップウォッチ */
.sw__time { font: 200 clamp(56px, 15vw, 96px)/1 var(--num); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.laps { list-style: none; width: 100%; margin: 20px 0 0; padding: 0; max-height: 40vh; overflow-y: auto; text-align: left; }
.lap { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; padding: 10px 8px; border-top: 1px solid var(--glass-line); font-size: 15px; font-variant-numeric: tabular-nums; }
.lap__no { color: var(--ink-soft); }
.lap__total { color: var(--ink-soft); min-width: 92px; text-align: right; }
.lap.is-best .lap__split { color: #7ee2a8; }
.lap.is-worst .lap__split { color: #ff9e9e; }
:root[data-theme="paper"] .lap.is-best .lap__split { color: #15803d; }
:root[data-theme="paper"] .lap.is-worst .lap__split { color: #b91c1c; }

/* ---- 鳴っているとき ---- */
.ring {
  position: fixed; z-index: 30; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 24px; text-align: center; color: #fff; font-family: var(--font);
  background: radial-gradient(circle at 50% 38%, rgba(110, 120, 255, .45), rgba(8, 10, 30, .92) 70%);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.ring__icon { font-size: 72px; animation: ring-shake 1.2s ease-in-out infinite; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48; }
@keyframes ring-shake { 0%, 50%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } }
.ring__time { margin: 8px 0 0; font: 200 clamp(56px, 16vw, 120px)/1 var(--num); }
.ring__title { margin: 0; font-size: 22px; font-weight: 500; }
.ring .pbtn { background: #fff; color: #1a1d3a; }
.ring .pbtn--tonal { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .3); }

/* ---- 夜モード（22 時〜6 時は画面を暗くする） ---- */
.night-dim { position: fixed; z-index: 25; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 2s ease; }
body.is-night-dim .night-dim { opacity: .55; }
body.is-night-dim.is-ringing .night-dim { opacity: 0; }

.toast {
  position: fixed; z-index: 3; left: 50%; top: max(20px, env(safe-area-inset-top));
  translate: -50% 0; margin: 0;
  padding: 8px 16px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  font-size: 13px; letter-spacing: .04em; white-space: nowrap;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.toast.is-on { opacity: 1; transform: none; }

/* 一覧ページの見本（/toolbox/ の iframe。?embed） */
.is-embed .brand, .is-embed .dock, .is-embed .toast, .is-embed .modes, .is-embed .clock__next { display: none !important; }

@media (max-width: 480px) {
  .clock__sec { margin-left: .15em; }
  .dock { gap: 0; padding: 0 4px; }
  .dock .icon-btn { width: 44px; height: 44px; }
  .dock .dock__text { min-width: 48px; padding: 0 8px; }
}
/* 横向きのスマホなど、高さが低いとき */
@media (max-height: 420px) {
  .clock { padding-bottom: 72px; }
  .clock__hm { font-size: min(21vw, 40vh); }
  .clock__part { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sky__orb, .sky__stars, .slot--colon { animation: none; }
  .slot > .in, .slot > .out { animation-duration: 1ms; }
}

/* ---- パソコンでアプリとして入れ、タイトルバーを Toolbox のものにしたとき（/toolbox/shared/titlebar.js）。空はタイトルバーの下まで広げ、上のものはその下に ---- */
@media (display-mode: window-controls-overlay) {
  .brand { top: calc(var(--tbt-h) + 12px); }
  .modes { top: calc(var(--tbt-h) + 10px); }
  .toast { top: calc(var(--tbt-h) + 16px); }
}

/* ================================================================
   テーマ（背景）。--sky-top などで色を、.sky__fx の ::before / ::after で動きを付ける
   ================================================================ */
.sky__fx { position: absolute; inset: 0; display: none; pointer-events: none; }
.sky__fx::before, .sky__fx::after { content: ""; position: absolute; }

/* オーロラ: 夜空に、緑と紫の光の帯がゆっくり揺れる */
:root[data-theme="aurora"] {
  --sky-top: #040914; --sky-mid: #07152a; --sky-low: #0a2430;
  --orb: #1f6f6a; --stars: .7;
  --shadow: 0 2px 30px rgba(0, 10, 20, .4);
}
:root[data-theme="aurora"] .sky__fx { display: block; filter: blur(32px) saturate(1.3); }
:root[data-theme="aurora"] .sky__fx::before {
  left: -20%; right: -20%; top: 8%; height: 46%;
  background: linear-gradient(100deg, transparent 8%, rgba(61, 230, 160, .85) 28%, rgba(61, 220, 151, .4) 44%, transparent 58%, rgba(80, 240, 180, .6) 74%, transparent 90%);
  border-radius: 50%; transform-origin: 50% 100%;
  animation: aurora-a 18s ease-in-out infinite alternate;
}
:root[data-theme="aurora"] .sky__fx::after {
  left: -10%; right: -30%; top: 18%; height: 40%;
  background: linear-gradient(80deg, transparent 15%, rgba(150, 100, 255, .7) 35%, transparent 55%, rgba(90, 170, 255, .55) 70%, transparent 85%);
  border-radius: 50%;
  animation: aurora-b 24s ease-in-out infinite alternate;
}
@keyframes aurora-a { from { transform: translateX(-6%) skewX(-12deg) scaleY(.85); } to { transform: translateX(8%) skewX(10deg) scaleY(1.15); } }
@keyframes aurora-b { from { transform: translateX(6%) skewX(8deg); opacity: .6; } to { transform: translateX(-8%) skewX(-10deg); opacity: 1; } }

/* 海: 深い青。下のほうで光がゆらゆら */
:root[data-theme="ocean"] {
  --sky-top: #0a5f93; --sky-mid: #053d6b; --sky-low: #021a33;
  --orb: #7fd3ff; --orb-x: 50%; --orb-y: 0%; --stars: 0;
  --shadow: 0 2px 30px rgba(0, 20, 50, .35);
}
:root[data-theme="ocean"] .sky__fx { display: block; overflow: hidden; }
:root[data-theme="ocean"] .sky__fx::before, :root[data-theme="ocean"] .sky__fx::after {
  left: -50%; width: 200%; height: 40%; bottom: -8%;
  background: radial-gradient(60% 30% at 25% 50%, rgba(127, 211, 255, .18), transparent 70%), radial-gradient(50% 25% at 70% 40%, rgba(127, 211, 255, .14), transparent 70%);
  filter: blur(18px);
  animation: wave 16s ease-in-out infinite alternate;
}
:root[data-theme="ocean"] .sky__fx::after { bottom: 10%; opacity: .7; animation-duration: 22s; animation-direction: alternate-reverse; }
@keyframes wave { from { transform: translateX(-10%) translateY(0); } to { transform: translateX(10%) translateY(-6%); } }

/* さくら: 明るいピンク。花びらがゆっくり舞う */
:root[data-theme="sakura"] {
  --sky-top: #fff4f7; --sky-mid: #ffe3ec; --sky-low: #ffccdb;
  --orb: #ffffff; --orb-x: 70%; --orb-y: 10%; --stars: 0;
  --ink: #3a1d27; --ink-soft: rgba(58, 29, 39, .6); --ink-faint: rgba(58, 29, 39, .14);
  --glass: rgba(255, 255, 255, .55); --glass-line: rgba(58, 29, 39, .1);
  --glass-on: #3a1d27; --glass-on-ink: #fff4f7;
  --shadow: none;
  --md-surface-container: #fff0f3; --md-on-surface-variant: #524347;
  --md-secondary-container: #ffd9e2; --md-on-secondary-container: #5b3f46;
  --md-outline-variant: #d6c2c6; --md-primary: #8c4a5b; --md-on-surface: #22191b;
  --md-on-primary: #ffffff; --md-outline: #847377; --md-surface-container-highest: #f6e1e6;
  --tb-back-ink: rgba(58, 29, 39, .7);
  --tbt-ink: rgba(58, 29, 39, .85);
  color-scheme: light;
}
:root[data-theme="sakura"] .sky__fx { display: block; overflow: hidden; }
:root[data-theme="sakura"] .sky__fx::before, :root[data-theme="sakura"] .sky__fx::after {
  inset: -20% -20% 0 -20%;
  background-image:
    radial-gradient(7px 4px at 10% 10%, #ffb7c9 60%, transparent 62%),
    radial-gradient(6px 3.5px at 35% 30%, #ffc4d3 60%, transparent 62%),
    radial-gradient(8px 4.5px at 62% 18%, #ffaec3 60%, transparent 62%),
    radial-gradient(6px 3.5px at 80% 45%, #ffc9d6 60%, transparent 62%),
    radial-gradient(7px 4px at 22% 62%, #ffb3c6 60%, transparent 62%),
    radial-gradient(5px 3px at 55% 75%, #ffd0db 60%, transparent 62%),
    radial-gradient(7px 4px at 90% 85%, #ffbccd 60%, transparent 62%);
  background-size: 520px 520px;
  animation: petals 38s linear infinite;
}
:root[data-theme="sakura"] .sky__fx::after { background-size: 760px 760px; opacity: .6; animation-duration: 56s; filter: blur(1.5px); }
@keyframes petals { from { background-position: 0 0; } to { background-position: 520px 1040px; } }

/* 森: 深い緑。木もれ日の光がゆっくり回る */
:root[data-theme="forest"] {
  --sky-top: #24502c; --sky-mid: #12351f; --sky-low: #081a10;
  --orb: #d9f2b4; --orb-x: 30%; --orb-y: 0%; --stars: 0;
  --shadow: 0 2px 30px rgba(0, 20, 5, .4);
}
:root[data-theme="forest"] .sky__fx { display: block; overflow: hidden; }
:root[data-theme="forest"] .sky__fx::before {
  left: -40%; top: -60%; width: 180%; height: 180%;
  background: repeating-conic-gradient(from 0deg at 30% 0%, rgba(217, 242, 180, .09) 0deg 4deg, transparent 4deg 13deg);
  filter: blur(6px);
  animation: rays 60s ease-in-out infinite alternate;
}
:root[data-theme="forest"] .sky__fx::after {
  inset: 0;
  background-image: radial-gradient(3px 3px at 20% 40%, rgba(230, 255, 190, .5) 50%, transparent 51%), radial-gradient(2px 2px at 60% 70%, rgba(230, 255, 190, .4) 50%, transparent 51%), radial-gradient(2.5px 2.5px at 80% 30%, rgba(230, 255, 190, .45) 50%, transparent 51%);
  background-size: 380px 380px;
  animation: float-up 50s linear infinite;
}
@keyframes rays { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@keyframes float-up { to { background-position: 120px -760px; } }

/* ゆらぎ: いくつもの色が、ゆっくり混ざりながら動く */
:root[data-theme="mesh"] {
  --sky-top: #1a1238; --sky-mid: #1a1238; --sky-low: #1a1238;
  --orb: #ff6fb1; --orb-x: 75%; --orb-y: 75%; --stars: 0;
  --shadow: 0 2px 30px rgba(10, 5, 30, .35);
}
:root[data-theme="mesh"] .sky__fx { display: block; overflow: hidden; filter: blur(60px) saturate(1.2); }
:root[data-theme="mesh"] .sky__fx::before {
  width: 70vmax; height: 70vmax; left: -15vmax; top: -15vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 141, 255, .85), transparent 65%);
  animation: blob-a 26s ease-in-out infinite alternate;
}
:root[data-theme="mesh"] .sky__fx::after {
  width: 60vmax; height: 60vmax; right: -10vmax; top: 10vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 179, 92, .75), transparent 65%);
  animation: blob-b 32s ease-in-out infinite alternate;
}
@keyframes blob-a { to { transform: translate(35vw, 30vh) scale(1.2); } }
@keyframes blob-b { to { transform: translate(-40vw, 20vh) scale(.85); } }

@media (prefers-reduced-motion: reduce) {
  .sky__fx::before, .sky__fx::after { animation: none !important; }
}

/* ---- 表示のパネル（背景・大きさ。下のツールバーの上に出る） ---- */
.look {
  position: fixed; z-index: 4; left: 50%; translate: -50% 0;
  bottom: calc(max(24px, env(safe-area-inset-bottom)) + 76px);
  width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 180px); overflow-y: auto;
  padding: 8px 20px 12px; border-radius: 28px;
  background: var(--md-surface-container); color: var(--md-on-surface);
  box-shadow: 0 4px 8px 3px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .3);
  font-family: "M PLUS 1", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  cursor: auto; user-select: none;
  animation: look-in .3s cubic-bezier(.2, 0, 0, 1);
}
@keyframes look-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.look[hidden] { display: none; }
.look__head { display: flex; align-items: center; justify-content: space-between; margin: 0 -12px 0 0; }
.look__title { margin: 0; font-size: 18px; font-weight: 500; }
.look .icon-btn { color: var(--md-on-surface-variant); }
.look__label { margin: 4px 0 8px; font-size: 13px; font-weight: 500; color: var(--md-primary); }
.look__themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.look__theme { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border: 0; border-radius: 16px; background: none; color: var(--md-on-surface-variant); font: inherit; font-size: 12px; cursor: pointer; }
.look__swatch { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .25); transition: box-shadow .2s ease, transform .2s cubic-bezier(.2, 0, 0, 1); }
.look__theme[aria-checked="true"] { color: var(--md-on-surface); font-weight: 500; }
.look__theme[aria-checked="true"] .look__swatch { box-shadow: 0 0 0 2px var(--md-surface-container), 0 0 0 4px var(--md-primary); transform: scale(.94); }
.look__theme:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 1px; }
.look__range { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.look__range-head { display: flex; justify-content: space-between; font-size: 14px; }
.look__range output { color: var(--md-on-surface-variant); font-variant-numeric: tabular-nums; }
.look__range input { width: 100%; accent-color: var(--md-primary); }
.look__switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; margin: 8px -12px 0; padding: 0 12px; border-radius: 16px; font-size: 14px; cursor: pointer; }
.look__switch-text { display: flex; flex-direction: column; gap: 2px; }
.look__switch small { font-size: 12px; color: var(--md-on-surface-variant); }
.look__switch + .look__switch { margin-top: 0; }
.look__foot { display: flex; justify-content: flex-end; margin: 4px -8px 0 0; }
.look .text-btn { color: var(--md-primary); }
body.tbs-open .look { display: none; }