@charset "utf-8";
/* HDS ベース：リセット・タイポグラフィ・ヘッダ・レイアウト骨格 */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs-base); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--font-body); line-height: var(--lh-base);
  color: var(--ink); background: var(--canvas);
  display: flex; flex-direction: column;
}
a { color: var(--primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.35; font-weight: 700; color: var(--ink); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--sp-3); }
small, .small { font-size: var(--fs-sm); }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-4); }
main { flex: 1; padding: var(--sp-5) 0 var(--sp-7); }

/* ---- ヘッダ ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper); border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -3px 0 var(--primary);      /* 緑の細い帯 */
}
.nav { height: var(--header-h); display: flex; align-items: center; gap: var(--sp-4); }
.brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink); font-weight: 700; }
.brand:hover { text-decoration: none; }
.brand img { width: auto; }
.brand__mark { height: 34px; }
.brand__word { height: 17px; }
.brand__app { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; padding-left: var(--sp-2); border-left: 1px solid var(--line-strong); }
/* アプリの切り替え（js/nav.js） */
.appmenu { position: relative; flex: none; margin-left: var(--sp-2); }
.appmenu__btn, .search-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink-2);
  font: inherit; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; }
.appmenu__btn:hover, .search-btn:hover, .appmenu__btn[aria-expanded="true"] { background: var(--primary-tint); color: var(--primary-deep); }
.appmenu__btn i { color: var(--primary-dark); }
.appmenu__panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: min(880px, calc(100vw - 32px));
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover); }
.appmenu__panel[hidden] { display: none; }
.appmenu__title { font-size: var(--fs-xs); font-weight: 700; color: var(--primary-dark); letter-spacing: .06em;
  margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.appmenu__item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius);
  color: var(--ink); font-size: var(--fs-sm); }
.appmenu__item i { width: 1.2em; text-align: center; color: var(--primary-dark); }
.appmenu__item:hover { background: var(--primary-tint); text-decoration: none; }
/* 組織の切り替え（hds/companies.py）。ボタンとヘッダの下の線を組織の色にする */
.compmenu__btn { border-color: var(--company-color); }
.compmenu__name { max-width: 10em; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--ink); }
/* アイコン画像を決めた組織（hds/companies.py）。地は白、縁を組織の色に */
.compmenu__mark.has-icon, .company-pick__mark.has-icon { background: #fff; box-shadow: inset 0 0 0 1px var(--company-color); overflow: hidden; }
.compmenu__mark.has-icon img, .company-pick__mark.has-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.compmenu__btn .fa-chevron-down { font-size: 10px; color: var(--muted); }
.compmenu__label { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 6px; margin-left: var(--sp-2);
  border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--fs-sm); --company-color: var(--primary); }
.compmenu__label .compmenu__name { white-space: nowrap; }
.compmenu__mark { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  background: var(--company-color); color: #fff; font-size: 12px; font-weight: 700; }
.appmenu__panel.compmenu__panel { display: block; width: min(320px, calc(100vw - 32px)); padding: var(--sp-3); }
.appmenu__panel.compmenu__panel[hidden] { display: none; }
.compmenu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: var(--radius);
  background: none; font: inherit; font-size: var(--fs-sm); color: var(--ink); text-align: left; cursor: pointer; }
.compmenu__item:hover:not([disabled]) { background: var(--primary-tint); }
.compmenu__item[disabled] { cursor: default; }
.compmenu__item .fa-check { margin-left: auto; color: var(--primary-dark); }
.compmenu__text { display: flex; flex-direction: column; min-width: 0; }
.compmenu__text small { color: var(--muted); font-size: var(--fs-xs); }
.site-header--company { box-shadow: inset 0 -3px 0 var(--company-color); }
/* どこからでも探す（ヘッダの「探す」） */
.search-btn { flex: none; color: var(--muted); }
.search-btn kbd, .palette kbd { font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--paper-alt); color: var(--muted); }

/* 足跡（たどってきた画面。js/app.js）。長い名前は省略して、全体は title で見せる */
.trail { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; margin-left: var(--sp-3);
  font-size: var(--fs-sm); overflow: hidden; white-space: nowrap; }
.trail__home { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius);
  color: var(--primary-dark); }
.trail__home:hover { background: var(--primary-tint); text-decoration: none; }
.trail__item, .trail__more { position: relative; flex: 0 1 auto; min-width: 2.5em; max-width: 16em; overflow: hidden;
  text-overflow: ellipsis; padding: 4px 8px 4px 20px; border-radius: var(--radius); color: var(--ink-2); }
.trail__item::before, .trail__more::before { content: '›'; position: absolute; left: 7px; color: var(--muted); }
a.trail__item:hover { background: var(--paper-alt); text-decoration: none; }
.trail__item.is-current { color: var(--primary-deep); font-weight: 700; flex-shrink: 0; max-width: 20em; }
.trail__more { flex: none; min-width: 0; background: none; border: 0; font: inherit; cursor: pointer; }
.trail__more:hover { background: var(--paper-alt); }
.nav-user { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-2); }
.nav-user__me { display: flex; align-items: center; gap: var(--sp-2); color: inherit; text-decoration: none; border-radius: 999px; padding: 2px 8px 2px 2px; }
.nav-user__me:hover { background: var(--primary-tint); color: var(--primary-deep); }
.nav-user__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px;
}

/* ---- フッタ ---- */
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); padding: var(--sp-4) 0; }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.site-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.site-footer a, .site-footer .linkbtn { color: var(--muted); }
/* 見た目はリンクのボタン（モーダルを開くだけのもの） */
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--primary-deep); cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
/* クレジット（提供元の説明。templates/support/_credit_modal.html） */
.modal.credit { width: min(480px, calc(100vw - 32px)); max-width: none; }
.credit__logo { text-align: center; margin: var(--sp-2) 0 var(--sp-4); }
.credit__logo img { display: block; margin: 0 auto; width: min(300px, 85%); height: auto; }
.credit__lead { font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.credit__op { margin-top: var(--sp-4); }
.credit__copy { margin-top: var(--sp-4); text-align: center; color: var(--muted); font-size: var(--fs-xs); }
.site-footer a:hover { color: var(--primary-deep); }

/* ---- ページ見出し行 ---- */
.page-head { display: flex; align-items: flex-end; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.page-head__title { display: flex; flex-direction: column; gap: 2px; }
.page-head__eyebrow { font-size: var(--fs-xs); color: var(--primary-dark); font-weight: 700; letter-spacing: .06em; }
.page-head__actions { margin-left: auto; display: flex; gap: var(--sp-2); align-items: stretch; }
.page-head__actions > form { display: flex; }

/* ---- 2 カラム（詳細画面）---- */
.cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }

@media (max-width: 860px) {
  .cols { grid-template-columns: 1fr; }
  .brand__app, .appmenu__btn-label, .search-btn__label, .search-btn kbd { display: none; }
  /* 狭い画面では、ひとつ前の画面だけ（今の画面は見出しで分かる） */
  .trail > .trail__item:not(:nth-last-child(2)), .trail > .trail__more { display: none; }
  .trail > .trail__item:nth-last-child(2) { max-width: none; flex-shrink: 1; }
  .nav-user__name { display: none; }
}