/* 欧文（数字と英字）だけ Nunito Sans を読む。**日本語はOS標準に任せる。**
 * 和文のウェブフォントは、サブセットに分けても定義だけで340KBになり、
 * 毎日開く画面の表示を待たせる。ここに @font-face を直接置いてあるのは、
 * Google Fonts の外部CSSを読むと、その取得が終わるまで画面が描かれないため。
 */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/nunitosans/v19/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tCKQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/nunitosans/v19/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/nunitosans/v19/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tCKQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/nunitosans/v19/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/nunitosans/v19/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tCKQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/nunitosans/v19/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* たしかにプラス 労務管理の見た目。
 *
 * 毎日開く画面なので、正確さだけでなく「開くのが軽い」ことを狙う。
 * 白＋ミントを基調に、承認待ちだけラベンダー、注意は黄色。赤は使わない（警告に見えるため）。
 * 遊びは色面と丸みまで。数字のカウントアップや行ごとの色分けはしない（読み違えるため）。
 *
 * 書体は Avenir（typography スキルの10書体から「親しみ・やわらかさ」で選定）。
 * 正フォントは有償なので、欧文に配信されるのは代替の Nunito Sans。
 * 和文はOS標準（ヒラギノ／游ゴシック）に任せる。
 * インライン style は使わない（CSP を style-src 'self' に保つため）。
 */
:root {
  --font-latin: "Avenir Next", Avenir, "Nunito Sans", sans-serif;
  --font-ja: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  --font-ui: "Avenir Next", Avenir, "Nunito Sans", var(--font-ja);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --ink: #243733;
  --muted: #52665f;
  --line: #d9e5de;
  --control-line: #74877e;
  --bg: #f7faf5;
  --card: #ffffff;
  --neutral-soft: #f0f4f2;

  --accent: #087f72;
  /* ミントの面に載せる文字はこちら。--accent だとコントラストが 4.4:1 で足りない */
  --accent-ink: #06685e;
  --accent-soft: #e5f7ee;
  --accent-line: #b3dcc8;

  /* 承認待ち。「未達・悪化」の黄色と意味を分ける */
  --pending: #6545a4;
  --pending-soft: #f0ebff;
  --pending-line: #d3c5ee;

  --attention: #76520b;
  --attention-soft: #fff4cf;
  --attention-line: #ddc779;

  --radius: 18px;
  --shadow-card: 0 6px 20px rgb(36 55 51 / 6%);
  --maxw: 44rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.8;
}

a { color: var(--accent-ink); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 2rem 1rem 5rem; }
.wrap--wide { max-width: 64rem; }

header.site { border-top: 4px solid var(--accent-line); border-bottom: 1px solid var(--line); background: var(--card); }
header.site .inner { max-width: var(--maxw); margin: 0 auto; padding: 1rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
header.site .inner--wide { max-width: 64rem; }
header.site .org { font-size: 0.875rem; color: var(--muted); }
header.site .name { font-size: 0.9375rem; font-weight: 700; color: var(--accent-ink); }
header.site a {
  color: var(--muted); text-decoration: none; font-size: 0.875rem;
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: 0.5rem; border-radius: 8px;
}
header.site a:hover { color: var(--accent-ink); background: var(--accent-soft); }
header.site .spacer { margin-left: auto; }

h1 { font-size: clamp(1.5rem, 3vw, 1.875rem); line-height: 1.4; margin: 1.5rem 0 0.75rem; font-weight: 700; }
h2 { font-size: 1.1875rem; margin: 2rem 0 0.5rem; font-weight: 700; }
h3 { font-size: 1rem; margin: 1.25rem 0 0.375rem; font-weight: 700; }
h4 { font-size: 0.9375rem; margin: 1.25rem 0 0.375rem; font-weight: 700; color: var(--muted); }
/* セクション切り替え時に見出しへフォーカスを移すが、マウス操作では枠を出さない */
h2[tabindex]:focus:not(:focus-visible) { outline: none; }
p { margin: 0 0 1rem; }
.lead { color: var(--muted); }
.muted { color: var(--muted); font-size: 0.875rem; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  margin: 0 0 1.5rem;
}

.notice { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 14px; padding: 1.125rem 1.25rem; margin: 0 0 1.25rem; }
.notice h2 { margin-top: 0; font-size: 1rem; }
.notice ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.notice li { margin: 0.25rem 0; }

.attention, .errors {
  background: var(--attention-soft); border: 1px solid var(--attention-line);
  border-left: 4px solid var(--attention); color: var(--attention);
  border-radius: 12px; padding: 1rem 1.25rem; margin: 0 0 1.25rem;
}
.errors ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }

