#redactorium-app *, #redactorium-app ::before, #redactorium-app ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

#redactorium-app ::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*//*
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)
*/

#redactorium-app *,
#redactorium-app ::before,
#redactorium-app ::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

#redactorium-app ::before,
#redactorium-app ::after {
  --tw-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
*/

#redactorium-app,
#redactorium-app :host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 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.
*/

#redactorium-app {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
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.
*/

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

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

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

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

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

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

#redactorium-app a {
  color: inherit;
  text-decoration: inherit;
}

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

#redactorium-app b,
#redactorium-app 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.
*/

#redactorium-app code,
#redactorium-app kbd,
#redactorium-app samp,
#redactorium-app 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.
*/

#redactorium-app small {
  font-size: 80%;
}

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

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

#redactorium-app sub {
  bottom: -0.25em;
}

#redactorium-app 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.
*/

#redactorium-app 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.
*/

#redactorium-app button,
#redactorium-app input,
#redactorium-app optgroup,
#redactorium-app select,
#redactorium-app 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 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

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

#redactorium-app button,
#redactorium-app select {
  text-transform: none;
}

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

#redactorium-app button,
#redactorium-app input:where([type='button']),
#redactorium-app input:where([type='reset']),
#redactorium-app input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

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

#redactorium-app :-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)
*/

#redactorium-app :-moz-ui-invalid {
  box-shadow: none;
}

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

#redactorium-app progress {
  vertical-align: baseline;
}

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

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

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

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

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

#redactorium-app ::-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.
*/

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

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

#redactorium-app summary {
  display: list-item;
}

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

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

#redactorium-app fieldset {
  margin: 0;
  padding: 0;
}

#redactorium-app legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/
#redactorium-app dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

#redactorium-app 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.
*/

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

/*
Set the default cursor for buttons.
*/

#redactorium-app button,
#redactorium-app [role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
#redactorium-app :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.
*/

#redactorium-app img,
#redactorium-app svg,
#redactorium-app video,
#redactorium-app canvas,
#redactorium-app audio,
#redactorium-app iframe,
#redactorium-app embed,
#redactorium-app 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)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */
#redactorium-app [hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
    #redactorium-app {
  /* Type rhythm (DESIGN-SYSTEM §2): six line-heights, one per kind of text. */
  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.55;
  --lh-row: 1.5;
  --lh-helper: 1.45;
  --lh-label: 1.4;
        /* Advokat Frida palette */
        --paper: 42.86 100% 98.63%;   /* #fffdf8 */
        --paper-2: 42.86 28% 95.10%;  /* #f6f4ef */
        --ink: 42.86 18.92% 7.25%;    /* #16140f */
        --ink-muted: 41.54 9.63% 26.47%; /* #4a463d */
        --rule: 42.86 18.92% 7.25%;
        --forest: 144.26 43.12% 21.37%; /* #1f4e32 */
        --forest-2: 144.26 43.12% 17%;
        --forest-3: 144.26 43.12% 15%;
        --brick: 0 60% 49.02%;        /* #c83232 */
        --plum: 240 41.41% 38.82%;    /* #3a3a8c */
        --ochre: 27.59 76.54% 35.10%; /* #9e5415 */

        /* shadcn semantic mapping */
        --background: var(--paper);
        --foreground: var(--ink);
        --card: 42.86 100% 98.63%;
        --card-foreground: var(--ink);
        --popover: var(--paper);
        --popover-foreground: var(--ink);
        --primary: var(--forest);
        --primary-foreground: 42.86 100% 98.63%;
        --secondary: var(--paper-2);
        --secondary-foreground: var(--ink);
        --muted: var(--paper-2);
        --muted-foreground: var(--ink-muted);
        --accent: 43 40% 86%;
        --accent-foreground: var(--ink);
        --destructive: 8 55% 46%;
        --destructive-foreground: 42.86 100% 98.63%;
        --border: var(--rule);
        --input: var(--rule);
        --ring: var(--forest);
        --chart-1: 155 34% 22%;
        --chart-2: 8 55% 46%;
        --chart-3: 291 25% 30%;
        --chart-4: 38 68% 48%;
        --chart-5: 30 8% 32%;
        --radius: 0;
    }
    #redactorium-app * {
  border-color: hsl(var(--border));
}
    #redactorium-app, #redactorium-app { background: hsl(var(--paper)); color: hsl(var(--ink)); overflow-x: hidden; }
    #redactorium-app {
        margin: 0;
        font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
        font-feature-settings: "ss01", "ss02", "cv11";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    #redactorium-app code, #redactorium-app pre, #redactorium-app .mono {line-height:var(--lh-row); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
    #redactorium-app { position: relative; z-index: 1; }

    #redactorium-app h1, #redactorium-app h2, #redactorium-app h3 {
        font-family: "Space Grotesk", system-ui, sans-serif;
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: 1.05;
    }
    #redactorium-app .display {
        font-family: "Anton", Impact, sans-serif;
        font-weight: 400;
    }
