* { box-sizing: border-box; }

[hidden] { display: none !important; }

/* The palette, the page and the top bar are in shared.css. */

/* No-JavaScript notice. Page content is hidden too, so screen readers skip
   it. */
.js-required { display: none; }
.js-required-card p { margin: 0; color: var(--muted); }
.js-off-only,
.js-stalled-only { display: none; }

html.no-js .js-required,
html.js-stalled .js-required {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg);
}
html.no-js body > .topbar,
html.no-js body > main,
html.js-stalled body > .topbar,
html.js-stalled body > main { display: none; }

html.no-js .js-off-only,
html.js-stalled .js-stalled-only { display: block; }

.js-required-card {
  max-width: 460px;
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
}
.js-required-card h1 { margin: 0 0 10px; }

main { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }

h1 { font-size: 1.5rem; margin: 0 0 4px; }
.sub { color: var(--muted); margin: 0 0 20px; }

/* Messages */
.messages { list-style: none; padding: 0; margin: 0 0 16px; }
.msg { padding: 10px 14px; border-radius: 6px; margin-bottom: 8px; }
.msg-success { background: var(--success-bg); border: 1px solid var(--success-line); }
.msg-error   { background: var(--error-bg); border: 1px solid var(--error-line); }
.msg-warning { background: var(--warning-bg); border: 1px solid var(--warning-line); }
.msg-info    { background: var(--info-bg); border: 1px solid var(--info-line); }