label { display: block; }

.field { margin: 0 0 2.25rem; }
.field:last-child { margin-bottom: 0.5rem; }
.field > .q { font-weight: 700; margin: 0 0 0.75rem; line-height: 1.7; }
.field .q .ref { color: var(--muted); font-weight: 400; font-size: 0.8125rem; margin-right: 0.5rem; }
.field .q .optional { color: var(--muted); font-weight: 400; font-size: 0.8125rem; margin-left: 0.375rem; }
.field .note { color: var(--muted); font-size: 0.875rem; margin: -0.375rem 0 0.75rem; }
/* 入力欄やチェックの下に置く補足は、欄から少し離す（見出しの下に置くときだけ詰める） */
.field .choice + .note, .field input + .note, .field .time-range + .note { margin-top: 0.5rem; }
/* 時間単位の「10:00 〜 12:00」。狭い画面では折り返す */
.time-range { display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
.time-range select { width: auto; min-width: 7rem; }

.choices { display: flex; flex-direction: column; gap: 0.5rem; }
.choice {
  display: flex; align-items: flex-start; gap: 0.625rem;
  border: 1px solid var(--control-line); border-radius: 10px;
  padding: 0.875rem 1rem; cursor: pointer; background: var(--card);
  transition: border-color 0.12s, background 0.12s;
}
.choice:hover { border-color: var(--accent); }
.choice input { margin: 0.45rem 0 0; accent-color: var(--accent); width: 1.05rem; height: 1.05rem; flex: none; }
.choice span { flex: 1; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], textarea, select {
  width: 100%; min-height: 48px; font: inherit; color: var(--ink);
  border: 1px solid var(--control-line); border-radius: 10px;
  padding: 0.75rem; background: var(--card);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
textarea { min-height: 7rem; resize: vertical; line-height: 1.7; }

.code-input { font-size: 1.25rem; letter-spacing: 0.12em; text-align: center; font-family: var(--font-mono); }

.btn {
  display: inline-block; font: inherit; font-weight: 700;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 12px; min-height: 48px; padding: 0.75rem 1.5rem;
  cursor: pointer; text-decoration: none; line-height: 1.5; text-align: center;
  transition: background-color 0.12s, border-color 0.12s;
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn--ghost { background: var(--card); color: var(--accent-ink); border-color: var(--accent-ink); }
.btn--ghost:hover { background: var(--accent-soft); }
.btn--block { display: block; width: 100%; }
/* 文字まで薄くすると、なぜ押せないかが読めなくなる */
.btn[disabled], .btn[disabled]:hover {
  opacity: 1; color: var(--muted); background: var(--neutral-soft);
  border-color: var(--control-line); cursor: not-allowed;
}
.btn--sm { min-height: 44px; padding: 0.625rem 0.875rem; font-size: 0.875rem; }

.actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }
.actions .spacer { margin-left: auto; }

.progress { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 0.75rem 0 0.5rem; }
.progress .bar { height: 6px; background: var(--neutral-soft); border-radius: 999px; overflow: hidden; }
.progress .bar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; width: 0; transition: width 0.25s; }
.progress .label { font-size: 0.8125rem; color: var(--muted); margin-bottom: 0.375rem; }

/* 表。狭い画面では表だけ横に送る */
.table-scroll { max-width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); background: var(--neutral-soft); font-weight: 700; font-size: 0.875rem; }
td.num, th.num { text-align: right; font-variant-numeric: lining-nums tabular-nums; }
tbody tr:hover { background: #f4f8f5; }
td .inline { display: inline-block; margin: 0.125rem; }
/* 残数の列だけ色を敷いて、表の中で真っ先に目に入るようにする */
th.balance-cell, td.balance-cell { color: var(--accent-ink); background: var(--accent-soft); }
td.balance-cell { font-size: 1.25rem; font-weight: 700; }

/* 数字。主役は有給の残りひとつ。ほかを同じ大きさにすると、どれも目に入らなくなる */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; }
.stat-grid--home { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 3px 12px rgb(36 55 51 / 4%); padding: 1.25rem; min-width: 0;
}
.stat .k { font-size: 0.875rem; font-weight: 700; color: var(--muted); margin-bottom: 0.625rem; }
.stat .v {
  font-size: 2rem; font-weight: 700; line-height: 1.25; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere;
}
.stat .v small { font-size: 1rem; font-weight: 700; color: var(--muted); font-family: var(--font-ja); margin-left: 0.2rem; }
.stat--hero { background: var(--accent-soft); border-color: var(--accent-line); border-radius: 20px; padding: 1.5rem; }
.stat--hero .v { color: var(--accent-ink); font-size: clamp(3rem, 5vw, 3.5rem); }
.stat--hero .v small { color: var(--accent-ink); font-size: 1.125rem; }
.stat--pending { background: var(--pending-soft); border-color: var(--pending-line); }
/* 代表のホームに出す承認待ち。承認待ちの色（ラベンダー）でそろえる */
.card--pending { background: var(--pending-soft); border-color: var(--pending-line); }
.card--pending h2 { color: var(--pending); }
.plain-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.plain-list li { padding: 0.375rem 0; border-bottom: 1px solid var(--pending-line); }
.plain-list li:last-child { border-bottom: 0; }
.stat--pending .v { color: var(--pending); }
.stat--rate { background: var(--accent-soft); border-color: var(--accent-line); }
.stat--rate .v { color: var(--accent-ink); font-size: 2.5rem; }
.stat--count .v { font-size: 2.5rem; }
.stat-part { display: inline-block; white-space: nowrap; }
.stat-part + .stat-part { margin-left: 0.35rem; }