#redactorium-app .container {
  width: 100%;
}
@media (min-width: 640px) {

  #redactorium-app .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  #redactorium-app .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  #redactorium-app .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  #redactorium-app .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  #redactorium-app .container {
    max-width: 1536px;
  }
}
#redactorium-app .visible {
  visibility: visible;
}
#redactorium-app .invisible {
  visibility: hidden;
}
#redactorium-app .mx-auto {
  margin-left: auto;
  margin-right: auto;
}
#redactorium-app .mb-1 {
  margin-bottom: 0.25rem;
}
#redactorium-app .mt-3 {
  margin-top: 0.75rem;
}
#redactorium-app .mt-4 {
  margin-top: 1rem;
}
#redactorium-app .mt-6 {
  margin-top: 1.5rem;
}
#redactorium-app .mt-8 {
  margin-top: 2rem;
}
#redactorium-app .block {
  display: block;
}
#redactorium-app .inline {
  display: inline;
}
#redactorium-app .flex {
  display: flex;
}
#redactorium-app .table {
  display: table;
}
#redactorium-app .contents {
  display: contents;
}
#redactorium-app .hidden {
  display: none;
}
#redactorium-app .h-4 {
  height: 1rem;
}
#redactorium-app .min-h-0 {
  min-height: 0px;
}
#redactorium-app .min-h-screen {
  min-height: 100vh;
}
#redactorium-app .w-4 {
  width: 1rem;
}
#redactorium-app .max-w-6xl {
  max-width: 72rem;
}
#redactorium-app .transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
#redactorium-app .animate-spin {
  animation: spin 1s linear infinite;
}
#redactorium-app .cursor-pointer {
  cursor: pointer;
}
#redactorium-app .flex-col {
  flex-direction: column;
}
#redactorium-app .items-center {
  align-items: center;
}
#redactorium-app .gap-2 {
  gap: 0.5rem;
}
#redactorium-app .gap-3 {
  gap: 0.75rem;
}
#redactorium-app .overflow-x-auto {
  overflow-x: auto;
}
#redactorium-app .break-words {
  overflow-wrap: break-word;
}
#redactorium-app .border {
  border-width: 1px;
}
#redactorium-app .bg-\[hsl\(var\(--ink\)\)\] {
  background-color: hsl(var(--ink));
}
#redactorium-app .p-4 {
  padding: 1rem;
}
#redactorium-app .px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
#redactorium-app .px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
#redactorium-app .py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
#redactorium-app .pb-10 {
  padding-bottom: 2.5rem;
}
#redactorium-app .pb-2 {
  padding-bottom: 0.5rem;
}
#redactorium-app .pt-8 {
  padding-top: 2rem;
}
#redactorium-app .text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
#redactorium-app .text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
#redactorium-app .font-semibold {
  font-weight: 600;
}
#redactorium-app .uppercase {
  text-transform: uppercase;
}
#redactorium-app .lowercase {
  text-transform: lowercase;
}
#redactorium-app .ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
#redactorium-app .leading-none {
  line-height: 1;
}
#redactorium-app .text-\[hsl\(var\(--paper\)\)\] {
  color: hsl(var(--paper));
}
#redactorium-app .filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
#redactorium-app .transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
#redactorium-app .running {
  animation-play-state: running;
}

/*
  Redactorium inside the Advokat Frida Toolkit square-shadow family.
*/

/* Tag chips — like advokatfrida.com "TOOLKIT" labels */
#redactorium-app .tag-toolkit  { color: hsl(var(--brick)); }
#redactorium-app .tag-guides   { color: hsl(var(--plum)); }
#redactorium-app .tag-desk     { color: hsl(var(--forest)); }

/* Buttons with editorial character */
#redactorium-app .btn-forest {
    background: hsl(var(--forest));
    color: #fff;
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.875rem;
    border: 2px solid hsl(var(--ink));
    border-radius: 0;
    box-shadow: 4px 4px 0 hsl(var(--ink));
    transition: transform .08s ease, box-shadow .08s ease, background .2s ease;
}
#redactorium-app .btn-forest:hover { background: hsl(var(--forest-2)); transform: translate(-1px,-1px); box-shadow: 4px 4px 0 hsl(var(--ink)); }
#redactorium-app .btn-forest:active { transform: translate(4px,4px); box-shadow: none; }

#redactorium-app .btn-ghost-ink {
    background: transparent;
    color: hsl(var(--ink));
    padding: 0.7rem 1rem;
    font-weight: 600;
    border: 2px solid hsl(var(--ink));
    border-radius: 0;
    transition: all .15s ease;
}
#redactorium-app .btn-ghost-ink:hover { background: hsl(var(--ink)); color: hsl(var(--paper)); }

/* Editorial card / callout */
#redactorium-app .paper-card {
    background: hsl(var(--card));
    border: 2px solid hsl(var(--ink));
    border-radius: 0;
    box-shadow: 4px 4px 0 hsl(var(--ink));
}
#redactorium-app .paper-card--soft {
    background: hsl(var(--card));
    border: 2px solid hsl(var(--ink));
    border-radius: 0;
}

/* Dropzone */
#redactorium-app .dropzone {
    border: 2px dashed hsl(var(--ink) / 0.55);
    background:
        repeating-linear-gradient(
            135deg,
            hsl(var(--paper-2)) 0 12px,
            hsl(var(--paper)) 12px 24px
        );
    transition: all .15s ease;
}
#redactorium-app .dropzone.is-drag {
    border-color: hsl(var(--forest));
    background: hsl(var(--forest) / 0.08);
}

