/* AQUA Connect 共通スタイル。
   色と余白は AQUA Compass のトークンを引き継ぐ（同じ会社の道具なので見た目を揃える）。
   足したのは勤怠特有のもの——状態の3色（報告ずみ・未入力・これから）と、月カレンダー。 */
:root{
  --color-primary:#0050D0;      /* コバルトブルー（ロゴ実測） */
  --color-accent:#F0C030;
  --color-ink:#002050;
  --color-text:#0F172A;
  --color-sub:#475569;          /* WCAG AA を満たす濃さ。これより薄くしない */
  --color-bg:#F8FAFC;
  --color-card:#FFFFFF;
  --color-border:#E2E8F0;
  --color-error:#DC2626;
  --color-warning:#B45309;
  --color-success:#059669;
  --color-primary-soft:#EBF2FE;
  --color-success-soft:#E8F6F1;
  --color-warning-soft:#FDF3E3;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --radius:12px; --radius-lg:20px;
  --shadow:0 1px 4px rgba(0,32,80,.10);
  --shadow-lg:0 6px 20px rgba(0,32,80,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
  background:var(--color-bg);color:var(--color-text);
  font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
main{max-width:480px;margin:0 auto;padding:var(--s3) var(--s2) var(--s5)}
h1{font-size:21px;font-weight:700;color:var(--color-ink);margin-bottom:var(--s2)}
h2{font-size:16px;font-weight:700;color:var(--color-ink);margin:var(--s3) 0 var(--s1)}
p{color:var(--color-sub);margin-bottom:var(--s2)}
[hidden]{display:none !important}

.app-header{
  display:flex;align-items:center;gap:var(--s1);
  padding:var(--s2);max-width:480px;margin:0 auto;
  font-size:16px;font-weight:700;color:var(--color-ink);
}
.app-header .spacer{flex:1}
.app-header button{font-size:14px;color:var(--color-sub);background:none;border:none;padding:var(--s1);cursor:pointer}

.card{
  background:var(--color-card);border:1px solid var(--color-border);
  border-radius:var(--radius);padding:var(--s2);box-shadow:var(--shadow);
  margin-bottom:var(--s2);
}
.card h3{font-size:14px;font-weight:700;color:var(--color-ink);margin-bottom:var(--s1)}

.field{margin-bottom:var(--s2)}
.field label{display:block;font-size:14px;color:var(--color-sub);margin-bottom:4px}
.field input,.field select,.field textarea{
  width:100%;padding:var(--s2);font-size:16px;
  border:1px solid var(--color-border);border-radius:var(--radius);
  background:var(--color-card);color:var(--color-text);
  font-family:inherit;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--color-primary);border-color:var(--color-primary);
}
.field-row{display:flex;gap:var(--s1)}
.field-row>.field{flex:1}

.btn{
  display:block;width:100%;text-align:center;
  background:var(--color-primary);color:#fff;border:none;
  border-radius:var(--radius);padding:var(--s2);
  font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;
  font-family:inherit;
}
.btn:disabled{opacity:.5;cursor:default}
.btn-line{background:var(--color-card);color:var(--color-primary);border:1px solid var(--color-primary)}
.btn-quiet{background:var(--color-card);color:var(--color-sub);border:1px solid var(--color-border)}

/* 当日の報告。1日1回・現場で片手で押すので、指1本ぶんより大きく取る */
.btn-answer{padding:var(--s3) var(--s2);font-size:21px;margin-bottom:var(--s1)}

/* 遅刻・早退・欠勤・その他。選ぶまでは全部同じ見た目にする（既定を作らない） */
.chips{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s3)}
.chip{
  padding:var(--s1) var(--s2);font-size:16px;
  border:1px solid var(--color-border);border-radius:var(--radius);
  background:var(--color-card);color:var(--color-sub);cursor:pointer;font-family:inherit;
}
.chip[aria-pressed="true"]{
  border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary);font-weight:700;
}

/* 月カレンダー。状態は色だけでなく印でも分かるようにする（色覚の差と、屋外の日差し） */
.month-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s2)}
.month-head button{background:none;border:none;font-size:21px;color:var(--color-sub);padding:0 var(--s2);cursor:pointer}
.month-title{font-size:16px;font-weight:700;color:var(--color-ink)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal .wd{font-size:12px;color:var(--color-sub);text-align:center;padding:4px 0}
.cal .day{
  aspect-ratio:1;border-radius:8px;border:1px solid transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:14px;color:var(--color-sub);background:none;cursor:pointer;font-family:inherit;
}
.cal .day .mark{width:5px;height:5px;border-radius:50%;background:currentColor;margin-top:2px}
.cal .day.is-empty{cursor:default}
.cal .day.is-done{background:var(--color-success-soft);color:var(--color-success);border-color:var(--color-success)}
.cal .day.is-wait{background:var(--color-warning-soft);color:var(--color-warning);border-color:var(--color-warning)}
.cal .day.is-plan{background:var(--color-card);color:var(--color-sub);border-color:var(--color-border)}
.cal .day.is-off{color:var(--color-border)}
/* 空いている日のうち、押せばシフトを入れられる日（今日以降・受付中の月）。
   点線の枠と小さな＋で「押せる」と分かるようにする（色だけで分けない） */
.cal .day.is-off.is-open{color:var(--color-sub);border:1px dashed var(--color-border)}
.cal .day .plus{font-size:11px;line-height:1;color:var(--color-primary)}
/* 出られない日（希望休・決定109）。色だけで分けず「休」の字も出す */
.cal .day.is-dayoff{background:var(--color-bg);border-color:var(--color-sub);
  color:var(--color-sub);font-weight:700}
.cal .day.is-pickoff{border:1px dashed var(--color-sub);color:var(--color-sub)}
.cal .day .off-mark{font-size:11px;line-height:1}
.legend .sw-dayoff{background:var(--color-bg);border-color:var(--color-sub)}
/* まとめて入れる日を選ぶカレンダー（VISION 74・B-2）。選べる日は枠を出し、選んだ日は塗る。
   色だけで分けると、屋外の日差しと色覚の差で見分けにくい。選んだ日には印も足す */
.cal .day.day-pick{color:var(--color-ink);border-color:var(--color-border);background:var(--color-card)}
.cal .day.day-pick.is-picked{background:var(--color-primary-soft);color:var(--color-primary);
  border-color:var(--color-primary);font-weight:700}
.cal .day.day-pick.is-picked::after{content:'✓';font-size:11px;line-height:1}

.legend{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2);font-size:12px;color:var(--color-sub)}
.legend .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px;border:1px solid}
.legend .sw-done{background:var(--color-success-soft);border-color:var(--color-success)}
.legend .sw-wait{background:var(--color-warning-soft);border-color:var(--color-warning)}
.legend .sw-plan{background:var(--color-card);border-color:var(--color-border)}

.summary{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--color-border);font-size:14px;color:var(--color-sub)}
.notice{padding:var(--s2);border-radius:var(--radius);font-size:14px;margin-bottom:var(--s2)}
.notice-error{background:#FEF2F2;color:var(--color-error);border:1px solid #FECACA}
.notice-info{background:var(--color-primary-soft);color:var(--color-primary);border:1px solid #C7DBFB}
/* 気をつけてほしいが、止めてはいない知らせ（2026-10-18・稼働詳細に金額が混ざったとき） */
.notice-warn{background:var(--color-warning-soft);color:var(--color-warning);border:1px solid #F3D9A8}

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