/* アプリ共通のシェル。色・フォントは必ず tokens.css 由来 */

body { margin: 0; background: var(--mv-paper-2); }

/* --- アプリバー（白ベース。青は文字と罫線のアクセント） -------- */
.app-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--mv-space-3); flex-wrap: wrap;
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.6) blur(8px);
  color: var(--mv-ink); padding: 10px var(--mv-space-5);
  border-bottom: 1px solid var(--mv-rule-soft);
  box-shadow: var(--mv-shadow-bar);
}
/* 実ロゴ。180x60 の素材を縮小方向で使う。地色が白なので切り抜き不要 */
.app-logo {
  height: 30px; width: auto; flex: none; display: block;
  padding-right: var(--mv-space-3); border-right: 1px solid var(--mv-rule-soft);
}
.app-bar strong {
  font-family: var(--mv-font-head); font-size: var(--mv-text-md); color: var(--mv-ink); letter-spacing: .01em;
}
.app-bar__sub { font-size: var(--mv-text-sm); color: var(--mv-muted); }

/* セグメント風のナビ。押せることが見た目で分かるようにする */
.app-nav {
  margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap;
  background: var(--mv-paper-2); padding: 3px; border-radius: var(--mv-radius);
  border: 1px solid var(--mv-rule-soft);
}
.app-nav a {
  color: var(--mv-muted); text-decoration: none; font-size: var(--mv-text-sm); font-weight: 600;
  padding: 7px 12px; border-radius: var(--mv-radius-sm); white-space: nowrap;
  transition: background var(--mv-dur) var(--mv-ease), color var(--mv-dur) var(--mv-ease);
}
.app-nav a:hover { background: var(--mv-surface); color: var(--mv-ink); }
.app-nav a[aria-current="page"] {
  background: var(--mv-surface); color: var(--mv-blue); box-shadow: var(--mv-shadow-sm);
}
@media (max-width: 760px) {
  .app-bar { padding: 8px var(--mv-space-3); }
  .app-logo { height: 24px; padding-right: var(--mv-space-2); }
  .app-bar__sub { display: none; }
  .app-nav { width: 100%; margin-left: 0; overflow-x: auto; }
}

