:root {
  /* Same palette as the PAL Backup Decryption UI, so the two internal tools look related. */
  --ctc-blue: #2dc6d6;
  --ctc-blue-dark: #24abb9;
  --on-blue: #161615;
  --ink: #1a1d21;
  --ink-soft: #5b636c;
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-soft: #fcfcfd;
  --border: #e4e7eb;
  --danger: #c0362c;
  --danger-bg: #fdecea;
  --success: #1f7a3d;
  --success-bg: #eaf6ee;
  --warning: #8a5a00;
  --warning-bg: #fff6e5;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

/* The [hidden] attribute must win over element display rules (e.g. .btn-primary sets
   display:inline-flex, which would otherwise keep a hidden button visible). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 28px;
  height: 64px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }

/* The image is 224x95, which on its own would be half again as tall as the 64px header and shove
   everything around it out of place. Constraining the height and letting the width follow keeps the
   aspect ratio; the width/height attributes in the markup reserve the right box before it loads. */
.brand-logo {
  height: 48px;
  width: auto;
  display: block;
}

.brand-title {
  font-weight: 600;
  font-size: 16px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  white-space: nowrap;
}

.session { display: flex; align-items: center; gap: 16px; font-size: 14px; min-width: 0; }

.registry-picker { display: flex; align-items: center; gap: 8px; min-width: 0; }
.registry-label { color: var(--ink-soft); white-space: nowrap; }

#registrySelect {
  font-family: inherit;
  font-size: 14px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  max-width: 220px;
}
#registrySelect:focus-visible { outline: 2px solid var(--ctc-blue); outline-offset: 1px; }

.user-name {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.signout {
  border: none;
  background: none;
  padding: 0;
  color: var(--ctc-blue);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.signout:hover { text-decoration: underline; }

/* ── Layout ─────────────────────────────────────────────── */
.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px 20px 24px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}
.card-narrow { max-width: 460px; margin: 32px auto 0; padding: 36px; }

h1 { font-size: 24px; margin: 0 0 8px; }
h2 { font-size: 17px; margin: 0; }
.lead { color: var(--ink-soft); margin: 0 0 24px; }

/* ── Form fields ────────────────────────────────────────── */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.field input:focus-visible { outline: 2px solid var(--ctc-blue); outline-offset: 1px; border-color: var(--ctc-blue); }

/* ── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 14px;
}
.crumb {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--ctc-blue);
  font-weight: 600;
  cursor: pointer;
}
.crumb:hover { text-decoration: underline; }
.crumb-current {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 13px;
}
.crumb-sep { color: var(--border); }

/* ── Full artifact reference (copy for a shell) ──────────── */
.reference {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -6px 0 18px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
}

.reference-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  /* A long repository path must not push the copy button off the row. */
  overflow-x: auto;
  white-space: nowrap;
  /* Selectable as one unit, so a manual Ctrl+C picks up exactly the reference. */
  user-select: all;
}

.reference-copy { flex: 0 0 auto; }

/* ── Panels & sections ──────────────────────────────────── */
.panel { display: flex; flex-direction: column; gap: 18px; }

.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}
.section-head .grow { flex: 1 1 auto; min-width: 0; }
.section-sub { color: var(--ink-soft); font-size: 13px; margin: 2px 0 0; }

.section-body { padding: 4px 0; }
.section-body.padded { padding: 20px; }

/* ── Lists ──────────────────────────────────────────────── */
.list { list-style: none; margin: 0; padding: 0; }

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.list > li:last-child .row { border-bottom: none; }
.row:hover { background: #f2fbfc; }
.row:focus-visible { outline: 2px solid var(--ctc-blue); outline-offset: -2px; }

.row-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-name.mono { font-family: var(--mono); font-weight: 500; font-size: 13.5px; }
.row-meta { color: var(--ink-soft); font-size: 13px; white-space: nowrap; }
.row-chevron { color: var(--ink-soft); flex: 0 0 auto; }

/* ── File table ─────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

table.files {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.files th,
table.files td {
  text-align: left;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.files th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-weight: 700;
}
table.files tr:last-child td { border-bottom: none; }
table.files td.path {
  font-family: var(--mono);
  white-space: normal;
  word-break: break-all;
  min-width: 240px;
}
table.files td.numeric { text-align: right; }
table.files td.type { color: var(--ink-soft); }

/* ── Badges & metadata ──────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: #e6f8fa;
  color: #0f6b75;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.badge-main { background: var(--ctc-blue); color: var(--on-blue); }

.digest {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
}

dl.meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: 0;
  font-size: 13px;
}
dl.meta dt { color: var(--ink-soft); }
dl.meta dd { margin: 0; font-family: var(--mono); word-break: break-all; }

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: 10px;
  background: var(--ctc-blue);
  color: var(--on-blue);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-primary:hover:not(:disabled) { background: var(--ctc-blue-dark); color: #fff; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: var(--ctc-blue); color: #0f6b75; background: #f2fbfc; }
.btn-accent { background: var(--ctc-blue); border-color: var(--ctc-blue); color: var(--on-blue); }
.btn-accent:hover { background: var(--ctc-blue-dark); border-color: var(--ctc-blue-dark); color: #fff; }
.btn-icon { padding: 5px 9px; font-size: 12px; }

.filter {
  font-family: inherit;
  font-size: 13.5px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  min-width: 180px;
}
.filter:focus-visible { outline: 2px solid var(--ctc-blue); outline-offset: 1px; }

/* ── Messages ───────────────────────────────────────────── */
.message {
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
}
.message.error { background: var(--danger-bg); color: var(--danger); }
.message.success { background: var(--success-bg); color: var(--success); }
.message.warning { background: var(--warning-bg); color: var(--warning); }

#browseMessage { margin: 0 0 18px; }

.notice {
  margin: 0;
  padding: 12px 20px;
  background: var(--warning-bg);
  color: var(--warning);
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(22, 22, 21, 0.25);
  border-top-color: var(--on-blue);
  border-radius: 50%;
  display: none;
  animation: spin 0.7s linear infinite;
}
.btn-primary.busy .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.loading {
  padding: 28px 20px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
}

/* Labels a control for assistive tech without taking up visual space. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Manual repository entry ────────────────────────────── */
.manual { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 20px; border-top: 1px solid var(--border); }
.manual input { flex: 1 1 220px; }

/* ── Footer ─────────────────────────────────────────────── */
.page-footer {
  text-align: center;
  margin-top: 28px;
  font-size: 13px;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .site-header { padding: 0 16px; }
  .brand-title, .registry-label, .user-name { display: none; }
  .card-narrow { padding: 24px; }
  .row, .section-head, table.files th, table.files td { padding-left: 14px; padding-right: 14px; }
}