/* Confidence pill */
#redactorium-app .pill {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 2px 8px; border: 1px solid hsl(var(--ink)); border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
    background: hsl(var(--paper));
}
#redactorium-app .pill-forest { background: hsl(var(--forest)); color: hsl(var(--paper)); border-color: hsl(var(--forest-3)); }
#redactorium-app .pill-brick  { background: hsl(var(--brick)); color: hsl(var(--paper)); border-color: hsl(var(--brick)); }
#redactorium-app .pill-plum   { background: hsl(var(--plum)); color: hsl(var(--paper)); border-color: hsl(var(--plum)); }
#redactorium-app .pill-ochre  { background: hsl(var(--ochre) / 0.9); color: hsl(var(--ink)); border-color: hsl(var(--ochre)); }
#redactorium-app .pill-ink    { background: hsl(var(--ink)); color: hsl(var(--paper)); border-color: hsl(var(--ink)); }

/* Table */
#redactorium-app .editorial-table { width: 100%; border-collapse: collapse; }
#redactorium-app .editorial-table th, #redactorium-app .editorial-table td { padding: 10px 12px; text-align: left; font-size: 0.85rem; }
#redactorium-app .editorial-table thead th { border-top: 1px solid hsl(var(--ink)); border-bottom: 1px solid hsl(var(--ink)); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; }
#redactorium-app .editorial-table tbody tr { border-bottom: 1px solid hsl(var(--rule)); }
#redactorium-app .editorial-table tbody tr:hover { background: hsl(var(--paper-2)); }

/* Marquee-style masthead ticker */
@keyframes ticker { from { transform: translateX(0);} to { transform: translateX(-50%);} }
#redactorium-app .ticker-track { display: inline-flex; animation: ticker 45s linear infinite; }

/* Fade-in staggered entrance */
@keyframes rise { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} }
#redactorium-app .rise { animation: rise .5s ease both; }

/* Focus */
#redactorium-app :focus-visible { outline: 2px solid hsl(var(--forest)); outline-offset: 2px; }

#redactorium-app .tool-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 28rem);
}
#redactorium-app .tool-mode-switch > button {
    justify-content: center;
    min-width: 0;
}

#redactorium-app [data-toolkit-embedded="true"] {
    background: hsl(var(--ground, var(--paper-2)));
    font-size: 15px;
    line-height: var(--lh-body);
    /* flow-root stops the first section's top margin collapsing through #root, which
       pushed the whole app 16px down and showed the body's paper as a strip under
       the shell header. Every other tool starts on ground; so does this one now. */
    display: flow-root;
}
/* Belt and braces: while embedded, nothing behind the app is paper. */
#redactorium-app:has([data-toolkit-embedded="true"]),
#redactorium-app:has([data-toolkit-embedded="true"]) body {
    background: hsl(var(--ground, var(--paper-2)));
}

/* The Toolkit is a compact workbench: preserve hierarchy without campaign-page scale. */
#redactorium-app [data-toolkit-embedded="true"] .tool-mode-switch {
    min-height: 44px;
}
#redactorium-app [data-toolkit-embedded="true"] .tool-mode-switch > button {
    min-height: 44px;
}
#redactorium-app [data-toolkit-embedded="true"] .btn-forest,
#redactorium-app [data-toolkit-embedded="true"] .btn-ghost-ink,
#redactorium-app [data-toolkit-embedded="true"] .tool-mode-switch > button {
    min-height: 44px;
    font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: var(--lh-label);
}
#redactorium-app [data-toolkit-embedded="true"] h2 {
    font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: var(--lh-heading);
}
#redactorium-app [data-toolkit-embedded="true"] h3 {
    font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: var(--lh-heading);
}
#redactorium-app [data-toolkit-embedded="true"] .eyebrow {
    font-size: 0.6875rem;
}
#redactorium-app [data-toolkit-embedded="true"] .red-upload-stage {
    max-width: 80rem;
    margin-top: 0.75rem;
}
#redactorium-app [data-toolkit-embedded="true"] .red-upload-grid {
    gap: 1rem;
}
#redactorium-app [data-toolkit-embedded="true"] .red-drop-card {
    padding: 1.125rem;
}
#redactorium-app [data-toolkit-embedded="true"] .red-drop-layout {
    gap: 0.875rem;
}
#redactorium-app [data-toolkit-embedded="true"] .red-drop-icon {
    padding: 0.625rem;
}
#redactorium-app [data-toolkit-embedded="true"] .red-drop-card h2 {
    font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: var(--lh-heading);
}
#redactorium-app [data-toolkit-embedded="true"] .red-format-list,
#redactorium-app [data-toolkit-embedded="true"] .red-upload-actions {
    margin-top: 0.75rem;
}
#redactorium-app [data-toolkit-embedded="true"] .red-field-guide {
    padding: 1rem;
}
#redactorium-app [data-toolkit-embedded="true"] .red-field-guide-list {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
}
#redactorium-app [data-toolkit-embedded="true"] .red-field-guide-list > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.625rem;
}
#redactorium-app [data-toolkit-embedded="true"] .red-field-guide-rule {
    margin-top: 0.875rem;
}
#redactorium-app [data-toolkit-embedded="true"] .red-field-sources {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    line-height: var(--lh-helper);
}
#redactorium-app [data-toolkit-embedded="true"] .red-drop-formats {
    font-size: 0.9375rem;
}

