/* ==========================================================================
   Precedent finder, concept demo
   Single stylesheet. Owns all visual design. Styles the real class names
   emitted by index.html, src/app.js and src/chat.js only.

   Look and feel: a calm, professional desktop intranet. White surfaces on a
   soft sunken page, deep navy text, restrained Microsoft-style blue accents
   used sparingly. Familiar document rows with real hierarchy between title,
   match reason and metadata. No decorative imagery, no gradients-as-decor,
   no shadow doing the work spacing should do. Light theme only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens, declared verbatim per docs/CONTRACT.md. No colour literal
   may appear anywhere else in this file, use var(--token) everywhere.
   -------------------------------------------------------------------------- */

:root {
  --ink:            #16213a;   /* primary text, deep navy */
  --ink-soft:       #46536f;   /* secondary text */
  --ink-faint:      #6b7794;   /* tertiary, metadata labels */
  --surface:        #ffffff;   /* cards, panes */
  --surface-sunken: #f4f6fa;   /* page background */
  --surface-raised: #fafbfd;   /* subtle fills */
  --line:           #dde2ec;   /* borders, dividers */
  --line-strong:    #c3cbdb;
  --accent:         #1f5fa9;   /* restrained Microsoft-style blue */
  --accent-hover:   #17497f;
  --accent-wash:    #eaf1fa;   /* tinted backgrounds */
  --assumed:        #8a6100;   /* demonstration assumption marker text */
  --assumed-wash:   #fdf4e1;
  --notice:         #5a4a1f;   /* demo notice text */
  --notice-wash:    #fdf8e7;
  --focus:          #0f4c9c;
  --radius:         6px;
  --radius-lg:      10px;
  --shadow-pane:    0 1px 3px rgba(22,33,58,.10), 0 8px 24px rgba(22,33,58,.08);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* No min-width here. Combined with overflow-x: hidden a fixed 360px floor
     silently clips content once a classic scrollbar takes width off the
     viewport, which is exactly the case it was meant to protect. */
  max-width: 100%;
  overflow-x: hidden;
  background: var(--surface-sunken);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.25;
}

h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }

p {
  margin: 0 0 .75em;
}

ul, dl {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--accent);
}

a:hover,
a:focus-visible {
  color: var(--accent-hover);
}

button, input, textarea {
  font: inherit;
  color: inherit;
}

svg {
  display: block;
}

/* Reliable hide/show regardless of any conflicting display rule below. */
[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Accessibility: visible focus rings everywhere, never suppressed without
   a replacement.
   -------------------------------------------------------------------------- */

a:focus,
button:focus,
input:focus,
textarea:focus,
[tabindex]:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The dialog itself is focused programmatically on open, as a focus-trap
   anchor rather than a control. It keeps the same 2px ring as everything
   else rather than suppressing it, per the never-outline-none rule. */
.pf-detail-dialog:focus {
  outline-offset: -2px;
}

.pf-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pf-noscript-notice {
  margin: 0;
  padding: 14px 20px;
  background: var(--notice-wash);
  color: var(--notice);
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.pf-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.pf-button-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}

.pf-button-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.pf-button-secondary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}

.pf-button-secondary:hover {
  background: var(--surface-raised);
  border-color: var(--ink-faint);
}

.pf-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}

.pf-icon-button:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
}

.pf-text-input,
.pf-textarea {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
}

.pf-textarea {
  resize: vertical;
  min-height: 4.5em;
}

.pf-text-input::placeholder,
.pf-textarea::placeholder {
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Assumed chip: the one shared "demonstration assumption" treatment. Text
   label plus border plus tinted background, so it never depends on colour
   alone.
   -------------------------------------------------------------------------- */

.pf-assumed-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--assumed);
  border-radius: 999px;
  background: var(--assumed-wash);
  color: var(--assumed);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.4;
  cursor: default;
}

.pf-assumed-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--assumed);
  flex: none;
}

.is-assumed {
  position: relative;
}

/* --------------------------------------------------------------------------
   Top level view switching. Exactly one of the two views is visible,
   driven by data-view on <body>.
   -------------------------------------------------------------------------- */

.pf-view {
  display: none;
}

body[data-view="settings"] .pf-view-settings {
  display: block;
}

/* The intranet view is a full height column so the side pane can stretch to
   the bottom of the viewport rather than stopping at the end of its own
   conversation, which is how a real intranet pane behaves. */
