/* ==========================================================================
   朝ポータル 見た目サンプル
   世界観: 2016-2018年のあの時代のビジュアル言語（純黒 / 温かい白 / 金は最小限）
   レイアウト: 管制室（情報密度優先・角丸と影を使わない・区切りはヘアライン1本）
   ※ 明るいテーマは意図的に用意していません。黒に振り切ることが世界観そのもののため。
   ========================================================================== */

:root{
  color-scheme: dark;

  --ink:        #000000;  /* 地。グレー寄りの黒ではなく純黒 */
  --panel:      #0A0A0B;  /* わずかな浮き */
  --line:       #211F1B;  /* ヘアライン */
  --line-hi:    #3A342A;  /* 強めのヘアライン */
  --fg:         #F2F0EA;  /* 本文。純白にしない */
  --dim:        #8A857A;  /* 補助文字 */
  --dimmer:     #57524A;  /* 済んだもの */
  --gold:       #C9A227;  /* 「いま」と「要対応」だけ */
  --gold-hi:    #E9D08A;
  --alert:      #C4483B;  /* 金と喧嘩しないくすんだ赤 */

  --face: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI",
          "Helvetica Neue", Arial, "Yu Gothic UI", "Yu Gothic", "Hiragino Sans",
          "Noto Sans JP", "Meiryo", sans-serif;

  --gut: 1.5rem;

  /* 背景画像は端末のブラウザ内にだけ持つ。ここには既定値を置かない */
  --shot-default: none;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--face);
  font-weight:400;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

.page{
  position:relative; z-index:1;   /* 固定背景より手前 */
  max-width:1180px;
  margin:0 auto;
  padding:0 var(--gut) 6rem;
}

/* ---- 固定の背景ステージ ------------------------------------------------- */
/* position:fixed なので、情報だけが上を流れていき、写真は動かない            */

.stage{
  position:fixed; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}
.stage .glow{                /* 逆光を画面いっぱいに広げる */
  position:absolute; left:53.5%; top:47%;
  width:1420px; height:1160px; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,
      rgba(255,216,146,.15) 0%,
      rgba(219,172,74,.08)  32%,
      rgba(150,110,40,.035) 56%,
      rgba(0,0,0,0)         78%);
}
.stage .shot{
  /* 要素そのものを写真と同じ縦横比にして、マスクを寸分たがわず重ねる */
  position:absolute;
  /* 頭が切れない範囲でめいっぱい大きく。足元だけ画面下に少しはみ出す */
  top:-6%; height:118%;
  aspect-ratio:768 / 1365;
  /* 体の中心が、左右を分ける罫線（画面のほぼ 50%）に重なる位置 */
  left:53.5%; transform:translateX(-50%);
  background-image:var(--shot-default);
  background-repeat:no-repeat;
  background-size:100% 100%;
  opacity:.52;
  filter:grayscale(1) brightness(.63) contrast(2.3) sepia(.55) hue-rotate(-14deg) saturate(1.9);
  -webkit-mask-image:radial-gradient(ellipse 50% 95% at 50% 62%,
      #000 0%, #000 58%, rgba(0,0,0,.32) 87%, rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(ellipse 50% 95% at 50% 62%,
      #000 0%, #000 58%, rgba(0,0,0,.32) 87%, rgba(0,0,0,0) 100%);
}
.stage .veil{                /* 文字が読める明るさまで全体を沈める */
  position:absolute; inset:0;
  background:
    /* いちばん明るい逆光の芯だけを狙って落とす（ここに右列の文字が乗るため） */
    radial-gradient(34% 32% at 57% 46%,
      rgba(0,0,0,.50) 0%, rgba(0,0,0,.24) 55%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,.60) 0%, rgba(0,0,0,.38) 20%,
      rgba(0,0,0,.38) 72%, rgba(0,0,0,.76) 100%);
}

/* ---- 共通の部品 ------------------------------------------------------- */

.lbl{                       /* 欧文ラベル。版面はここで決まる */
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--dim);
  white-space:nowrap;
}
.lbl-jp{
  font-size:.8rem;
  letter-spacing:.09em;
  color:var(--fg);
  white-space:nowrap;
}

.sec{ padding:1.9rem 0 0; }

