@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css");

/* Default Theme
---------------------------------*/

:root {
  --theme-font-sans: "Public Sans", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --theme-canvas: #f6f7f4;
  --theme-surface: #ffffff;
  --theme-surface-muted: #edf1ee;
  --theme-line: #d7ddd8;
  --theme-line-strong: #aeb8b1;
  --theme-ink: #26332d;
  --theme-muted: #657269;
  --theme-action: #1d5b5f;
  --theme-action-hover: #164a4d;
  --theme-action-soft: #e2eff0;
  --theme-focus: #1d5b5f;
  --theme-success: #176b39;
  --theme-warning: #765809;
  --theme-danger: #9f2d27;
  --theme-shadow-low: 0 8px 20px rgba(38, 51, 45, 0.1);
  --theme-shadow-raised: 0 18px 44px rgba(38, 51, 45, 0.16);
  --theme-overlay: rgba(38, 51, 45, 0.42);
  --bg-zero: #FFFFFF;
  --bg-first: var(--theme-canvas);
  --bg-second: var(--theme-surface-muted);
  --bg-third: var(--theme-line);
  --bg-fourth: var(--theme-line-strong);
  --bg-inverse: var(--theme-action);
  --bg-info: var(--theme-action-soft);
  --bg-error: #FDE2E5;
  --bg-warning: #FFF4D6;
  --bg-success: #E0F4E6;
  --zero: var(--theme-ink);
  --default: var(--theme-ink);
  --inverse: #FFFFFF;
  --primary: var(--theme-action);
  --secondary: var(--theme-muted);
  --info: var(--theme-focus);
  --error: var(--theme-danger);
  --warning: var(--theme-warning);
  --success: var(--theme-success);
  --muted: var(--theme-muted);
  --white: #FFFFFF;
  --black: #000000;
  --console-bg: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  --console-panel: rgba(255, 255, 255, 0.88);
  --console-panel-strong: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(31, 41, 55, 0.92));
  --console-border: rgba(17, 24, 39, 0.10);
  --console-shadow: 0 24px 70px rgba(17, 24, 39, 0.10);
  --console-radius: 28px;
  --console-grid: rgba(17, 24, 39, 0.05);
  accent-color: var(--theme-action);
  caret-color: var(--theme-action);
  color-scheme: light;
  /* This fixes FOUC */
  display: none;
}

.dark {
  --muted: #B4B4B4;
  --bg-zero: #121212;
  --bg-first: #232323;
  --bg-second: #323232;
  --bg-third: #424242;
  --bg-fourth: #525252;
  --bg-inverse: #DBDBDB;
  --zero: #FFFFFF;
  --default: #CFCFCF;
  --inverse: #222222;
  --console-bg: radial-gradient(circle at top, rgba(89, 168, 255, 0.16), transparent 32%), linear-gradient(180deg, #0d1720 0%, #111d27 50%, #162330 100%);
  --console-panel: rgba(16, 26, 35, 0.82);
  --console-panel-strong: linear-gradient(180deg, rgba(7, 12, 18, 0.96), rgba(11, 19, 27, 0.94));
  --console-border: rgba(214, 226, 237, 0.08);
  --console-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
  --console-grid: rgba(214, 226, 237, 0.08);
}

/* Reset (normalize.css)
---------------------------------*/

html, body, #root {
  font-family: var(--theme-font-sans);
  font-size: 14px;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
  position: relative;
  width: 100%;
}

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
2. [UnoCSS]: allow to override the default border color with css var `--un-default-border-color`
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: var(--un-default-border-color, #e5e7eb); /* 2 */
}