body[data-view="intranet"] .pf-view-intranet {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ==========================================================================
   Settings view
   ========================================================================== */

.pf-settings-header {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 32px 8px;
}

.pf-eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.pf-settings-header h1 {
  outline-offset: 4px;
}

.pf-settings-intro {
  max-width: 68ch;
  color: var(--ink-soft);
}

.pf-settings-body {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 32px 56px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  gap: 28px;
  align-items: start;
}

.pf-config-form {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.pf-field-group {
  min-width: 0;
}

.pf-field-label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--ink);
}

.pf-field-help {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 15px;
}

/* Question fieldsets ------------------------------------------------------ */

.pf-question {
  min-width: 0;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.pf-question.is-assumed {
  background: var(--assumed-wash);
  border-color: var(--assumed);
}

.pf-question legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 4px;
  font-weight: 600;
  color: var(--ink);
}

.pf-question-label-text {
  font-weight: 600;
}

.pf-question-help {
  margin: 8px 0 12px;
  color: var(--ink-soft);
  font-size: 15px;
}

.pf-question-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 12px;
}

.pf-radio-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--ink);
}

.pf-radio-option input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex: none;
}

.pf-question-affects {
  margin: 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--ink-soft);
  font-size: 15px;
}

.pf-question-affects strong {
  color: var(--ink);
}

.pf-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
}

/* Live discussion summary panel ------------------------------------------ */

.pf-summary-panel {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pf-summary-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pf-summary-panel-header h2 {
  margin: 0;
}

.pf-copy-confirmation {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-wash);
  color: var(--accent-hover);
  font-size: 15px;
  font-weight: 600;
}

.pf-summary-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.pf-summary-route {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.pf-summary-route-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.pf-summary-route-title {
  margin: 0;
  font-size: 1.05rem;
}

.pf-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 15px;
  font-weight: 700;
}

.pf-status-badge--proposed {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent-hover);
}

.pf-status-badge--needs-confirmation {
  background: var(--notice-wash);
  border-color: var(--notice);
  color: var(--notice);
}

.pf-summary-route-summary {
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.pf-summary-block {
  margin-bottom: 14px;
}

.pf-summary-block:last-child {
  margin-bottom: 0;
}

.pf-summary-block h4 {
  margin-bottom: 8px;
}

.pf-summary-block ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pf-summary-block li {
  padding-left: 16px;
  position: relative;
  color: var(--ink-soft);
}

.pf-summary-block li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-strong);
}

.pf-summary-assumptions ul {
  gap: 10px;
}

.pf-summary-assumptions li.is-assumed {
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 0;
}

.pf-summary-assumptions li.is-assumed::before {
  content: none;
}

.pf-summary-assumptions-empty {
  margin: 0;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Presenter role control, shown only in restricted permissions mode.
   Always visually marked as presenter-only, never an ordinary control.
   -------------------------------------------------------------------------- */

.pf-presenter-role-mount {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.pf-presenter-role-fieldset {
  margin: 16px 0 0;
  padding: 16px 20px;
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  background: var(--accent-wash);
}

.pf-presenter-role-fieldset legend {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 4px;
}

.pf-presenter-badge {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--surface);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.pf-presenter-role-legend-text {
  font-weight: 600;
  color: var(--ink);
}

.pf-presenter-role-note {
  margin: 8px 0 12px;
  color: var(--ink-soft);
  font-size: 15px;
}

.pf-presenter-role-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ==========================================================================
   Intranet view: Knowledge Hub shell
   ========================================================================== */

.pf-intranet-masthead {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.pf-intranet-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: var(--accent);
}

.pf-intranet-logo {
  flex: none;
}

.pf-intranet-brand-name {
  color: var(--ink);
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
}

.pf-intranet-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  flex: 1;
  min-width: 0;
}

.pf-intranet-nav-item {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}

.pf-intranet-nav-item:first-child {
  color: var(--accent);
}

.pf-intranet-masthead-actions {
  flex: none;
  margin-left: auto;
}

.pf-demo-notice {
  margin: 0;
  padding: 10px 32px;
  background: var(--notice-wash);
  color: var(--notice);
  border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--notice);
  font-size: 15px;
  font-weight: 600;
}

.pf-intranet-body {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
}

.pf-intranet-main {
  min-width: 0;
  flex: 1;
  padding: 28px 32px 56px;
}

.pf-intranet-main h1 {
  outline-offset: 4px;
}

.pf-intranet-lede {
  max-width: 68ch;
  color: var(--ink-soft);
}

.pf-intranet-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0 32px;
}

.pf-intranet-tile {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.pf-intranet-tile h2 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.pf-intranet-tile p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
}

/* Finder panel, the card that hosts the launcher button and embedded chat */