.sec-head{
  display:flex;
  align-items:baseline;
  gap:.85rem;
  margin-bottom:1.05rem;
}
.sec-head .rule{
  flex:1 1 auto;
  height:1px;
  background:var(--line);
  transform:translateY(-.28em);
}
.sec-head .count{
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--dim);
  white-space:nowrap;
}

/* ---- 見出し帯 ---------------------------------------------------------- */

.masthead{
  position:relative;
  z-index:30;                /* カレンダーが下の本文より必ず手前に出るように */
  padding:2.3rem 0 1.5rem;
  border-bottom:1px solid var(--line-hi);
  display:flex;
  flex-direction:column;
  gap:1.7rem;
}

.wordmark{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.wordmark .mark{
  font-size:.66rem; font-weight:600;
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--fg);
}
.wordmark .sub{
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--dimmer);
}

.dateline{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
}
.datewrap{ position:relative; }

.datebtn{
  display:block; background:transparent; border:0; padding:0; margin:0;
  color:inherit; font:inherit; text-align:left; cursor:pointer;
}
.datebtn:focus-visible{ outline:1px solid var(--gold); outline-offset:7px; }
.bigdate{
  font-size:clamp(2.7rem, 9vw, 4.4rem);
  font-weight:200;
  letter-spacing:-.015em;
  line-height:.94;
  transition:color .2s;
}
.datebtn:hover .bigdate{ color:var(--gold-hi); }
.bigdate .dow{
  font-size:.32em; font-weight:600; letter-spacing:.34em;
  color:var(--dim); margin-left:.7em; vertical-align:.42em;
}
.bigdate .caret{
  font-size:.2em; color:var(--dimmer); margin-left:.55em; vertical-align:.9em;
  transition:color .2s;
}
.datebtn:hover .caret{ color:var(--gold); }

.jpdate{
  font-size:.78rem; letter-spacing:.16em; color:var(--dim);
  margin-top:.5rem;
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
}
.backtoday{
  background:transparent; border:0; padding:0; cursor:pointer;
  color:var(--gold-hi); font:inherit; font-size:.72rem; letter-spacing:.12em;
  border-bottom:1px solid var(--line-hi);
}
.backtoday:hover{ border-bottom-color:var(--gold); }
.backtoday[hidden]{ display:none; }

.rightside{
  display:flex; align-items:flex-end; gap:1.6rem; flex-wrap:wrap;
}
.clock{
  font-size:clamp(1.7rem, 5.5vw, 2.4rem);
  font-weight:200; letter-spacing:.02em; line-height:1;
}
.clock small{ font-size:.42em; color:var(--dim); margin-left:.35em; letter-spacing:.2em; }

.flag{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.42rem .8rem;
  border:1px solid var(--gold);
  color:var(--gold-hi);
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  white-space:nowrap;
  background:rgba(0,0,0,.55);
}
.flag b{ font-weight:600; font-size:.95rem; letter-spacing:.06em; }

.stagefoot{ display:none; }        /* スマホでだけ出す（下の @media 640px） */

/* ---- 小さなカレンダー --------------------------------------------------- */