/* --- ツールバー ---------------------------------------------- */
.toolbar {
  padding: var(--mv-space-3) var(--mv-space-5);
  background: var(--mv-surface); border-bottom: 1px solid var(--mv-rule-soft);
}
.toolbar .row { display: flex; gap: var(--mv-space-3); align-items: center; flex-wrap: wrap; }
.toolbar .mv-select { width: auto; min-height: 36px; font-size: var(--mv-text); }
.mv-label { font-size: var(--mv-text-sm); color: var(--mv-muted); font-weight: 600; }
.hint { font-size: var(--mv-text-sm); color: var(--mv-muted); }
kbd {
  font-family: var(--mv-font-num); font-size: var(--mv-text-2xs); border: 1px solid var(--mv-rule-soft);
  border-bottom-width: 2px; border-radius: 3px; padding: 2px 5px;
  background: var(--mv-paper-2); color: var(--mv-muted);
}
.legend { font-size: var(--mv-text-xs); color: var(--mv-muted); display: inline-flex; align-items: center; gap: 5px; }
.sw { width: 12px; height: 12px; border: 1px solid var(--mv-rule); border-radius: 3px; display: inline-block; }
.sw--none { background: var(--mv-surface); }
.sw--att  { background: var(--mv-yellow-bg); border-color: var(--mv-yellow); }
.sw--vio  { background: var(--mv-red-bg); border-color: var(--mv-red); }
.status {
  margin-left: auto; font-size: var(--mv-text-sm); color: var(--mv-blue); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- 月次グリッド -------------------------------------------- */
.grid-scroll {
  overflow: auto; max-height: calc(100vh - 210px);
  border-top: 1px solid var(--mv-rule-soft); background: var(--mv-surface);
}
.mv-table .dow { display: block; font-size: var(--mv-text-3xs); font-weight: 400; color: var(--mv-muted); margin-top: 1px; }
.mv-table th.col-holiday { background: var(--mv-col-holiday); }
.mv-table .col-pos {
  position: sticky; left: 108px; z-index: 2; background: var(--mv-surface);
  font-size: var(--mv-text-2xs); color: var(--mv-muted); min-width: 92px; max-width: 92px;
  overflow: hidden; text-overflow: ellipsis;   /* 長い役職名は途中で切らず … で省く */
}
thead .col-pos, thead .mv-sticky-col { z-index: 4; background: var(--mv-paper-2); }
.mv-table .mv-sticky-col {
  min-width: 108px; max-width: 108px; overflow: hidden; text-overflow: ellipsis;
  font-weight: 500;
}
/* 集計列は右端に固定する。
   横にスライドすると氏名・役職だけが付いてきて集計が流れて行ってしまい、
   どの社員の数字を見ているのか分からなくなっていた。
   幅を固定して右からの距離を積み上げる。 */
.mv-table .agg {
  background: var(--mv-paper-2); font-weight: 700;
  position: sticky; z-index: 2; min-width: 54px; max-width: 54px;
}
.mv-table .agg--1 { right: 162px; }
.mv-table .agg--2 { right: 108px; }
.mv-table .agg--3 { right: 54px; }
.mv-table .agg--4 { right: 0; min-width: 54px; max-width: 54px;
  box-shadow: -1px 0 0 var(--mv-rule); }
.mv-table thead .agg { z-index: 4; background: var(--mv-paper-2); }
/* 振替休日のセルは押せる。振替元を出すため */
.grid-empty { text-align: center; color: var(--mv-muted); padding: 32px 12px;
  font-size: var(--mv-text); position: static; }
.mv-table td.cell-sub { cursor: pointer; }
.mv-table td.cell-sub:hover { outline: 2px solid var(--mv-green); outline-offset: -2px; }
.mv-table td.is-cursor { outline: 2px solid var(--mv-blue); outline-offset: -2px; }
.cell-input {
  width: 56px; border: 0; padding: 0 2px; font-size: var(--mv-text-sm); text-align: right;
  background: var(--mv-blue-tint); color: var(--mv-ink); font-family: var(--mv-font-num);
}
.cell-input:focus { outline: none; }

/* --- 汎用 ---------------------------------------------------- */
.page { max-width: 1080px; margin: 0 auto; padding: var(--mv-space-5); }
.card {
  background: var(--mv-surface); border: 1px solid var(--mv-rule-soft);
  border-radius: var(--mv-radius); padding: var(--mv-space-5);
  margin-bottom: var(--mv-space-4); box-shadow: var(--mv-shadow-sm);
}
.card h3 { margin: 0 0 var(--mv-space-3); font-size: var(--mv-text-md); }
.muted { color: var(--mv-muted); font-size: var(--mv-text-sm); }
.right { margin-left: auto; }

/* --- ログイン状態バッジ -------------------------------------- */
.who-badge {
  display: inline-flex; align-items: center; gap: 7px; font-size: var(--mv-text-sm);
  background: var(--mv-paper-2); border: 1px solid var(--mv-rule-soft);
  border-radius: 999px; padding: 4px 6px 4px 11px;
}
.who-badge b { font-size: var(--mv-text-sm); }
.who-badge > span { color: var(--mv-muted); font-size: var(--mv-text-xs); }
.who-badge a {
  color: var(--mv-blue); text-decoration: none; font-size: var(--mv-text-xs); font-weight: 700;
  background: var(--mv-surface); border: 1px solid var(--mv-rule-soft);
  border-radius: 999px; padding: 3px 9px;
}
.who-badge a:hover { background: var(--mv-blue-tint); }

/* --- 会社カレンダーの区分（有給推奨日・計画年休） --------------
   両方とも青系にしていたため区別できなかった（2026-08 指摘）。
   有給推奨日＝青、計画年休＝紫 と**色相ごと分ける**。
   紫は JIS の状態色（黄・緑・赤）ともブランド青とも重ならない。
   地の色は薄く保ち、区別は左の帯とラベルで付ける。 */
.cal-encouraged { background: var(--mv-blue-pale) !important; box-shadow: inset 3px 0 0 var(--mv-blue-soft); }
.cal-planned    { background: var(--mv-purple-bg) !important; box-shadow: inset 3px 0 0 var(--mv-purple); }

/* 月次グリッドのセルは幅が狭いので帯は出さず、地色だけで示す */
.mv-table td.cal-encouraged, .mv-table td.cal-planned,
.mv-table th.cal-encouraged, .mv-table th.cal-planned { box-shadow: none; }

/* カレンダー区分の行では、淡色の文字を一段濃くする（薄い地に薄い字を重ねない） */
.cal-encouraged .d-date > span, .cal-encouraged .d-rest { color: var(--mv-muted); }
.cal-planned    .d-date > span, .cal-planned    .d-rest { color: var(--mv-purple-ink); }
.cal-encouraged .d-date.sat b, .cal-encouraged .d-date.sat > span { color: var(--mv-blue-deep); }
.cal-planned    .d-date.sat b, .cal-planned    .d-date.sat > span { color: var(--mv-purple-dark); }
.cal-encouraged .d-date.sun b, .cal-encouraged .d-date.sun > span,
.cal-planned    .d-date.sun b, .cal-planned    .d-date.sun > span { color: var(--mv-red-ink); }

/* ラベル。9.5px では日本語が読めないので 11px + 余白を確保する */
.cal-tag {
  display: inline-block; font-size: var(--mv-text-xs); font-weight: 700; line-height: 1.5;
  padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 1px;
  background: var(--mv-blue-deep); color: var(--mv-paper); letter-spacing: .02em; white-space: nowrap;
}
.cal-tag--planned { background: var(--mv-purple-dark); }

.sw--enc { background: var(--mv-blue-pale); border-color: var(--mv-blue-soft); }
.sw--pln { background: var(--mv-purple-bg); border-color: var(--mv-purple); }
.prov {
  font-size: var(--mv-text-xs); color: var(--mv-yellow-ink); background: var(--mv-yellow-bg);
  border: 1px solid var(--mv-yellow); border-radius: 3px; padding: 2px 7px; font-weight: 700;
}

/* --- 権限が無いときの案内 ------------------------------------ */
.denied { max-width: 560px; margin: 60px auto; text-align: center; }
.denied h2 { font-size: var(--mv-text-lg); margin: 0 0 8px; }
.denied p { color: var(--mv-muted); font-size: var(--mv-text); margin: 0 0 18px; }

/* 振替休日のセル。振替元の日付は title で出す */
.mv-table td.cell-sub {
  background: var(--mv-green-bg); color: var(--mv-green); font-weight: 700; cursor: help;
}

/* --- 社員の検索・絞り込み（picker.js） ----------------------- */
.mv-picker { display: flex; gap: var(--mv-space-2); align-items: center; flex-wrap: wrap; }
.mv-picker__div { width: auto; min-height: 36px; font-size: var(--mv-text); flex: none; }
.mv-picker__box { position: relative; min-width: 230px; }
.mv-picker__input { min-height: 36px; font-size: var(--mv-text-md); padding-right: 30px; }
.mv-picker__clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border: 0; background: none; cursor: pointer;
  color: var(--mv-muted); font-size: var(--mv-text-md); line-height: 1; border-radius: 50%;
}
.mv-picker__clear:hover { background: var(--mv-paper-2); color: var(--mv-ink); }
.mv-picker__list {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 268px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--mv-surface); border: 1px solid var(--mv-rule);
  border-radius: var(--mv-radius); box-shadow: var(--mv-shadow-lg);
}
.mv-picker__list li {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 9px;
  border-radius: var(--mv-radius-sm); cursor: pointer; font-size: var(--mv-text);
}
.mv-picker__list li b { font-weight: 600; }
.mv-picker__list li span { font-size: var(--mv-text-xs); color: var(--mv-muted);
  font-family: var(--mv-font-num); font-variant-numeric: tabular-nums; }
