/* ============================================================
   prototype2 skin.css — PC・タブレット（600px 以上）の着せ替え。
   配置・並べ方・寸法・縦横の尺度は styles.css（見本 1 の決まり + 節のカード化）が持つ。
   ここでは色と形（角丸・面・pill）だけを Google Workspace の管理画面に寄せる（色は Instagram）。
   寸法（高さ・余白・幅）はここで変えない。決まりは prototype2/DESIGN.md。
   ============================================================ */

/* ---------- 色（Instagram の Web 画面の色を、見本 1 の token に当てる） ---------- */
:root{
  --bg:#FAFAFA; --side:#FFFFFF; --surface:#FFFFFF; --surface-2:#EFEFEF; --sel:#E0F1FF; --line:#DBDBDB; --line-strong:#DBDBDB;
  --ink:#000000; --ink-2:#262626; --ink-3:#737373;
  --accent:#0095F6; --accent-soft:#E0F1FF; --btn:#0095F6; --btn-ink:#FFFFFF;
  --ok:#1D9E4B; --ok-soft:#E6F5EC; --warn:#B86200; --warn-soft:#FFF3E0; --err:#ED4956; --err-soft:#FFE9EB;
  --run:#0095F6; --run-soft:#E0F1FF; --plan:#A8A8A8; --plan-soft:#EFEFEF; --band:#F2F2F2; --focus:#0095F6;
  --on-sel:#00376B; --on-ok:#0F5A2B; --on-warn:#6B3A00; --on-err:#8A1C26; --inverse:#262626; --inverse-ink:#F5F5F5;
  --state:rgb(0 0 0 / .08); --link:#0B57D0;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --side:#000000; --surface:#121212; --surface-2:#1A1A1A; --sel:#0E3A5C; --line:#363636; --line-strong:#363636;
    --ink:#F5F5F5; --ink-2:#D4D4D8; --ink-3:#A8A8A8;
    --accent:#0095F6; --accent-soft:#0E3A5C; --btn:#0095F6; --btn-ink:#FFFFFF;
    --ok:#58C322; --ok-soft:#0F2E18; --warn:#FFB84D; --warn-soft:#33240A; --err:#FF4F5E; --err-soft:#3A1418;
    --run:#0095F6; --run-soft:#0E3A5C; --plan:#737373; --plan-soft:#1A1A1A; --band:#1E1E1E; --focus:#0095F6;
    --on-sel:#CFE8FF; --on-ok:#A7E6B5; --on-warn:#FFD9A0; --on-err:#FFB3B9; --inverse:#E8E8E8; --inverse-ink:#1A1A1A;
    --state:rgb(255 255 255 / .1); --link:#A8C7FA;
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --side:#000000; --surface:#121212; --surface-2:#1A1A1A; --sel:#0E3A5C; --line:#363636; --line-strong:#363636;
  --ink:#F5F5F5; --ink-2:#D4D4D8; --ink-3:#A8A8A8;
  --accent:#0095F6; --accent-soft:#0E3A5C; --btn:#0095F6; --btn-ink:#FFFFFF;
  --ok:#58C322; --ok-soft:#0F2E18; --warn:#FFB84D; --warn-soft:#33240A; --err:#FF4F5E; --err-soft:#3A1418;
  --run:#0095F6; --run-soft:#0E3A5C; --plan:#737373; --plan-soft:#1A1A1A; --band:#1E1E1E; --focus:#0095F6;
  --on-sel:#CFE8FF; --on-ok:#A7E6B5; --on-warn:#FFD9A0; --on-err:#FFB3B9; --inverse:#E8E8E8; --inverse-ink:#1A1A1A;
  --state:rgb(255 255 255 / .1); --link:#A8C7FA;
}