.cal{
  position:absolute; z-index:60;
  top:calc(100% + 1rem); left:0;
  width:19.5rem; max-width:calc(100vw - 3rem);
  background:#000;
  border:1px solid var(--line-hi);
  padding:.85rem 1rem 1rem;
}
.cal[hidden]{ display:none; }
.cal-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.6rem;
}
.cal-head .ym{ font-size:.8rem; letter-spacing:.12em; }
.cal-head button{
  background:transparent; border:1px solid var(--line); color:var(--dim);
  font:inherit; font-size:.8rem; line-height:1; cursor:pointer;
  width:1.9rem; height:1.7rem;
}
.cal-head button:hover{ color:var(--gold-hi); border-color:var(--gold); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); }
.cal-dow{
  font-size:.56rem; letter-spacing:.1em; color:var(--dimmer);
  text-align:center; padding:.3rem 0 .45rem;
}
.cal-d{
  position:relative; background:transparent; border:0; color:var(--fg);
  font:inherit; font-size:.76rem; padding:.46rem 0 .58rem;
  cursor:pointer; text-align:center;
}
.cal-d.pad{ color:#2B2823; cursor:default; }
.cal-d:not(.pad):hover{ background:#131211; }
.cal-d.today:not(.sel){ color:var(--gold-hi); }
.cal-d.sel{ background:var(--gold); color:#000; }
.cal-d .dot{
  position:absolute; left:50%; bottom:.22rem;
  width:3px; height:3px; margin-left:-1.5px; background:var(--dim);
}
.cal-d.sel .dot{ background:#000; }
.cal-foot{
  margin-top:.6rem; padding-top:.55rem; border-top:1px solid var(--line);
  font-size:.64rem; letter-spacing:.08em; color:var(--dimmer);
}

/* ---- 2カラム ----------------------------------------------------------- */

.grid{
  display:grid;
  grid-template-columns:1.12fr 1fr;
  gap:0 3.4rem;
  align-items:start;
}
.col-right{ border-left:1px solid var(--line); padding-left:3.4rem; margin-left:-3.4rem; }

@media (max-width: 900px){
  .grid{ grid-template-columns:1fr; gap:0; }
  .col-right{ border-left:0; padding-left:0; margin-left:0; }
  /* 1列になるので、中心線に合わせる必要はなく画面の真ん中でよい */
  .stage .shot{ left:47.5%; top:auto; bottom:0; height:92%; opacity:.46; }
  .stage .glow{ left:47.5%; width:880px; height:760px; }
}

/* ==========================================================================
   スマホ専用の組み方
   1画面目をまるごとステージにして、下にスクロールすると管制室が出てくる
   ========================================================================== */
@media (max-width: 640px){

  .masthead{ padding:1.6rem 0 1.3rem; gap:1.2rem; }
  .wordmark .mark{ font-size:.6rem; letter-spacing:.38em; }
  .wordmark .sub{ display:none; }

  /* 縦長の写真がスマホ画面にちょうど収まる。全面に立たせる */
  .stage .shot{ left:47.5%; top:-4%; bottom:auto; height:108%; opacity:.5; }
  .stage .glow{ left:47.5%; top:44%; width:150vw; height:70vh; }
  .stage .veil{
    background:linear-gradient(180deg,
      rgba(0,0,0,.66) 0%, rgba(0,0,0,.34) 16%,
      rgba(0,0,0,.34) 62%, rgba(0,0,0,.82) 100%);
  }

  .dateline{ flex-direction:column; align-items:stretch; gap:.75rem; }
  .bigdate{ font-size:4.2rem; }
  .jpdate{ margin-top:.35rem; }
  .rightside{ width:100%; justify-content:space-between; align-items:center; gap:1rem; }
  .clock{ font-size:2.1rem; }

  .stagefoot{ display:block; }
  .stage-next{
    font-size:.82rem; letter-spacing:.06em; color:var(--gold-hi);
    border-top:1px solid rgba(201,162,39,.45);
    padding-top:.7rem;
  }
  .scrollcue{ display:none; }   /* 見出しが短くなり、すぐ下に本文が見えるので不要 */

  .cal{ width:calc(100vw - 2 * var(--gut)); }

  .grid{ padding-top:.5rem; }
  .rail{ height:360px; }
  .sec{ padding:1.6rem 0 0; }
  .col-right .sec:first-child{ padding-top:1.9rem; }
}


/* ---- 今日の流れ（時間の背骨） ------------------------------------------- */

.rail{
  position:relative;
  height:430px;
  margin:.2rem 0 .4rem;
  padding-left:3.3rem;
}
.ticks{ position:absolute; inset:0; }
.tick{
  position:absolute; left:0; right:0;
  border-top:1px solid var(--line);
}
.tick span{
  position:absolute; left:0; top:-.62em;
  font-size:.62rem; letter-spacing:.12em; color:var(--dimmer);
}
.tick.minor{ border-top-color:#141310; }

.evt{
  position:absolute; left:3.3rem; right:0;
  background:rgba(10,10,11,.62);   /* 奥の写真がうっすら透ける */
  backdrop-filter:blur(2px);
  border-left:2px solid var(--fg);
  padding:.5rem .8rem;
  overflow:hidden;
}
.evt .t{ font-size:.66rem; letter-spacing:.14em; color:var(--dim); }
.evt .n{ font-size:.93rem; letter-spacing:.05em; margin-top:.1rem; }
.evt.mine{ border-left-color:var(--gold); }

.empty{
  position:absolute; left:3.3rem; right:0; top:44%;
  font-size:.8rem; letter-spacing:.1em; color:var(--dimmer);
}

.now{
  position:absolute; left:0; right:0;
  height:0; border-top:1px solid var(--gold);
  z-index:5; pointer-events:none;
}
.now[hidden]{ display:none; }
.now::after{
  content:""; position:absolute; right:0; top:-2px;
  width:5px; height:5px; background:var(--gold);
}
.now .t{
  position:absolute; left:0; top:-.72em;
  font-size:.62rem; letter-spacing:.12em;
  color:var(--gold-hi); background:var(--ink); padding-right:.4rem;
}

.railnote{ font-size:.72rem; color:var(--dimmer); letter-spacing:.06em; }

/* ---- 1行入力（予定・タスク共通） ---------------------------------------- */

.oneline{ display:flex; align-items:stretch; gap:0; margin-top:1rem; }
.oneline input{
  flex:1 1 auto; min-width:0;
  background:transparent; border:0; border-bottom:1px solid var(--line-hi);
  color:var(--fg); font-family:inherit; font-size:.86rem; letter-spacing:.05em;
  padding:.5rem .1rem;
}
.oneline input::placeholder{ color:var(--dimmer); }
.oneline input:focus{ outline:none; border-bottom-color:var(--gold); }
.oneline button{
  flex:0 0 auto;
  background:transparent; border:1px solid var(--line-hi); border-left:0;
  color:var(--dim); font-family:inherit; font-size:1rem;
  width:2.6rem; cursor:pointer;
  transition:color .2s, border-color .2s;
}
.oneline button:hover, .oneline button:focus-visible{ color:var(--gold-hi); border-color:var(--gold); outline:none; }
.hint{ font-size:.66rem; color:var(--dimmer); letter-spacing:.06em; margin:.45rem 0 0; }

/* ---- やること ---------------------------------------------------------- */

.tasks{ list-style:none; margin:0; padding:0; }
.tasks li{
  display:flex; align-items:flex-start; gap:.8rem;
  padding:.72rem 0;
  border-bottom:1px solid var(--line);
}
.tasks li:first-child{ border-top:1px solid var(--line); }
.box{
  flex:0 0 auto; width:13px; height:13px; margin-top:.4rem;
  border:1px solid var(--dim); background:transparent;
  cursor:pointer; padding:0;
  transition:border-color .2s, background .2s;
}
.box:hover{ border-color:var(--gold); }
.box[aria-checked="true"]{ background:var(--gold); border-color:var(--gold); }
.tasks .txt{ flex:1 1 auto; font-size:.9rem; letter-spacing:.04em; }
.tasks .src{ font-size:.66rem; letter-spacing:.1em; color:var(--dimmer); white-space:nowrap; margin-top:.25rem; }
.tasks li.done .txt{ color:var(--dimmer); text-decoration:line-through; text-decoration-color:var(--dimmer); }

/* ---- 状況ボード -------------------------------------------------------- */

.alert{
  border-top:1px solid var(--alert);
  border-bottom:1px solid var(--line);
  padding:.85rem 0 .9rem;
}
.alert .h{ font-size:.88rem; letter-spacing:.05em; color:var(--fg); }
.alert .d{ font-size:.74rem; color:var(--dim); margin-top:.15rem; }

.rows{ list-style:none; margin:0; padding:0; }
.rows li{
  display:flex; align-items:baseline; gap:.9rem;
  padding:.6rem 0;
  border-bottom:1px solid var(--line);
  font-size:.85rem; letter-spacing:.04em;
}
.rows li:first-child{ border-top:1px solid var(--line); }
.rows .k{ flex:1 1 auto; min-width:0; }
.rows .k b{ font-weight:400; }
.rows .k i{ display:block; font-style:normal; font-size:.68rem; color:var(--dimmer); letter-spacing:.08em; margin-top:.1rem; }
.rows .v{ flex:0 0 auto; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); white-space:nowrap; }
.rows .v.good{ color:var(--dimmer); }
.rows .v.warn{ color:var(--gold-hi); }
.rows .v.bad{ color:var(--alert); }
.rows .v.off{ color:#3E3A34; }

.links{ list-style:none; margin:0; padding:0; }
.links li{ border-bottom:1px solid var(--line); }
.links li:first-child{ border-top:1px solid var(--line); }
.links a{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.62rem 0; color:var(--fg); text-decoration:none;
  font-size:.85rem; letter-spacing:.04em;
  transition:color .2s;
}
.links a:hover, .links a:focus-visible{ color:var(--gold-hi); outline:none; }
.links .host{
  font-size:.62rem; letter-spacing:.1em; color:var(--dimmer);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:45%;
}

/* ---- 注記 -------------------------------------------------------------- */

.note{
  margin-top:3.5rem; padding-top:1.4rem;
  border-top:1px solid var(--line);
  font-size:.74rem; color:var(--dimmer); letter-spacing:.05em; line-height:1.9;
}
.note b{ color:var(--dim); font-weight:400; }
.ctl{ display:flex; gap:.6rem; flex-wrap:wrap; margin:1rem 0 .3rem; }
.ctl button{
  background:transparent; border:1px solid var(--line-hi); color:var(--dim);
  font-family:inherit; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.45rem .9rem; cursor:pointer; transition:color .2s, border-color .2s;
}
.ctl button:hover, .ctl button:focus-visible{ color:var(--gold-hi); border-color:var(--gold); outline:none; }

@media (prefers-reduced-motion: no-preference){
  .fade{ animation:rise .7s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes rise{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }

  /* 照明がゆっくり息をする。気づかない速さで、でも生きて見える */
  .glow{ animation:breathe 9s ease-in-out infinite; }
  @keyframes breathe{
    0%,100%{ opacity:.86; transform:translate(-50%,-50%) scale(.96); }
    50%    { opacity:1;   transform:translate(-50%,-50%) scale(1.05); }
  }
}

/* ==========================================================================
   本番だけで使う部品（見た目サンプルには無かったもの）
   ========================================================================== */

/* ---- 初回の接続設定 ------------------------------------------------------ */

.setup{
  position:relative; z-index:10;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:2rem var(--gut);
}
.setup[hidden]{ display:none; }
.setup-box{ width:100%; max-width:34rem; }
.setup-box .lbl{ margin-bottom:.9rem; display:block; }
.setup-box h1{
  font-size:1.5rem; font-weight:200; letter-spacing:.06em;
  margin:0 0 1rem;
}
.setup-box p{ font-size:.85rem; color:var(--dim); line-height:1.9; margin:0 0 1.3rem; }
.setup-box strong{ color:var(--fg); font-weight:400; }
.setup-box textarea{
  width:100%; background:rgba(0,0,0,.55);
  border:1px solid var(--line-hi); color:var(--fg);
  font-family:var(--face); font-size:.82rem; letter-spacing:.03em; line-height:1.8;
  padding:.8rem .9rem; resize:vertical;
}
.setup-box textarea:focus{ outline:none; border-color:var(--gold); }
.setup-act{ display:flex; align-items:center; gap:1rem; margin-top:1rem; flex-wrap:wrap; }
.setup-act button{
  background:transparent; border:1px solid var(--gold); color:var(--gold-hi);
  font-family:inherit; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.6rem 1.6rem; cursor:pointer;
}
.setup-act button:hover{ background:rgba(201,162,39,.12); }
.setup-msg{ font-size:.76rem; color:var(--dim); }
.setup-note{ font-size:.7rem; color:var(--dimmer); margin-top:1.6rem; }
.setup-note code{ font-family:ui-monospace, "Consolas", monospace; font-size:.95em; }

/* ---- 終日の予定 ---------------------------------------------------------- */

.allday{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 .5rem; }
.allday:empty{ margin:0; }
.allday .chip{
  font-size:.72rem; letter-spacing:.06em; color:var(--fg);
  border:1px solid var(--line-hi); background:rgba(10,10,11,.62);
  padding:.22rem .7rem;
}

/* ---- 状態のちがい -------------------------------------------------------- */

.alert + .alert{ border-top:0; }
.alert.ok{ border-top-color:var(--line-hi); }
.alert.ok .h{ color:var(--dim); font-size:.8rem; letter-spacing:.1em; }

.tasks .txt.dim{ color:var(--dimmer); }
.box:disabled{ cursor:default; }

.note-fine{ margin:.9rem 0 0; font-size:.7rem; color:var(--dimmer); }