/* ============================================================
   リセットと文字組み、要素セレクタ。クラスを持たない土台。

   2026-08-16: style.css（867行）を画面ごとに分けたもの。読み込む順は
   index.html / operator.html の <link> の並びが正で、その順に連結すると
   元の style.css と同じ適用順になる。順番を入れ替えないこと。
   ============================================================ */
/* ============================================================
   Type. Meiryo throughout - the face these users already read
   all day. Hierarchy comes from weight and size, not a second family.
   ============================================================ */
/* 崩れ防止の3行（2026-08-16）。**この3つを消すと必ず崩れる。**

   1. min-width:0 … flex / grid の子は min-width の初期値が
      「内容に基づく最小幅」で、**親がどれだけ狭くても縮まずはみ出す。**
      ブロック要素の 0 と違うので直感に反する。grid の 1fr も
      minmax(auto,1fr) と同義なので同じ罠にはまる。
      「特定の幅で急にレイアウトが崩れる」の最頻出原因。
   2. scrollbar-gutter:stable … 100vw はスクロールバーを無視する
      （仕様上「バーは無い」側に落ちる。100dvw も同じ）。
      バーの分の席を先に確保して、出た瞬間の横ずれを消す。
   3. max-width:100% … 画像と表がはみ出して横スクロールを生むのを止める。
      **表は下の table{min-width:620px} が優先される**（CSS は min-width が
      max-width に勝つ）ので、.tablewrap の横スクロールは今までどおり効く。 */
*, *::before, *::after{ box-sizing:border-box; min-width:0; }
html{ scrollbar-gutter:stable; }
img, svg, video, canvas, table{ max-width:100%; }

[hidden]{ display:none !important; }
/* the header is sticky and grows with the text size, so a focused control has
   to keep that much room above it or it lands underneath */
*{ scroll-margin-top:230px; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Meiryo","メイリオ","Hiragino Kaku Gothic ProN","Hiragino Sans",
              "Yu Gothic Medium","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  font-size:var(--base); line-height:1.75;
  font-feature-settings:"palt" 1;
}
/* One family throughout; hierarchy comes from weight and tracking, not from a
   second face. Meiryo is what these users already read all day. これは
   データ画面全体の原則としてそのまま維持する。ブランドの署名（ヘッダーの
   「トリまとめ」の文字そのもの）だけは例外で、LP・ログイン画面と同じ
   Zen Maru Gothic を使う。情報の階層を作る場所ではなく識別のための文字
   なので、上記の原則とは矛盾しない（2026-08-14）。 */
@font-face{
  font-family:'Zen Maru Gothic';
  src:url('https://fonts.gstatic.com/s/zenmarugothic/v19/o-0XIpIxzW5b-RxT-6A8jWAtCp-cUW1CPA.ttf') format('truetype');
  font-weight:700;
  font-display:swap;
}
h1,h2,h3{ margin:0; text-wrap:balance; line-height:1.4; }
p{ margin:0; }
button{ font:inherit; color:inherit; }
a{ color:var(--accent-ink); }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }
@keyframes b{ 0%,100%{height:16%} 50%{height:96%} }
textarea,select,
input[type="text"],input[type="email"],input[type="password"],
input[type="search"],input[type="tel"],input[type="number"]{
  width:100%; font:inherit; color:var(--ink); background:var(--card-2);
  border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px;
  line-height:1.8;
}
textarea{ min-height:230px; resize:vertical; }
table{ border-collapse:collapse; width:100%; min-width:620px; }
th,td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--line-2); vertical-align:middle; }
th{ background:var(--card-2); font-size:.88em; color:var(--ink-2); font-weight:700; white-space:nowrap; }
tbody tr:last-child td{ border-bottom:0; }

/* Role gating. The mock carries a role switcher so reviewers can see
   what each of the three roles is actually allowed to do. ------- */
:root[data-role="editor"] [data-admin-only]{ display:none !important; }
:root[data-role="viewer"] [data-admin-only],
:root[data-role="viewer"] [data-editor-only]{ display:none !important; }
@keyframes pulse{ 0%,100%{opacity:.35} 50%{opacity:1} }

/* 顧客側の認証カードは、**どの種類の画面かが決まるまで出さない。**

   なぜ要るか（2026-08-16「signup画面で一瞬ログイン画面が表示される」の修正）。
   index.html の <section id="login"> は静的マークアップの時点で class="on"＝表示で、
   中身も見出し「ログイン」・ボタン「ログイン」で固定されている。app.js は
   body の末尾・102KB なので、`?signup=1` で開いても**ブラウザはまずログイン画面を
   描いてしまう**。さらに boot() は /api/me（401）→ /api/bootstrap と2往復待って
   から showAuth() を呼んでいたため、その間ずっとログイン画面が出ていた。

   head にインラインの <script> を置いて先回りする手は**使えない**。
   deploy/Caddyfile の CSP が `script-src 'self'`（'unsafe-inline' 無し・監査 M-2）
   なので、本番ではそのスクリプトだけが黙ってブロックされ、**ローカルでは直った
   ように見えるのに本番では直っていない**という一番たちの悪い形になる。

   なので「確定するまで出さない」に倒す。出してよいと決めるのは showAuth() の
   1か所だけで、そこが html に auth-ready を付ける。判定を増やしていない。

   **効かせるのは #au-card だけ。**`.authcard` は operator.html も使っているが、
   運営コンソールのログイン画面は種類が1つしかなく、すぐ描いて正しい。
   共通クラスに掛けると運営側のログイン画面が出なくなる。

   display:none ではなく visibility にするのは、席を空けたまま隠すため。
   display だと確定した瞬間にカードが生えて、上のブランドの位置が飛ぶ。 */
#au-card{ visibility:hidden; }