/* ---------- 地と帯（薄い灰の地。帯は線を持たず、大分類を小さな灰の字、頁の名前を 24px に） ---------- */
body{background:var(--bg)}
.pagebar{border-bottom:0;background:var(--bg)}
.pagebar .crumbs{align-items:baseline;gap:8px;font-size:var(--font-heading);line-height:24px}
.pagebar .crumbs b{font-weight:400;color:var(--ink-3)}
.pagebar .crumbs .crumb-sep{color:var(--ink-3)}
.pagebar .crumbs span:not(.crumb-sep){font-weight:600;color:var(--ink)}
.pagebar .crumbs a{color:var(--ink-3)}@media (hover:hover){.pagebar .crumbs a:hover{color:var(--ink);text-decoration:underline}}
.ui-section-title,.main.standard-page .content h2{font-weight:500}

/* ---------- sidebar と上の bar（選択中は青い pill） ---------- */
.side{background:var(--side);border-right:1px solid var(--line)}
.side .top,.side .lbl,.side .sub a,.side .subtree a{border-radius:999px}
.side a[aria-current="page"],.side .top[aria-current="page"],.side .lbl[aria-current="page"]{background:var(--accent-soft);color:var(--on-sel);font-weight:500}
@media (hover:hover){.side .top:hover,.side .lbl:hover,.side .sub a:hover{background:var(--state)}}
.topbar{background:var(--side);border-bottom:1px solid var(--line)}

/* ---------- button（丸い形。主な操作は Instagram の青で塗る、ほかは枠と青い字。寸法は見本 1 のまま） ---------- */
.btn{border-radius:999px;border-color:var(--line);color:var(--link)}
.btn.primary{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
@media (hover:hover){.btn:hover{background:var(--surface);background-image:linear-gradient(var(--state),var(--state))}.btn.primary:hover{background:#1877F2;background-image:none;opacity:1}}
.btn.danger{color:var(--err);border-color:var(--line)}
.btn.icon{border-radius:50%}
.btn.nav-toggle{color:var(--ink-2)}
.btn.ui-help-trigger{border-color:transparent;background:transparent}
.btn[disabled]{opacity:.38}
.pagebar .right .ib,.topbar-status .ib{border-radius:50%}

/* ---------- 入力欄と select（outlined: 角丸 4px、focus で青 2px。高さ・幅は見本 1 のまま） ---------- */
.field{border-radius:4px;border-color:var(--line)}
.field:focus-within{outline:2px solid var(--accent);outline-offset:-1px}
.field input:focus-visible{outline:none}
.field .unit{background:transparent;border-left:0;color:var(--ink-3)}
.sel{border-radius:4px;border-color:var(--line)}
.sel:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}

/* ---------- switch・chip・状態の印・曜日（色だけ） ---------- */
.switch{background:var(--line)}
.switch[aria-checked="true"]{background:var(--accent)}
.chip{border-radius:8px;border-color:var(--line);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:transparent;color:var(--on-sel)}
.st{padding:1px 8px;border-radius:6px;background:var(--surface-2);color:var(--ink)}
.st::before{display:none}
.st.ok{background:var(--ok-soft);color:var(--on-ok)}
.st.run{background:var(--run-soft);color:var(--on-sel)}
.st.warn{background:var(--warn-soft);color:var(--on-warn)}
.st.err{background:var(--err-soft);color:var(--on-err)}
.st.plan{background:var(--plan-soft);color:var(--ink-2)}
.days button{border-color:var(--line)}
.days button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- 表（列の見出しは小さな灰の字。行に乗せると薄く塗る） ---------- */
.tbl th{color:var(--ink-3);font-weight:500}

/* お知らせ（.att）は見本 1 のまま（白い地に行の罫線、種類は点の色）。色の付いた地は使わない。 */

/* ---------- snackbar ---------- */
.toast{background:var(--inverse);color:var(--inverse-ink);border:0;border-radius:4px;left:50%;right:auto;transform:translateX(-50%);min-width:280px;max-width:560px;box-shadow:0 3px 8px rgb(0 0 0 / .3)}
.toast .k{display:none}