/* ============================================================
   ログイン・登録・再設定の画面。顧客と運営で同じ見た目を使う。

   2026-08-16: style.css（867行）を画面ごとに分けたもの。読み込む順は
   index.html / operator.html の <link> の並びが正で、その順に連結すると
   元の style.css と同じ適用順になる。順番を入れ替えないこと。
   ============================================================ */
/* ============================================================
   Auth — the one screen shown before anything else exists.
   ============================================================ */
/* display は .on と組にして書く。素の .authwrap に display を持たせると
   .screen{display:none} と同じ詳細度で後勝ちし、ログイン後も残ってしまう。 */
/* 最上部の細い帯。カードの外にブランドを置くことで「製品」だと分かる
   ようにする（SmartHR のログイン画面を参考— カラーバー＋カード外ロゴ）。 */

/* ログイン画面だけの配色。全社共通トークンの「暖色クリーム地＋オレンジ」は
   AI生成デザインの定番配色そのもの（暖色クリーム＋テラコッタ系アクセント）
   に一致してしまっていた（2026-08-13 指摘）。トリマくん本体の紺色から
   実際に採った値（#204888 系）を軸に、そこだけ差し替える。全画面共通の
   --accent（オレンジ）はここでは変えない — ブランド全体を変えるかどうかは
   別途判断してもらう。ダークモードは不要という指示（2026-08-13）により、
   OS・アプリの設定に関わらずこの画面は常にライトの配色で固定する。 */
.authwrap{
  --paper:#F2F4F7; --card:#FFFFFF; --card-2:#F7F9FB;
  --ink:#1B2430; --ink-2:#48566A; --ink-3:#5E6C80;
  --line:#D8DEE6; --line-2:#E4E9EF;
  --accent:#1E4C8C; --accent-soft:#DCE7F6; --accent-ink:#123566;
  --on-accent:#FFFFFF; --focus:#1E4C8C; --control-line:#8494A8;
  min-height:100vh; padding:40px 20px 0; position:relative;
  background:var(--paper); color:var(--ink);
  color-scheme:light;
  /* body{color:var(--ink)} は body 自身の scope で解決した値がそのまま
     子孫に継承されるため、.authwrap で --ink を上書きしただけでは
     見出しやラベルの文字色（color を明示していない要素）には反映されない。
     ここで改めて color:var(--ink) を効かせて継承をやり直す
     （2026-08-13 指摘で発覚：ダーク強制時に見出し・ラベルが読めなかった）。 */
}
.authwrap::before{
  content:""; position:fixed; top:0; left:0; right:0; height:4px;
  background:var(--accent);
}
.authwrap.on{ display:grid; place-items:center; align-content:start; padding-top:72px; }
.auth-ready #au-card{ visibility:visible; }

/* JavaScript が無い／読み込めないときは、隠したままだと何も無い画面になる。
   「できたふりをしない」ので、代わりに理由を出す。 */
.nojs-note{
  max-width:34em; margin:0 auto; padding:16px 18px; text-align:center;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); color:var(--ink);
}

/* ロゴ・製品名はカードの外、脇役サイズで。中央に大きなキャラクターを
   置く構図は AI チャットの入力前アバターと同じに見えるため避ける
   （2026-08-13 指摘：ログイン画面がAIっぽい）。freee はマスコットを
   本文の脇に添える程度にとどめており、それに合わせる。 */
.au-brand{
  display:flex; align-items:center; gap:8px; margin-bottom:18px;
}
.au-brand img{ width:40px; height:40px; object-fit:contain; }
.au-brand span{ font-weight:700; font-size:1.2em; color:var(--ink-2); }

.authcard{
  width:100%; max-width:440px; padding:34px 34px 28px;
  border-radius:16px;   /* 全体（--radius:8px）より少しだけ大きく、最初の1画面にだけ
                          柔らかさを足す。他画面はデータ入力の精度を優先して 8px のまま */
  box-shadow:none;   /* 暗い虚空に浮くカードではなく、背景に馴染ませる */
}
.authcard .head h1{ font-size:2.05em; }
.authcard .field + .field{ margin-top:16px; }
.authcard .footnote{ margin-top:22px; }
.authcard .btn{ border-radius:12px; }
.authcard input[type="text"],.authcard input[type="email"],.authcard input[type="password"]{
  border-radius:10px;
}

/* Who am I / sign out. Sits at the end of the topbar so the
   brand keeps the left edge. */
.usermenu{ display:flex; align-items:center; gap:10px; }
.usermenu .un{ font-weight:700; font-size:.92em; }
.usermenu .ur{ font-size:.78em; }