.pf-finder-panel {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.pf-finder-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.pf-finder-panel-header h2 {
  margin: 0;
}

.pf-launcher-button svg {
  flex: none;
}

.pf-finder-panel-copy {
  max-width: 68ch;
  color: var(--ink-soft);
  margin-bottom: 0;
}

.pf-chat-embedded-slot {
  margin-top: 18px;
}

/* --------------------------------------------------------------------------
   Chat host: the launcher's right hand side pane. A deliberate floating
   panel treatment, distinct from the embedded inline card below.
   -------------------------------------------------------------------------- */

.pf-chat-host {
  flex: none;
  width: 430px;
  max-width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-pane);
}

.pf-chat-host-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.pf-chat-host-header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.pf-chat-mount {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Chat component, shared markup, layout driven entirely by ancestor class
   -------------------------------------------------------------------------- */

.pf-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* Pane variant: fills the side pane's full height. */
.pf-chat-host .pf-chat {
  flex: 1;
  min-height: 0;
  height: 100%;
  padding: 16px 20px 18px;
  gap: 12px;
}

.pf-chat-host .pf-chat-messages {
  flex: 1;
  min-height: 0;
}

/* Embedded variant: an inline bordered card sitting in the page body. */
.pf-chat-embedded-slot .pf-chat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 18px 20px;
  gap: 12px;
}

.pf-chat-embedded-slot .pf-chat-messages {
  max-height: 420px;
}

.pf-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  min-width: 0;
  padding-right: 2px;
}

.pf-chat-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
}

.pf-chat-suggestions-hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
}

.pf-chat-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-suggestion-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}

.pf-suggestion-chip:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
}

.pf-suggestion-chip-prompt {
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: break-word;
}

.pf-suggestion-chip-blurb {
  color: var(--ink-soft);
  font-size: 15px;
}

.pf-composer {
  display: flex;
  gap: 8px;
  flex: none;
  min-width: 0;
}

.pf-composer-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

.pf-composer-input::placeholder {
  color: var(--ink-soft);
}

.pf-composer-submit {
  flex: none;
  padding: 9px 18px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--surface);
  font-weight: 600;
  cursor: pointer;
}

.pf-composer-submit:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Messages ----------------------------------------------------------------- */

.pf-message {
  display: flex;
  min-width: 0;
}

.pf-message-user {
  justify-content: flex-end;
}

.pf-message-assistant {
  justify-content: flex-start;
}

.pf-message-bubble {
  min-width: 0;
  max-width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius);
}

.pf-message-user .pf-message-bubble {
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  color: var(--ink);
}

.pf-message-assistant .pf-message-bubble {
  background: var(--surface);
  border: 1px solid var(--line);
  width: 100%;
}

.pf-message-text {
  margin: 0 0 8px;
  overflow-wrap: break-word;
}

.pf-message-text:last-child {
  margin-bottom: 0;
}

.pf-clarify-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-clarify-option {
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  overflow-wrap: break-word;
}

.pf-clarify-option:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
}

/* --------------------------------------------------------------------------
   Results: familiar document rows with real hierarchy between title, match
   reason and metadata.
   -------------------------------------------------------------------------- */

.pf-results-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.pf-result-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: 12px 4px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
}

.pf-result-row:hover {
  background: var(--surface-raised);
}

.pf-result-title {
  display: block;
  width: 100%;
  color: var(--ink);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.pf-result-reason {
  display: block;
  width: 100%;
  color: var(--ink-soft);
  overflow-wrap: break-word;
}

.pf-result-fields {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 4px;
  width: 100%;
  margin-top: 2px;
}

.pf-result-field {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  color: var(--ink-soft);
  font-size: 15px;
}

.pf-result-field.is-assumed {
  color: var(--assumed);
}

.pf-result-field-label {
  flex: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 15px;
}

.pf-result-field-value {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink-soft);
  overflow-wrap: break-word;
}

.pf-result-field.is-assumed .pf-result-field-value {
  color: var(--assumed);
}

.pf-result-field .pf-assumed-chip {
  flex: none;
  margin-left: 2px;
}

/* Folders mode says plainly what metadata is missing, rather than quietly
   showing fewer fields. Marked like a caveat, not like a result. */
.pf-results-metadata-note {
  margin: 4px 0 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--assumed);
  background: var(--assumed-wash);
  color: var(--notice);
  font-size: 15px;
  line-height: 1.45;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.pf-results-note {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  color: var(--ink-soft);
  font-size: 15px;
  font-style: italic;
}

.pf-refinements-label {
  margin: 0 0 6px;
  color: var(--ink);
  font-weight: 600;
}