@media (max-width: 640px) {
    #redactorium-app [data-toolkit-embedded="true"] .red-upload-stage {
        margin-top: 0.625rem;
    }
    #redactorium-app [data-toolkit-embedded="true"] .red-upload-grid {
        gap: 0.75rem;
    }
    #redactorium-app [data-toolkit-embedded="true"] .red-drop-card {
        padding: 0.875rem;
    }
    #redactorium-app [data-toolkit-embedded="true"] .red-drop-icon,
    #redactorium-app [data-toolkit-embedded="true"] .red-format-list {
        display: none;
    }
    #redactorium-app [data-toolkit-embedded="true"] .red-upload-actions {
        margin-top: 0.625rem;
        gap: 0.5rem;
    }
    #redactorium-app [data-toolkit-embedded="true"] .red-upload-actions > button {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #redactorium-app *, #redactorium-app *::before, #redactorium-app *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

/* Custom scrollbar */
#redactorium-app ::-webkit-scrollbar { width: 10px; height: 10px; }
#redactorium-app ::-webkit-scrollbar-thumb { background: hsl(var(--ink) / 0.35); border-radius: 999px; }
#redactorium-app ::-webkit-scrollbar-thumb:hover { background: hsl(var(--ink) / 0.6); }

/* Utility: strike-through redaction preview */
#redactorium-app .redacted-preview {
    background: hsl(var(--ink));
    color: hsl(var(--ink));
    border-radius: 2px;
    padding: 0 4px;
    -webkit-user-select: none;
            user-select: none;
}

/* ===== Toolkit design system alignment (the-toolkit/docs/design/DESIGN-SYSTEM.md) ===== */

#redactorium-app .text-action {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 8px;
    border: 0;
    background: transparent;
    color: hsl(var(--ink));
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
  line-height: var(--lh-label);
}
#redactorium-app .text-action:hover { color: hsl(var(--brick)); }

#redactorium-app .field-label {
    display: block;
    color: hsl(var(--ink-muted));
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  line-height: var(--lh-label);
}

#redactorium-app .btn-ghost-ink {
    border: 1px solid hsl(var(--ink));
    background: hsl(var(--paper));
    color: hsl(var(--ink));
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    min-height: 44px;
    padding: 9px 18px;
  line-height: var(--lh-label);
}
#redactorium-app .btn-ghost-ink:hover { background: hsl(var(--paper)); color: hsl(var(--ink)); }

#redactorium-app .btn-forest {
    min-height: 44px;
    padding: 9px 18px;
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: 0.045em;
  line-height: var(--lh-label);
}

#redactorium-app .tool-mode-switch {
    display: inline-flex;
    width: auto;
    border: 1px solid hsl(var(--ink));
    background: hsl(var(--paper));
    padding: 0;
}
#redactorium-app .tool-mode-switch > button {
    min-height: 44px;
    padding: 9px 18px;
    color: hsl(var(--ink-muted));
}
#redactorium-app .tool-mode-switch > button[aria-selected="true"] {
    background: hsl(var(--ink));
    color: hsl(var(--paper));
}

#redactorium-app .dropzone {
    border: 1px dashed hsl(var(--ink) / 0.32);
    background: hsl(var(--paper));
}
#redactorium-app .dropzone.is-drag {
    border-color: hsl(var(--forest));
    background: hsl(var(--forest) / 0.08);
}

#redactorium-app .red-drop-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 52px 30px 56px;
    text-align: center;
}
#redactorium-app .red-drop-title {
    font-size: 22px;
    font-weight: 700;
    line-height: var(--lh-heading);
    letter-spacing: normal;
}
#redactorium-app .red-drop-formats {
    color: hsl(var(--ink-muted));
    font-size: 14px;
    margin: 0;
}
#redactorium-app .red-upload-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

#redactorium-app .red-under-zone {
    display: flex;
    justify-content: flex-end;
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid hsl(var(--ink) / 0.17);
}
#redactorium-app .red-howitworks { width: 100%; }
#redactorium-app .red-howitworks summary {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 44px;
    color: hsl(var(--ink));
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    list-style: none;
  line-height: var(--lh-label);
}
#redactorium-app .red-howitworks summary::-webkit-details-marker { display: none; }
#redactorium-app .red-howitworks summary:hover { color: hsl(var(--brick)); }
#redactorium-app .red-field-guide-list {
    margin: 8px 0 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: hsl(var(--ink-muted));
    font-size: 14px;
    line-height: var(--lh-helper);
}
#redactorium-app .red-field-sources {
    margin-top: 12px;
    color: hsl(var(--ink-muted));
    font-size: 12px;
    line-height: var(--lh-helper);
}

