/* Copyright 2026 My Digital Sovereignty Ltd. All rights reserved. Proprietary and confidential; unauthorised copying, use or distribution is prohibited. */

/* email-decision-record-console.css: the owner console's shell and its shared controls
   (public/email-decision-record.html links it before the Policy and Capture sheets).

   The shell classes (.vd-main, .vd-head, .edr-nav) had no rule anywhere: the page rendered flush to the window edge,
   its section links ran together as one line of text, and every button, field and table drawn by the tab scripts
   looked like running text. This sheet gives them the village tokens. Selectors are wrapped in :where() so they carry
   no specificity of their own and every tab-specific rule (the Policy and Capture sheets) still wins over them.
   Tokens only, so light, dark and AUTO themes all work. State is never colour alone: the current section is bold and
   underlined as well as filled, and keyboard focus is a visible ring on every control. */

:where(#edr-app) .vd-main {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-4) var(--s-7);
  overflow-wrap: anywhere;
}
:where(#edr-app) .vd-head { margin: 0 0 var(--s-4); }
:where(#edr-app) .vd-head h1 { font: var(--text-h1); margin: 0 0 var(--s-1); color: var(--text); }
:where(#edr-app) .vd-sub { color: var(--muted); font: var(--text-small); margin: 0; }

:where(#edr-app) .edr-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 0 var(--s-5);
  padding: 0 0 var(--s-3);
  border-bottom: 1px solid var(--border);
}
:where(#edr-app) .edr-nav a {
  display: inline-block;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--raised);
  color: var(--accent);
  font: var(--text-small);
  text-decoration: none;
}
:where(#edr-app) .edr-nav a:hover { background: var(--accent-soft); }
:where(#edr-app) .edr-nav a[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

:where(#edr-route-root) { min-width: 0; }
:where(#edr-route-root) h2 { font: var(--text-h2); margin: var(--s-5) 0 var(--s-3); }
:where(#edr-route-root) h3 { font: var(--text-h3); margin: var(--s-4) 0 var(--s-2); }
:where(#edr-route-root) p { margin: 0 0 var(--s-3); }
:where(#edr-route-root) ul, :where(#edr-route-root) ol { padding-inline-start: var(--s-5); margin: 0 0 var(--s-3); }
:where(#edr-route-root) a { color: var(--accent); }
:where(#edr-route-root) details { margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--raised); }
:where(#edr-route-root) summary { cursor: pointer; font-weight: 600; }
:where(#edr-route-root) dl { margin: 0 0 var(--s-3); }
:where(#edr-route-root) dt { color: var(--muted); font: var(--text-small); margin-top: var(--s-2); }
:where(#edr-route-root) dd { margin: 0; }

:where(#edr-route-root) button {
  font: var(--text-body);
  padding: var(--s-2) var(--s-4);
  margin: 0 var(--s-2) var(--s-2) 0;
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--raised);
  color: var(--accent);
  cursor: pointer;
}
:where(#edr-route-root) button:hover:not(:disabled) { background: var(--accent-soft); }
:where(#edr-route-root) button:disabled { opacity: .6; cursor: not-allowed; }
:where(#edr-route-root) input:not([type="checkbox"]):not([type="radio"]),
:where(#edr-route-root) select,
:where(#edr-route-root) textarea {
  font: var(--text-body);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--raised);
  color: var(--text);
  max-width: 100%;
  box-sizing: border-box;
}
:where(#edr-route-root) label { display: block; margin: var(--s-3) 0 var(--s-1); font-weight: 600; }
:where(#edr-route-root) input[type="checkbox"] + label, :where(#edr-route-root) input[type="radio"] + label { display: inline; font-weight: 400; }
:where(#edr-route-root) [role="alert"] { border-left: 3px solid var(--danger); padding: var(--s-1) 0 var(--s-1) var(--s-3); font-weight: 600; }
:where(#edr-route-root) [role="status"] { color: var(--muted); }

:where(#edr-route-root) table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s-4); font: var(--text-small); }
:where(#edr-route-root) th, :where(#edr-route-root) td { text-align: start; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); vertical-align: top; }
:where(#edr-route-root) th { color: var(--muted); font-weight: 700; }
:where(#edr-route-root) tbody tr:nth-child(even) { background: var(--sunken); }

:where(#edr-app) :is(a, button, input, select, textarea, summary, h1):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
:where(#edr-app) h1:focus { outline: none; }

/* Plan row S1.13: the held detail's advice line (text and HTML versions read differently). Advice only, so a quiet
   panel with a left rule, never the alert style; it carries role="note", and its meaning is in the words, not the colour. */
:where(#edr-app) .edr-held-advisory {
  margin: var(--s-3) 0;
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--border-strong);
  background: var(--sunken);
  color: var(--text);
  font: var(--text-small);
}