::before,
::after {
  --un-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS.
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

::selection {
  background: var(--theme-action);
  color: var(--inverse);
}

* {
  scrollbar-color: var(--theme-line-strong) var(--theme-canvas);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

*::-webkit-scrollbar-thumb {
  background: var(--theme-line-strong);
  border: 3px solid var(--theme-canvas);
  border-radius: 999px;
}

/* Keep Stackpress header controls pinned to the viewport edge even when
   generated utility CSS defines a global `.container` max-width. */
.layout-head > .container {
  max-width: none;
  width: 100%;
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

body {
  background: var(--bg-zero);
  color: var(--default);
}

#root {
  isolation: isolate;
}

.knowledge-app {
  background: var(--console-bg);
  color: var(--default);
  height: 100%;
  overflow: auto;
  padding: 32px 20px 56px;
  position: relative;
}

.knowledge-app::before {
  background-image:
    linear-gradient(to right, transparent 0, transparent calc(100% - 1px), var(--console-grid) calc(100% - 1px)),
    linear-gradient(to bottom, transparent 0, transparent calc(100% - 1px), var(--console-grid) calc(100% - 1px));
  background-position: center;
  background-size: 44px 44px;
  content: '';
  inset: 0;
  opacity: 0.28;
  pointer-events: none;
  position: absolute;
}

.knowledge-shell {
  margin: 0 auto;
  max-width: 1200px;
  position: relative;
  z-index: 1;
}

.knowledge-shell-reading {
  max-width: 980px;
}

.knowledge-panel {
  backdrop-filter: blur(18px);
  background: var(--console-panel);
  border: 1px solid var(--console-border);
  border-radius: var(--console-radius);
  box-shadow: var(--console-shadow);
  position: relative;
}

.knowledge-panel::after {
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.knowledge-panel-strong {
  background: var(--console-panel-strong);
  color: var(--inverse);
}

.knowledge-topbar {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: 1.1fr 1.6fr auto;
  margin-bottom: 24px;
  padding: 20px 4px;
}

.knowledge-kicker,
.knowledge-section-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.knowledge-panel-strong .knowledge-section-label {
  color: rgba(248, 244, 238, 0.66);
}

.knowledge-brand {
  color: var(--zero);
  display: inline-block;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 0.95;
}

.knowledge-topbar-copy,
.knowledge-lead,
.knowledge-section-copy,
.knowledge-feature-summary,
.knowledge-card-summary {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
  margin: 0;
}

.knowledge-topbar-action,
.knowledge-inline-link,
.article-backlink {
  align-items: center;
  color: var(--primary);
  display: inline-flex;
  font-weight: 700;
  gap: 8px;
}

.knowledge-topbar-action::after,
.knowledge-inline-link::after,
.article-backlink::after {
  content: '\2192';
  font-size: 0.95em;
}

.knowledge-hero {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
  margin-bottom: 28px;
}

.knowledge-hero-copy,
.knowledge-feature,
.knowledge-closing,
.article-hero,
.article-banner,
.article-reading-surface {
  padding: 28px;
}

.knowledge-display,
.knowledge-section-title,
.article-title {
  color: var(--zero);
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.94;
  margin: 0 0 16px;
  text-wrap: balance;
}

.knowledge-section-title,
.article-title {
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.02;
}

.knowledge-signal-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
}

.knowledge-signal {
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(15, 109, 255, 0.08);
  border-radius: 20px;
  padding: 16px 18px;
}

.knowledge-signal-label {
  color: var(--muted);
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.knowledge-signal-value {
  color: var(--zero);
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
}

.knowledge-feature-media,
.knowledge-card-media {
  border-radius: 20px;
  display: block;
  margin-bottom: 20px;
  overflow: hidden;
}

.knowledge-feature-media img,
.knowledge-card-media img,
.article-banner img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 200ms ease;
  width: 100%;
}

.knowledge-feature:hover .knowledge-feature-media img,
.knowledge-card:hover .knowledge-card-media img {
  transform: scale(1.03);
}

.knowledge-meta-row,
.article-meta {
  color: rgba(95, 111, 125, 0.92);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.knowledge-meta-row span,
.article-meta span {
  position: relative;
}

.knowledge-meta-row span:not(:first-child)::before,
.article-meta span:not(:first-child)::before {
  color: rgba(95, 111, 125, 0.5);
  content: '•';
  left: -12px;
  position: absolute;
}

.knowledge-panel-strong .knowledge-meta-row {
  color: rgba(248, 244, 238, 0.72);
}

.knowledge-panel-strong .knowledge-meta-row span:not(:first-child)::before {
  color: rgba(248, 244, 238, 0.38);
}

.knowledge-feature-title,
.knowledge-card-title {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.7rem, 2.4vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 0 0 14px;
}

.knowledge-card-title {
  color: var(--zero);
  font-size: 1.7rem;
}

.knowledge-panel-strong .knowledge-feature-title a {
  color: var(--inverse);
}

.knowledge-empty-state h2,
.knowledge-empty-state p {
  margin: 0;
}

.knowledge-empty-state h2 {
  font-family: "Newsreader", Georgia, serif;
  font-size: 2rem;
  margin-bottom: 12px;
}

.knowledge-empty-state p {
  color: rgba(248, 244, 238, 0.76);
  line-height: 1.7;
}

.knowledge-section {
  margin-top: 28px;
}

.knowledge-section-heading {
  align-items: end;
  display: grid;
  gap: 18px;
  grid-template-columns: 1.2fr 1fr;
  margin-bottom: 18px;
}

.knowledge-card-grid,
.knowledge-topic-grid {
  display: grid;
  gap: 20px;
}

.knowledge-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.knowledge-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 20px;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.knowledge-card:hover {
  border-color: rgba(15, 109, 255, 0.2);
  box-shadow: 0 28px 76px rgba(29, 40, 54, 0.18);
  transform: translateY(-2px);
}

.knowledge-card-footer {
  align-items: center;
  color: var(--muted);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 20px;
}

.knowledge-topics {
  padding-bottom: 4px;
}

.knowledge-topic-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.knowledge-topic-chip {
  background: rgba(20, 32, 43, 0.84);
  border: 1px solid rgba(20, 32, 43, 0.9);
  border-radius: 20px;
  color: var(--inverse);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 18px 20px;
}

.knowledge-closing {
  overflow: hidden;
}

.knowledge-closing::before {
  background: radial-gradient(circle at top left, rgba(15, 109, 255, 0.18), transparent 45%);
  content: '';
  inset: -10% auto auto -10%;
  pointer-events: none;
  position: absolute;
  width: 55%;
}

.article-backlink {
  margin: 6px 0 18px;
}

.article-hero {
  margin-bottom: 20px;
}

.article-banner {
  margin-bottom: 20px;
  overflow: hidden;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.article-tag {
  background: rgba(15, 109, 255, 0.08);
  border: 1px solid rgba(15, 109, 255, 0.12);
  border-radius: 999px;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 12px;
}

.frui-form-select-dropdown {
  z-index: 2000;
}

.frui-form-select-dropdown.frui-dropdown-absolute {
  max-height: calc(100vh - 24px);
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  overflow-y: auto;
  position: fixed !important;
}

/* Organization chart
---------------------------------*/
.organization-chart-avatar {
  background-color: var(--bg-second);
  color: var(--zero);
}

.organization-chart-canvas {
  background-color: var(--bg-first);
  color: var(--default);
}

.organization-workspace {
  scrollbar-color: var(--bg-fourth) var(--bg-zero);
}

.organization-workspace .bg-slate-300 {
  background-color: var(--bg-fourth);
}

.organization-workspace .border-slate-200 {
  border-color: var(--bg-third);
}

.organization-workspace .border-slate-300 {
  border-color: var(--bg-fourth);
}

.organization-workspace input,
.organization-workspace select,
.organization-workspace textarea {
  background-color: var(--bg-zero);
  border-color: var(--bg-third);
  color: var(--default);
}

.organization-workspace input::placeholder,
.organization-workspace textarea::placeholder {
  color: var(--muted);
}

/* Shared app-owned workspace shell
---------------------------------*/

:root {
  --workspace-rail-width: 220px;
  --workspace-header-height: 56px;
  --workspace-page-max: 1200px;
  --workspace-page-padding: 34px 36px 54px;
  --workspace-canvas: var(--theme-canvas);
  --workspace-paper: var(--theme-surface);
  --workspace-line: var(--theme-line);
  --workspace-line-strong: var(--theme-line-strong);
  --workspace-ink: var(--theme-ink);
  --workspace-muted: var(--theme-muted);
  --workspace-accent: var(--theme-action);
  --workspace-accent-soft: var(--theme-action-soft);
  --workspace-focus: var(--theme-focus);
  --workspace-shadow-low: var(--theme-shadow-low);
  --workspace-shadow-raised: var(--theme-shadow-raised);
}

.workspace-shell {
  background: var(--workspace-canvas);
  color: var(--workspace-ink);
  display: flex;
  min-height: 100%;
  width: 100%;
}

.workspace-shell__rail {
  background: var(--workspace-paper);
  border-right: 1px solid var(--workspace-line);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  left: 0;
  position: fixed;
  top: 0;
  width: var(--workspace-rail-width);
  z-index: 100;
}

.workspace-shell__rail-head {
  align-items: center;
  border-bottom: 1px solid var(--workspace-line);
  display: flex;
  flex-shrink: 0;
  height: var(--workspace-header-height);
  justify-content: space-between;
  padding: 0 18px;
}

.workspace-shell__brand {
  align-items: center;
  color: var(--workspace-ink);
  display: inline-flex;
  font-size: 1rem;
  font-weight: 800;
  gap: 10px;
  letter-spacing: -0.02em;
  min-height: 40px;
}

.workspace-shell__brand-mark {
  align-items: center;
  background: var(--workspace-accent);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-size: 0.68rem;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.workspace-shell__nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 12px;
}

.workspace-shell__account {
  border-top: 1px solid var(--workspace-line);
  flex-shrink: 0;
  margin: auto 12px 0;
  padding: 14px 0 max(12px, env(safe-area-inset-bottom));
}

.workspace-shell__account-identity {
  align-items: center;
  display: flex;
  gap: 10px;
  padding: 0 6px 10px;
}

.workspace-shell__account-avatar {
  align-items: center;
  background: var(--workspace-accent-soft);
  border: 1px solid var(--workspace-line);
  border-radius: 50%;
  color: var(--workspace-accent);
  display: flex;
  flex: 0 0 32px;
  font-size: 11px;
  font-weight: 750;
  height: 32px;
  justify-content: center;
}

.workspace-shell__account-details { min-width: 0; }

.workspace-shell__account-details strong {
  color: var(--workspace-ink);
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.workspace-shell__account-details > span {
  color: var(--workspace-muted);
  display: block;
  font-size: 11px;
  margin-top: 3px;
}

.workspace-shell__sign-out {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--workspace-ink);
  display: flex;
  font-size: 13px;
  font-weight: 650;
  gap: 10px;
  min-height: 44px;
  padding: 10px;
}

.workspace-shell__sign-out:hover {
  background: var(--workspace-accent-soft);
  border-color: var(--workspace-line);
}

.workspace-shell__sign-out svg {
  fill: none;
  flex-shrink: 0;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 18px;
}

.workspace-shell__sign-out:focus-visible,
.workspace-signed-out__sign-in:focus-visible {
  outline: 3px solid var(--theme-focus);
  outline-offset: 2px;
}

.workspace-signed-out {
  background: var(--theme-canvas);
  color: var(--theme-ink);
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100dvh;
}

.workspace-signed-out__brand {
  padding: 28px 32px;
  width: fit-content;
}

.workspace-signed-out__main {
  display: grid;
  padding: 32px 24px clamp(64px, 12vh, 128px);
  place-items: center;
}

.workspace-signed-out__card {
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  max-width: 456px;
  padding: 40px;
  width: 100%;
}

.workspace-signed-out__icon {
  color: var(--theme-muted);
  display: block;
  fill: none;
  height: 28px;
  margin-bottom: 24px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 28px;
}

.workspace-signed-out__card h1 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0 0 12px;
  text-wrap: balance;
}

.workspace-signed-out__card p {
  color: var(--theme-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  max-width: 34ch;
  text-wrap: pretty;
}

.workspace-signed-out__sign-in {
  align-items: center;
  background: var(--theme-action);
  border-radius: 8px;
  color: #fff;
  display: flex;
  font-size: 14px;
  font-weight: 700;
  justify-content: center;
  margin-top: 32px;
  min-height: 48px;
  padding: 12px 16px;
  text-decoration: none;
}

.workspace-signed-out__sign-in:hover,
.workspace-signed-out__sign-in:active {
  background: var(--theme-action-hover);
  color: #fff;
}

.workspace-signed-out ::selection {
  background: var(--theme-action-soft);
  color: var(--theme-ink);
}

@media (max-width: 520px) {
  .workspace-signed-out__brand { padding: 20px; }
  .workspace-signed-out__main { padding: 24px 20px 64px; }
  .workspace-signed-out__card { padding: 32px 24px; }
}

.workspace-shell__nav-link {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--workspace-muted);
  display: flex;
  font-size: 13px;
  font-weight: 750;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  position: relative;
}

.workspace-shell__nav-group {
  border-top: 1px solid var(--workspace-line);
  margin: 8px 0 0;
  padding: 12px 10px 2px;
}

.workspace-shell__nav-group-label {
  color: var(--workspace-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.document-icon-action {
  align-items: center;
  border-radius: 6px;
  color: var(--workspace-muted);
  display: inline-flex;
  height: 36px;
  justify-content: center;
  position: relative;
  gap: 7px;
  min-height: 36px;
  padding: 0 9px;
}

.document-icon-action:hover {
  background: var(--workspace-accent-soft);
  color: var(--workspace-ink);
}

.document-icon-action__label {
  font-size: 12px;
  font-weight: 700;
}

.document-icon-action:has(.document-icon-action__label)::after {
  display: none;
}

.document-icon-action::after {
  background: var(--workspace-ink);
  border-radius: 5px;
  bottom: calc(100% + 6px);
  color: #fff;
  content: attr(data-label);
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  padding: 5px 7px;
  pointer-events: none;
  position: absolute;
  right: 0;
  transform: translateY(3px);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: nowrap;
  z-index: 5;
}

.document-icon-action:hover::after,
.document-icon-action:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.document-icon-action:focus-visible {
  outline: 3px solid var(--workspace-focus);
  outline-offset: 2px;
}

.documents-directory__filters {
  background: var(--theme-surface-muted);
  border-color: var(--theme-line);
  display: grid;
  gap: 12px;
}

.documents-directory__filter-actions {
  align-self: end;
  position: relative;
}

.documents-directory__filter-actions > div {
  display: flex;
  gap: 8px;
}

.documents-directory__filter-actions p {
  color: var(--theme-muted);
  font-size: 10px;
  margin: 0;
  position: absolute;
  right: 0;
  text-align: end;
  top: calc(100% + 5px);
  white-space: nowrap;
}

.documents-directory__filters--with-status {
  padding-bottom: 30px;
}

/* Documents — the shared document register, editor, mapping, and generation flow. */
.documents-page {
  color: var(--theme-ink);
  font-family: var(--theme-font-sans);
  max-width: var(--workspace-page-max);
  padding: var(--workspace-page-padding);
}

.documents-page__heading {
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 2px;
}

.documents-page__heading h1 {
  font-size: 28px;
  letter-spacing: -0.025em;
  line-height: 1.18;
}

.documents-page__heading-actions {
  align-items: center;
}

.documents-page h1,
.documents-page h2,
.documents-page h3,
.documents-page h4,
.documents-page strong {
  color: var(--theme-ink);
}

.documents-page p,
.documents-page [class~="text-slate-500"],
.documents-page [class~="text-slate-600"],
.documents-page [class~="text-slate-700"] {
  color: var(--theme-muted);
}

.documents-page [class~="border-slate-100"],
.documents-page [class~="border-slate-200"] {
  border-color: var(--theme-line);
}

.documents-page [class~="border-slate-300"] {
  border-color: var(--theme-line-strong);
}

.documents-page [class~="bg-white"] {
  background-color: var(--theme-surface);
}

.documents-page [class~="bg-slate-50"] {
  background-color: var(--theme-surface-muted);
}

.documents-page [class~="shadow-sm"] {
  box-shadow: none;
}

.documents-page__primary-action {
  background: var(--theme-action);
  border: 1px solid var(--theme-action);
  color: #fff;
  min-height: 36px;
}

.documents-page__primary-action:hover {
  background: var(--theme-action-hover);
  border-color: var(--theme-action-hover);
  color: #fff;
}

.documents-page__primary-action:focus-visible,
.documents-page__secondary-action:focus-visible,
.documents-page__input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-focus) 28%, transparent);
  outline-offset: 2px;
}

.documents-page__secondary-action {
  background: var(--theme-surface);
  border-color: var(--theme-line-strong);
  color: var(--theme-ink);
  min-height: 36px;
}

.documents-page__secondary-action:hover {
  background: var(--theme-action-soft);
  border-color: var(--theme-action);
  color: var(--theme-action-hover);
}

.documents-page__input {
  background: var(--theme-surface);
  border-color: var(--theme-line-strong);
  color: var(--theme-ink);
  min-height: 40px;
}

.documents-page__input:focus {
  border-color: var(--theme-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-focus) 16%, transparent);
}

.documents-directory__panel {
  background: var(--theme-surface);
  border-color: var(--theme-line);
  box-shadow: none;
}

.documents-directory__filter-label,
.documents-directory__record-type {
  color: var(--theme-ink);
}

.documents-directory__table-head {
  background: var(--theme-surface-muted);
  color: var(--theme-muted);
}

.documents-directory__table-body {
  border-color: var(--theme-line);
}

.documents-directory__table-body > tr:hover {
  background: color-mix(in srgb, var(--theme-action-soft) 45%, var(--theme-surface));
}

.documents-directory__record-link {
  color: var(--theme-action);
  text-decoration-color: color-mix(in srgb, var(--theme-action) 45%, transparent);
}

.documents-directory__record-link:hover {
  color: var(--theme-action-hover);
  text-decoration-color: currentColor;
}

.documents-directory__record-description,
.documents-directory__mobile-label {
  color: var(--theme-muted);
}

/* Documents motion: acknowledge one immutable generation request, then reveal
   its recorded result. Static review and directory surfaces deliberately stay still. */
@keyframes documents-attempt-result-reveal {
  from { clip-path: inset(0 0 100% 0 round 10px); opacity: 0.72; }
  to { clip-path: inset(0 0 0 0 round 10px); opacity: 1; }
}

@keyframes documents-submit-feedback {
  from { opacity: 0; }
  to { opacity: 1; }
}

.documents-attempt-feedback,
.documents-attempt-output {
  animation: documents-attempt-result-reveal 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.documents-generation-progress {
  color: var(--theme-muted);
  font-size: 14px;
  line-height: 1.45;
  margin: 10px 0 0;
  text-align: center;
}

.documents-generation-progress--active {
  animation: documents-submit-feedback 120ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .documents-attempt-feedback,
  .documents-attempt-output,
  .documents-generation-progress--active {
    animation: none;
  }
}

@media (max-width: 600px) {
  .documents-page {
    padding: 24px 16px 40px;
  }

  .documents-page__heading {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (min-width: 768px) {
  .documents-directory__filters {
    grid-template-columns: minmax(0, 1fr) 160px 180px auto;
  }
}

@media (max-width: 767px) {
  .documents-directory__filter-actions > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .documents-directory__filter-actions :is(a, button) {
    min-height: 44px;
    width: 100%;
  }

  .documents-directory__filter-actions p {
    position: static;
    text-align: start;
    white-space: normal;
  }

  .documents-directory__filters--with-status {
    padding-bottom: 16px;
  }
}

.workspace-shell__nav-link:hover {
  background: var(--workspace-accent-soft);
  color: var(--workspace-ink);
}

.workspace-shell__nav-link--active {
  background: var(--workspace-accent-soft);
  border-color: var(--workspace-accent);
  color: var(--workspace-accent);
}

.workspace-shell__nav-icon {
  align-items: center;
  display: inline-flex;
  font-size: 0.9rem;
  justify-content: center;
  width: 18px;
}

.workspace-shell__nav-short {
  display: none;
}

/* Keep full route names explicit in the drawer; short labels are not a mobile
   substitute for navigational context. */
.workspace-shell__nav-label {
  display: inline;
  min-width: 0;
}

.workspace-shell__close,
.workspace-shell__menu {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.workspace-shell__close {
  color: var(--workspace-muted);
  display: none;
  font-size: 1.5rem;
  line-height: 1;
}

.workspace-shell__close:hover,
.workspace-shell__menu:hover {
  background: var(--workspace-accent-soft);
  color: var(--workspace-ink);
}

.workspace-shell__main {
  margin-left: var(--workspace-rail-width);
  min-height: 100vh;
  min-width: 0;
  width: calc(100% - var(--workspace-rail-width));
}

.workspace-shell__header {
  align-items: center;
  background: var(--workspace-paper);
  border-bottom: 1px solid var(--workspace-line);
  display: flex;
  gap: 16px;
  height: var(--workspace-header-height);
  justify-content: space-between;
  padding: 0 18px;
  position: sticky;
  top: 0;
  z-index: 80;
}

.workspace-shell__menu {
  display: none;
}

.workspace-shell__header-title {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.workspace-shell__header-eyebrow,
.workspace-shell__header-route {
  color: var(--workspace-ink);
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-shell__header-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.workspace-shell__admin-link {
  border: 1px solid var(--workspace-line);
  border-radius: 6px;
  color: var(--workspace-ink);
  font-size: 0.76rem;
  font-weight: 700;
  min-height: 34px;
  padding: 7px 11px;
}

.workspace-shell__admin-link:hover {
  background: var(--workspace-accent-soft);
  border-color: var(--workspace-focus);
}

.workspace-shell__content {
  min-height: calc(100vh - var(--workspace-header-height));
  padding: 24px;
}

.workspace-shell__content--flush {
  height: calc(100vh - var(--workspace-header-height));
  overflow: hidden;
  padding: 0;
}

.workspace-shell__backdrop {
  display: none;
}

.workspace-notice {
  background: var(--workspace-paper);
  border: 1px dashed var(--workspace-line);
  border-radius: 8px;
  padding: 20px;
}

.workspace-notice h2 {
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
}

.workspace-notice > div {
  color: var(--workspace-muted);
  font-size: 0.9rem;
  margin-top: 8px;
}

.workspace-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Shared recovery facts stay compact inside the module-owned row, drawer,
   panel, or alert that explains the actual exception. */
.workspace-operational-exception {
  display: grid;
  gap: 8px 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 10px 0 0;
}

.workspace-operational-exception > div {
  min-width: 0;
}

.workspace-operational-exception dt {
  color: var(--workspace-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.workspace-operational-exception dd {
  color: var(--workspace-ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  margin: 2px 0 0;
}

@media (max-width: 560px) {
  .workspace-operational-exception {
    grid-template-columns: 1fr;
  }
}

.workspace-shell__brand:focus-visible,
.workspace-shell__nav-link:focus-visible,
.workspace-shell__close:focus-visible,
.workspace-shell__menu:focus-visible,
.workspace-shell__admin-link:focus-visible {
  outline: 3px solid var(--workspace-focus);
  outline-offset: 2px;
}

@media (max-width: 991.98px) {
  .workspace-shell__rail {
    box-shadow: var(--workspace-shadow-raised);
    transform: translateX(-105%);
    transition: transform 180ms ease;
  }

  .workspace-shell__rail--open {
    transform: translateX(0);
  }

  .workspace-shell__rail--open .workspace-shell__nav-label {
    display: inline;
  }

  .workspace-shell__rail-head {
    padding: 0 14px 0 18px;
  }

  .workspace-shell__close,
  .workspace-shell__menu {
    display: inline-flex;
  }

  .workspace-shell__main {
    margin-left: 0;
    width: 100%;
  }

  .workspace-shell__header {
    padding: 0 16px;
  }

  .workspace-shell__backdrop {
    background: var(--theme-overlay);
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 180ms ease;
    z-index: 90;
  }

  .workspace-shell__backdrop--open {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 600px) {
  .workspace-shell__header-title {
    display: block;
    min-width: 0;
  }

  .workspace-shell__header-eyebrow,
  .workspace-shell__header-route {
    display: block;
    font-size: 0.72rem;
    margin-top: 1px;
  }

  .workspace-shell__admin-link {
    font-size: 0;
    padding: 7px 9px;
  }

  .workspace-shell__admin-link::before {
    content: '\f085';
    font-family: 'Font Awesome 6 Free';
    font-size: 0.85rem;
    font-weight: 900;
  }

  .workspace-shell__content {
    padding: 16px;
  }

  .workspace-shell__content--flush {
    height: auto;
    min-height: calc(100vh - var(--workspace-header-height));
    overflow: visible;
    padding: 0;
  }
}

/* Let long directories own their r013 page padding without clipping overflow. */
.workspace-shell__content--bleed {
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .workspace-shell__rail,
  .workspace-shell__backdrop {
    scroll-behavior: auto;
    transition: none;
  }
}

@media (max-width: 1100px) {
  .knowledge-topbar,
  .knowledge-hero,
  .knowledge-section-heading,
  .knowledge-card-grid,
  .knowledge-topic-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-topbar {
    padding-top: 8px;
  }

  .knowledge-card-grid {
    gap: 16px;
  }
}

@media (max-width: 720px) {
  .knowledge-app {
    padding: 18px 14px 44px;
  }

  .knowledge-hero-copy,
  .knowledge-feature,
  .knowledge-closing,
  .article-hero,
  .article-banner,
  .article-reading-surface {
    padding: 22px 18px;
  }

  .knowledge-signal-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-brand {
    font-size: 2.1rem;
  }

  .knowledge-display {
    font-size: 2.7rem;
  }

  .knowledge-section-title,
  .article-title {
    font-size: 2.2rem;
  }
}

/* Organization r013 presentation parity
---------------------------------*/

.organization-chart-viewport {
  background:
    radial-gradient(circle at 1px 1px, rgba(104, 117, 110, 0.16) 1px, transparent 0)
    0 0 / 22px 22px,
    var(--workspace-canvas);
  height: 100%;
  min-height: 420px;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  position: relative;
  scrollbar-color: var(--bg-fourth) var(--bg-zero);
}

.organization-chart-viewport:focus-visible {
  outline: 3px solid var(--workspace-focus);
  outline-offset: -3px;
}

.organization-chart-content {
  min-height: 100%;
  min-width: 100%;
  position: relative;
}

.organization-chart-stage {
  position: relative;
  transform-origin: top left;
}

.organization-chart-connectors {
  height: 100%;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.organization-chart-connectors path {
  fill: none;
  stroke: var(--workspace-line-strong);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.organization-chart-nodes {
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 1;
}

.organization-chart-node-wrap {
  min-height: 132px;
  position: absolute;
  transition: left 180ms ease, top 180ms ease, opacity 120ms ease;
  width: 248px;
}

.organization-chart-position-card {
  max-width: none;
  width: 248px;
}

.organization-chart-position-button {
  background: var(--workspace-paper) !important;
  border-color: var(--workspace-line) !important;
  box-shadow: none;
  min-height: 132px;
}

.organization-chart-position-button:hover,
.organization-chart-position-button:focus-visible {
  border-color: var(--workspace-accent) !important;
  box-shadow: var(--workspace-shadow-low);
}

.organization-chart-node-wrap.is-selected
  .organization-chart-position-button {
  border-color: var(--workspace-accent) !important;
  box-shadow: 0 0 0 4px var(--workspace-accent-soft);
}

.organization-chart-node-wrap.is-search-dimmed {
  opacity: 0.38;
}

.organization-chart-add {
  align-items: center;
  background: var(--workspace-paper);
  border: 1px solid var(--workspace-line);
  border-radius: 999px;
  box-shadow: var(--workspace-shadow-low);
  color: var(--workspace-accent);
  display: inline-flex;
  font-size: 1.1rem;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  position: absolute;
  right: -13px;
  top: 51px;
  width: 30px;
  z-index: 2;
}

.organization-chart-add:hover,
.organization-chart-add:focus-visible {
  background: var(--workspace-accent-soft);
  border-color: var(--workspace-accent);
}

.organization-chart-controls {
  align-items: center;
  background: var(--workspace-paper);
  border: 1px solid var(--workspace-line);
  border-radius: 9px;
  bottom: 16px;
  box-shadow: var(--workspace-shadow-low);
  display: flex;
  gap: 4px;
  left: 16px;
  padding: 4px;
  position: absolute;
  z-index: 3;
}

.organization-chart-controls button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--workspace-ink);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 700;
  height: 32px;
  justify-content: center;
  min-width: 32px;
  padding: 0 8px;
}

.organization-chart-controls button:hover:not(:disabled),
.organization-chart-controls button:focus-visible {
  background: var(--workspace-accent-soft);
  border-color: var(--workspace-accent);
}

.organization-chart-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.organization-chart-controls span {
  color: var(--workspace-muted);
  font-size: 0.72rem;
  min-width: 42px;
  text-align: center;
}

.organization-chart-status {
  background: var(--workspace-paper);
  border: 1px solid var(--workspace-line);
  border-radius: 999px;
  bottom: 16px;
  color: var(--workspace-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 7px 10px;
  position: absolute;
  right: 16px;
  z-index: 3;
}

.organization-view-controls {
  background: var(--bg-second);
  border: 1px solid var(--workspace-line);
  border-radius: 9px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
  padding: 3px;
}

.organization-view-controls button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--workspace-muted);
  font-size: 0.72rem;
  font-weight: 700;
  min-height: 32px;
  padding: 6px 10px;
}

.organization-view-controls button:hover,
.organization-view-controls button:focus-visible,
.organization-view-controls button.is-active {
  background: var(--workspace-paper);
  box-shadow: 0 0 0 1px var(--workspace-accent);
  color: var(--workspace-accent);
}

.organization-chart-list-view {
  min-width: 0;
  overflow: auto;
  padding: 84px 22px 22px;
}

.organization-chart-list-view__heading {
  align-items: flex-end;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.organization-chart-list-view__heading h2,
.organization-chart-list-view__heading p {
  margin: 0;
}

.organization-chart-list-view__heading h2 {
  font-size: 1.1rem;
  margin-top: 3px;
}

.organization-chart-list-view__heading p {
  color: var(--workspace-muted);
  font-size: 0.76rem;
  margin-top: 3px;
}

.organization-chart-list-view__heading p:first-child {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.organization-chart-list-view__empty {
  background: #fff7df;
  border: 1px solid #edd08a;
  border-radius: 8px;
  color: #765809;
  font-size: 0.78rem;
  padding: 14px;
}

.organization-chart-table__select {
  background: transparent;
  border: 0;
  color: var(--workspace-accent);
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  padding: 6px 0;
}

.organization-chart-table-wrap {
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  overflow-x: auto;
}

.organization-chart-table {
  border-collapse: collapse;
  min-width: 720px;
  width: 100%;
}

.organization-chart-table th,
.organization-chart-table td {
  border-bottom: 1px solid var(--workspace-line);
  padding: 12px;
  text-align: left;
  vertical-align: middle;
}

.organization-chart-table thead th {
  background: var(--bg-second);
  color: var(--workspace-muted);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.organization-chart-table tbody tr:last-child th,
.organization-chart-table tbody tr:last-child td {
  border-bottom: 0;
}

.organization-chart-table tbody tr.is-selected {
  background: var(--workspace-accent-soft);
}

.organization-chart-table tbody th {
  font-weight: 700;
  min-width: 180px;
}

.organization-chart-table tbody th button {
  min-height: 34px;
  text-align: left;
}

.organization-occupancy-badge {
  border: 1px solid var(--workspace-line);
  border-radius: 999px;
  color: var(--workspace-muted);
  display: inline-flex;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 8px;
}

.organization-workspace [data-organization-state="error"] {
  font-weight: 700;
}

@media (max-width: 1279px) {
  .organization-chart-viewport {
    min-height: 480px;
  }
}

@media (max-width: 600px) {
  .feature-data-table {
    background: transparent;
    border: 0;
    overflow: visible;
  }

  .feature-data-table__table,
  .feature-data-table__table tbody {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .feature-data-table__table thead {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .feature-data-table__table tbody {
    display: grid;
    gap: 12px;
  }

  .feature-data-table__table tbody tr {
    background: var(--workspace-paper, #fff);
    border: 1px solid var(--workspace-line, #d9dee7);
    border-radius: 10px;
    display: block;
    overflow: hidden;
  }

  .feature-data-table__table tbody td {
    align-items: start;
    border-bottom: 1px solid var(--workspace-line, #d9dee7);
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(6.5rem, 0.8fr) minmax(0, 1.2fr);
    min-width: 0;
    padding: 12px;
  }

  .feature-data-table__table tbody td::before {
    color: var(--workspace-muted, #64748b);
    content: attr(data-label);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding-top: 2px;
    text-transform: uppercase;
  }

  .feature-data-table__table tbody td:last-child {
    border-bottom: 0;
  }

  .feature-data-table__table tbody td[data-label=""] {
    display: flex;
    justify-content: flex-end;
  }

  .feature-data-table__table tbody td[data-label=""]::before {
    display: none;
  }

  .organization-chart-viewport {
    min-height: 440px;
  }

  .organization-view-controls {
    width: 100%;
  }

  .organization-view-controls button {
    flex: 1;
  }

  .organization-chart-controls {
    bottom: 10px;
    left: 10px;
  }

  .organization-chart-status {
    bottom: 10px;
    right: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .organization-chart-node-wrap {
    scroll-behavior: auto;
    transition: none;
  }
}

/* Organization editor absorption
---------------------------------*/

.organization-editor {
  background: var(--workspace-canvas);
  height: 100%;
  min-height: 560px;
  overflow: hidden;
  position: relative;
}

.organization-editor__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

.organization-editor__canvas-panel {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.organization-editor__toolbar {
  align-items: center;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--workspace-line);
  border-radius: 9px;
  box-shadow: var(--workspace-shadow-low);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  left: 16px;
  padding: 7px;
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 6;
}

.organization-editor__search-group {
  align-items: center;
  display: flex;
  flex: 1 1 460px;
  gap: 6px;
  min-width: 0;
}

.organization-editor__search-group > label {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.organization-editor__search-group input,
.organization-editor__search-group select {
  background: #fff;
  border: 1px solid var(--workspace-line);
  border-radius: 6px;
  color: var(--workspace-ink);
  font: inherit;
  font-size: 0.78rem;
  min-height: 34px;
  padding: 6px 9px;
}

.organization-editor__search-group input {
  min-width: 150px;
  width: min(320px, 52vw);
}

.organization-editor__search-group select {
  max-width: 220px;
  min-width: 120px;
}

.organization-editor__toolbar-end {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.organization-editor__count {
  color: var(--workspace-muted);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.organization-editor__toolbar-button,
.organization-icon-button {
  background: #fff;
  border: 1px solid var(--workspace-line);
  border-radius: 6px;
  color: var(--workspace-ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 750;
  min-height: 34px;
  padding: 6px 10px;
}

.organization-editor__toolbar-button:hover,
.organization-icon-button:hover {
  background: var(--workspace-accent-soft);
  border-color: var(--workspace-focus);
}

.organization-editor__notice {
  background: #fff;
  border: 1px solid var(--workspace-line);
  border-radius: 7px;
  box-shadow: 0 6px 18px rgba(23, 32, 43, 0.08);
  font-size: 0.78rem;
  left: 16px;
  max-width: min(520px, calc(100% - 32px));
  padding: 9px 11px;
  position: absolute;
  top: 76px;
  z-index: 6;
}

.organization-editor__notice--error {
  border-color: #f1a7a2;
  color: #9f2d27;
}

.organization-editor__notice--success {
  border-color: #98d5ae;
  color: #176b39;
}

.organization-editor__notice--warning {
  border-color: #e4c46f;
  color: #765809;
}

.organization-chart-viewport,
.organization-chart-list-view {
  height: 100%;
  min-height: 0;
}

.organization-chart-position-button {
  appearance: none;
  color: var(--workspace-ink);
}

.organization-position-card__button {
  background: var(--workspace-paper);
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  cursor: pointer;
  display: block;
  font: inherit;
  height: auto;
  padding: 14px;
  text-align: left;
  width: 100%;
}

.organization-position-card__button.is-vacant {
  border-style: dashed;
}

.organization-position-card__content {
  align-items: flex-start;
  display: flex;
  gap: 11px;
  min-width: 0;
}

.organization-position-card__avatar,
.organization-inspector__avatar {
  align-items: center;
  background: var(--workspace-accent-soft);
  border-radius: 9px;
  color: var(--workspace-accent);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 800;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.organization-position-card__copy {
  display: block;
  min-width: 0;
  width: 100%;
}

.organization-position-card__topline {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.organization-position-card__topline strong,
.organization-position-card__occupant,
.organization-position-card__seat {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organization-position-card__topline strong {
  font-size: 0.88rem;
}

.organization-position-card__state {
  color: var(--workspace-muted);
  flex: 0 0 auto;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.organization-position-card__occupant {
  color: var(--workspace-muted);
  font-size: 0.76rem;
  margin-top: 5px;
}

.organization-position-card__seat {
  color: #98a2b3;
  font-size: 0.67rem;
  margin-top: 3px;
}

.organization-inspector {
  background: var(--workspace-paper);
  border-left: 1px solid var(--workspace-line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.organization-inspector__view {
  border-bottom: 1px solid var(--workspace-line);
  padding: 12px;
}

.organization-inspector__view .organization-view-controls {
  display: flex;
  width: 100%;
}

.organization-inspector__view .organization-view-controls button {
  flex: 1;
}

.organization-inspector__scroll {
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}

.organization-inspector__heading {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.organization-inspector__heading h2,
.organization-inspector__heading p,
.organization-inspector__section h3,
.organization-inspector__section p {
  margin: 0;
}

.organization-inspector__heading h2 {
  font-size: 1.1rem;
  line-height: 1.3;
  margin-top: 4px;
}

.organization-inspector__heading p {
  color: var(--workspace-muted);
  font-size: 0.78rem;
  margin-top: 4px;
}

.organization-inspector__eyebrow,
.organization-inspector__label {
  color: var(--workspace-muted);
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.organization-inspector__heading-actions {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.organization-inspector__status {
  border: 1px solid var(--workspace-line);
  border-radius: 999px;
  color: var(--workspace-muted);
  display: inline-flex;
  font-size: 0.61rem;
  font-weight: 800;
  padding: 4px 7px;
  text-transform: uppercase;
}

.organization-inspector__status--vacant {
  background: #fff7df;
  border-color: #edd08a;
  color: #765809;
}

.organization-inspector__status--occupied {
  background: #edf9f1;
  border-color: #abdcbc;
  color: #176b39;
}

.organization-inspector__section {
  border-top: 1px solid var(--workspace-line);
  margin-top: 18px;
  padding-top: 18px;
}

.organization-inspector__readonly,
.organization-inspector__reporting {
  background: #f8fafc;
  border: 1px solid var(--workspace-line);
  border-radius: 7px;
  color: var(--workspace-ink);
  font-size: 0.86rem;
  font-weight: 700;
  margin-top: 7px;
  padding: 9px 10px;
}

.organization-inspector__help,
.organization-inspector__empty {
  color: var(--workspace-muted);
  font-size: 0.7rem;
  line-height: 1.45;
  margin-top: 6px !important;
}

.organization-inspector__assignment a {
  color: var(--workspace-accent);
  font-weight: 750;
}

.organization-inspector__primary-actions,
.organization-inspector__assignment-actions {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.organization-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 750;
  justify-content: center;
  min-height: 38px;
  padding: 8px 10px;
  text-align: center;
  width: 100%;
}

.organization-button--primary {
  background: var(--workspace-accent);
  color: #fff;
}

.organization-button--secondary {
  background: #fff;
  border-color: var(--workspace-line);
  color: var(--workspace-ink);
}

.organization-button:hover:not(:disabled),
.organization-button:focus-visible {
  filter: brightness(0.97);
}

.organization-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.organization-inspector__section-heading {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}

.organization-inspector__section-heading h3 {
  font-size: 0.88rem;
}

.organization-inspector__section-heading span {
  color: var(--workspace-muted);
  font-size: 0.66rem;
}

.organization-inspector__assignment {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.organization-inspector__assignment > div:last-child {
  min-width: 0;
}

.organization-inspector__assignment a,
.organization-inspector__assignment span {
  display: block;
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organization-inspector__assignment span {
  color: var(--workspace-muted);
  font-size: 0.67rem;
  margin-top: 2px;
}

.organization-editor button:focus-visible,
.organization-editor a:focus-visible,
.organization-editor input:focus-visible,
.organization-editor select:focus-visible {
  outline: 3px solid var(--workspace-focus);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  .organization-editor__layout {
    grid-template-columns: minmax(0, 1fr) 330px;
  }

  .organization-editor__count {
    display: none;
  }
}

@media (max-width: 760px) {
  .organization-editor {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .organization-editor__layout {
    display: block;
  }

  .organization-editor__canvas-panel {
    height: 510px;
  }

  .organization-editor__toolbar {
    align-items: stretch;
    display: grid;
    gap: 7px;
    left: 10px;
    right: 10px;
    top: 10px;
  }

  .organization-editor__search-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(110px, 0.65fr);
  }

  .organization-editor__search-group input,
  .organization-editor__search-group select {
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  .organization-editor__toolbar-end {
    justify-content: flex-end;
  }

  .organization-editor__notice {
    left: 10px;
    max-width: calc(100% - 20px);
    top: 98px;
  }

  .organization-inspector {
    border-left: 0;
    border-top: 1px solid var(--workspace-line);
    max-height: none;
  }

  .organization-inspector__scroll {
    overflow: visible;
    padding: 16px;
  }

  .organization-chart-list-view {
    padding: 104px 10px 12px !important;
  }
}

@media (max-width: 420px) {
  .organization-editor__canvas-panel {
    height: 470px;
  }

  .organization-chart-controls {
    max-width: calc(100% - 94px);
  }

  .organization-chart-status {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

}

.forms-icon-action {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #64748b;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  gap: 7px;
  min-width: 36px;
  padding: 0 9px;
  text-decoration: none;
}

.forms-icon-action__label {
  font-size: 12px;
  font-weight: 700;
}

.forms-icon-action:hover,
.forms-icon-action:focus-visible {
  background: #f1f5f9;
  color: #0f172a;
  outline: 2px solid transparent;
}

/* Forms r013 reconciliation
---------------------------------*/

.forms-experience {
  background: var(--workspace-canvas);
  color: var(--workspace-ink);
  min-height: 100%;
}

/* The builder and preview screens run flush, so the shell clips at the viewport.
   Let the Forms surface own the scroll instead of losing content below the fold. */
.workspace-shell__content--flush > .forms-experience {
  height: 100%;
  overflow-y: auto;
}

.forms-experience button,
.forms-experience input,
.forms-experience select,
.forms-experience textarea {
  font: inherit;
}

.forms-page-shell {
  margin: 0 auto;
  max-width: var(--workspace-page-max);
  padding: var(--workspace-page-padding);
  width: 100%;
}

.forms-saved-notice { padding-bottom: 0; }
.forms-sr-only { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

.forms-page-heading {
  align-items: flex-end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 0 0 22px;
}
.forms-page-heading h1 { font-size: 28px; font-weight: 750; letter-spacing: -.025em; line-height: 1.18; margin: 0; }
.forms-page-heading p { color: var(--workspace-muted); font-size: 13px; margin: 6px 0 0; }
.forms-page-actions, .forms-header-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }

.forms-button {
  align-items: center;
  background: var(--workspace-paper);
  border: 1px solid var(--workspace-line);
  border-radius: 7px;
  color: var(--workspace-ink);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  gap: 8px;
  justify-content: center;
  min-height: 36px;
  padding: 8px 13px;
  text-decoration: none;
}
.forms-button:hover:not(:disabled), .forms-button:focus-visible { background: var(--workspace-accent-soft); }
.forms-button:focus-visible, .forms-experience input:focus-visible, .forms-experience select:focus-visible, .forms-experience textarea:focus-visible, .forms-experience summary:focus-visible { outline: 3px solid var(--workspace-focus); outline-offset: 2px; }
.forms-button:disabled { cursor: not-allowed; opacity: .45; }
.forms-button--primary { background: var(--workspace-accent); border-color: var(--workspace-accent); color: #fff; }
.forms-button--primary:hover:not(:disabled) { background: #4f5961; color: #fff; }
.forms-button--danger { color: #7c3e3e; }
.forms-button--quiet { border-color: transparent; }
.forms-button--block { margin-top: 10px; width: 100%; }

.forms-directory-panel, .forms-content-card, .forms-meta-card, .forms-document-card, .forms-assignment-summary {
  background: var(--workspace-paper);
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(47, 55, 61, .06);
}
.forms-directory-panel { overflow: visible; }
.forms-directory-tools { align-items: end; background: var(--theme-surface-muted); border-bottom: 1px solid var(--workspace-line); display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) 180px 180px auto; padding: 14px 16px; }
.forms-directory-filter-actions { align-self: end; position: relative; }
.forms-directory-filter-actions > div { display: flex; gap: 8px; }
.forms-directory-filter-actions p { color: var(--workspace-muted); font-size: 10px; margin: 0; position: absolute; right: 0; text-align: end; top: calc(100% + 5px); white-space: nowrap; }
.forms-directory-tools--with-status { padding-bottom: 30px; }
.forms-response-tools { grid-template-columns: minmax(0, 1fr) 200px; }

.forms-control { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.forms-control > span { font-size: 10px; font-weight: 800; }
.forms-control small { color: var(--workspace-muted); font-size: 9px; }
.forms-control input, .forms-control select, .forms-control textarea, .forms-document-card select, .forms-respondent-question input, .forms-respondent-question select, .forms-respondent-question textarea {
  background: #fff;
  border: 1px solid var(--workspace-line-strong);
  border-radius: 7px;
  color: var(--workspace-ink);
  min-height: 38px;
  padding: 8px 10px;
  width: 100%;
}
.forms-control textarea { line-height: 1.45; resize: vertical; }
.forms-check { align-items: center; display: flex; font-size: 11px; font-weight: 700; gap: 8px; margin-top: 4px; }
.forms-check input { height: 15px; width: 15px; }

.forms-table-scroll { overflow-x: auto; }
.forms-directory-table { min-width: 740px; width: 100%; }
.forms-directory-table th { background: #f1f3f4; color: var(--workspace-muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; padding: 10px 16px; text-align: left; text-transform: uppercase; }
.forms-directory-table td { border-top: 1px solid var(--workspace-line); font-size: 12px; padding: 13px 16px; vertical-align: middle; }
.forms-directory-table tbody tr:first-child td { border-top: 0; }
.forms-directory-table tbody tr:hover { background: #f7f8f8; }
.forms-directory-table td:first-child { width: 38%; }
.forms-directory-table td:last-child { width: 136px; }
.forms-name-link { font-weight: 750; text-decoration: underline; text-decoration-color: #98a0a6; text-underline-offset: 3px; }
.forms-directory-table td small { color: var(--workspace-muted); display: block; font-size: 9px; margin-top: 2px; }
.forms-row-actions { align-items: center; display: flex; gap: 4px; justify-content: flex-end; }

.forms-status { border: 1px solid var(--workspace-line); border-radius: 999px; display: inline-flex; font-size: 9px; font-weight: 750; line-height: 1; padding: 5px 8px; white-space: nowrap; }
.forms-status--positive { background: #e9f7ef; border-color: #a7ddbd; color: #27613e; }
.forms-status--attention { background: #fff7e5; border-color: #edcf88; color: #765714; }
.forms-status--neutral { background: #f1f3f4; color: var(--workspace-ink); }

.forms-share-menu, .forms-link-document { position: relative; }
.forms-share-menu > summary, .forms-link-document > summary { list-style: none; }
.forms-share-menu > summary::-webkit-details-marker, .forms-link-document > summary::-webkit-details-marker { display: none; }
.forms-share-popover, .forms-link-document-panel { background: #fff; border: 1px solid var(--workspace-line); border-radius: 9px; box-shadow: 0 14px 38px rgba(47, 55, 61, .18); padding: 16px; position: absolute; right: 0; top: calc(100% + 8px); width: 290px; z-index: 30; }
.forms-share-popover > strong, .forms-link-document-panel > strong { font-size: 12px; }
.forms-share-popover p, .forms-link-document-panel p { color: var(--workspace-muted); font-size: 10px; line-height: 1.5; margin: 5px 0 12px; }
.forms-share-link { align-items: end; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; margin-top: 12px; }
.forms-share-link .forms-button { min-height: 34px; white-space: nowrap; }

.forms-topbar { align-items: center; background: #fff; border-bottom: 1px solid var(--workspace-line); display: flex; justify-content: space-between; min-height: 48px; padding: 0 24px; }
.forms-page-shell > .forms-topbar { border: 1px solid var(--workspace-line); border-radius: 8px 8px 0 0; margin: -8px 0 24px; }
.forms-back-link { align-items: center; display: inline-flex; font-size: 11px; font-weight: 750; gap: 5px; }
.forms-back-link span { font-size: 20px; font-weight: 400; }
.forms-tabs { align-items: stretch; display: flex; gap: 3px; min-height: 48px; }
.forms-tabs > a, .forms-tabs > .forms-share-menu > summary { align-items: center; border-radius: 7px; color: var(--workspace-muted); display: flex; font-size: 10px; font-weight: 800; min-height: 34px; padding: 8px 12px; }
.forms-tabs > a.active { background: var(--workspace-accent-soft); color: var(--workspace-ink); margin: 7px 0; min-height: 34px; }
.forms-tabs > .forms-share-menu > summary { cursor: pointer; height: 100%; }

.forms-builder-surface, .forms-preview-surface { min-height: 100%; }
.forms-meta-card { border-left: 0; border-radius: 0; border-right: 0; box-shadow: none; padding: 16px max(24px, calc((100% - 1120px) / 2)); }
.forms-meta-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) 170px; }
.forms-control--wide { min-width: 0; }
.forms-meta-grid .forms-control:nth-of-type(3) { grid-column: 1; }
.forms-meta-grid .forms-control:nth-of-type(4) { grid-column: 2; grid-row: 2; }
.forms-meta-grid > .forms-check { grid-column: 2; }
.forms-meta-grid > .forms-workflow-availability {
  align-items: flex-start;
  background: #f7f8f8;
  border: 1px solid var(--workspace-line);
  border-radius: 7px;
  grid-column: 1 / -1;
  margin-top: 0;
  padding: 11px 12px;
}
.forms-workflow-availability > span { display: flex; flex-direction: column; gap: 2px; }
.forms-workflow-availability small { color: var(--workspace-muted); font-size: 9px; font-weight: 500; line-height: 1.4; }

.forms-builder-workspace { display: grid; grid-template-columns: 220px minmax(420px, 1fr) 290px; min-height: calc(100vh - 290px); }
.forms-outline, .forms-question-properties { background: #fff; min-width: 0; padding: 20px 16px; }
.forms-outline { border-right: 1px solid var(--workspace-line); }
.forms-question-properties { border-left: 1px solid var(--workspace-line); }
.forms-panel-heading { align-items: center; border-bottom: 1px solid var(--workspace-line); display: flex; justify-content: space-between; margin-bottom: 12px; padding-bottom: 12px; }
.forms-panel-heading div > span, .forms-canvas-heading div > span, .forms-review-panel .forms-content-card > span, .forms-answers-card header span, .forms-assignment-summary > span { color: var(--workspace-muted); display: block; font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.forms-panel-heading strong { display: block; font-size: 12px; margin-top: 2px; }
.forms-count-badge { background: #f1f3f4; border: 1px solid var(--workspace-line); border-radius: 999px; font-size: 9px; font-weight: 800; padding: 3px 7px; }
.forms-outline ol { display: flex; flex-direction: column; gap: 5px; list-style: none; margin: 0 0 14px; padding: 0; }
.forms-outline ol button { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 7px; color: var(--workspace-muted); cursor: pointer; display: flex; gap: 8px; min-height: 36px; padding: 6px 7px; text-align: left; width: 100%; }
.forms-outline ol button.active { background: #f1f3f4; border-color: var(--workspace-line-strong); color: var(--workspace-ink); }
.forms-outline ol button > span, .forms-question-number { align-items: center; background: #f1f3f4; border: 1px solid var(--workspace-line); border-radius: 50%; display: inline-flex; flex: 0 0 auto; font-size: 9px; height: 22px; justify-content: center; width: 22px; }
.forms-outline ol strong { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.forms-question-canvas { background: #f7f8f8; min-width: 0; padding: 24px 28px 40px; }
.forms-canvas-heading { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 14px; }
.forms-canvas-heading h1 { font-size: 20px; font-weight: 750; margin: 3px 0 0; }
.forms-canvas-heading p { color: var(--workspace-muted); font-size: 9px; margin: 0; }
.forms-question-list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.forms-question-list > li { background: #fff; border: 1px solid var(--workspace-line); border-radius: 9px; box-shadow: 0 1px 3px rgba(47,55,61,.07); cursor: pointer; display: grid; gap: 10px; grid-template-columns: 14px 24px minmax(0, 1fr) auto; min-height: 92px; padding: 14px; }
.forms-question-list > li.selected { border-color: var(--workspace-line-strong); box-shadow: 0 0 0 1px var(--workspace-line-strong); }
.forms-question-grip { color: var(--workspace-muted); padding-top: 2px; }
.forms-question-copy h2 { font-size: 12px; font-weight: 750; margin: 0; }
.forms-question-copy small { color: var(--workspace-muted); display: block; font-size: 8px; margin-top: 1px; }
.forms-question-actions { display: flex; gap: 4px; }
.forms-question-actions button { align-items: center; background: #fff; border: 1px solid var(--workspace-line); border-radius: 6px; color: var(--workspace-muted); cursor: pointer; display: inline-flex; height: 28px; justify-content: center; width: 28px; }
.forms-question-actions button:disabled { opacity: .35; }
.forms-question-preview { color: var(--workspace-muted); font-size: 9px; margin-top: 12px; max-width: 340px; }
.forms-question-preview.input { border-bottom: 1px solid var(--workspace-line-strong); height: 16px; }
.forms-question-preview.textarea { border: 1px solid var(--workspace-line); border-radius: 4px; height: 34px; }
.forms-question-preview.select { border-bottom: 1px solid var(--workspace-line-strong); display: flex; justify-content: space-between; padding-bottom: 3px; }
.forms-question-preview.choices { display: flex; flex-direction: column; gap: 4px; }
.forms-question-preview.choices span { align-items: center; display: flex; gap: 5px; }
.forms-question-preview.choices i { border: 1px solid var(--workspace-line-strong); border-radius: 50%; height: 9px; width: 9px; }
.forms-add-question-card { align-items: center; background: transparent; border: 1px dashed var(--workspace-line-strong); border-radius: 9px; color: var(--workspace-muted); cursor: pointer; display: flex; font-size: 11px; font-weight: 750; gap: 6px; justify-content: center; margin-top: 10px; min-height: 54px; width: 100%; }
.forms-properties-fields { display: flex; flex-direction: column; gap: 14px; }
.forms-property-actions { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-top: 4px; }
.forms-builder-footer { align-items: flex-start; background: #fff; border-top: 1px solid var(--workspace-line); display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; padding: 12px 18px; }
.forms-builder-footer__notice { color: var(--workspace-muted); flex: 1 1 30ch; font-size: 14px; line-height: 1.5; max-width: 62ch; }
.forms-builder-editable { border: 0; margin: 0; min-inline-size: 0; padding: 0; }
.forms-header-action-status { color: var(--workspace-muted); font-size: 10px; font-weight: 700; max-width: 19ch; }
.forms-builder-save-status { align-items: center; background: var(--theme-surface-muted); border-top: 1px solid var(--workspace-line); display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding: 10px 18px; }
.forms-builder-save-status > span { color: var(--workspace-ink); flex: 1 1 32ch; font-size: 11px; font-weight: 700; }
.forms-builder-save-status .forms-button { flex: 0 0 auto; min-height: 32px; padding: 6px 10px; }

.forms-preview-toolbar { align-items: center; background: #fff; border-bottom: 1px solid var(--workspace-line); display: flex; gap: 3px; justify-content: center; min-height: 44px; }
.forms-preview-toolbar span { color: var(--workspace-muted); font-size: 9px; font-weight: 750; margin-right: 5px; }
.forms-preview-toolbar button { background: transparent; border: 0; border-radius: 6px; color: var(--workspace-muted); cursor: pointer; font-size: 9px; font-weight: 750; padding: 6px 10px; }
.forms-preview-toolbar button.active { background: var(--workspace-accent-soft); color: var(--workspace-ink); }
.forms-respondent-preview, .forms-fill-surface { background: #f1f3f4; min-height: calc(100vh - 148px); padding: 28px 24px 50px; }
.forms-fill-surface { min-height: calc(100vh - var(--workspace-header-height)); }
.forms-respondent-sheet { margin: 0 auto; max-width: 760px; transition: max-width .2s ease; }
.forms-respondent-preview.mobile .forms-respondent-sheet { max-width: 390px; }
.forms-respondent-header, .forms-respondent-question { background: #fff; border: 1px solid var(--workspace-line); border-radius: 9px; box-shadow: 0 1px 3px rgba(47,55,61,.07); margin-bottom: 10px; padding: 20px; }
.forms-respondent-header { border-top: 5px solid var(--workspace-accent); padding-top: 17px; }
.forms-respondent-header h1 { font-size: 22px; font-weight: 750; margin: 12px 0 0; }
.forms-respondent-header p { color: var(--workspace-muted); font-size: 11px; margin: 6px 0 12px; }
.forms-respondent-header small { color: var(--workspace-muted); font-size: 8px; }
.forms-respondent-question > label, .forms-respondent-question legend { display: block; font-size: 11px; font-weight: 750; }
.forms-respondent-question label > input, .forms-respondent-question label > select, .forms-respondent-question label > textarea { margin-top: 7px; }
.forms-respondent-question fieldset { margin: 0; padding: 0; }
.forms-choice-row { align-items: center; display: flex !important; font-size: 10px !important; font-weight: 500 !important; gap: 7px; margin-top: 8px; }
.forms-choice-row input { min-height: 0; width: auto; }
.forms-respondent-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 8px 0; }
.forms-draft-status { color: var(--workspace-muted); font-size: 9px; text-align: right; }
.forms-fill-route { align-items: center; display: flex; justify-content: space-between; margin-bottom: 12px; }
.forms-fill-route > span { color: var(--workspace-muted); font-size: 9px; }
.forms-submit-dialog { border: 1px solid var(--workspace-line-strong); border-radius: 10px; box-shadow: 0 20px 60px rgba(47,55,61,.25); max-width: 420px; padding: 22px; width: calc(100% - 32px); }
.forms-submit-dialog::backdrop { background: rgba(47,55,61,.5); }
.forms-submit-dialog h2 { font-size: 17px; margin: 0; }
.forms-submit-dialog p { color: var(--workspace-muted); font-size: 11px; }
.forms-submit-dialog > div { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.forms-progress > span { color: var(--workspace-muted); display: flex; font-size: 9px; justify-content: space-between; }
.forms-progress > div { background: #e8ebed; border-radius: 999px; height: 5px; margin-top: 7px; overflow: hidden; }
.forms-progress > div span { background: var(--workspace-accent); display: block; height: 100%; width: 0; }

.forms-breadcrumb { color: var(--workspace-muted); display: flex; font-size: 10px; gap: 6px; margin-bottom: 18px; }
.forms-breadcrumb span { display: flex; gap: 6px; }
.forms-breadcrumb a { font-weight: 700; }
.forms-stack { display: flex; flex-direction: column; gap: 14px; }
.forms-assignment-layout { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 300px; }
.forms-section-card { padding: 20px; }
.forms-number-heading { align-items: center; border-bottom: 1px solid var(--workspace-line); display: flex; gap: 9px; margin-bottom: 16px; padding-bottom: 12px; }
.forms-number-heading > span { align-items: center; background: #f1f3f4; border: 1px solid var(--workspace-line-strong); border-radius: 50%; display: inline-flex; font-size: 9px; height: 26px; justify-content: center; width: 26px; }
.forms-number-heading h2 { font-size: 13px; font-weight: 750; margin: 0; }
.forms-selected-summary { align-items: center; background: #f7f8f8; border: 1px solid var(--workspace-line); border-radius: 7px; display: flex; font-size: 10px; gap: 12px; margin-top: 12px; padding: 10px; }
.forms-selected-summary a { font-weight: 750; margin-left: auto; text-decoration: underline; }
.forms-personnel-picker { display: flex; flex-direction: column; gap: 7px; list-style: none; margin: 12px 0 0; padding: 0; }
.forms-personnel-picker li { align-items: center; border: 1px solid var(--workspace-line); border-radius: 7px; display: flex; justify-content: space-between; padding: 9px 10px; }
.forms-person { align-items: center; display: flex; gap: 9px; min-width: 0; }
.forms-person > div { min-width: 0; }
.forms-person > span { align-items: center; background: #e8ebed; border: 1px solid var(--workspace-line); border-radius: 50%; display: inline-flex; flex: 0 0 auto; font-size: 9px; font-weight: 800; height: 30px; justify-content: center; width: 30px; }
.forms-person > span.large { height: 42px; width: 42px; }
.forms-person strong, .forms-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forms-person strong { font-size: 11px; }.forms-person small { color: var(--workspace-muted); font-size: 8px; margin-top: 2px; }
.forms-assignment-summary { padding: 20px; position: sticky; top: 18px; }
.forms-assignment-summary h2 { font-size: 17px; font-weight: 750; margin: 5px 0 14px; }
.forms-assignment-summary dl, .forms-detail-list { margin: 0 0 16px; }
.forms-assignment-summary dl > div, .forms-detail-list > div { border-top: 1px solid var(--workspace-line); display: flex; font-size: 10px; justify-content: space-between; padding: 9px 0; }
.forms-assignment-summary dt, .forms-detail-list dt { color: var(--workspace-muted); }.forms-assignment-summary dd, .forms-detail-list dd { font-weight: 700; margin: 0; text-align: right; }
.forms-muted-copy { color: var(--workspace-muted); font-size: 11px; line-height: 1.6; margin: 0; }

/* Preserve the approved Assign form composition without changing other Forms pages. */
.forms-assignment-breadcrumb { align-items: center; display: flex; gap: 9px; font-size: 11px; margin-bottom: 18px; }
.forms-assignment-breadcrumb a { color: var(--workspace-ink); font-weight: 750; }
.forms-assignment-heading { margin-bottom: 22px; }
.forms-assignment-heading h1 { font-size: 28px; font-weight: 750; letter-spacing: -.025em; line-height: 1.18; margin: 0 0 8px; }
.forms-assignment-heading p { color: var(--workspace-muted); font-size: 12px; margin: 0; }
.forms-assignment-setup { align-items: center; background: #fff7e5; border: 1px solid #edcf88; border-radius: 10px; display: flex; gap: 18px; justify-content: space-between; margin: 0 0 18px; padding: 14px 16px; }
.forms-assignment-setup h2 { font-size: 13px; font-weight: 750; margin: 0 0 4px; }
.forms-assignment-setup p { color: #765714; font-size: 11px; line-height: 1.5; margin: 0; max-width: 76ch; }
.forms-assignment-setup .forms-button { flex: 0 0 auto; }
.forms-assignment-page .forms-number-heading h2 { font-size: 15px; }
.forms-assignment-page .forms-assignment-layout { gap: 16px; grid-template-columns: minmax(0, 1fr) 310px; }
.forms-assignment-picker { border: 1px solid var(--workspace-line); border-radius: 7px; display: grid; margin-top: 6px; max-height: 180px; overflow: auto; }
.forms-assignment-picker > button { align-items: center; background: var(--workspace-paper); border: 0; border-top: 1px solid var(--workspace-line); color: var(--workspace-ink); cursor: pointer; display: flex; gap: 9px; padding: 9px; text-align: left; width: 100%; }
.forms-assignment-picker > button:first-child { border-top: 0; }
.forms-assignment-picker > button:hover, .forms-assignment-picker > button[aria-pressed="true"] { background: #f1f3f4; }
.forms-assignment-picker > button:disabled { cursor: not-allowed; opacity: .5; }
.forms-assignment-picker > p { padding: 12px; }
.forms-assignment-person { align-items: center; display: flex; gap: 9px; min-width: 0; }
.forms-assignment-person > span:last-child { display: grid; gap: 2px; min-width: 0; }
.forms-assignment-person strong { font-size: 11px; overflow-wrap: anywhere; }
.forms-assignment-person small { color: var(--workspace-muted); font-size: 9px; overflow-wrap: anywhere; }
.forms-assignment-avatar { align-items: center; background: #e8ebed; border: 1px solid var(--workspace-line); border-radius: 50%; display: inline-flex; flex: 0 0 30px; font-size: 9px; font-weight: 800; height: 30px; justify-content: center; }
.forms-picker-check { margin-left: auto; }
.forms-selected-people { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.forms-selected-person { align-items: center; background: #f1f3f4; border: 1px solid var(--workspace-line); border-radius: 7px; display: flex; gap: 7px; max-width: 100%; padding: 6px; }
.forms-selected-person > button { background: transparent; border: 0; color: var(--workspace-muted); cursor: pointer; font-size: 20px; padding: 5px; }
.forms-assignment-schedule { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.forms-assignment-instructions { grid-column: 1 / -1; }
.forms-assignment-check { align-items: center; display: flex; font-size: 11px; font-weight: 750; gap: 9px; margin: 14px 0 10px; }
.forms-assignment-check input { flex: 0 0 auto; height: 16px; width: 16px; }
.forms-assignment-page .forms-assignment-summary dl > div { display: grid; gap: 8px; grid-template-columns: 80px minmax(0, 1fr); }
.forms-assignment-page .forms-assignment-summary dd { overflow-wrap: anywhere; text-align: left; }
.forms-assignment-success { display: grid; gap: 14px; margin-top: 18px; }
.forms-assignment-success h2 { font-size: 18px; margin: 0; }
.forms-assignment-success > p { color: var(--workspace-muted); font-size: 11px; margin: 0; }
.forms-assignment-link-card { background: #f7f8f8; border: 1px solid var(--workspace-line); border-radius: 9px; display: grid; gap: 12px; padding: 16px; }
.forms-assignment-link-card .forms-control > span { font-size: 11px; }
.forms-assignment-link-actions, .forms-assignment-success-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.forms-assignment-link-actions .forms-button, .forms-assignment-success-actions .forms-button { flex: 1 1 190px; text-align: center; }
@media (max-width: 1000px) {
  .forms-assignment-page .forms-assignment-layout { grid-template-columns: minmax(0, 1fr); }
  .forms-assignment-page .forms-assignment-summary { position: static; }
}
@media (max-width: 480px) {
  .forms-assignment-setup { align-items: stretch; flex-direction: column; }
  .forms-assignment-schedule { grid-template-columns: minmax(0, 1fr); }
}

.forms-summary-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; }
.forms-summary-card { background: #fff; border: 1px solid var(--workspace-line); border-radius: 8px; padding: 14px 16px; }
.forms-summary-card span { color: var(--workspace-muted); display: block; font-size: 9px; font-weight: 750; }.forms-summary-card strong { display: block; font-size: 22px; margin-top: 3px; }
.forms-row-link { background: transparent; border: 0; color: var(--workspace-ink); cursor: pointer; font-size: 10px; font-weight: 750; padding: 4px; text-decoration: underline; text-underline-offset: 3px; }
.forms-response-table th:nth-child(1) { width: 34%; }
.forms-response-table th:nth-child(2), .forms-response-table th:nth-child(3), .forms-response-table th:nth-child(4) { width: 15%; }
.forms-request-actions { position: relative; }
.forms-request-actions > summary { cursor: pointer; font-size: 10px; font-weight: 750; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.forms-request-actions > summary::-webkit-details-marker { display: none; }
.forms-request-actions-panel { background: #fff; border: 1px solid var(--workspace-line-strong); border-radius: 8px; box-shadow: 0 14px 36px rgba(47,55,61,.16); display: grid; gap: 10px; min-width: 230px; padding: 12px; position: absolute; right: 0; top: calc(100% + 5px); z-index: 4; }
.forms-request-actions-panel form { display: grid; gap: 7px; }
.forms-request-actions-panel button { background: #fff; border: 1px solid var(--workspace-line); border-radius: 6px; cursor: pointer; font-size: 9px; min-height: 30px; padding: 5px 8px; }
.forms-request-actions-panel button:disabled { cursor: not-allowed; opacity: .45; }
.forms-request-deliveries { border-bottom: 1px solid var(--workspace-line); font-size: 9px; padding-bottom: 8px; }
.forms-request-deliveries p { margin: 3px 0 0; }
.forms-response-pages { align-items: center; border-top: 1px solid var(--workspace-line); display: flex; font-size: 10px; gap: 12px; justify-content: flex-end; padding: 12px 16px; }
.forms-response-pages a { font-weight: 750; text-decoration: underline; }
.forms-response-layout { align-items: start; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 310px; }
.forms-answer-stack, .forms-review-panel { display: flex; flex-direction: column; gap: 12px; }
.forms-person-card { align-items: center; display: flex; justify-content: space-between; padding: 15px; }
.forms-person-card > .forms-row-link { flex: 0 0 auto; margin-left: 12px; }
.forms-answers-card, .forms-review-panel .forms-content-card { padding: 18px; }
.forms-answers-card header { align-items: center; border-bottom: 1px solid var(--workspace-line); display: flex; justify-content: space-between; padding-bottom: 13px; }
.forms-answers-card h2, .forms-review-panel h2 { font-size: 15px; font-weight: 750; margin: 3px 0 0; }.forms-answers-card header small { color: var(--workspace-muted); font-size: 9px; }
.forms-answers-card dl { margin: 0; }.forms-answers-card dl > div { border-bottom: 1px solid var(--workspace-line); padding: 13px 0; }.forms-answers-card dt { color: var(--workspace-muted); font-size: 9px; font-weight: 750; }.forms-answers-card dd { font-size: 11px; margin: 4px 0 0; }
.forms-review-panel p { color: var(--workspace-muted); font-size: 10px; line-height: 1.5; }.forms-decision-actions { display: grid; gap: 7px; grid-template-columns: 1fr 1fr; margin-top: 12px; }.forms-decision-actions form { margin: 0; }.forms-decision-actions form .forms-button { width: 100%; }
.forms-history { list-style: none; margin: 12px 0 0; padding: 0; }.forms-history li { border-left: 2px solid var(--workspace-line); padding: 0 0 10px 10px; }.forms-history strong, .forms-history small { display: block; font-size: 9px; }.forms-history small { color: var(--workspace-muted); margin-top: 2px; }

/* Forms motion: reveal an irreversible recorded response or decision without
   choreographing routine form fields or the response register. */
@keyframes forms-recorded-result-reveal {
  from { clip-path: inset(0 0 100% 0 round 10px); opacity: .72; }
  to { clip-path: inset(0 0 0 0 round 10px); opacity: 1; }
}

@keyframes forms-recording-feedback {
  from { opacity: 0; }
  to { opacity: 1; }
}

.forms-completion-success--arrived,
.forms-decision-recorded {
  animation: forms-recorded-result-reveal 240ms cubic-bezier(.16, 1, .3, 1) both;
}

.forms-submit-progress,
.forms-decision-progress {
  color: var(--workspace-muted);
  font-size: 14px;
  grid-column: 1 / -1;
  line-height: 1.45;
  margin: 0;
}

.forms-submit-progress {
  margin-top: 12px;
}

.forms-submit-progress,
.forms-decision-progress {
  animation: forms-recording-feedback 120ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .forms-completion-success--arrived,
  .forms-decision-recorded,
  .forms-submit-progress,
  .forms-decision-progress {
    animation: none;
  }
}

.forms-document-explainer { align-items: center; background: #f1f3f4; border: 1px solid var(--workspace-line); border-radius: 9px; display: flex; gap: 14px; margin-bottom: 16px; padding: 14px 16px; }
.forms-document-mark { align-items: center; background: #fff; border: 1px solid var(--workspace-line); border-radius: 8px; display: inline-flex; flex: 0 0 auto; height: 38px; justify-content: center; width: 38px; }
.forms-document-explainer strong { font-size: 11px; }.forms-document-explainer p { color: var(--workspace-muted); font-size: 9px; margin: 2px 0 0; }.forms-document-explainer > a { font-size: 10px; font-weight: 750; margin-left: auto; text-decoration: underline; }
.forms-document-list { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.forms-document-card { padding: 18px; }.forms-document-card > header { align-items: flex-start; display: flex; justify-content: space-between; }.forms-document-title { display: flex; gap: 10px; }.forms-document-title > span { background: #f1f3f4; border: 1px solid var(--workspace-line); border-radius: 5px; font-size: 8px; font-weight: 800; height: fit-content; padding: 4px 6px; }.forms-document-title h2 { font-size: 13px; font-weight: 750; margin: 0; }.forms-document-title p { color: var(--workspace-muted); font-size: 9px; margin: 2px 0 0; }
.forms-document-card dl { margin: 15px 0; }.forms-document-card dl > div { border-top: 1px solid var(--workspace-line); display: grid; font-size: 9px; gap: 10px; grid-template-columns: 100px 1fr; padding: 9px 0; }.forms-document-card dt { color: var(--workspace-muted); }.forms-document-card dd { margin: 0; }.forms-document-card select { font-size: 9px; min-height: 30px; padding: 4px 7px; }.forms-document-card footer { align-items: center; display: flex; gap: 8px; }.forms-document-card footer form { margin-left: auto; }
dialog.forms-link-document-dialog { background: transparent; border: 0; color: var(--workspace-ink); margin: auto; max-height: calc(100dvh - 40px); max-width: min(520px, calc(100vw - 32px)); padding: 0; width: 100%; }
dialog.forms-link-document-dialog::backdrop { background: rgba(47, 55, 61, .48); }
.forms-link-document-card { background: var(--workspace-paper); border: 1px solid var(--workspace-line-strong); border-radius: 12px; box-shadow: 0 20px 60px rgba(47, 55, 61, .25); overflow: hidden; }
.forms-link-document-card > header { align-items: flex-start; border-bottom: 1px solid var(--workspace-line); display: flex; gap: 16px; justify-content: space-between; padding: 18px 20px; }
.forms-link-document-card h2 { font-size: 18px; margin: 0; }
.forms-link-document-card header p { color: var(--workspace-muted); font-size: 11px; margin: 5px 0 0; }
.forms-dialog-close { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--workspace-muted); cursor: pointer; display: inline-flex; flex: 0 0 auto; font-size: 22px; height: 36px; justify-content: center; line-height: 1; width: 36px; }
.forms-dialog-close:hover, .forms-dialog-close:focus-visible { background: var(--workspace-accent-soft); color: var(--workspace-ink); }
.forms-link-document-body { display: grid; gap: 15px; padding: 20px; }
.forms-document-options { display: grid; gap: 8px; max-height: min(280px, 36dvh); overflow-y: auto; }
.forms-document-option { align-items: center; border: 1px solid var(--workspace-line); border-radius: 7px; cursor: pointer; display: flex; gap: 10px; padding: 11px; }
.forms-document-option:hover, .forms-document-option:has(input:checked) { background: #f7f8f8; border-color: var(--workspace-line-strong); }
.forms-document-option input { flex: 0 0 auto; height: 16px; margin: 0; width: 16px; }
.forms-document-option span { display: grid; gap: 3px; min-width: 0; }
.forms-document-option strong { font-size: 11px; overflow-wrap: anywhere; }
.forms-document-option small { color: var(--workspace-muted); font-size: 10px; }
.forms-document-options-empty { border: 1px dashed var(--workspace-line-strong); border-radius: 7px; padding: 20px; text-align: center; }
.forms-document-options-empty strong { font-size: 12px; }
.forms-document-options-empty p { color: var(--workspace-muted); font-size: 10px; margin: 4px 0 10px; }
.forms-document-options-empty a { font-size: 10px; font-weight: 750; text-decoration: underline; }
.forms-link-document-card > footer { border-top: 1px solid var(--workspace-line); display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; }

.forms-notice { border: 1px solid var(--workspace-line); border-radius: .5rem; padding: 1rem; }.forms-notice--error { background: #fff0f0; border-color: #efc4c4; }.forms-notice--warning { background: #fff8e7; border-color: #ead39e; }.forms-notice--status { background: #f1f3f4; }.forms-notice h2 { font-size: 14px; font-weight: 750; margin: 0; }.forms-notice p { color: var(--workspace-muted); font-size: .875rem; line-height: 1.43; margin: .25rem 0 0; }.forms-notice__action { margin-top: .75rem; }.forms-notice__action .forms-button { font-size: .875rem; min-height: 35px; }.forms-recovery-link { color: var(--workspace-accent-strong); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.forms-notice--status p { color: var(--workspace-ink); }

/* Personnel self-service assigned Forms */
.my-forms-page { margin: 0 auto; max-width: 1040px; padding: 34px 18px 56px; }
.my-forms-heading > span { color: var(--workspace-muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.my-forms-heading h1 { font-size: 30px; margin: 8px 0 4px; }
.my-forms-heading p { color: var(--workspace-muted); font-size: 12px; margin: 0; }
.my-forms-register, .my-forms-state { background: #fff; border: 1px solid var(--workspace-line); border-radius: 10px; margin-top: 24px; }
.my-forms-register { overflow: hidden; }
.my-forms-register-heading { align-items: flex-start; border-bottom: 1px solid var(--workspace-line); display: flex; justify-content: space-between; padding: 18px 20px; }
.my-forms-register-heading h2, .my-forms-state h2 { font-size: 15px; margin: 0; }
.my-forms-register-heading p, .my-forms-state p { color: var(--workspace-muted); font-size: 10px; margin: 4px 0 0; }
.my-forms-register-heading > span { color: var(--workspace-muted); font-size: 9px; }
.my-forms-list { list-style: none; margin: 0; padding: 0; }
.my-forms-row { align-items: center; border-bottom: 1px solid var(--workspace-line); display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) auto auto; padding: 18px 20px; }
.my-forms-copy h2 { font-size: 13px; margin: 0; }
.my-forms-copy > p { color: var(--workspace-muted); font-size: 10px; margin: 4px 0 8px; }
.my-forms-meta { color: var(--workspace-muted); display: flex; flex-wrap: wrap; font-size: 9px; gap: 12px; }
.my-forms-status { align-self: center; background: #f1f3f4; border: 1px solid var(--workspace-line); border-radius: 999px; font-size: 9px; font-weight: 750; padding: 4px 8px; white-space: nowrap; }
.my-forms-status--draft_saved { background: #fff8e7; border-color: #ead39e; }
.my-forms-status--submitted { background: #eaf8ef; border-color: #b8e2c5; }
.my-forms-button { align-items: center; border: 1px solid var(--workspace-line-strong); border-radius: 6px; cursor: pointer; display: inline-flex; font-size: 10px; font-weight: 750; justify-content: center; min-height: 34px; padding: 7px 12px; text-decoration: none; }
.my-forms-button--primary { background: var(--workspace-ink); color: #fff; }
.my-forms-button--secondary { background: #fff; color: var(--workspace-ink); }
.my-forms-load-region { align-items: center; display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.my-forms-load-region p { color: var(--workspace-muted); font-size: 9px; margin: 0; }
.my-forms-state { padding: 42px 20px; text-align: center; }
.my-forms-state .my-forms-button { margin-top: 16px; }
.forms-empty { padding: 38px 20px; text-align: center; }.forms-empty h2 { font-size: 13px; font-weight: 750; margin: 0; }.forms-empty p { color: var(--workspace-muted); font-size: 10px; margin: 3px 0 0; }

/* Forms: consolidate the builder, operational pages, and respondent register
   around the shared Steady Hand surface and action roles. */
.forms-button--primary:hover:not(:disabled),
.my-forms-button--primary:hover:not(:disabled) {
  background: var(--theme-action-hover);
  border-color: var(--theme-action-hover);
}

.forms-icon-action {
  color: var(--workspace-muted);
}

.forms-icon-action:hover,
.forms-icon-action:focus-visible {
  background: var(--workspace-accent-soft);
  color: var(--workspace-ink);
}

.forms-directory-panel,
.forms-content-card,
.forms-document-card,
.forms-assignment-summary,
.forms-question-list > li,
.forms-respondent-header,
.forms-respondent-question,
.forms-summary-card,
.my-forms-register,
.my-forms-state {
  box-shadow: none;
}

.forms-control input,
.forms-control select,
.forms-control textarea,
.forms-document-card select,
.forms-respondent-question input,
.forms-respondent-question select,
.forms-respondent-question textarea {
  background: var(--workspace-paper);
  min-height: 40px;
}

.forms-control input:focus-visible,
.forms-control select:focus-visible,
.forms-control textarea:focus-visible,
.forms-document-card select:focus-visible,
.forms-respondent-question input:focus-visible,
.forms-respondent-question select:focus-visible,
.forms-respondent-question textarea:focus-visible {
  border-color: var(--workspace-accent);
  box-shadow: 0 0 0 4px var(--workspace-accent-soft);
}

.forms-directory-table th,
.forms-count-badge,
.forms-outline ol button > span,
.forms-question-number,
.forms-status--neutral,
.forms-document-explainer,
.forms-document-title > span,
.forms-selected-person,
.my-forms-status {
  background: var(--theme-surface-muted);
}

.forms-directory-table tbody tr:hover,
.forms-outline ol button.active,
.forms-assignment-picker > button:hover,
.forms-assignment-picker > button[aria-pressed="true"],
.forms-document-option:hover,
.forms-document-option:has(input:checked) {
  background: var(--workspace-accent-soft);
}

.forms-name-link,
.forms-back-link,
.forms-breadcrumb a,
.forms-assignment-breadcrumb a {
  color: var(--workspace-accent);
  text-decoration-color: var(--workspace-accent);
}

.forms-question-canvas,
.forms-respondent-preview,
.forms-fill-surface,
.forms-selected-summary {
  background: var(--workspace-canvas);
}

.forms-outline,
.forms-question-properties,
.forms-topbar,
.forms-builder-footer,
.forms-preview-toolbar,
.forms-question-actions button,
.forms-document-mark,
.my-forms-button--secondary {
  background: var(--workspace-paper);
}

.forms-question-list > li.selected {
  border-color: var(--workspace-accent);
  box-shadow: 0 0 0 4px var(--workspace-accent-soft);
}

.forms-person > span,
.forms-assignment-avatar {
  background: var(--theme-surface-muted);
  color: var(--workspace-accent);
}

.my-forms-button--primary {
  background: var(--workspace-accent);
  border-color: var(--workspace-accent);
}

@media (max-width: 1080px) {
  .forms-builder-workspace { grid-template-columns: 190px minmax(390px, 1fr) 250px; }
  .forms-question-canvas { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 900px) {
  .forms-builder-workspace { grid-template-columns: 180px minmax(0, 1fr); }
  .forms-question-properties { border-left: 0; border-top: 1px solid var(--workspace-line); grid-column: 1 / -1; }
  .forms-properties-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forms-assignment-layout, .forms-response-layout { grid-template-columns: 1fr; }
  .forms-assignment-summary { position: static; }
  .forms-document-list { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .my-forms-page { padding: 24px 12px 40px; }
  .my-forms-heading h1 { font-size: 25px; }
  .my-forms-register-heading { display: block; }
  .my-forms-register-heading > span { display: block; margin-top: 8px; }
  .my-forms-row { align-items: stretch; grid-template-columns: 1fr auto; padding: 16px; }
  .my-forms-row .my-forms-button { grid-column: 1 / -1; }
  .forms-page-shell { padding: 24px 16px 40px; }
  .forms-page-heading { align-items: stretch; flex-direction: column; }.forms-page-actions { justify-content: flex-start; }
  .forms-directory-tools, .forms-response-tools, .forms-meta-grid { grid-template-columns: 1fr; }
  .forms-directory-filter-actions > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forms-directory-filter-actions :is(a, button) { min-height: 44px; width: 100%; }
  .forms-directory-filter-actions p { position: static; text-align: start; white-space: normal; }
  .forms-directory-tools--with-status { padding-bottom: 14px; }
  .forms-meta-grid .forms-control:nth-of-type(3), .forms-meta-grid .forms-control:nth-of-type(4), .forms-meta-grid > .forms-check { grid-column: auto; grid-row: auto; }
  .forms-topbar { align-items: flex-start; flex-direction: column; padding: 8px 12px; }.forms-tabs { max-width: 100%; overflow-x: auto; width: 100%; }
  .forms-builder-workspace { display: block; }.forms-outline { border-bottom: 1px solid var(--workspace-line); border-right: 0; }.forms-outline ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forms-canvas-heading { align-items: flex-start; flex-direction: column; gap: 5px; }.forms-question-list > li { grid-template-columns: 18px minmax(0, 1fr); }.forms-question-number { display: none; }.forms-question-actions { grid-column: 2; }.forms-properties-fields { display: flex; }
  .forms-summary-grid { grid-template-columns: 1fr; }.forms-document-explainer { align-items: flex-start; flex-wrap: wrap; }.forms-document-explainer > a { margin-left: 52px; }
  .forms-request-actions { width: 100%; }
  .forms-request-actions-panel { margin-top: 8px; min-width: 0; position: static; width: 100%; }
  .forms-respondent-preview, .forms-fill-surface { padding: 18px 12px 36px; }.forms-respondent-header, .forms-respondent-question { padding: 16px; }
}
@media (max-width: 520px) {
  .forms-header-actions .forms-preview-action { display: none; }.forms-header-actions .forms-button { min-height: 32px; padding: 6px 9px; }
  .forms-page-heading h1 { font-size: 24px; }.forms-directory-table { min-width: 0; }.forms-directory-table thead { display: none; }.forms-directory-table, .forms-directory-table tbody, .forms-directory-table tr, .forms-directory-table td { display: block; width: 100% !important; }.forms-directory-table tr { border-top: 1px solid var(--workspace-line); padding: 12px 14px; }.forms-directory-table td { border: 0; display: flex; justify-content: space-between; padding: 4px 0; }.forms-directory-table td::before { color: var(--workspace-muted); content: attr(data-label); font-size: 9px; font-weight: 750; }.forms-directory-table td:first-child { display: block; }.forms-directory-table td:first-child::before, .forms-directory-table td:last-child::before { display: none; }.forms-row-actions { width: 100%; }
  .forms-outline ol { grid-template-columns: 1fr; }.forms-question-canvas { padding: 18px 12px 28px; }.forms-question-list > li { padding: 12px; }.forms-property-actions, .forms-decision-actions { grid-template-columns: 1fr; }
  .forms-share-popover, .forms-link-document-panel { left: 0; right: auto; width: min(290px, calc(100vw - 32px)); }
}

/* Organization editor r013 wireframe alignment
---------------------------------*/

.organization-sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.organization-editor__layout {
  grid-template-columns: minmax(0, 1fr) 300px;
}

.organization-chart-viewport {
  background:
    radial-gradient(circle at 1px 1px, var(--workspace-line) 1px, transparent 0) 0 0 / 22px 22px,
    var(--workspace-canvas);
}

.organization-chart-connectors path {
  stroke: var(--workspace-line-strong);
  stroke-width: 1.5;
}

.organization-chart-node-wrap {
  height: 84px;
  min-height: 84px;
  width: 196px;
}

.organization-chart-position-card {
  height: 70px;
  width: 184px;
}

.organization-chart-position-button {
  border-color: var(--workspace-line-strong) !important;
  border-radius: 8px;
  box-shadow: none;
  display: grid;
  height: 70px;
  min-height: 70px;
  padding: 10px 14px;
  place-items: center;
  position: relative;
  text-align: center;
  width: 184px;
}

.organization-chart-position-button:hover,
.organization-chart-position-button:focus-visible {
  border-color: var(--workspace-accent) !important;
  box-shadow: var(--workspace-shadow-low);
}

.organization-chart-node-wrap.is-selected .organization-chart-position-button {
  border: 2px solid var(--workspace-accent) !important;
  box-shadow: 0 0 0 4px var(--workspace-accent-soft);
  padding: 9px 13px;
}

.organization-chart-node-wrap.is-root .organization-chart-position-button::before {
  background: var(--workspace-accent-soft);
  border: 1px solid var(--workspace-line);
  border-radius: 999px;
  color: var(--workspace-muted);
  content: "Top role";
  font-size: 9px;
  font-weight: 750;
  left: 50%;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  position: absolute;
  text-transform: uppercase;
  top: -8px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.organization-position-card__content,
.organization-position-card__copy {
  display: block;
  width: 100%;
}

.organization-position-card__role,
.organization-position-card__occupant {
  display: block;
  max-width: 156px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organization-position-card__role {
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
}

.organization-position-card__occupant {
  color: var(--workspace-muted);
  font-size: 9px;
  font-weight: 700;
  margin-top: 4px;
}

.organization-chart-add {
  height: 28px;
  left: 170px;
  opacity: 0;
  right: auto;
  top: 21px;
  transition: opacity 120ms ease, transform 120ms ease;
  width: 28px;
}

.organization-chart-add svg,
.organization-chart-controls svg,
.organization-view-controls svg,
.organization-button svg {
  fill: none;
  height: 16px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 16px;
}

.organization-chart-node-wrap:hover .organization-chart-add,
.organization-chart-node-wrap.is-selected .organization-chart-add,
.organization-chart-add:focus-visible {
  opacity: 1;
}

.organization-chart-add:hover {
  transform: scale(1.08);
}

.organization-chart-controls {
  bottom: 18px;
  box-shadow: var(--workspace-shadow-low);
  gap: 2px;
  left: 18px;
}

.organization-chart-controls button {
  color: var(--workspace-muted);
  height: 32px;
  min-width: 32px;
  padding: 0;
}

.organization-chart-controls button:hover:not(:disabled),
.organization-chart-controls button:focus-visible {
  background: var(--workspace-accent-soft);
  border-color: var(--workspace-line);
  color: var(--workspace-ink);
}

.organization-chart-controls button:last-child {
  border-left-color: var(--workspace-line);
  border-left-style: solid;
  border-left-width: 1px;
  border-radius: 0 6px 6px 0;
  margin-left: 3px;
  padding-left: 7px;
}

.organization-chart-status {
  bottom: 18px;
  right: 18px;
}

.organization-chart-guidance {
  background: var(--workspace-paper);
  border: 1px solid var(--workspace-line);
  border-radius: 7px;
  color: var(--workspace-muted);
  font-size: 0.78rem;
  font-weight: 650;
  left: 18px;
  line-height: 1.4;
  margin: 0;
  max-width: 248px;
  padding: 8px 10px;
  position: absolute;
  top: 18px;
  z-index: 3;
}

.organization-inspector {
  color: var(--workspace-ink);
  width: 300px;
}

.organization-inspector__view {
  border-bottom: 1px solid var(--workspace-line);
  padding: 24px 20px 20px;
}

.organization-inspector__view .organization-view-controls {
  background: var(--workspace-accent-soft);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.organization-inspector__view .organization-view-controls button {
  align-items: center;
  display: inline-flex;
  gap: 7px;
  justify-content: center;
  min-width: 0;
  padding: 6px 7px;
}

.organization-inspector__scroll {
  padding: 0 20px 24px;
}

.organization-inspector__close {
  float: right;
  margin-top: 12px;
}

.organization-inspector__section {
  margin-top: 22px;
  padding-top: 20px;
}

.organization-inspector__section--first {
  border-top: 0;
  margin-top: 22px;
  padding-top: 0;
}

.organization-inspector__label-row,
.organization-inspector__section-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.organization-inspector__label {
  color: var(--workspace-ink);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.organization-inspector__root-badge,
.organization-inspector__section-heading span {
  background: var(--theme-surface-muted);
  border: 1px solid var(--workspace-line);
  border-radius: 999px;
  color: var(--workspace-muted);
  font-size: 9px;
  font-weight: 800;
  min-width: 22px;
  padding: 3px 6px;
  text-align: center;
}

.organization-inspector__readonly,
.organization-inspector__reporting {
  background: var(--workspace-paper);
  border-color: var(--workspace-line-strong);
  min-height: 40px;
  padding: 9px 10px;
}

/* The role is viewed here; only the adjacent action enters its editor. */
.organization-inspector__role-title {
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.35;
  margin-top: 6px;
  min-height: 0;
  padding: 0;
}

.organization-inspector__reporting {
  background: var(--theme-surface-muted);
  border-color: var(--workspace-line);
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 650;
}

.organization-inspector__primary-actions {
  gap: 9px;
  margin-top: 24px;
}

.organization-inspector__action-hint {
  color: var(--workspace-muted);
  font-size: 10px;
  line-height: 1.45;
  margin: -2px 2px 2px;
}

.organization-button {
  border-radius: 7px;
  gap: 8px;
  min-height: 36px;
}

.organization-button--primary {
  background: var(--workspace-accent);
  border-color: var(--workspace-accent);
}

.organization-button--secondary {
  border-color: var(--workspace-line);
}

.organization-inspector__section-heading h3 {
  font-size: 13px;
}

.organization-inspector__assignment {
  align-items: center;
  border: 1px solid var(--workspace-line);
  border-radius: 7px;
  display: flex;
  gap: 8px;
  padding: 10px;
}

.organization-inspector__assignment:hover {
  background: var(--workspace-accent-soft);
  border-color: var(--workspace-line-strong);
}

.organization-inspector__assignment > div {
  min-width: 0;
}

.organization-inspector__assignment a,
.organization-inspector__assignment span {
  color: var(--workspace-ink);
  font-size: 11px;
}

.organization-inspector__assignment span {
  font-size: 9px;
}

.organization-inspector__assignment-edit {
  color: var(--workspace-muted) !important;
  flex: 0 0 auto;
  font-size: 9px !important;
  margin-left: auto;
}

.organization-inspector__assignment-controls {
  align-items: flex-end;
  display: grid;
  gap: 4px;
  margin-left: auto;
}

.organization-inspector__assignment-remove {
  background: transparent;
  border: 0;
  color: var(--workspace-muted);
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  padding: 0;
}

.organization-inspector__empty {
  background: var(--theme-surface-muted);
  border: 1px dashed var(--workspace-line);
  border-radius: 7px;
  font-size: 10px;
  margin-top: 10px !important;
  padding: 13px;
  text-align: center;
}

.organization-chart-list-view {
  padding: 28px;
}

.organization-chart-list-view__heading,
.organization-chart-table-wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
}

.organization-chart-list-view__heading h2 {
  font-size: 22px;
}

.organization-chart-table__select {
  color: var(--workspace-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.organization-button--primary:hover:not(:disabled),
.organization-button--primary:focus-visible {
  background: var(--theme-action-hover);
  border-color: var(--theme-action-hover);
  filter: none;
}

.organization-button--secondary:hover:not(:disabled),
.organization-button--secondary:focus-visible {
  background: var(--workspace-accent-soft);
  border-color: var(--workspace-accent);
  filter: none;
}

@media (max-width: 980px) {
  .organization-editor__layout {
    grid-template-columns: minmax(0, 1fr) 270px;
  }

  .organization-inspector {
    width: 270px;
  }
}

@media (max-width: 820px) {
  .organization-editor {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  .organization-editor__layout {
    display: block;
  }

  .organization-editor__canvas-panel {
    height: 560px;
  }

  .organization-inspector {
    border-left: 0;
    border-top: 1px solid var(--workspace-line);
    width: 100%;
  }

  .organization-inspector__scroll {
    overflow: visible;
  }

  .organization-chart-list-view {
    padding: 28px 16px;
  }
}

/* r013 direct-report draft and modal alignment
---------------------------------*/

.organization-inspector__title-input {
  background: var(--workspace-paper);
  border: 1px solid var(--workspace-line-strong);
  border-radius: 7px;
  color: var(--workspace-ink);
  font: inherit;
  min-height: 40px;
  padding: 9px 10px;
  width: 100%;
}

.organization-inspector__title-input:focus {
  border-color: var(--workspace-accent);
  box-shadow: 0 0 0 4px var(--workspace-accent-soft);
  outline: 0;
}

.organization-inspector__draft-note {
  background: var(--theme-surface-muted);
  border: 1px solid var(--workspace-line);
  border-radius: 7px;
  color: var(--workspace-muted);
  font-size: 10px;
  line-height: 1.5;
  margin: 10px 0 0;
  padding: 10px;
}

/* Empty organization editor
---------------------------------*/

.organization-editor__layout--empty-member {
  grid-template-columns: minmax(0, 1fr);
}

.organization-empty-chart {
  overflow: hidden;
  position: relative;
}

.organization-empty-chart__intro {
  left: 28px;
  max-width: 430px;
  position: absolute;
  top: 26px;
}

.organization-empty-chart__intro > span {
  color: var(--workspace-muted);
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.organization-empty-chart__intro h1,
.organization-empty-chart__intro p,
.organization-empty-chart__message h1,
.organization-empty-chart__message p,
.organization-empty-inspector__heading h2,
.organization-empty-inspector__heading p {
  margin: 0;
}

.organization-empty-chart__intro h1 {
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.organization-empty-chart__intro p {
  color: var(--workspace-muted);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 5px;
}

.organization-empty-chart__node {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.organization-empty-chart__tree {
  inset: 0;
  position: absolute;
}

.organization-empty-chart__message {
  left: 50%;
  max-width: 360px;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 40px);
}

.organization-empty-chart__icon {
  align-items: center;
  background: var(--theme-surface-muted);
  border: 1px solid var(--workspace-line);
  border-radius: 50%;
  color: var(--workspace-muted);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  margin-bottom: 14px;
  width: 44px;
}

.organization-empty-chart__message h1 {
  font-size: 20px;
}

.organization-empty-chart__message p {
  color: var(--workspace-muted);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 6px;
}

.organization-empty-inspector__heading {
  border-bottom: 1px solid var(--workspace-line);
  padding: 22px 0 20px;
}

.organization-empty-inspector__heading h2 {
  font-size: 18px;
  line-height: 1.3;
  margin-top: 5px;
}

.organization-empty-inspector__heading p {
  color: var(--workspace-muted);
  font-size: 11px;
  line-height: 1.5;
  margin-top: 6px;
}

.organization-module-guide {
  border-bottom: 1px solid var(--workspace-line);
  padding: 18px 0;
}

.organization-module-guide h3,
.organization-module-guide p,
.organization-module-guide ul {
  margin: 0;
}

.organization-module-guide__heading {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.organization-module-guide h3 {
  font-size: 13px;
  line-height: 1.35;
}

.organization-module-guide__heading p {
  color: var(--workspace-muted);
  font-size: 11px;
  line-height: 1.5;
  margin-top: 4px;
}

.organization-module-guide__dismiss {
  background: transparent;
  border: 0;
  color: var(--workspace-muted);
  flex: 0 0 auto;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}

.organization-module-guide__dismiss:hover,
.organization-module-guide__dismiss:focus-visible {
  color: var(--workspace-accent);
  text-decoration-color: currentColor;
}

.organization-module-guide ul {
  display: grid;
  gap: 8px;
  list-style: none;
  margin-top: 12px;
  padding: 0;
}

.organization-module-guide a {
  color: var(--workspace-ink);
  display: grid;
  gap: 1px;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.organization-module-guide a:hover,
.organization-module-guide a:focus-visible {
  color: var(--workspace-accent);
  text-decoration-color: currentColor;
}

.organization-module-guide strong {
  font-size: 12px;
  line-height: 1.35;
}

.organization-module-guide span {
  color: var(--workspace-muted);
  font-size: 10px;
  line-height: 1.4;
}

.organization-empty-inspector__form
  .organization-inspector__title-input {
  margin-top: 7px;
}

.organization-empty-inspector__status {
  color: var(--workspace-muted);
  font-size: 10px;
  line-height: 1.45;
  margin: 10px 0 0;
  min-height: 15px;
}

.organization-modal-overlay,
.role-profile-overlay {
  align-items: center;
  background: var(--theme-overlay);
  backdrop-filter: blur(2px);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 1000;
}

.organization-review-dialog {
  background: var(--workspace-paper);
  border: 1px solid var(--workspace-line);
  border-radius: 14px;
  box-shadow: var(--workspace-shadow-raised);
  color: var(--workspace-ink);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(760px, calc(100dvh - 40px));
  outline: 0;
  overflow: hidden;
  width: min(680px, calc(100vw - 40px));
}

.organization-review-dialog--compact {
  width: min(520px, calc(100vw - 40px));
}

.organization-compact-review__heading {
  align-items: center;
  display: flex;
  gap: 12px;
}

.organization-compact-review__icon {
  align-items: center;
  background: var(--theme-surface-muted);
  border: 1px solid var(--workspace-line);
  border-radius: 50%;
  color: var(--workspace-muted);
  display: inline-flex;
  flex: 0 0 auto;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.organization-compact-review__icon svg {
  fill: none;
  height: 16px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 16px;
}

.organization-compact-review__heading h2 {
  margin-top: 0;
}

.organization-review-dialog__header,
.organization-review-dialog__footer {
  align-items: flex-start;
  background: var(--workspace-paper);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding: 20px 24px;
}

.organization-review-dialog__header {
  border-bottom: 1px solid var(--workspace-line);
}

.organization-review-dialog__header h2 {
  font-size: 21px;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 3px 0 0;
}

.organization-review-dialog__kicker {
  color: var(--workspace-muted);
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.organization-review-dialog__badge {
  background: var(--theme-surface-muted);
  border: 1px solid var(--workspace-line);
  border-radius: 999px;
  color: var(--workspace-muted);
  font-size: 10px;
  font-weight: 750;
  padding: 4px 8px;
  white-space: nowrap;
}

.organization-review-dialog__body {
  background: var(--workspace-canvas);
  overflow-y: auto;
  padding: 22px 24px 28px;
}

.organization-review-dialog__body--compact {
  background: var(--workspace-paper);
  padding-bottom: 24px;
}

.organization-review-dialog__summary {
  line-height: 1.5;
  margin: 0;
}

.organization-direct-report-review {
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  margin-top: 16px;
  padding: 16px;
}

.organization-direct-report-review > strong {
  display: block;
  font-size: 16px;
  line-height: 1.35;
}

.organization-direct-report-review dl {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
}

.organization-direct-report-review dl > div {
  display: grid;
  gap: 2px;
  grid-template-columns: 90px minmax(0, 1fr);
}

.organization-direct-report-review dt,
.organization-direct-report-review dd {
  margin: 0;
}

.organization-direct-report-review dt {
  color: var(--workspace-muted);
  font-size: 11px;
  font-weight: 700;
}

.organization-direct-report-review dd {
  font-size: 12px;
}

.organization-direct-report-review__note {
  background: var(--theme-surface-muted);
  border: 1px solid var(--workspace-line);
  border-radius: 7px;
  color: var(--workspace-muted);
  font-size: 11px;
  line-height: 1.5;
  margin: 12px 0 0;
  padding: 11px 12px;
}

.organization-review-dialog__snapshots {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.organization-review-card,
.organization-review-count {
  background: var(--workspace-paper);
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  padding: 14px;
}

.organization-review-card > strong,
.organization-review-list > strong {
  color: var(--workspace-muted);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.organization-review-card ul,
.organization-review-list ul,
.organization-review-dialog__warning ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.organization-review-card li {
  font-size: 12px;
  list-style: none;
}

.organization-review-card li + li {
  border-top: 1px solid var(--theme-surface-muted);
  margin-top: 8px;
  padding-top: 8px;
}

.organization-review-card li span {
  color: var(--workspace-muted);
  display: block;
  font-size: 10px;
  margin-top: 2px;
}

.organization-review-card p {
  color: var(--workspace-muted);
  font-size: 12px;
  margin: 8px 0 0;
}

.organization-review-dialog__counts {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.organization-review-count {
  text-align: center;
}

.organization-review-count strong,
.organization-review-count span {
  display: block;
}

.organization-review-count strong {
  font-size: 18px;
}

.organization-review-count span {
  color: var(--workspace-muted);
  font-size: 10px;
}

.organization-review-list,
.organization-review-dialog__warning {
  margin-top: 16px;
}

.organization-review-list li,
.organization-review-dialog__warning {
  color: var(--workspace-muted);
  font-size: 12px;
}

.organization-review-dialog__warning {
  background: var(--theme-surface-muted);
  border: 1px solid var(--workspace-line);
  border-radius: 7px;
  color: var(--workspace-ink);
  padding: 12px;
}

.organization-review-dialog__expiry {
  color: var(--workspace-muted);
  font-size: 10px;
  margin: 16px 0 0;
}

.organization-review-dialog__footer {
  align-items: center;
  border-top: 1px solid var(--workspace-line);
  justify-content: flex-end;
  padding-block: 14px;
}

.organization-review-dialog__footer--compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.role-profile-dialog {
  background: #fff;
  border: 1px solid #d6dade;
  border-radius: 14px;
  box-shadow: 0 28px 70px rgba(47, 55, 61, 0.24);
  color: #31383e;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: min(860px, calc(100dvh - 40px));
  max-height: none;
  max-width: none;
  outline: 0;
  overflow: hidden;
  padding: 0;
  width: min(920px, calc(100vw - 40px));
}

.role-profile-dialog button,
.role-profile-dialog input,
.role-profile-dialog select,
.role-profile-dialog textarea {
  font: inherit;
}

.role-profile-dialog__header {
  align-items: flex-start;
  background: #fff;
  border-bottom: 1px solid #d6dade;
  display: flex;
  flex: 0 0 auto;
  gap: 24px;
  justify-content: space-between;
  padding: 22px 26px 18px;
}

.role-profile-dialog__kicker {
  color: #687178;
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.role-profile-dialog__header h1 {
  font-size: 24px;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0;
}

.role-profile-dialog__header p {
  color: #687178;
  font-size: 13px;
  margin: 4px 0 0;
}

.role-profile-dialog__close {
  align-items: center;
  background: transparent;
  border: 1px solid #d6dade;
  border-radius: 7px;
  color: #687178;
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  padding: 0;
  width: 36px;
}

.role-profile-dialog__close:hover:not(:disabled) {
  background: #f1f3f4;
  color: #31383e;
}

.role-profile-dialog__close svg {
  fill: none;
  height: 17px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 17px;
}

.role-profile-dialog__body {
  background: #f7f8f8;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 26px 38px;
}

.role-profile-sections {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.role-profile-section {
  background: #fff;
  border: 1px solid #d6dade;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(47, 55, 61, 0.08);
  padding: 22px;
}

.role-profile-section__heading {
  align-items: flex-start;
  border-bottom: 1px solid #d6dade;
  display: flex;
  gap: 11px;
  margin-bottom: 20px;
  padding-bottom: 15px;
}

.role-profile-section__heading > span {
  align-items: center;
  background: #f1f3f4;
  border: 1px solid #a9b0b6;
  border-radius: 50%;
  color: #667078;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 800;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.role-profile-section__heading h3 {
  font-size: 14px;
  margin: 0;
}

.role-profile-section__heading p {
  color: #687178;
  font-size: 11px;
  margin: 3px 0 0;
}

.role-profile-fields {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.role-profile-fields--section {
  margin-top: 18px;
}

.role-profile-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.role-profile-field--wide {
  grid-column: 1 / -1;
}

.role-profile-field > label,
.role-profile-salary legend {
  color: #31383e;
  font-size: 12px;
  font-weight: 750;
}

.role-profile-control {
  background: #fff;
  border: 1px solid #a9b0b6;
  border-radius: 7px;
  color: #31383e;
  min-height: 40px;
  padding: 9px 10px;
  width: 100%;
}

textarea.role-profile-control {
  line-height: 1.45;
  min-height: 94px;
  resize: vertical;
}

.role-profile-control:focus-visible,
.role-profile-dialog button:focus-visible {
  outline: 3px solid #919ba3;
  outline-offset: 2px;
}

.role-profile-control[aria-invalid="true"] {
  border-style: dashed;
  border-width: 2px;
}

.role-profile-field__help,
.role-profile-field__error {
  color: #687178;
  font-size: 10px;
}

.role-profile-field__error {
  color: #31383e;
  font-weight: 750;
}

.role-profile-salary {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.role-profile-salary__fields {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px;
  margin: 6px 0;
}

.role-profile-combobox {
  position: relative;
}

.role-profile-suggestions {
  background: #fff;
  border: 1px solid #a9b0b6;
  border-radius: 7px;
  box-shadow: 0 12px 30px rgba(47, 55, 61, 0.16);
  left: 0;
  margin-top: 4px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  position: absolute;
  right: 0;
  z-index: 30;
}

.role-profile-suggestion {
  background: #fff;
  border: 0;
  border-radius: 6px;
  color: #31383e;
  cursor: pointer;
  display: block;
  padding: 9px 10px;
  text-align: left;
  width: 100%;
}

.role-profile-suggestion:hover,
.role-profile-suggestion[aria-selected="true"] {
  background: #f1f3f4;
}

.role-profile-suggestion strong,
.role-profile-suggestion span {
  display: block;
}

.role-profile-suggestion span {
  color: #687178;
  font-size: 10px;
  margin-top: 3px;
}

.role-profile-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.role-profile-rows__heading,
.role-profile-row__header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.role-profile-rows__heading h4,
.role-profile-rows__heading p {
  margin: 0;
}

.role-profile-rows__heading h4,
.role-profile-row__header strong {
  font-size: 12px;
}

.role-profile-rows__heading p {
  color: #687178;
  font-size: 10px;
  margin-top: 3px;
}

.role-profile-row {
  background: #fff;
  border: 1px solid #d6dade;
  border-radius: 8px;
  padding: 14px;
}

.role-profile-row__fields {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.role-profile-row__fields--responsibility {
  grid-template-columns: minmax(0, 1fr) 160px;
}

.role-profile-row__fields--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.role-profile-row__check {
  align-items: center;
  display: flex;
  font-size: 11px;
  font-weight: 700;
  gap: 7px;
}

.role-profile-row__remove {
  background: transparent;
  color: #687178;
  cursor: pointer;
  font-size: 10px;
  padding: 4px 6px;
}

.role-profile-group-error,
.role-profile-status {
  background: #f1f3f4;
  border: 1px solid #d6dade;
  border-radius: 7px;
  color: #31383e;
  font-size: 12px;
  padding: 11px 12px;
}

.role-profile-group-error p,
.role-profile-status p {
  margin: 0;
}

.role-profile-status {
  margin-bottom: 14px;
}

.role-profile-status ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.role-profile-status__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.role-profile-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 36px;
  padding: 8px 13px;
}

.role-profile-button--secondary {
  background: #fff;
  border-color: #d6dade;
  color: #31383e;
}

.role-profile-button--primary {
  background: #5f6971;
  border-color: #5f6971;
  color: #fff;
}

.role-profile-button:hover:not(:disabled) {
  background: #e8ebed;
}

.role-profile-button--primary:hover:not(:disabled) {
  background: #4f5961;
  border-color: #4f5961;
  color: #fff;
}

.role-profile-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.role-profile-button--compact {
  font-size: 11px;
  min-height: 32px;
  padding: 6px 10px;
}

.role-profile-dialog__footer {
  align-items: center;
  background: #fff;
  border-top: 1px solid #d6dade;
  display: flex;
  flex: 0 0 auto;
  gap: 20px;
  justify-content: space-between;
  padding: 15px 26px;
}

.role-profile-dialog__footer > span {
  color: #687178;
  font-size: 10px;
}

.role-profile-dialog__footer > div {
  display: flex;
  gap: 8px;
}

@media (max-width: 720px) {
  .organization-modal-overlay,
  .role-profile-overlay {
    padding: 0;
  }

  .organization-review-dialog,
  .role-profile-dialog {
    border: 0;
    border-radius: 0;
    height: 100dvh;
    max-height: none;
    width: 100vw;
  }

  .organization-review-dialog--compact {
    border: 1px solid #d6dade;
    border-radius: 14px;
    height: auto;
    max-height: calc(100dvh - 24px);
    width: calc(100vw - 24px);
  }

  .role-profile-dialog__header,
  .role-profile-dialog__body,
  .role-profile-dialog__footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .role-profile-dialog__header {
    padding-bottom: 14px;
    padding-top: 17px;
  }

  .role-profile-dialog__header h1 {
    font-size: 21px;
  }

  .role-profile-dialog__body {
    padding-top: 18px;
  }

  .role-profile-section {
    padding: 17px;
  }

  .role-profile-fields,
  .role-profile-row__fields,
  .role-profile-row__fields--responsibility,
  .role-profile-row__fields--three,
  .role-profile-salary__fields,
  .organization-review-dialog__snapshots {
    grid-template-columns: 1fr;
  }

  .role-profile-field--wide {
    grid-column: auto;
  }

  .role-profile-dialog__footer {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .role-profile-dialog__footer > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .organization-direct-report-review dl > div {
    grid-template-columns: 1fr;
  }

  .role-profile-dialog__footer > span {
    display: none;
  }

  .role-profile-dialog__footer > div {
    grid-template-columns: 1fr;
  }
}

/* Personnel Forms: approved r029 requested-form rows. */
.personnel-forms-card {
  padding: 20px;
  background: #fff;
  border: 1px solid #d6dade;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgb(47 55 61 / 8%);
  color: #31383e;
  scroll-margin-top: 80px;
}
.personnel-forms-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.personnel-forms-heading h2 { margin: 0; font-size: 18px; font-weight: 700; }
.personnel-forms-heading p { margin: 4px 0 0; color: #687178; font-size: 13px; }
.personnel-forms-request {
  flex-shrink: 0;
  padding: 7px 10px;
  border: 1px solid #d6dade;
  border-radius: 7px;
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.personnel-form-assignment-list { display: grid; gap: 8px; }
.personnel-form-assignment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #d6dade;
  border-radius: 7px;
  color: inherit;
  text-decoration: none;
}
.personnel-form-assignment:hover, .personnel-forms-request:hover { background: #f1f3f4; }
.personnel-form-assignment:focus-visible, .personnel-forms-request:focus-visible {
  outline: 3px solid #919ba3;
  outline-offset: 2px;
}
.personnel-form-assignment-copy { display: grid; gap: 3px; min-width: 0; }
.personnel-form-assignment-copy strong { font-size: 14px; overflow-wrap: anywhere; }
.personnel-form-assignment-copy small { color: #687178; font-size: 12px; }
.personnel-form-assignment-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #f1f3f4;
  border: 1px solid #d6dade;
  border-radius: 6px;
}
.personnel-form-assignment-mark svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.personnel-form-assignment-status {
  padding: 4px 8px; border: 1px solid #d6dade; border-radius: 999px;
  background: #f1f3f4; font-size: 11px; font-weight: 700;
}
.personnel-forms-pages { display: flex; justify-content: space-between; margin-top: 12px; }

/* Personnel directory: Steady Hand extension.
   Keep the operational table dense, but let the shared workspace tokens carry
   its hierarchy, focus treatment, and single restrained accent. */
.personnel-directory {
  color: var(--workspace-ink);
}

.personnel-directory h1,
.personnel-directory h2,
.personnel-directory strong {
  color: var(--workspace-ink);
}

.personnel-directory > header p,
.personnel-directory__secondary {
  color: var(--workspace-muted);
}

.personnel-directory__panel,
.personnel-directory__metric {
  background: var(--workspace-paper);
  border-color: var(--workspace-line);
  box-shadow: none;
}

.personnel-directory__filters {
  background: var(--theme-surface-muted);
  border-color: var(--workspace-line);
}

.personnel-directory__filter-label {
  color: var(--workspace-ink);
}

.personnel-directory__input {
  background: var(--workspace-paper);
  border-color: var(--workspace-line-strong);
  color: var(--workspace-ink);
  min-height: 40px;
}

.personnel-directory__input::placeholder {
  color: var(--workspace-muted);
}

.personnel-directory__input:focus-visible {
  border-color: var(--workspace-accent);
  box-shadow: 0 0 0 4px var(--workspace-accent-soft);
  outline: 0;
}

.personnel-directory__primary-action {
  align-items: center;
  background: var(--workspace-accent);
  border: 1px solid var(--workspace-accent);
  color: #fff;
  display: inline-flex;
  min-height: 36px;
  text-decoration: none;
}

.personnel-directory__primary-action:hover {
  background: var(--theme-action-hover);
  border-color: var(--theme-action-hover);
}

.personnel-directory__primary-action:focus-visible,
.personnel-directory__secondary-action:focus-visible,
.personnel-directory__record-link:focus-visible {
  outline: 3px solid var(--workspace-accent);
  outline-offset: 2px;
}

.personnel-directory__secondary-action {
  align-items: center;
  background: var(--workspace-paper);
  border-color: var(--workspace-line-strong);
  color: var(--workspace-ink);
  display: inline-flex;
  min-height: 36px;
  text-decoration: none;
}

.personnel-directory__secondary-action:hover {
  background: var(--workspace-accent-soft);
  border-color: var(--workspace-accent);
}

.personnel-directory__filter-status,
.assignment-directory__filter-status {
  color: var(--workspace-muted);
  text-align: end;
}

@media (max-width: 639px) {
  .personnel-directory__filter-actions > div,
  .assignment-directory__filter-actions > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .personnel-directory__filter-actions :is(a, button),
  .assignment-directory__filter-actions :is(a, button) {
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: 100%;
  }

  .personnel-directory__filter-status,
  .assignment-directory__filter-status {
    text-align: start;
  }
}

.personnel-directory__avatar {
  background: var(--theme-surface-muted);
  border-color: var(--workspace-line-strong);
  color: var(--workspace-accent);
}

.personnel-directory__status {
  background: var(--theme-surface-muted);
  border-color: var(--workspace-line);
  color: var(--workspace-ink);
}

.personnel-directory__record-link {
  color: var(--workspace-accent);
}

.personnel-directory__record-link:hover {
  color: var(--theme-action-hover);
}

.personnel-directory__mobile-details {
  display: none;
}

.personnel-directory .feature-data-table {
  background: transparent;
}

.personnel-directory .feature-data-table__table thead {
  background: var(--theme-surface-muted);
  color: var(--workspace-muted);
}

.personnel-directory .feature-data-table__table tbody {
  color: var(--workspace-ink);
}

.personnel-directory .feature-data-table__table tbody tr {
  border-color: var(--workspace-line);
}

.personnel-directory .feature-data-table__table tbody tr:hover {
  background: var(--workspace-accent-soft);
}

.personnel-directory .feature-data-table__table td {
  color: var(--workspace-ink);
}

@media (max-width: 680px) {
  .personnel-directory .feature-data-table {
    overflow: visible;
  }

  .personnel-directory .feature-data-table__table,
  .personnel-directory .feature-data-table__table tbody,
  .personnel-directory .feature-data-table__table tr,
  .personnel-directory .feature-data-table__table td {
    display: block;
    width: 100%;
  }

  .personnel-directory .feature-data-table__table thead {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .personnel-directory .feature-data-table__table tbody {
    display: grid;
    gap: 10px;
    padding: 10px;
  }

  .personnel-directory .feature-data-table__table tbody tr {
    border: 1px solid var(--workspace-line);
    border-radius: 10px;
    overflow: hidden;
  }

  .personnel-directory .feature-data-table__table tbody td {
    border: 0;
    padding: 10px 12px;
  }

  .personnel-directory .feature-data-table__table tbody td::before {
    color: var(--workspace-muted);
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    margin-bottom: 4px;
    text-transform: uppercase;
  }

  .personnel-directory .feature-data-table__table tbody td:first-child::before,
  .personnel-directory .feature-data-table__table tbody td:last-child::before {
    display: none;
  }

  .personnel-directory .feature-data-table__table tbody td:nth-child(3),
  .personnel-directory .feature-data-table__table tbody td:nth-child(4) {
    display: none;
  }

  .personnel-directory .feature-data-table__table tbody td:nth-child(5),
  .personnel-directory .feature-data-table__table tbody td:last-child {
    display: inline-flex;
    min-height: 0;
    padding-top: 0;
    vertical-align: top;
    width: auto;
  }

  .personnel-directory .feature-data-table__table tbody td:nth-child(5) {
    padding-right: 4px;
  }

  .personnel-directory .feature-data-table__table tbody td:last-child {
    float: right;
  }

  .personnel-directory__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
  }

  .personnel-directory__mobile-details {
    display: block;
  }

  .personnel-directory__mobile-details summary {
    color: var(--workspace-accent);
    cursor: pointer;
    font-size: 13px;
    font-weight: 750;
  }

  .personnel-directory__mobile-details dl {
    display: grid;
    gap: 10px;
    margin: 12px 0 0;
    min-width: min(280px, calc(100vw - 56px));
  }

  .personnel-directory__mobile-details dl > div {
    display: grid;
    gap: 3px;
  }

  .personnel-directory__mobile-details dt {
    color: var(--workspace-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .personnel-directory__mobile-details dd {
    color: var(--workspace-ink);
    margin: 0;
  }
}

/* Personnel editor: the long-form companion to the Personnel directory.
   Forms stay deliberately dense, with paper and rules doing the structural work. */
.personnel-editor {
  color: var(--workspace-ink);
}

.personnel-editor__index,
.personnel-editor__section,
.personnel-editor section[aria-labelledby],
.personnel-editor article {
  background: var(--workspace-paper);
  border-color: var(--workspace-line);
  box-shadow: none;
}

.personnel-editor__index-link {
  color: var(--workspace-muted);
  text-decoration: none;
}

.personnel-editor__index-link:hover,
.personnel-editor__index-link:focus-visible {
  background: var(--workspace-accent-soft);
  color: var(--workspace-accent);
}

.personnel-editor__index-link:focus-visible {
  outline: 3px solid var(--workspace-accent);
  outline-offset: 2px;
}

.personnel-editor__section h2,
.personnel-editor section[aria-labelledby] h3,
.personnel-editor article strong {
  color: var(--workspace-ink);
}

.personnel-editor__section > div > div > p,
.personnel-editor section[aria-labelledby] p,
.personnel-editor article p,
.personnel-editor .text-slate-500,
.personnel-editor .text-slate-600 {
  color: var(--workspace-muted);
}

.personnel-editor label.block,
.personnel-editor legend {
  color: var(--workspace-ink);
}

.personnel-editor__input,
.personnel-editor :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea) {
  background: var(--workspace-paper);
  border-color: var(--workspace-line-strong);
  color: var(--workspace-ink);
  min-height: 40px;
  box-shadow: none;
}

.personnel-editor__input::placeholder,
.personnel-editor :is(input, textarea)::placeholder {
  color: var(--workspace-muted);
}

.personnel-editor__input:focus-visible,
.personnel-editor :is(input, select, textarea):focus-visible {
  border-color: var(--workspace-accent);
  box-shadow: 0 0 0 4px var(--workspace-accent-soft);
  outline: 0;
}

.personnel-editor :is(input, select, textarea)[aria-invalid="true"] {
  /* Match Assignment's persistent error signal; this must win over the
     generic compact-field border applied by the editor shell. */
  border-color: #b94040 !important;
  border-radius: 0.25rem !important;
  box-shadow: 0 0 0 4px #f9e5e3 !important;
}

.personnel-editor__type-selector {
  background: var(--theme-surface-muted);
  border-color: var(--workspace-line-strong);
}

.personnel-editor__type-selector label {
  color: var(--workspace-muted);
}

.personnel-editor__type-selector label:has(input:checked) {
  background: var(--workspace-paper);
  box-shadow: 0 0 0 1px var(--workspace-accent);
  color: var(--workspace-ink);
}

.personnel-editor__primary-action {
  align-items: center;
  background: var(--workspace-accent);
  border: 1px solid var(--workspace-accent);
  color: #fff;
  display: inline-flex;
  justify-content: center;
  min-height: 36px;
  text-decoration: none;
}

.personnel-editor__primary-action:hover:not(:disabled) {
  background: var(--theme-action-hover);
  border-color: var(--theme-action-hover);
}

.personnel-editor__secondary-action {
  align-items: center;
  background: var(--workspace-paper);
  border-color: var(--workspace-line-strong);
  color: var(--workspace-ink);
  display: inline-flex;
  justify-content: center;
  min-height: 36px;
  text-decoration: none;
}

.personnel-editor__secondary-action:hover:not(:disabled) {
  background: var(--workspace-accent-soft);
  border-color: var(--workspace-accent);
}

.personnel-editor__primary-action:focus-visible,
.personnel-editor__secondary-action:focus-visible {
  outline: 3px solid var(--workspace-accent);
  outline-offset: 2px;
}

.personnel-editor__empty-row,
.personnel-editor .border-dashed {
  background: var(--theme-surface-muted);
  border-color: var(--workspace-line-strong);
  color: var(--workspace-muted);
}

.personnel-editor footer.sticky {
  background: color-mix(in srgb, var(--workspace-paper) 94%, transparent);
  border-color: var(--workspace-line);
}

.personnel-editor footer.sticky [class~="rounded-full"] {
  background: var(--theme-surface-muted);
  border-color: var(--workspace-line);
  color: var(--workspace-ink);
}

/* The section rail must clear the persistent workspace header; on a phone the
   save choices become a deliberate thumb-reachable sequence, not a wrapped row. */
.personnel-editor__index {
  top: calc(var(--workspace-header-height) + 12px);
}

@media (max-width: 639.98px) {
  .personnel-editor__index {
    scroll-padding-inline: 8px;
  }

  .personnel-editor :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea),
  .personnel-editor__index-link,
  .personnel-editor__primary-action,
  .personnel-editor__secondary-action {
    min-height: 44px;
  }

  .personnel-editor .action-footer {
    gap: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .personnel-editor .action-footer__status {
    order: -1;
  }

  .personnel-editor .action-footer__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .personnel-editor .action-footer__actions > * {
    min-width: 0;
    width: 100%;
  }

  .personnel-editor .action-footer__actions > .personnel-editor__primary-action {
    grid-column: 1 / -1;
  }
}

/* Assignments: Steady Hand directory and editor extension.
   Relationship records carry the same calm density as Personnel, while their
   live status remains textual and never relies on the teal action color. */
.assignment-directory,
.assignment-editor {
  color: var(--workspace-ink);
}

.assignment-directory h1,
.assignment-directory strong,
.assignment-editor h2,
.assignment-editor strong {
  color: var(--workspace-ink);
}

.assignment-directory > header p,
.assignment-directory__secondary,
.assignment-editor > section p,
.assignment-editor .text-slate-500,
.assignment-editor .text-slate-600 {
  color: var(--workspace-muted);
}

.assignment-directory__panel,
.assignment-directory__metric,
.assignment-editor > section {
  background: var(--workspace-paper);
  border-color: var(--workspace-line);
  box-shadow: none;
}

.assignment-directory__filters {
  background: var(--theme-surface-muted);
  border-color: var(--workspace-line);
}

.assignment-directory__filter-label,
.assignment-editor label.block,
.assignment-editor legend {
  color: var(--workspace-ink);
}

.assignment-directory__input,
.assignment-editor__input {
  background: var(--workspace-paper);
  border-color: var(--workspace-line-strong);
  color: var(--workspace-ink);
  min-height: 40px;
}

.assignment-directory__input::placeholder,
.assignment-editor__input::placeholder {
  color: var(--workspace-muted);
}

.assignment-directory__input:focus-visible,
.assignment-editor__input:focus-visible {
  border-color: var(--workspace-accent);
  box-shadow: 0 0 0 4px var(--workspace-accent-soft);
  outline: 0;
}

.assignment-editor :is(input, select, textarea)[aria-invalid="true"] {
  border-color: #b94040;
  box-shadow: 0 0 0 4px #f9e5e3;
}

.assignment-directory__primary-action,
.assignment-editor__primary-action {
  align-items: center;
  background: var(--workspace-accent);
  border: 1px solid var(--workspace-accent);
  color: #fff;
  display: inline-flex;
  justify-content: center;
  min-height: 36px;
  text-decoration: none;
}

.assignment-directory__primary-action:hover:not(:disabled),
.assignment-editor__primary-action:hover:not(:disabled) {
  background: var(--theme-action-hover);
  border-color: var(--theme-action-hover);
}

.assignment-editor__secondary-action {
  align-items: center;
  background: var(--workspace-paper);
  border-color: var(--workspace-line-strong);
  color: var(--workspace-ink);
  display: inline-flex;
  justify-content: center;
  min-height: 36px;
  text-decoration: none;
}

.assignment-directory__empty-action {
  background: var(--workspace-paper);
  border-color: var(--workspace-line-strong);
  color: var(--workspace-ink);
  min-height: 36px;
  text-decoration: none;
}

.assignment-directory__empty-action:hover {
  background: var(--workspace-accent-soft);
  border-color: var(--workspace-accent);
}

.assignment-directory__filter-actions {
  min-width: max-content;
}

.assignment-directory__setup-guide {
  border-top: 1px solid var(--workspace-line);
  margin-top: 28px;
  padding-top: 20px;
}

.assignment-directory__empty-state {
  padding: 36px 32px 28px;
}

.assignment-directory__empty-summary {
  margin: 0 auto;
  max-width: 760px;
}

.assignment-directory__setup-guide h3 {
  font-size: 1rem;
  margin: 0;
}

.assignment-directory__setup-guide > p {
  color: var(--workspace-muted);
  font-size: 0.875rem;
  margin: 5px 0 0;
}

.assignment-directory__setup-guide ol {
  display: grid;
  gap: 12px 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.assignment-directory__setup-guide li {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
}

.assignment-directory__setup-step {
  align-items: center;
  background: var(--workspace-paper);
  border: 1px solid var(--workspace-line);
  border-radius: 50%;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.assignment-directory__setup-guide strong,
.assignment-directory__setup-guide small {
  display: block;
}

.assignment-directory__setup-guide small {
  color: var(--workspace-muted);
  font-size: 0.75rem;
  margin-top: 1px;
}

.assignment-directory__setup-guide em {
  color: var(--workspace-muted);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 640px) {
  .assignment-directory__empty-state {
    padding: 28px 20px 24px;
  }

  .assignment-directory__setup-guide ol {
    grid-template-columns: 1fr;
  }
}

.assignment-editor__secondary-action:hover:not(:disabled) {
  background: var(--workspace-accent-soft);
  border-color: var(--workspace-accent);
}

.assignment-directory__primary-action:focus-visible,
.assignment-directory__empty-action:focus-visible,
.assignment-directory__record-link:focus-visible,
.assignment-directory__status-link:focus-visible,
.assignment-editor__primary-action:focus-visible,
.assignment-editor__secondary-action:focus-visible {
  outline: 3px solid var(--workspace-accent);
  outline-offset: 2px;
}

.assignment-directory__record-link {
  color: var(--workspace-accent);
}

.assignment-directory__record-link:hover {
  color: var(--theme-action-hover);
}

.assignment-directory .feature-data-table {
  background: transparent;
}

.assignment-directory .feature-data-table__table thead {
  background: var(--theme-surface-muted);
  color: var(--workspace-muted);
}

.assignment-directory .feature-data-table__table tbody {
  color: var(--workspace-ink);
}

.assignment-directory .feature-data-table__table tbody tr {
  border-color: var(--workspace-line);
}

.assignment-directory .feature-data-table__table tbody tr:hover {
  background: var(--workspace-accent-soft);
}

.assignment-directory .feature-data-table__table td,
.assignment-directory .feature-data-table__table + div {
  color: var(--workspace-ink);
}

.assignment-editor footer.sticky {
  background: color-mix(in srgb, var(--workspace-paper) 94%, transparent);
  border-color: var(--workspace-line);
}

.assignment-editor footer.sticky [class~="rounded-full"] {
  background: var(--theme-surface-muted);
  border-color: var(--workspace-line);
  color: var(--workspace-ink);
}

@media (max-width: 560px) {
  .personnel-forms-heading { align-items: flex-start; flex-wrap: wrap; }
  .personnel-form-assignment { grid-template-columns: auto minmax(0, 1fr); }
  .personnel-form-assignment-status { grid-column: 2; justify-self: start; }
}