#redactorium-app .red-findings-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}
#redactorium-app .red-task-heading {
    font-size: 19px;
    font-weight: 700;
    line-height: var(--lh-heading);
    letter-spacing: normal;
    overflow-wrap: anywhere;
}
/* Task heading is 19px (§2). Without this the embedded h2 rule above outranks the class and paints 22px. */
#redactorium-app [data-toolkit-embedded="true"] .red-task-heading { font-size: 19px; }

#redactorium-app .red-disclosure summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: hsl(var(--ink));
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    list-style: none;
  line-height: var(--lh-label);
}
#redactorium-app .red-disclosure summary::-webkit-details-marker { display: none; }
#redactorium-app .red-disclosure summary:hover { color: hsl(var(--brick)); }

#redactorium-app .red-advanced summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: hsl(var(--ink));
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    list-style: none;
  line-height: var(--lh-label);
}
#redactorium-app .red-advanced summary::-webkit-details-marker { display: none; }
#redactorium-app .red-advanced summary:hover { color: hsl(var(--brick)); }
#redactorium-app .red-advanced-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 10px 0 6px;
}
#redactorium-app .red-adv-input {
    min-height: 44px;
    padding: 6px 11px;
    border: 1px solid hsl(var(--ink));
    background: hsl(var(--paper));
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 14px;
}
#redactorium-app .red-adv-help {
    margin-top: 4px;
    color: hsl(var(--ink-muted));
    font-size: 12px;
    line-height: var(--lh-helper);
}

#redactorium-app .red-apply-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
}
#redactorium-app .red-apply-count {
    color: hsl(var(--ink-muted));
    font-size: 14px;
}
#redactorium-app .red-apply-reset { margin-left: auto; }

#redactorium-app .red-stat-band {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid hsl(var(--ink));
    background: hsl(var(--paper));
}
#redactorium-app .red-stat-band strong {
    display: block;
    margin-top: 2px;
    font-size: 19px;
    font-weight: 700;
    line-height: var(--lh-heading);
}

#redactorium-app .red-hash-line {
    margin: 14px 0 0;
    color: hsl(var(--ink-muted));
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    word-break: break-all;
  line-height: var(--lh-row);
}
#redactorium-app .red-hash-line + .red-hash-line { margin-top: 4px; }

#redactorium-app .red-record-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 22px 0 6px;
}

#redactorium-app .editorial-table thead th {
    border-top: 0;
    border-bottom: 1px solid hsl(var(--ink));
    color: hsl(var(--ink-muted));
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
  line-height: var(--lh-label);
}
#redactorium-app .editorial-table tbody tr { border-bottom: 1px solid hsl(var(--ink) / 0.17); line-height: var(--lh-row); }
#redactorium-app .editorial-table tbody tr:hover { background: hsl(var(--paper)); }

#redactorium-app .tag-toolkit, #redactorium-app .tag-guides, #redactorium-app .tag-desk { color: hsl(var(--ink-muted)); }
#redactorium-app .eyebrow { letter-spacing: 0.14em; font-size: 11px; }

@media (max-width: 760px) {
    #redactorium-app .red-advanced-grid { grid-template-columns: minmax(0, 1fr); }
    #redactorium-app .red-stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    #redactorium-app .red-apply-row { flex-wrap: wrap; }
    #redactorium-app .red-drop-card { padding: 32px 16px 36px; }
}

#redactorium-app .red-presets {
    display: block;
    padding: 10px 0 12px;
    border-bottom: 1px solid hsl(var(--ink) / 0.17);
}
#redactorium-app .red-record-links {
    display: flex;
    align-items: center;
    gap: 18px;
}
#redactorium-app .red-task-heading:focus { outline: none; }

/* ===== Canonical Advokat Frida standalone chrome (matches the live site nav) ===== */

#redactorium-app .af-site-bar {
    display: flex;
    align-items: center;
    gap: 8px 20px;
    flex-wrap: wrap;
    min-height: 42px;
    padding: 4px clamp(16px, 4vw, 56px);
    background: transparent;
    border-bottom: 1px solid hsl(var(--ink) / 0.17);
    line-height: 1.5;
}
#redactorium-app .af-wordmark {
    order: 1;
    flex: none;
    color: hsl(var(--ink));
    font-family: "Anton", Impact, sans-serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}
#redactorium-app .af-bar-nav { order: 2; min-width: 0; margin-left: auto; }
#redactorium-app .af-bar-nav ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    min-height: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#redactorium-app .af-bar-nav a {
    display: block;
    color: hsl(var(--ink-muted));
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
  line-height: var(--lh-label);
}
#redactorium-app .af-bar-nav a:hover { color: hsl(var(--brick)); }
#redactorium-app .af-subscribe {
    order: 3;
    padding: 8px 13px;
    color: hsl(var(--paper));
    background: hsl(var(--forest));
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
  line-height: var(--lh-label);
}
#redactorium-app .af-subscribe:hover { filter: brightness(0.94); }

/* The shell's footer (DESIGN-SYSTEM §7, the 2026-09-23 shared footer): one row, the nameplate
   and four links, on ink. Same numbers as public/toolkit.css .toolkit-footer. */
