/* GetPraise — 受信箱と収集ページ。
   **壁（w/wall.css）と同じ世界にする。** 別々の見た目にすると、
   リンクを開いた人と貼られた壁を見た人が、同じサービスだと気づかない。

   写した要素は3つ:
     ① やわらかい階調の地（無地の白にしない）
     ② 細い明朝の見出し ＋ 大きな字間
     ③ 白い角丸のカード。角は 20px、影はごく薄く
   色は「場所」ごとに1つだけ持たせ、--accent に実行時に差し込む。 */

:root{
  --accent:#0e6b63;
  --ink:#232025;
  --ink-2:#5d5661;
  --ink-3:#8f8894;
  --paper:#fff;
  --rule:#e7e3e9;
  --danger:#a4382b;
  --ok:#1c6b46;
  --r:20px;
  --shadow:0 1px 2px rgba(35,32,37,.05), 0 18px 40px -22px rgba(35,32,37,.35);
  --mincho:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --sans:"Hiragino Sans","Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
[hidden]{display:none !important}        /* grid/flex に負けるので !important が要る（d018） */
html{min-height:100%}
body{
  margin:0;min-height:100vh;min-height:100svh;
  color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.8;
  -webkit-font-smoothing:antialiased;
  /* 壁と同じ地。**別々にすると、リンクを開いた人と壁を見た人が同じサービスだと気づかない。**
     写真は Tiful の cr-1-hero を強くぼかしたもの（人物は判別できない）。
     こちらは長時間見る画面なので、**白を厚めに重ねて文字を読みやすくする。** */
  background:
    linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.93) 55%, rgba(255,255,255,.88) 100%),
    linear-gradient(200deg, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 55%),
    #ece8e6 url("img/ground-hero.webp") center/cover no-repeat fixed;
}

.wrap{max-width:44rem;margin:0 auto;padding:clamp(1.5rem,5vw,3.5rem) clamp(1rem,4vw,1.75rem) 5rem}
.wide{max-width:62rem}

/* ── 文字 ── */
h1{
  font-family:var(--mincho);font-weight:400;
  font-size:clamp(1.4rem,4.5vw,2.1rem);line-height:1.4;
  letter-spacing:.14em;margin:0 0 .6rem;text-wrap:balance;
}
h2{font-size:1rem;font-weight:600;margin:0 0 .6rem;letter-spacing:.02em}
p{margin:0 0 .9rem}
p:last-child{margin-bottom:0}
a{color:var(--accent)}
.muted{color:var(--ink-2)}
.eyebrow{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 .7rem;
}
.lede{font-size:.95rem;color:var(--ink-2);max-width:38ch}

/* ── 入力 ── */
label{display:block;font-size:.8rem;font-weight:600;margin:0 0 .35rem;color:var(--ink-2);letter-spacing:.03em}
input,textarea,select{
  width:100%;font:inherit;
  font-size:16px;                        /* iOS はこれ未満だと勝手に拡大する */
  color:var(--ink);background:#fff;
  border:1px solid var(--rule);border-radius:12px;
  padding:.75rem .9rem;
}
textarea{min-height:9.5rem;resize:vertical;line-height:1.8;border-radius:16px}
input:focus,textarea:focus,select:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:transparent;
}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.5rem}
.field{margin-bottom:1.1rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.counter{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);text-align:right;margin-top:.3rem;letter-spacing:.04em}
.counter.over{color:var(--danger);font-weight:600}

/* ── ボタン ── */
button{font:inherit;cursor:pointer;border-radius:999px;border:1px solid transparent;padding:.8rem 1.3rem;font-weight:600;letter-spacing:.04em}
button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn{background:var(--accent);color:#fff;width:100%;box-shadow:0 8px 20px -10px color-mix(in srgb,var(--accent) 80%,#000)}
.btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--rule);width:auto;padding:.5rem .95rem;font-size:.83rem;font-weight:500}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink-3);background:rgba(255,255,255,.6)}
.btn-ok{background:var(--accent);color:#fff;width:auto;padding:.45rem .95rem;font-size:.83rem}
.btn-row{display:flex;gap:.5rem;flex-wrap:wrap}

/* ── カード ── */
.card{background:var(--paper);border-radius:var(--r);padding:clamp(1.25rem,3.5vw,1.9rem);box-shadow:var(--shadow)}
.stack{display:flex;flex-direction:column;gap:1.1rem}
.stack-lg{display:flex;flex-direction:column;gap:1.9rem}

/* ── ログインの入口。**画面の真ん中に置いて、扉に見せる** ── */
.gate{min-height:80svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:1.75rem}
.gate .card{width:100%;max-width:23rem;text-align:left}
.gate h1{letter-spacing:.16em}

/* ── 星 ── */
.stars{display:flex;gap:.2rem}
.stars button{background:none;border:0;padding:.15rem;font-size:1.7rem;line-height:1;color:var(--rule);border-radius:0}
.stars button[aria-pressed="true"]{color:var(--accent)}
.stars-read{color:var(--accent);letter-spacing:.08em;font-size:.9rem}

/* ── 受信箱の声 ── */
.voice{background:var(--paper);border-radius:var(--r);padding:1.2rem 1.35rem;display:flex;flex-direction:column;gap:.7rem;box-shadow:var(--shadow)}
.voice-body{margin:0;white-space:pre-wrap;line-height:1.85;font-size:.94rem}
.voice-who{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;font-size:.78rem;color:var(--ink-3)}
.voice-who b{color:var(--ink);font-size:.88rem;font-weight:600}
.voice-head{display:flex;justify-content:space-between;align-items:center;gap:.75rem}
.tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:.2rem .55rem;border-radius:999px;border:1px solid var(--rule);color:var(--ink-3);white-space:nowrap}
.tag.new{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,#fff)}
.tag.approved{border-color:var(--ok);color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,#fff)}

/* ── お知らせ ── */
.msg{border-radius:12px;padding:.8rem 1rem;font-size:.87rem;line-height:1.7;border:1px solid var(--rule);background:#fff}
.msg.err{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,#fff);background:color-mix(in srgb,var(--danger) 5%,#fff)}
.msg.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,#fff);background:color-mix(in srgb,var(--ok) 5%,#fff)}

pre{background:#fbfafc;border:1px solid var(--rule);border-radius:12px;padding:.9rem 1rem;overflow-x:auto;font-family:var(--mono);font-size:.75rem;line-height:1.7;margin:0;color:var(--ink-2)}
.note{font-size:.8rem;color:var(--ink-3);line-height:1.8}
hr{border:0;border-top:1px solid var(--rule);margin:1.4rem 0}
.center{text-align:center}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}