.mv-picker__list li:hover { background: var(--mv-paper-2); }
.mv-picker__list li.is-active { background: var(--mv-blue-tint); }
.mv-picker__list li[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--mv-blue); }
.mv-picker__none { color: var(--mv-muted); cursor: default; }
.mv-picker__count { font-size: var(--mv-text-xs); color: var(--mv-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.mv-picker__solo { display: inline-flex; align-items: baseline; gap: 8px; }
.mv-picker__solo b { font-size: var(--mv-text-md); }
.mv-picker__solo span { font-size: var(--mv-text-xs); color: var(--mv-muted);
  font-family: var(--mv-font-num); }
.mv-picker__search { min-height: 36px; font-size: var(--mv-text); width: 240px; }
@media (max-width: 620px) {
  .mv-picker__box { min-width: 0; flex: 1; }
  .mv-picker__search { width: 100%; }
}

/* 確認担当者のチェック。給与ソフトへ入力する範囲を絞るための印 */
.mv-table th.chk, .mv-table td.chk { text-align: center; padding: 0 4px; }
.chkbtn {
  width: 22px; height: 22px; border-radius: 5px; cursor: pointer; line-height: 1;
  border: 1.5px solid var(--mv-rule); background: var(--mv-surface);
  color: var(--mv-green); font-size: var(--mv-text); font-weight: 700; padding: 0;
  transition: border-color var(--mv-dur) var(--mv-ease), background var(--mv-dur) var(--mv-ease);
}
.chkbtn:hover { border-color: var(--mv-green); }
.chkbtn.is-on { background: var(--mv-green-bg); border-color: var(--mv-green); }

/* --- 社員詳細ポップアップ（detail.js） ----------------------- */
.emp-overlay {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(7, 21, 35, .38); backdrop-filter: blur(2px); padding: var(--mv-space-4);
}
.emp-modal {
  width: min(680px, 100%); max-height: 88vh; overflow: auto;
  background: var(--mv-surface); border: 1px solid var(--mv-rule-soft);
  border-radius: var(--mv-radius-lg); box-shadow: var(--mv-shadow-lg);
}
.emp-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: flex-start; gap: var(--mv-space-3);
  padding: var(--mv-space-5) var(--mv-space-5) var(--mv-space-4);
  background: var(--mv-surface); border-bottom: 1px solid var(--mv-rule-soft);
}
.emp-head h2 { margin: 0; font-size: var(--mv-text-lg); }
.emp-head p { margin: 3px 0 0; font-size: var(--mv-text-sm); color: var(--mv-muted);
              font-variant-numeric: tabular-nums; }
.emp-head .mv-btn { margin-left: auto; flex: none; }
.emp-body { padding: var(--mv-space-4) var(--mv-space-5) var(--mv-space-5); }
.emp-sec { font-size: var(--mv-text-xs); color: var(--mv-muted); letter-spacing: .06em;
           margin: var(--mv-space-4) 0 var(--mv-space-2); }
.emp-sec:first-child { margin-top: 0; }
.emp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
            gap: var(--mv-space-2); margin: 0; }
