/* SCML Reader — a compact, read-only surface. The shared frame (reset, header, buttons, small
   controls, theme toggle) comes from common/shell.css; this file only adds the reader-specific
   surfaces: the trust badge, the side panel of cards, the meta/signers lists, the preview stage,
   the dropzone and the decrypt dialog. Token-based and theme-aware via common/tokens.css. */

#speak.speaking { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---- Trust badge (the Acrobat-style provenance indicator) ---- */
.trust {
  font-size: .82rem;
  font-weight: 600;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.trust-empty { color: var(--text-dim); background: var(--muted-bg); font-weight: 500; }
.trust-verified { color: var(--ok); background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.trust-unsigned { color: var(--text-dim); background: var(--muted-bg); }
.trust-invalid { color: var(--warn); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.rights-note { font-size: .78rem; color: var(--text-dim); margin-left: .4rem; }

/* ---- Layout ---- */
main {
  flex: 1;
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 0;
}
.panel {
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: .9rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: .75rem;
}
.card-title {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  margin-bottom: .55rem;
}
/* The reader's side-panel control is a stacked label + field (unlike the inline header controls). */
.ctl { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; color: var(--text-dim); margin-bottom: .6rem; }
.ctl select {
  font: inherit;
  font-size: .85rem;
  color: var(--text);
  padding: .35rem .4rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.ctl-row { display: flex; gap: .35rem; align-items: stretch; }
.ctl-row select { flex: 1; min-width: 0; }
.ctl-row input[type="range"] { flex: 1; min-width: 0; align-self: center; }
.rate-val { align-self: center; min-width: 2.6rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: .82rem; }
.ctl select:disabled, .ctl option:disabled { color: var(--text-dim); }
/* Channel options: the labelled toggle stretches under its label; Download is the block action below them. */
.ctl > .btn-sm { align-self: stretch; }
.ctl-download { display: block; width: 100%; margin: .1rem 0 .6rem; }

.meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .6rem; font-size: .82rem; }
.meta dt { color: var(--text-dim); }
.meta dd { margin: 0; word-break: break-word; }
.signers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.signers li { font-size: .76rem; }
.signers .sig-alg { font-weight: 600; }
.signers .sig-key { color: var(--text-dim); font-family: ui-monospace, monospace; font-size: .7rem; word-break: break-all; }
.signers .sig-level { color: var(--ok); font-size: .74rem; margin-top: .15rem; }

/* ---- Stage (preview / dropzone) ---- */
.stage { position: relative; min-height: 0; display: flex; }
#preview { flex: 1; border: 0; width: 100%; height: 100%; background: var(--surface); }
/* The perceivability warning banner: shown at the top of the stage when the reader has turned the safety
   floor off and the document's style hides content. Overlays the preview so it can't be missed. */
.floor-warning {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  padding: 0.6rem 1rem; font-size: 0.88rem; line-height: 1.4;
  background: #b7791f; color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.dropzone:not([hidden]) {
  position: absolute;
  inset: 1.25rem;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-dim);
  background: var(--surface-2);
}
.dropzone.dragover { border-color: var(--accent); color: var(--accent); background: var(--ok-bg); }
.dz-inner { max-width: 22rem; }
.dz-inner svg { color: var(--border-strong); margin-bottom: .5rem; }
.dz-inner p { margin: .35rem 0; line-height: 1.5; }
.dz-note { font-size: .78rem; }

/* ---- Decrypt dialog ---- */
#dialog-root:not([hidden]) { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .35); z-index: 40; }
.dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem;
  width: min(24rem, 92vw);
}
.dialog h2 { font-size: 1rem; margin: 0 0 .8rem; }
.dialog label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; color: var(--text-dim); margin-bottom: .9rem; }
.dialog input {
  font: inherit;
  padding: .45rem .5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.dlg-intro { font-size: .82rem; color: var(--text-dim); margin: 0 0 .9rem; }
.choice-list { display: flex; flex-direction: column; gap: .5rem; }
.choice-list button {
  text-align: left;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  padding: .6rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.choice-list button:hover { background: var(--surface-2); border-color: var(--accent); }
.choice-list button strong { font-size: .9rem; }
.choice-list button span { font-size: .75rem; color: var(--text-dim); }

@media (max-width: 720px) {
  main { grid-template-columns: 1fr; }
  .panel { border-right: 0; border-bottom: 1px solid var(--border); max-height: 45vh; }
}