/* Registry table */
table.registry {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
table.registry th,
table.registry td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.registry th {
  background: var(--head);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
table.registry tr:last-child td { border-bottom: 0; }
.ref { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

/* Login and error pages */
.login-card,
.error-card {
  max-width: 380px;
  margin: 80px auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px;
}
.login-card form { display: flex; flex-direction: column; gap: 6px; }
.login-card label { font-size: .85rem; color: var(--muted); margin-top: 8px; }
.login-card input {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}
.login-card button { margin-top: 18px; width: 100%; }
.error { color: var(--danger); font-size: .9rem; }

/* Sign in with Microsoft, in Microsoft's button colours. */
.login-card .microsoft {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid #8c8c8c;
  border-radius: 6px;
  color: #5e5e5e;
  font-weight: 600;
  text-decoration: none;
}
.login-card .microsoft:hover { background: #f3f3f3; }
/* The "or" line between the two sign-in options. */
.login-card .or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 4px;
  color: var(--muted);
  font-size: .85rem;
}
.login-card .or::before,
.login-card .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* Two-step sign-in */
.setup-steps { padding-left: 20px; }
.setup-steps li + li { margin-top: 10px; }
.qr-code svg { display: block; margin: 10px 0; }
.setup-key { word-spacing: .3em; }
.backup-codes {
  columns: 2;
  padding: 0;
  list-style: none;
  font: 1.05rem/1.8 ui-monospace, monospace;
}
.login-card a.primary {
  display: block;
  margin-top: 18px;
  text-align: center;
  text-decoration: none;
}

/* ---- Registry ---- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.page-head .sub { margin-bottom: 6px; }
.ghost {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 12px;
  font: inherit;
  font-size: .85rem;
  color: var(--ink);
  cursor: pointer;
}
.ghost:hover { border-color: var(--accent); color: var(--accent); }

details.cat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}
details.cat > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  cursor: pointer;
  list-style: none;
  background: var(--head);
  user-select: none;
}
details.cat > summary::-webkit-details-marker { display: none; }
details.cat > summary::before {
  content: "\25B8";
  color: var(--muted);
  transition: transform .12s ease;
}
details.cat[open] > summary::before { transform: rotate(90deg); }
.cat-code {
  font-weight: 700;
  color: var(--accent);
  min-width: 42px;
  font-variant-numeric: tabular-nums;
}
.cat-name { font-weight: 600; }
.cat-meta { margin-left: auto; color: var(--muted); font-size: .85rem; }

/* Below 980px the table scrolls sideways. */
.registry-scroll { overflow-x: auto; }

details.cat table.registry {
  border: 0;
  border-radius: 0;
  min-width: 980px;
  /* Fixed layout keeps columns aligned across the per-category tables. */
  table-layout: fixed;
}

/* Column widths. Only Name is unset, so it takes the rest. */
.c-ref { width: 76px; text-align: center; }
.c-owner { width: 140px; }
.c-status { width: 130px; text-align: center; }
.c-appl { width: 130px; }
.c-date { width: 130px; }

/* Fixed columns can't grow, so long words break. */
details.cat table.registry td { overflow-wrap: break-word; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* Status badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  margin: 0 0 4px;
}
.badge-not_started   { background: #eef0f3; color: #4b5563; border-color: #dcdfe4; }
.badge-in_progress   { background: var(--warning-bg); color: var(--warning-ink); border-color: var(--warning-line); }
.badge-implemented   { background: var(--success-bg); color: var(--success-ink); border-color: var(--success-line); }

.empty {
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 40px;
  text-align: center;
}

/* ---- Control detail ---- */

.crumb { margin: 0 0 12px; font-size: .9rem; }
.crumb a { color: var(--accent); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

table.registry a { color: var(--accent); text-decoration: none; }
table.registry a:hover { text-decoration: underline; }
table.registry a.plain { color: var(--ink); }

.ref-big { color: var(--accent); font-variant-numeric: tabular-nums; }

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}
@media (max-width: 820px) {
  .detail-grid { grid-template-columns: 1fr; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}
.panel h2 {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 14px;
}
.small { font-size: .85rem; }

/* Definition lists */
dl.meta { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; }
dl.meta dt { font-size: .85rem; }
dl.meta dd { margin: 0; }

/* Forms */
.stack { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
/* A grid, so wrapped fields keep the same width. */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
/* One height for selects and inputs; date inputs are otherwise taller. */
.field-row select,
.field-row input { height: 40px; }
.field label { font-size: .85rem; }
.field input, .field select, .field textarea,
.mode-row select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  background: #fff;
  width: 100%;
}
.mode-row select { width: auto; min-width: 280px; }
.field textarea { resize: vertical; }
.field ul.errorlist {
  margin: 0; padding: 0; list-style: none;
  color: var(--danger); font-size: .82rem;
}
.actions { display: flex; align-items: center; gap: 14px; }
.primary {
  padding: 9px 18px;
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
}
.primary:hover { background: var(--accent-dark); }

/* Control description */
.description { margin-bottom: 16px; }
.description p { margin: 0; }
.description p + p { margin-top: 8px; }

/* Document areas */
.docs { margin-bottom: 16px; }
.docs-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}
.docs-head h2 { margin-bottom: 2px; }
.docs-head .sub { margin: 0; }
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc {
  padding: 10px 0;
}
.doc-main { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.doc-title { font-weight: 600; }
details.versions { margin-top: 8px; }
details.versions > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: .85rem;
}
details.versions table.registry { margin-top: 8px; }
.empty-inline { margin: 0; }

/* Admin-only fields shown but not editable */
.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  background: var(--disabled);
  color: var(--muted);
  cursor: not-allowed;
}

/* ---- Documents ---- */

/* Pinned right, so actions line up on every row. */
.doc-actions {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-left: auto;
  justify-content: flex-end;
}
.doc-actions a { color: var(--accent); text-decoration: none; font-size: .85rem; }
.doc-actions a:hover { text-decoration: underline; }
.doc-actions form { margin: 0; display: inline; }
.shared { font-style: italic; }
.c-actions { width: 190px; }

.danger-link {
  background: none; border: 0; padding: 0;
  color: var(--danger); font: inherit; font-size: .85rem;
  cursor: pointer; text-decoration: underline;
}

.upload-block {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.upload-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Paired buttons: same size, different weight. */
.upload-actions .ghost,
.upload-actions .primary {
  padding: 9px 18px;
  font-size: inherit;
  line-height: 1.5;
}
.upload-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  max-width: 640px;
}
.upload-form label { font-size: .85rem; color: var(--muted); }
.upload-form p { margin: 0; }
.upload-form input[type="file"] { font-size: .85rem; }

/* Confidential files warning, at the top of the upload box. */
.upload-form .confidential-warning {
  background: var(--warning-bg);
  border: 1px solid var(--warning-line);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 6px;
  font-size: .9rem;
}

/* Duplicate warnings */
.dupe-notice {
  background: var(--warning-bg);
  border: 1px solid var(--warning-line);
  border-radius: 8px;
  padding: 12px 14px;
}
.dupe-notice p { margin: 0 0 8px; }
.dupe-notice p:last-child { margin-bottom: 0; }
.form-error {
  color: var(--danger);
  font-size: .85rem;
  margin-top: 4px;
}

.notes-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Per-document "Upload new version" panel */
.linkact {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  text-decoration: none;
}
.linkact:hover { color: var(--accent-dark); }
.newver-panel { margin-top: 8px; }
.newver-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding: 12px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  max-width: 640px;
}
.newver-form label { font-size: .85rem; color: var(--muted); }
.newver-form input[type="text"] {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}
.newver-form p { margin: 0; }

/* Delete confirmation */
.danger-button {
  padding: 9px 18px;
  background: var(--danger);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
}
.danger-button:hover { background: var(--danger-dark); }

/* Paired panel buttons, matched in height. */
.panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.panel-actions .ghost,
.panel-actions .primary {
  padding: 9px 18px;
  font-size: inherit;
  line-height: 1.5;
}

.mode-row { margin-bottom: 12px; }

/* One save bar for the whole page. */
.page-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

/* Why Save is disabled, on its own line. */
.save-reason {
  flex-basis: 100%;
  margin: 0;
  color: var(--danger);
  font-size: .85rem;
}

.unsaved-flag {
  background: var(--warning-bg);
  border: 1px solid var(--warning-line);
  color: var(--warning-ink);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .82rem;
  font-weight: 600;
}

.saved-flag {
  background: var(--success-bg);
  border: 1px solid var(--success-line);
  color: var(--success-ink);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .82rem;
  font-weight: 600;
}

.primary:disabled {
  background: #a8b6c4;
  cursor: not-allowed;
}

.category-line {
  margin: 0 0 2px;
  font-size: .9rem;
}

/* Inline delete confirmation */
.confirm-panel,
.confirm-panel-inner {
  background: var(--error-bg);
  border: 1px solid var(--error-line);
  border-radius: 6px;
  padding: 12px 14px;
  margin-top: 8px;
  max-width: 640px;
}
.confirm-panel p,
.confirm-panel-inner p { margin: 0 0 8px; }
tr.confirm-row > td { background: #fff; }

/* Amber: unlinking can be undone. */
.warn-link {
  background: none;
  border: 0;
  padding: 0;
  color: #b26a00;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  text-decoration: none;
}
.warn-link:hover { color: #8a5200; }
.danger-link.disabled,
.warn-link.disabled {
  color: var(--muted);
  text-decoration: none;
  cursor: not-allowed;
  opacity: .65;
  border-bottom: 1px dotted var(--muted);
}
.warn-button {
  padding: 9px 18px;
  background: #b26a00;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
}
.warn-button:hover { background: #8a5200; }
.confirm-panel.soft {
  background: var(--warning-bg);
  border-color: var(--warning-line);
}

.browse-panel {
  padding: 14px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.browse-panel > p { margin: 0 0 10px; }
.browse-panel table.registry { margin-bottom: 10px; }
.browse-panel form { margin: 0; }

.ghost:disabled {
  color: var(--muted);
  border-color: var(--line);
  background: var(--disabled);
  cursor: not-allowed;
}

/* Change log. Its content is out of flow, so the panel takes its height from
   the Control & Ownership panel and the table scrolls. */
.panel.change-panel {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.change-inner {
  position: absolute;
  inset: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.change-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.change-scroll table.registry {
  border: 0;
  border-radius: 0;
  font-size: .85rem;
  /* No clipping, or the sticky headings stop sticking. */
  overflow: visible;
}
.change-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  /* Drawn inside the cell, so the line stays with the sticky headings. */
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--line);
}
.change-log td { vertical-align: top; }

.change-log th, .change-log td {
  padding: 6px 8px;
  white-space: nowrap;
}
.change-detail > summary { cursor: pointer; }
.change-detail[open] { min-width: 16rem; white-space: normal; }

/* "Show more"/"Show less", pinned left so it stays put when scrolled sideways. */
.change-more {
  position: sticky;
  left: 0;
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.linkact:disabled,
.linkact:disabled:hover {
  color: var(--muted);
  cursor: default;
}

/* Change log header: title on the left, expand toggle on the right. */
.change-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.change-head h2 { margin-bottom: 14px; }

/* Expanded: the log overflows right into the page margin. Its width is set in
   script. */
.detail-grid.change-expanded .change-panel {
  max-width: none;
  z-index: 2;
}

/* Stacked: the log sizes to its content, up to a maximum height. Placed after
   the rules it overrides. */
@media (max-width: 820px) {
  .change-inner { position: static; }
  .change-scroll { max-height: 60vh; }
}

/* ---- Registry progress ---- */

.progress {
  position: relative;
  height: 20px;
  width: 320px;
  max-width: 100%;
  background: #e8ebef;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.progress-bar {
  height: 100%;
  background: var(--success-ink);
  transition: width .2s ease;
}
.progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink);
}

/* Slim bar in each category header */
.cat-progress {
  width: 90px;
  height: 6px;
  background: #dfe3e8;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
}
.cat-progress-bar {
  display: block;
  height: 100%;
  background: var(--success-ink);
}

/* Rows outside the user's assignments. */
tr.not-mine td { background: #fbfcfd; }
a.ghost { text-decoration: none; display: inline-flex; align-items: center; }

/* Clauses and Annex A sections, each with its progress bar and buttons. */
.registry-section + .registry-section { margin-top: 32px; }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.section-head h2 { font-size: 1.15rem; margin: 0 0 4px; }
.section-head .sub { margin-bottom: 6px; }
.list-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* Registry table: everything but Name and Owner is centred. */
table.registry th.center, table.registry td.center { text-align: center; }

.review-date {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.review-date.fresh { background: var(--success-bg); color: var(--success-ink); border: 1px solid var(--success-line); }
.review-date.stale { background: var(--warning-bg); color: var(--warning-ink); border: 1px solid var(--warning-line); }

/* Subsections inside the governing documents panel */
details.subsection { margin-bottom: 14px; }
details.subsection:last-child { margin-bottom: 0; }
details.subsection > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 8px 0;
}
details.subsection > summary::-webkit-details-marker { display: none; }
details.subsection > summary::before {
  content: "\25B8";
  color: var(--muted);
  transition: transform .12s ease;
}
details.subsection[open] > summary::before { transform: rotate(90deg); }
.subsection-title { font-weight: 600; }

/* Parts that don't apply to an out-of-scope control. */
.excluded {
  opacity: .5;
  filter: grayscale(1);
}
.excluded, .excluded * { cursor: not-allowed; }

/* Disabled by exclusion: faded like the rest of the section. */
.field.excluded input:disabled,
.field.excluded select:disabled,
.field.excluded textarea:disabled {
  background: #fff;
  color: initial;
  /* Undo the browser's own fading of disabled fields. */
  opacity: 1;
}

tr.row-excluded td { color: var(--muted); }
/* Overrides table.registry a.plain. */
table.registry tr.row-excluded td a,
table.registry tr.row-excluded td a.plain { color: var(--muted); }

/* Duplicate offer, shown inside the panel the upload came from. */
.dupe-inline {
  background: var(--warning-bg);
  border: 1px solid var(--warning-line);
  border-radius: 6px;
  padding: 12px 14px;
  margin-top: 12px;
  max-width: 640px;
}
.dupe-inline p { margin: 0 0 8px; }
.dupe-inline .panel-actions { margin-top: 4px; }

/* Hide the upload fields behind a duplicate offer; hidden inputs still submit. */
form.has-dupe > *:not(.dupe-notice) { display: none; }

td.doc-actions.center { justify-content: center; }
td.doc-actions.center .doc-actions,
table.registry td.doc-actions.center { margin-left: auto; margin-right: auto; }