.emp-stat { border: 1px solid var(--mv-rule-soft); border-radius: var(--mv-radius-sm);
            padding: 9px 11px; background: var(--mv-surface); }
.emp-stat.is-warn { background: var(--mv-yellow-bg); border-color: var(--mv-yellow); }
.emp-stat dt { font-size: var(--mv-text-xs); color: var(--mv-muted); margin-bottom: 2px; }
.emp-stat dd { margin: 0; font-family: var(--mv-font-num); font-size: var(--mv-text-xl); font-weight: 700;
               font-variant-numeric: tabular-nums; line-height: 1.2; }
.emp-stat dd small { font-size: var(--mv-text-xs); font-weight: 400; color: var(--mv-muted); margin-left: 2px; }
.emp-stat dd .na { color: var(--mv-rule); }
.emp-note { font-size: var(--mv-text-xs); color: var(--mv-muted); margin: 4px 0 0; line-height: 1.5; }
.emp-un { display: flex; gap: var(--mv-space-3); align-items: flex-start;
          border: 1px solid var(--mv-yellow); background: var(--mv-yellow-bg);
          border-radius: var(--mv-radius-sm); padding: 11px 13px; }
.emp-un__n { font-family: var(--mv-font-num); font-size: var(--mv-text-2xl); font-weight: 700; color: var(--mv-yellow-ink);
             font-variant-numeric: tabular-nums; line-height: 1.1; flex: none; }
