:root {
  --ink-0: #ffffff;
  --ink-50: #fafafb;
  --ink-200: #e4e6ea;
  --ink-400: #6e727c;
  --ink-600: #3a3d45;
  --ink-900: #1a1b1e;
  --blue-500: #1757e0;
  --blue-600: #1046b8;
  --shu-500: #c9342c;
  --shu-600: #b3271f;
  --green-600: #147a54;
  --amber-700: #8a5a00;

  --stack-s: 8px;
  --stack-m: 16px;
  --stack-l: 32px;
  --inset-m: 16px;
  --inset-l: 24px;

  --font-ui: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN",
             "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
  --font-mono: ui-monospace, Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--ink-900);
  font-family: var(--font-ui);
  line-height: 1.75;
}

.shell {
  width: min(1080px, calc(100% - 32px));
  margin-inline: auto;
  padding-block: var(--stack-l);
  display: flex;
  flex-direction: column;
  gap: var(--stack-l);
}

header.bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--stack-m);
  padding-block-end: var(--stack-s);
  border-block-end: 1px solid var(--ink-200);
}

h1 { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
h2 { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
p  { margin: 0; }
.muted { color: var(--ink-400); font-size: 0.9rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.94rem; line-height: 1.5; }
caption { text-align: start; padding-block-end: var(--stack-s); color: var(--ink-400); font-size: 0.9rem; }
th, td {
  text-align: start;
  padding: 12px 10px;
  border-block-end: 1px solid var(--ink-200);
  vertical-align: top;
}
th { font-weight: 700; color: var(--ink-600); white-space: nowrap; }
tbody tr:hover { background: var(--ink-50); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.url { word-break: break-all; color: var(--ink-600); }
.host { font-family: var(--font-mono); color: var(--ink-900); white-space: nowrap; }

.chip {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 999px;
  border: 1px solid var(--ink-200);
  font-size: 0.82rem;
  line-height: 1.6;
  white-space: nowrap;
}
.chip-active  { color: var(--green-600); border-color: var(--green-600); }
.chip-revoked { color: var(--ink-400); }
.chip-expired { color: var(--amber-700); border-color: var(--amber-700); }

a { color: var(--blue-500); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}

.btn {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--ink-200);
  border-radius: 4px;
  background: var(--ink-0);
  color: var(--ink-900);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--blue-500); border-color: var(--blue-500); color: var(--ink-0); }

/* 朱は 1 画面に 1 点。失効確認の実行ボタンだけに使う */
.btn-danger { background: var(--shu-500); border-color: var(--shu-500); color: var(--ink-0); }
.btn-danger:hover { background: var(--shu-600); border-color: var(--shu-600); }

.panel {
  border: 1px solid var(--ink-200);
  padding: var(--inset-l);
  display: flex;
  flex-direction: column;
  gap: var(--stack-m);
}
.danger-note {
  border-inline-start: 3px solid var(--shu-500);
  padding-inline-start: var(--inset-m);
  color: var(--ink-900);
}
/* 作成成功の合図。緑=「有効」と同じ意味色を控えめに 1 本の罫で使う */
.ok-note {
  border-inline-start: 3px solid var(--green-600);
  padding-inline-start: var(--inset-m);
  color: var(--ink-900);
}

dl.facts { margin: 0; display: grid; grid-template-columns: 8rem 1fr; gap: 10px var(--stack-m); }
dl.facts dt { color: var(--ink-400); font-size: 0.9rem; }
dl.facts dd { margin: 0; word-break: break-all; }

.actions { display: flex; gap: var(--stack-m); align-items: center; flex-wrap: wrap; }
form.inline { display: contents; }

label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: var(--ink-600); }
input[type="email"], input[type="url"], input[type="text"] {
  padding: 9px 12px;
  border: 1px solid var(--ink-200);
  border-radius: 4px;
  font: inherit;
  min-width: 22rem;
  max-width: 100%;
}

.empty { color: var(--ink-400); padding-block: var(--stack-l); }

/* 組織切替。所属が 2 件以上のときだけ出る。現在の組織は墨で、他は紺青のリンク */
.orgnav {
  display: flex;
  align-items: baseline;
  gap: var(--stack-m);
  flex-wrap: wrap;
  padding-block-end: var(--stack-s);
  border-block-end: 1px solid var(--ink-200);
  font-size: 0.94rem;
  color: var(--ink-400);
}
.orgnav .org-current { color: var(--ink-900); font-weight: 700; }

@media (max-width: 720px) {
  dl.facts { grid-template-columns: 1fr; gap: 4px; }
  th, td { padding: 10px 6px; }
}