.dist { margin: 0 0 1.5rem; }
.dist .row { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr 5.5rem; gap: 0.625rem; align-items: center; margin: 0.25rem 0; font-size: 0.875rem; }
/* 横棒は <progress> で描く。インライン style で幅を書くと CSP を緩めることになるため。 */
.dist progress.track { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border: 0; display: block; }
.dist progress.track::-webkit-progress-bar { background: var(--neutral-soft); border-radius: 999px; }
.dist progress.track::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.dist progress.track::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.dist progress.track { background: var(--neutral-soft); border-radius: 999px; color: var(--accent); }
.dist .n { color: var(--muted); text-align: right; font-variant-numeric: lining-nums tabular-nums; }

.pill {
  display: inline-block; font-size: 0.8125rem; font-weight: 700; line-height: 1.5;
  padding: 0.25rem 0.625rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--neutral-soft); color: var(--muted);
}
.pill--on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
/* 承認待ち。黄色（未達・悪化）と意味を分ける */
.pill--pending { background: var(--pending-soft); border-color: var(--pending-line); color: var(--pending); }
.pill--wait { background: var(--attention-soft); border-color: var(--attention-line); color: var(--attention); }

.codes { font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.06em; columns: 2; column-gap: 2rem; }
.codes div { break-inside: avoid; padding: 0.1875rem 0; }