#redactorium-app .af-colophon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 32px;
    width: 100%;
    margin: 48px 0 0;
    padding: 12px 32px;
    background: hsl(var(--ink));
    color: hsl(var(--paper));
}
#redactorium-app .af-colophon a { color: hsl(var(--paper)); text-decoration: none; }
#redactorium-app .af-colophon a:hover { text-decoration: underline; }
#redactorium-app .af-colophon a:focus-visible { outline-color: hsl(var(--paper)); }
#redactorium-app .af-colophon-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: "Anton", Impact, sans-serif;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: var(--lh-display);
    text-transform: uppercase;
}
#redactorium-app .af-colophon nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
#redactorium-app .af-colophon nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: var(--lh-label);
}

@media (max-width: 820px) {
    #redactorium-app .af-colophon { padding: 12px 20px; gap: 0 24px; }
}

/* ===== Canvas fidelity (Toolkit - Redesign 3A, 4A, 4B) ===== */

#redactorium-app .red-drop-card,
#redactorium-app [data-toolkit-embedded="true"] .red-drop-card { padding: 56px 30px; gap: 14px; }
#redactorium-app .red-under-zone {
    display: flex;
    justify-content: flex-end;
    gap: 22px;
    margin-top: 26px;
    padding-top: 6px;
    border-top: 1px solid hsl(var(--ink) / 0.17);
}
#redactorium-app .red-under-panel { padding: 4px 0 8px; }
#redactorium-app .red-under-panel[hidden] { display: none; }
#redactorium-app [data-toolkit-embedded="true"] .red-field-guide-list { margin-top: 4px; font-size: 14px; }

#redactorium-app .editorial-table th, #redactorium-app .editorial-table td { padding: 9px 12px; font-size: 16px; }
#redactorium-app .editorial-table thead th { padding: 10px 12px; }
#redactorium-app .editorial-table td.mono, #redactorium-app .editorial-table td .mono { font-size: 14px; }
#redactorium-app .red-muted { color: hsl(var(--ink-muted)); }
/* A document with nothing found: one plain line where the findings table would be. */
#redactorium-app .red-empty-line { margin: 18px 0 0; font-size: 16px; line-height: var(--lh-body); }
/* Boundary aside (DESIGN-SYSTEM §3): at most one per surface, beside the action it changes. */
#redactorium-app .red-boundary {
    margin: 18px 0 0;
    padding-left: 12px;
    border-left: 3px solid hsl(var(--ochre));
    color: hsl(var(--ink-muted));
    font-size: 13px;
    line-height: var(--lh-helper);
}
#redactorium-app .red-treatment { position: relative; width: 200px; }
#redactorium-app .red-treatment select {
    width: 100%;
    min-height: 44px;
    padding: 0 34px 0 12px;
    border: 1px solid hsl(var(--ink));
    background: hsl(var(--paper));
    font-size: 15px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
}
#redactorium-app .red-treatment-chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    pointer-events: none;
}
#redactorium-app .red-treatment-note { margin-top: 4px; color: hsl(var(--brick)); font-size: 12px; }
#redactorium-app .red-finding-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid hsl(var(--ink) / 0.17);
}
#redactorium-app .red-finding-card-head { display: flex; justify-content: space-between; gap: 12px; }
#redactorium-app .red-finding-card-line { margin: 0; color: hsl(var(--ink-muted)); font-size: 14px; }

#redactorium-app .red-apply-row { margin-top: 20px; }
#redactorium-app .red-advanced { margin-top: 22px; padding-top: 4px; border-top: 1px solid hsl(var(--ink) / 0.17); }
#redactorium-app .red-advanced summary { justify-content: flex-end; }
#redactorium-app .red-presets { margin-top: 8px; padding: 12px 0 4px; border-top: 1px solid hsl(var(--ink) / 0.17); }
#redactorium-app .red-presets-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
#redactorium-app .red-presets-row input { width: 260px; }
#redactorium-app .red-preset-list { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
#redactorium-app .red-preset-chip { display: inline-flex; align-items: center; gap: 4px; }
#redactorium-app .red-preset-delete {
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: hsl(var(--ink-muted));
    font-size: 16px;
    cursor: pointer;
}
#redactorium-app .red-preset-delete:hover { color: hsl(var(--brick)); }

#redactorium-app .red-hash-line { margin-top: 14px; }
#redactorium-app .red-record-actions { gap: 12px; }
#redactorium-app .red-record-actions .text-action { margin-left: 8px; }

/* Inside the shell the working column is the canvas pane: 1066px of content, 32px sides, centered. */
#redactorium-app [data-toolkit-embedded="true"] .max-w-6xl,
#redactorium-app [data-toolkit-embedded="true"] .red-upload-stage {
    max-width: 1130px;
    padding-left: 32px;
    padding-right: 32px;
}
/* Column cap steps with the scale above; see the note at the end of this file.
   Breakpoints are the frame width, not the window. */