.emp-un__n small { font-size: var(--mv-text-xs); font-weight: 400; margin-left: 2px; }
.emp-un__d { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.emp-date { font-family: var(--mv-font-num); font-size: var(--mv-text-sm); font-weight: 700; color: var(--mv-yellow-ink);
            background: var(--mv-surface); border: 1px solid var(--mv-yellow);
            border-radius: 999px; padding: 2px 9px; }
/* 社員名を押せることを見た目で示す */
.emp-link { background: none; border: 0; padding: 0; font: inherit; color: inherit;
            cursor: pointer; text-align: left; border-bottom: 1px dotted var(--mv-rule); }
.emp-link:hover { color: var(--mv-blue); border-bottom-color: var(--mv-blue); }

/* ナビの通知バッジ。自分に回ってきている件数を見落とさないため */
.app-nav a { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.nav-badge {
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--mv-red); color: var(--mv-paper); font-family: var(--mv-font-num);
  font-size: var(--mv-text-2xs); font-weight: 700; line-height: 17px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ロゴはメニューへ戻る導線を兼ねる */
.app-home { display: block; flex: none; border-radius: var(--mv-radius-sm); }
.app-home:hover { background: var(--mv-blue-tint); }
.app-home .app-logo { padding-right: var(--mv-space-3); }

/* 変更履歴。誰が何を変えたかを一本の流れで見せる */
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.feed li { display: flex; align-items: baseline; gap: var(--mv-space-2);
           padding: 7px 0; border-bottom: 1px solid var(--mv-rule-soft); font-size: var(--mv-text-sm); }
.feed li:last-child { border-bottom: 0; }
.feed-kind { flex: none; font-size: var(--mv-text-2xs); font-weight: 700; border-radius: 999px;
             padding: 2px 8px; border: 1px solid; }
.feed-kind--ok     { background: var(--mv-green-bg);  color: var(--mv-green); border-color: var(--mv-green); }
.feed-kind--blue   { background: var(--mv-blue-pale); color: var(--mv-blue-deep); border-color: var(--mv-blue-soft); }
.feed-kind--purple { background: var(--mv-purple-bg); color: var(--mv-purple-dark); border-color: var(--mv-purple); }
.feed-kind--warn   { background: var(--mv-yellow-bg); color: var(--mv-yellow-ink); border-color: var(--mv-yellow); }
.feed-text { flex: 1; min-width: 0; }
.feed time { flex: none; font-family: var(--mv-font-num); font-size: var(--mv-text-xs); color: var(--mv-muted);
             font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .feed li { flex-wrap: wrap; }
  .feed time { width: 100%; }
}

/* 画面上の断り書き。自動生成の出勤簿など、操作できない理由を伝える */
.mv-note {
  margin: 0 var(--mv-space-4) var(--mv-space-3);
  background: var(--mv-blue-wash); border: 1px solid var(--mv-blue-soft); color: var(--mv-blue-ink);
  border-radius: var(--mv-radius-sm); padding: 9px 12px; font-size: var(--mv-text-sm); line-height: 1.6;
}

/* 並べ替えできる列。Excel の並べ替えと同じ操作感を出す */
.is-sortable { cursor: pointer; user-select: none; }
.is-sortable:hover { color: var(--mv-blue); }
.is-sortable.is-sorted { color: var(--mv-blue); }
.sort-mark { font-size: var(--mv-text-3xs); margin-left: 2px; vertical-align: 1px; }

/* 部署ごとの提出状況。督促は部署単位で行うため、内訳を一目で出す */
.bydiv { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: var(--mv-space-3); }
.divchip { font-size: var(--mv-text-xs); border-radius: 999px; padding: 3px 10px; border: 1px solid;
  white-space: nowrap; font-family: var(--mv-font-body); }
.divchip b { font-family: var(--mv-font-num); font-variant-numeric: tabular-nums; }
.divchip.ok { background: var(--mv-green-bg); color: var(--mv-green); border-color: var(--mv-green); }
.divchip.warn { background: var(--mv-yellow-bg); color: var(--mv-yellow-ink); border-color: var(--mv-yellow); }
.divhint { font-size: var(--mv-text-xs); color: var(--mv-muted); margin-left: 4px; }

/* 会社カレンダーの期間まとめ指定 */
.rangebox { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 10px; border: 1px dashed var(--mv-rule); border-radius: var(--mv-radius-sm);
  margin-right: var(--mv-space-3); }
.rangebox .mv-input, .rangebox .mv-select { min-height: 32px; width: auto; font-size: var(--mv-text-sm); }
.rangebox .mv-label { margin: 0; white-space: nowrap; }

/* --- 入口の「いま手が要るもの」 ------------------------------------------
   件数が0でないものだけを大きな数字で出す。
   毎回9枚のタイルを読ませて自分の番を探させないため。 */
.todo { margin-bottom: var(--mv-space-4); }
.todo h2 {
  font-family: var(--mv-font-head); font-size: var(--mv-text-md); font-weight: 700;
  margin: 0 0 var(--mv-space-2); color: var(--mv-ink);
}
.todo-row { display: flex; flex-wrap: wrap; gap: var(--mv-space-2); }
.todo-item {
  display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit;
  background: var(--mv-surface); border: 1px solid var(--mv-rule-soft);
  border-left-width: 4px; border-radius: var(--mv-radius);
  padding: 12px var(--mv-space-4); min-width: 200px; flex: 1 1 200px;
  box-shadow: var(--mv-shadow-sm);
  transition: border-color var(--mv-dur) var(--mv-ease),
              box-shadow var(--mv-dur) var(--mv-ease), transform var(--mv-dur) var(--mv-ease);
}
.todo-item:hover { box-shadow: var(--mv-shadow); transform: translateY(-1px); }
.todo-item:focus-visible { outline: var(--mv-focus); outline-offset: var(--mv-focus-offset); }
.todo-n {
  font-family: var(--mv-font-num); font-size: var(--mv-text-2xl); font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap;
}
.todo-n small { font-size: var(--mv-text-xs); font-weight: 400; color: var(--mv-muted); margin-left: 2px; }
.todo-label { font-size: var(--mv-text-sm); color: var(--mv-muted); line-height: 1.5; }
/* 色は状態の意味に合わせる。act=自分の番 / warn=待ち / stop=期限超過 */
.todo-item--act  { border-left-color: var(--mv-blue); }
.todo-item--act  .todo-n { color: var(--mv-blue); }
.todo-item--warn { border-left-color: var(--mv-yellow); }
.todo-item--warn .todo-n { color: var(--mv-yellow-ink); }
.todo-item--stop { border-left-color: var(--mv-red); }
.todo-item--stop .todo-n { color: var(--mv-red); }
@media (max-width: 640px) { .todo-item { min-width: 0; flex-basis: 100%; } }

/* 工番は必須。入っていない日は一目で分かるようにする（依頼書 月報入力 A7） */
.proj-toggle.is-missing { border-color: var(--mv-red); background: var(--mv-red-bg); }
.proj-toggle.is-missing .none { color: var(--mv-red); font-weight: 700; }