.pf-refinements-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pf-refinements-item {
  padding-left: 14px;
  position: relative;
  color: var(--ink-soft);
  overflow-wrap: break-word;
}

.pf-refinements-item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-strong);
}

/* ==========================================================================
   Document detail panel, a modal dialog overlaying whichever view is active
   ========================================================================== */

.pf-detail-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 20px;
  overflow-y: auto;
}

.pf-detail-backdrop {
  position: fixed;
  inset: 0;
  background: var(--ink);
  opacity: .5;
}

.pf-detail-dialog {
  position: relative;
  width: 100%;
  max-width: 620px;
  min-width: 0;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pane);
  padding: 28px;
}

.pf-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.pf-detail-title {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
}

.pf-detail-header .pf-icon-button {
  flex: none;
}

.pf-detail-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Each field renders as <div class="pf-detail-field"><dt>…</dt><dd>…</dd>
   [chip]</div>, with the Assumed chip a SIBLING of dd, not nested inside
   it. A plain flex row (not CSS grid, which would scatter an unpositioned
   sibling chip into its own implicit row) keeps the label, value and chip
   aligned together and wrapping as one unit at narrow widths. */
.pf-detail-field {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 4px;
}

.pf-detail-field dt {
  flex: 0 0 auto;
  width: 150px;
  max-width: 40%;
  color: var(--ink-soft);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: .02em;
}

.pf-detail-field dd {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: var(--ink);
  overflow-wrap: break-word;
}

.pf-detail-field .pf-assumed-chip {
  flex: none;
  margin-left: 0;
}

.pf-detail-field.is-assumed dt,
.pf-detail-field.is-assumed dd {
  color: var(--assumed);
}

.pf-detail-section {
  margin-bottom: 20px;
}

.pf-detail-section:last-of-type {
  margin-bottom: 0;
}

.pf-detail-description {
  margin: 0;
  color: var(--ink-soft);
  overflow-wrap: break-word;
}

.pf-detail-preview-caption {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 15px;
  font-style: italic;
}

.pf-detail-preview-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: var(--surface-raised);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.pf-detail-preview-list li {
  color: var(--ink-soft);
  overflow-wrap: break-word;
}

.pf-detail-example-note {
  margin: 0;
  color: var(--ink-soft);
}

.pf-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.pf-detail-actions.is-assumed {
  padding: 12px 14px;
  border: 1px solid var(--assumed);
  border-radius: var(--radius);
  background: var(--assumed-wash);
}

.pf-detail-confirmation {
  margin: 16px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-wash);
  color: var(--accent-hover);
  font-size: 15px;
  font-weight: 600;
}

/* ==========================================================================
   Responsive: primary target is a 1440x900 laptop. Everything below must
   remain usable, and nothing may scroll horizontally from 360px up.
   ========================================================================== */

@media (max-width: 1080px) {
  .pf-settings-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .pf-intranet-body {
    flex-direction: column;
    /* Restated rather than inherited by accident: once flex-direction
       becomes column the cross axis is horizontal, and main and aside must
       fill the viewport width rather than shrink to their content, which
       would produce real horizontal overflow. */
    align-items: stretch;
  }

  .pf-chat-host {
    width: 100%;
    max-height: 80vh;
    border-left: none;
    border-top: 1px solid var(--line);
  }

  .pf-intranet-masthead {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .pf-intranet-nav {
    order: 3;
    /* Force this item onto its own wrapped line: a flex-basis this large
       cannot coexist with the brand and actions items on one line, so it
       always wraps down to a full width row of its own instead of being
       crushed toward zero width by flex-shrink. */
    flex: 1 1 100%;
    width: auto;
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .pf-settings-header,
  .pf-settings-body,
  .pf-presenter-role-mount {
    padding-left: 20px;
    padding-right: 20px;
  }

  .pf-intranet-masthead,
  .pf-demo-notice,
  .pf-intranet-main {
    padding-left: 20px;
    padding-right: 20px;
  }

  .pf-config-form,
  .pf-summary-panel,
  .pf-finder-panel {
    padding: 18px;
  }

  .pf-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .pf-form-actions .pf-button {
    justify-content: center;
  }

  .pf-detail-panel {
    padding: 0;
    align-items: stretch;
  }

  .pf-detail-dialog {
    max-width: none;
    min-height: 100%;
    border-radius: 0;
  }

  .pf-detail-field {
    flex-direction: column;
    gap: 2px;
  }

  .pf-detail-field dt {
    width: auto;
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  .pf-composer {
    flex-wrap: wrap;
  }

  .pf-composer-input {
    width: 100%;
  }

  .pf-composer-submit {
    width: 100%;
    justify-content: center;
  }
}