/* ==================================================================
   あおなぎケア（/care/apps/）── モック aonagi_care_app_v3。経過日の切り替えだけ v1 の横スライド
   ・1画面で完結させたいので、文字は 14px 基準・余白は詰めめ（余白は em で文字サイズに連動）
   ・配色はサイトの紺が基調。琥珀は「照らし合わせる情報」（ご連絡いただきたい症状）専用
   ・ライト／ダークは light-dark() で1行に
   ================================================================== */
:root {
  color-scheme: light dark;
  --navy: #0D2B4D;
  --pale: #7FA8CC;
  --amber: #B08442;
  --bg: light-dark(#FAFBFC, #0B1526);
  --card: light-dark(#fff, #132340);
  --soft: light-dark(#EEF3F8, #1A2C4A);
  --amber-bg: light-dark(#FBF6EC, #2A2416);
  --ink: light-dark(#1F2A37, #E6EDF5);
  --sub: light-dark(#5A748F, #9FB3C8);
  --line: light-dark(#D2E0EF, #2A3F5F);
  --fg-navy: light-dark(#0D2B4D, #BFD4EA);
  --on-navy: light-dark(#fff, #0B1526);
  --fg-amber: light-dark(#8A6428, #E2BE7A);
  --r: 10px;
  --font-sans: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-serif: "Noto Serif JP", "Noto Serif CJK JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
button, input, select { font: inherit; color: inherit; }
a { color: var(--fg-navy); }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

.app {
  max-inline-size: 480px;
  margin-inline: auto;
  min-block-size: 100dvh;
  padding-block-end: calc(4em + env(safe-area-inset-bottom));   /* 下部の固定バーの分 */
}
.screen { display: none; padding: 1em 1em 1.5em; }
.screen.on { display: block; }
.loading { padding: 3em 1em; text-align: center; color: var(--sub); font-size: .85em; }

.serif { font-family: var(--font-serif); font-weight: 500; }
.k { font-size: .7em; letter-spacing: .25em; color: var(--pale); }
.title { margin-block-start: .2em; font-size: 1.4em; color: var(--fg-navy); }
.lead { margin-block-start: .4em; }
.note { font-size: .82em; color: var(--sub); }
.err { margin-block-start: .8em; font-size: .85em; color: light-dark(#A23B2A, #F0A090); }
.mt { margin-block-start: 1em; }
.mt-s { margin-block-start: .6em; }
.sec-t { margin: 1.2em 0 .2em; font-size: .78em; letter-spacing: .15em; color: var(--sub); }

/* ---- カード ---- */
.card {
  margin-block-start: .7em;
  padding: .75em .9em;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);

  h2 { margin-block-end: .2em; font-size: .95em; font-weight: 700; color: var(--fg-navy); }
  &.soft { background: var(--soft); border-color: transparent; }
  &.amber { background: var(--amber-bg); border-color: transparent; }
  &.amber h2 { color: var(--fg-amber); }
  &.small { font-size: .88em; }
  &.small p + p { margin-block-start: .5em; }
}

/* 箇条書き（先頭に短い線） */
.list {
  margin: 0;
  padding: 0;
  list-style: none;

  li { position: relative; padding: .18em 0 .18em 1.1em; font-size: .95em; }
  li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: .95em;
    inline-size: .55em;
    block-size: 1px;
    background: currentColor;
    opacity: .5;
  }
}

/* ---- ボタン ---- */
.btn {
  display: block;
  inline-size: 100%;
  padding: .85em;
  border: 0;
  border-radius: var(--r);
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;

  &.line { background: var(--amber); }
  &.ghost { background: transparent; border: 1px solid var(--line); color: var(--fg-navy); font-weight: 500; }
}
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); gap: .5em; }

/* ---- 登録 ---- */
label { display: block; margin: .9em 0 .3em; font-size: .85em; color: var(--sub); }
select, input[type="date"] {
  inline-size: 100%;
  min-block-size: 44px;
  padding: .7em;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  color: var(--ink);
}

/* ---- 経過：施術名・施術日・術後 n 日目・状態（1行に詰める） ---- */
.head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: .1em 1em;

  .k, .name, .date { grid-column: 1; }
  .name { font-size: 1.15em; color: var(--fg-navy); }
  .date { font-size: .78em; color: var(--sub); }
  .today { grid-column: 2; grid-row: 1 / 4; text-align: end; }
}
.today {
  .u { font-size: .8em; color: var(--sub); }
  .n { margin-inline: .1em; font-family: var(--font-serif); font-size: 2.4em; line-height: 1; color: var(--fg-navy); }
}
.chip {
  display: inline-block;
  margin-block-start: .6em;
  padding: .2em .8em;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .72em;
  letter-spacing: .08em;
  color: var(--sub);

  &.on { border-color: var(--pale); color: var(--fg-navy); }
  &.warr { border-color: var(--amber); color: var(--fg-amber); }
}

/* ---- 経過日の切り替え（v1 の横スライド） ---- */
.days {
  display: flex;
  gap: .4em;
  margin: .8em -1em 0;
  padding: .1em 1em .3em;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 1em;
  scrollbar-width: none;
}
.days__btn {
  flex: none;
  min-inline-size: 3.6em;
  min-block-size: 38px;
  padding: .3em .85em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--sub);
  font-size: .85em;
  text-align: center;
  align-content: center;
  scroll-snap-align: start;
  cursor: pointer;

  &[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff; font-weight: 700; }
  &.is-today::after { content: "・"; color: var(--pale); }          /* 今日の段階の印 */
  &[aria-pressed="true"].is-today::after { color: #fff; }
}

/* 表示中の段階 */
.stage {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3em .6em;
  margin-block-start: .7em;

  .d { font-family: var(--font-serif); font-size: 1.15em; color: var(--fg-navy); }
  .d small { margin-inline-end: .6em; font-size: .6em; letter-spacing: .2em; color: var(--pale); }
  .when { font-size: .75em; color: var(--sub); }
}
.tag {
  padding: .05em .6em;
  border: 1px solid var(--pale);
  border-radius: 999px;
  font-size: .7em;
  color: var(--fg-navy);

  &.visit { border-color: var(--amber); color: var(--fg-amber); }
}

/* 当日の麻酔の注意（折りたたみの中） */
.kv {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);   /* 項目名が長くても、値の列がつぶれないように */
  gap: .2em .8em;
  margin: .4em 0 0;
  font-size: .85em;

  dt { color: var(--sub); }
  dd { margin: 0; }
}
.sub-h { margin: .5em 0 .1em; font-size: .78em; color: var(--sub); }
.sub-h.amber { color: var(--fg-amber); }
.amber-list { color: var(--fg-amber); }

/* 折りたたみ（麻酔の注意・笑気麻酔・保証） */
details {
  margin-block-start: .7em;
  padding: .55em .9em;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);

  summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    list-style: none;
    font-size: .9em;
    font-weight: 500;
    color: var(--fg-navy);
    cursor: pointer;
  }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: "+"; font-size: 1.2em; color: var(--pale); }
  &[open] summary::after { content: "–"; }
  summary small { margin-inline-start: .5em; font-weight: 400; color: var(--sub); }
  .in { padding-block: .3em .2em; }
  &.is-day0 { border-color: var(--fg-navy); }   /* 当日の段階では麻酔の注意を目立たせる */
}

/* 保証（折りたたみの中） */
.warr dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: .4em .8em;
  margin: .4em 0 0;
  font-size: .88em;

  dt { color: var(--ink); }
  dd { margin: 0; font-weight: 500; color: var(--fg-navy); }
}
.warr .note { margin-block-start: .6em; }

/* ホーム画面への追加の案内（一度だけ） */
.hint {
  display: flex;
  gap: 1em;
  align-items: center;
  margin-block-start: .8em;
  padding: .6em .9em;
  border: 1px dashed var(--pale);
  border-radius: var(--r);
  font-size: .8em;

  button { flex: none; padding: 0; border: 0; background: none; color: var(--sub); text-decoration: underline; cursor: pointer; }
}

/* ---- 一覧 ---- */
.item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .2em 1em;
  align-items: center;
  text-decoration: none;
  color: inherit;

  .name { font-weight: 700; color: var(--fg-navy); }
  .meta { grid-column: 1; font-size: .8em; color: var(--sub); }
  .go { grid-column: 2; grid-row: 1 / 3; color: var(--pale); }
  &.done { opacity: .6; }
  &.missing .name { color: var(--sub); }
}

/* ---- 画面下部に固定：ご連絡いただきたい症状 ---- */
.fixed {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 20;

  .bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    inline-size: 100%;
    max-inline-size: 480px;
    margin-inline: auto;
    padding: .75em 1em calc(.75em + env(safe-area-inset-bottom));
    border: 0;
    border-block-start: 2px solid var(--amber);
    background: var(--amber-bg);
    color: var(--fg-amber);
    font-weight: 700;
    text-align: start;
    cursor: pointer;
  }
  .bar .t::before { content: "▲ "; }
  &.open .bar .t::before { content: "▼ "; }
  .bar .s { font-size: .75em; font-weight: 400; color: var(--sub); }

  .panel {
    display: none;
    max-inline-size: 480px;
    max-block-size: 70dvh;
    overflow-y: auto;
    margin-inline: auto;
    padding: .8em 1em 1.2em;
    border-block-start: 1px solid var(--line);
    background: var(--card);
    opacity: 1;
    transition: opacity .2s, display .2s allow-discrete;
  }
  &.open .panel { display: block; padding-block-end: calc(1.2em + env(safe-area-inset-bottom)); }
  &.open .bar { padding-block-end: .75em; }
  .panel > p { margin-block-start: .6em; font-size: .78em; color: var(--sub); }
  .panel .row { margin-block-start: .8em; }
}
@starting-style {
  .fixed.open .panel { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fixed .panel { transition: none; }
}