@media (min-width: 1252px) { #redactorium-app [data-toolkit-embedded="true"] .max-w-6xl, #redactorium-app [data-toolkit-embedded="true"] .red-upload-stage { max-width: 1240px; } }
@media (min-width: 1528px) { #redactorium-app [data-toolkit-embedded="true"] .max-w-6xl, #redactorium-app [data-toolkit-embedded="true"] .red-upload-stage { max-width: 1320px; } }
@media (min-width: 1900px) { #redactorium-app [data-toolkit-embedded="true"] .max-w-6xl, #redactorium-app [data-toolkit-embedded="true"] .red-upload-stage { max-width: 1400px; } }


/* How it works: the kit's numbered step-flow, one band on paper. */
#redactorium-app .red-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    border: 1px solid hsl(var(--ink));
    background: hsl(var(--paper));
}
#redactorium-app .red-steps li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-left: 1px solid hsl(var(--ink) / 0.17);
}
#redactorium-app .red-steps li:first-child { border-left: 0; }
#redactorium-app .red-step-num {
    color: hsl(var(--forest));
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
#redactorium-app .red-steps strong { font-size: 16px; font-weight: 700; line-height: var(--lh-heading); }
#redactorium-app .red-steps li > span:last-child { color: hsl(var(--ink-muted)); font-size: 14px; line-height: var(--lh-helper); }
@media (max-width: 760px) {
    #redactorium-app .red-steps { grid-template-columns: minmax(0, 1fr); }
    #redactorium-app .red-steps li { border-left: 0; border-top: 1px solid hsl(var(--ink) / 0.17); }
    #redactorium-app .red-steps li:first-child { border-top: 0; }
}

/* Batch: the workbench is a section, not a card. */
#redactorium-app [data-toolkit-embedded="true"] .paper-card {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

#redactorium-app .btn-forest[aria-disabled="true"] { cursor: not-allowed; }

/* ---- Large-display scale (Ben, 2026-09-04) -------------------------------
   At 2560px this surface used 44% of the width and the type read small. The fix
   is to scale the composition, not stretch it: `zoom` steps the whole surface at
   once - type, spacing, rules - so every proportion the design system defines
   survives, and the column cap steps with it so prose keeps a sane measure.

   These breakpoints are the width of THIS FRAME, not the window. Embedded, the
   frame is the window minus the Toolkit rail, so 1252/1528/1900 here land on the
   same windows as 1500/1800/2200 in the shell's public/toolkit.css. Below that
   nothing changes, which is the laptop view already signed off.

   The embed flag lives on the App div, not on body - target it directly. */
@media (min-width: 1252px) { #redactorium-app [data-toolkit-embedded="true"] { zoom: 1.08; --toolkit-embed-scale: 1.08; } }
@media (min-width: 1528px) { #redactorium-app [data-toolkit-embedded="true"] { zoom: 1.18; --toolkit-embed-scale: 1.18; } }
@media (min-width: 1900px) { #redactorium-app [data-toolkit-embedded="true"] { zoom: 1.30; --toolkit-embed-scale: 1.30; } }

/* The Toolkit iframe grows with this page. Keep notifications in the visible
   outer viewport, accounting for the composition's existing desktop scale. */
#redactorium-app [data-toolkit-embedded="true"] [data-sonner-toaster][data-y-position="bottom"] {
    --toolkit-toast-offset: var(--offset-bottom);
    bottom: calc(var(--toolkit-bottom-inset, 0px) / var(--toolkit-embed-scale, 1) + var(--toolkit-toast-offset));
}
@media (max-width: 600px) {
    #redactorium-app [data-toolkit-embedded="true"] [data-sonner-toaster][data-y-position="bottom"] {
        --toolkit-toast-offset: var(--mobile-offset-bottom);
    }
}

/* ---- Release review, 2026-09-24 -------------------------------------------------------- */

/* Paired buttons take the wider one's width (DESIGN-PRINCIPLES #5): the pair is an inline
   grid of equal columns, so neither button stretches past the longer label. */
#redactorium-app .red-pair {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 12px;
}
#redactorium-app .red-pair > button { width: 100%; justify-content: center; }
#redactorium-app .red-upload-actions.red-pair { display: inline-grid; }
@media (max-width: 480px) {
    #redactorium-app .red-pair { grid-auto-flow: row; width: 100%; }
}

/* The findings table needs a 1074px frame to show all five columns without clipping a
   treatment select; below that the same rows render as cards. */
#redactorium-app .red-table { display: none; }
@media (min-width: 1074px) {
    #redactorium-app .red-cards { display: none; }
    #redactorium-app .red-table { display: block; }
}

/* Advanced: two fields, two columns, and the preset input as wide as they are. */
#redactorium-app .red-advanced-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#redactorium-app .red-presets-row input { width: auto; flex: 1 1 0; min-width: 0; }
#redactorium-app .red-presets-row { max-width: calc(50% - 8px); }
#redactorium-app .red-adv-help { font-size: 13px; }
@media (max-width: 760px) {
    #redactorium-app .red-presets-row { max-width: none; flex-wrap: wrap; }
    #redactorium-app .red-presets-row > button { flex: 1 1 auto; }
}

/* Custom rules: one panel under the drop zone's own disclosure. */
#redactorium-app .red-rules { display: flex; flex-direction: column; gap: 16px; padding: 4px 0 8px; }
#redactorium-app .red-rules-intro { margin: 0; color: hsl(var(--ink-muted)); font-size: 14px; line-height: var(--lh-helper); }
#redactorium-app .red-rules-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid hsl(var(--ink) / 0.17); }
#redactorium-app .red-rules-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 6px 0; border-bottom: 1px solid hsl(var(--ink) / 0.17); }
#redactorium-app .red-rules-name { font-weight: 700; }
#redactorium-app .red-rules-list li .text-action { margin-left: auto; }
#redactorium-app .red-rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
#redactorium-app .red-rules-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#redactorium-app .red-rules-check { justify-content: flex-end; }
#redactorium-app .red-rules-check label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; cursor: pointer; }
#redactorium-app .red-rules-check input { width: 20px; height: 20px; accent-color: hsl(var(--forest)); }
#redactorium-app .red-rules-test { display: flex; flex-direction: column; gap: 4px; }
#redactorium-app .red-rules-test-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#redactorium-app .red-rules-test-row input { flex: 1 1 220px; min-width: 0; }
#redactorium-app .red-rules-result { font-size: 14px; color: hsl(var(--ink-muted)); }
#redactorium-app .red-rules-save { display: flex; justify-content: flex-start; }
@media (max-width: 760px) {
    #redactorium-app .red-rules-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Batch: each file is a section with its own findings, like the single-file view. */
#redactorium-app .red-batch-drop { margin-top: 14px; border: 1px dashed hsl(var(--ink) / 0.45); background: hsl(var(--paper)); }
#redactorium-app .red-batch-item { margin-top: 28px; padding-top: 18px; border-top: 1px solid hsl(var(--ink) / 0.17); }
#redactorium-app .red-batch-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: var(--lh-heading);
    overflow-wrap: anywhere;
}
#redactorium-app .red-batch-apply { margin-top: 28px; }

/* Phones: editable controls at 16px, or iOS zooms the page when one is tapped. */
@media (max-width: 760px) {
    #redactorium-app .red-treatment select,
    #redactorium-app .red-adv-input,
    #redactorium-app .red-rules input:not([type="checkbox"]) { font-size: 16px; }
}
/* The hash line breaks inside the hash, never inside the timestamp. */
#redactorium-app .red-hash-line { word-break: normal; overflow-wrap: anywhere; }
#redactorium-app .red-record-actions .text-action { margin-left: 0; }
/* A kind found inside text: the count sits under the kind's name, quietly. */
#redactorium-app .red-count { display: block; color: hsl(var(--ink-muted)); font-size: 14px; line-height: var(--lh-helper); }
#redactorium-app .red-finding-card-line .red-count { display: inline; }
#redactorium-app .red-finding-card-line .red-count::before { content: " · "; }
#redactorium-app .red-card-citation::before { content: "· "; }
/* In the phone cards the select spans the card, so the longest treatment name fits at 16px. */
#redactorium-app .red-cards .red-treatment { width: 100%; }
/* A rule's name is ordinary text, not an identifier: body face, not mono. */
#redactorium-app .red-adv-input.red-adv-text { font-family: inherit; }

/* Treatment legend (Ben, 2026-09-28): one card above the findings, the four treatments shown on
   the same phone number. Roles reuse DESIGN-SYSTEM §2: the column-header eyebrow, a 14px helper
   line, 16/700 names, mono data, 14px descriptions. Four columns in a frame that holds the full
   table, two below it, one on a phone. */
#redactorium-app .red-legend {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid hsl(var(--ink) / 0.17);
    background: hsl(var(--paper));
}
#redactorium-app .red-legend-title {
    margin: 0;
    color: hsl(var(--ink-muted));
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: var(--lh-label);
}
#redactorium-app .red-legend-example { margin: 4px 0 0; color: hsl(var(--ink-muted)); font-size: 14px; line-height: var(--lh-helper); }
#redactorium-app .red-legend-example .mono { color: hsl(var(--ink)); font-size: 14px; }
#redactorium-app .red-legend-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    margin: 14px 0 0;
}
@media (min-width: 1074px) { #redactorium-app .red-legend-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { #redactorium-app .red-legend-grid { grid-template-columns: minmax(0, 1fr); } }
#redactorium-app .red-legend-item { min-width: 0; }
#redactorium-app .red-legend-item dt { font-size: 16px; font-weight: 700; line-height: var(--lh-heading); }
#redactorium-app .red-legend-item dd { margin: 0; }
#redactorium-app .red-legend-after { margin-top: 4px; font-size: 14px; overflow-wrap: anywhere; }
#redactorium-app .red-legend-what { margin-top: 4px; color: hsl(var(--ink-muted)); font-size: 14px; line-height: var(--lh-helper); }
/* The embedded h3 rule outranks the class; the legend title is an eyebrow, not a heading size. */
#redactorium-app [data-toolkit-embedded="true"] .red-legend-title {
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 11px;
    line-height: var(--lh-label);
}
#redactorium-app .hover\:bg-\[hsl\(var\(--paper-2\)\)\]:hover {
  background-color: hsl(var(--paper-2));
}
@media (min-width: 768px) {

  #redactorium-app .md\:mt-12 {
    margin-top: 3rem;
  }

  #redactorium-app .md\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #redactorium-app .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  #redactorium-app .md\:pt-10 {
    padding-top: 2.5rem;
  }

  #redactorium-app .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}