.quote { border-left: 3px solid var(--accent-line); padding: 0.5rem 0 0.5rem 1rem; margin: 0 0 1.25rem; white-space: pre-wrap; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

@media (max-width: 48rem) {
  .stat-grid--home { grid-template-columns: minmax(0, 1fr); }
  .wrap { padding-top: 1.25rem; }
}

@media (max-width: 40rem) {
  body { font-size: 16px; }
  .card { padding: 1.25rem; }
  .codes { columns: 1; }
  .dist .row { grid-template-columns: 1fr; gap: 0.125rem; }
  .dist .n { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .choice, .progress .bar > i { transition: none; }
  .stat .v.is-flip-down, .stat .v.is-flip-up { animation: none; }
}

/* 残数が変わったときだけ、カードを一度めくって知らせる。
 * 数字は最初から最終値で、動くのは見た目だけ（途中の値を読ませない）。 */
.stat .v { transform-origin: top center; backface-visibility: hidden; }
.stat .v.is-flip-down { animation: flip-down 0.6s cubic-bezier(0.2, 0.8, 0.3, 1); }
.stat .v.is-flip-up { animation: flip-up 0.6s cubic-bezier(0.2, 0.8, 0.3, 1); }

@keyframes flip-down {
  0% { transform: rotateX(-88deg); opacity: 0.25; }
  55% { transform: rotateX(12deg); opacity: 1; }
  80% { transform: rotateX(-5deg); }
  100% { transform: rotateX(0); }
}

@keyframes flip-up {
  0% { transform: rotateX(88deg); opacity: 0.25; }
  55% { transform: rotateX(-12deg); opacity: 1; }
  80% { transform: rotateX(5deg); }
  100% { transform: rotateX(0); }
}

/* ユーティリティ。CSP を style-src 'self' に保つため、インライン style を使わない。 */
.inline { display: inline; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.75rem; }
.mb-2 { margin-bottom: 1.5rem; }
.tail { margin: 0.75rem 0 0; }

/* 1画面1セクション。進捗バーの直下に来る見出しは上の余白を詰める。 */
form[data-survey] section[data-step] > h2 { margin-top: 1rem; font-size: 1.25rem; }

/* JS が有効なときだけ1ページ1セクションにする。無効なら全部出して1回で送れるようにする。 */
html.js form[data-survey] section[data-step] { display: none; }
html.js form[data-survey] section[data-step].is-active { display: block; }
html.js form[data-survey] noscript { display: none; }

/* 画面印刷。色面に頼らず、文字と罫線で読めるようにする */
@media print {
  @page { margin: 12mm; }
  body { background: #fff; font-size: 10pt; line-height: 1.5; }
  body, body * { color: #000 !important; background: transparent !important; box-shadow: none !important; }
  .wrap, .wrap--wide { max-width: none; padding: 0; }
  .no-print, header.site, .btn { display: none !important; }
  .card { padding: 10pt; margin-bottom: 10pt; border: 1px solid #777; border-radius: 0; }
  .stat-grid, .stat-grid--home { display: block; }
  .stat {
    display: inline-block; width: 31%; margin: 0 1% 8pt 0; padding: 8pt;
    vertical-align: top; border: 1px solid #777; border-radius: 0; break-inside: avoid;
  }
  .stat .v, .stat--hero .v, .stat--rate .v, .stat--count .v { font-size: 24pt; }
  .stat .v small { font-size: 10pt; }
  .table-scroll { overflow: visible; }
  table { table-layout: fixed; font-size: 9pt; }
  thead { display: table-header-group; }
  th, td { padding: 5pt; border-bottom: 1px solid #777; white-space: normal; overflow-wrap: anywhere; }
  td.balance-cell { font-size: 11pt; }
  tr, .field, .notice, .attention, .errors { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .pill, .notice, .attention, .errors { border-color: #777; }
  /* アンケートは、いま開いているセクションだけでなく全設問を印刷する */
  html.js form[data-survey] section[data-step] { display: block; }
}