:root {
  color-scheme:light;
  --ember:#ff5a1f;
  --ink:#111;
  --canvas:#f7f7f5;
  --line:#d5d5d1
}

#rich-editor {
  border:1px solid #a3a3a3;
  border-radius:12px;
  overflow:hidden
}

.editor-toolbar {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:10px 12px;
  background:var(--canvas);
  border-bottom:1px solid var(--line)
}

.editor-toolbar button {
  background:transparent;
  padding:8px;
  min-width:44px;
  font-size:14px
}

.editor-toolbar button[aria-pressed=true] {
  background:#ffe6d9;
  color:#8c2b08
}

.tiptap {
  padding:20px;
  min-height:320px;
  overflow-wrap:anywhere;
  font-size:14px;
  line-height:1.4
}

.tiptap:focus-visible {
  outline:2px solid var(--ember);
  outline-offset:-2px
}

.tiptap h1 {
  font-size:28px;
  line-height:1.2
}

.tiptap h2 {
  font-size:20px;
  line-height:1.2
}

.tiptap blockquote {
  border-left:3px solid var(--line);
  padding-left:16px;
  margin-left:0
}

#rich-editor[hidden] {
  display:none
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:Gesta,Arial,sans-serif;
  line-height:1.5
}

main {
  max-width:1120px;
  margin:0 auto;
  padding:40px 24px;
  display:grid;
  gap:24px
}

h1 {
  font-size:48px;
  line-height:1;
  letter-spacing:-.02em;
  margin:0
}

.eyebrow {
  font-size:12px;
  letter-spacing:.1em;
  color:#666
}

a {
  color:#a83208
}

button,.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--ember);
  color:#111;
  border:0;
  border-radius:8px;
  padding:12px 18px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  min-height:44px;
  width:fit-content
}

.card {
  background:white;
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  min-width:0
}

.auth {
  max-width:480px;
  width:100%
}

form,label {
  display:flex;
  flex-direction:column;
  gap:10px
}

form {
  gap:20px
}

input,select,textarea {
  font:inherit;
  color:inherit;
  background:white;
  border:1px solid #a3a3a3;
  border-radius:8px;
  padding:12px;
  min-width:0;
  width:100%
}

textarea {
  resize:vertical
}

input:focus,select:focus,textarea:focus {
  outline:0
}

button:focus-visible,a:focus-visible {
  outline:3px solid var(--ember);
  outline-offset:3px
}

.password {
  display:flex;
  gap:10px
}

.password button {
  background:#eee
}

.savebar {
  position:sticky;
  top:10px;
  z-index:10;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  background:#fff4ed;
  border:1px solid var(--ember);
  border-radius:8px;
  padding:16px
}

.savebar[hidden] {
  display:none
}

.error {
  border-color:#ae1414
}

.table {
  overflow-x:auto
}

table {
  width:100%;
  border-collapse:collapse;
  text-align:left
}

td,th {
  padding:16px;
  border-bottom:1px solid var(--line)
}

.nav {
  background:#111;
  color:white;
  padding:16px
}

.nav summary {
  cursor:pointer;
  font-weight:bold
}

.nav nav {
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:wrap;
  padding-top:16px
}

.nav a {
  color:#ff7c49
}

.nav form {
  margin-left:auto
}

@media(max-width:700px) {
  main {
    padding:24px 16px
  }

  h1 {
    font-size:36px
  }

  .nav nav {
    align-items:flex-start;
    flex-direction:column
  }

  .nav form {
    margin-left:0
  }

  .savebar {
    top:0
  }

  td,th {
    padding:12px
  }

}

@media(min-width:1100px) {
  body:has(.nav) {
    background:#111111
  }

  .nav {
    position:fixed;
    inset:0 auto 0 max(0px,calc(50% - 670px));
    width:220px
  }

  .nav nav {
    display:flex!important;
    flex-direction:column;
    align-items:flex-start
  }

  .nav:not([open])>nav {
    display:flex
  }

  .nav form {
    margin:0
  }

  body:has(.nav) main {
    margin-left:max(220px,calc(50% - 450px));
    margin-right:auto;
    min-height:100vh;
    background:var(--canvas)
  }

}
/* Compact rich-text inputs shared by Page Editor and Form Builder. */
.rich-editor-compact{position:relative;border:1px solid var(--border-strong,#a3a3a3);border-radius:10px;background:#fff;overflow:visible}
.rich-editor-compact .editor-toolbar{display:flex;align-items:center;gap:0;min-height:42px;padding:0;border-bottom:1px solid var(--line,#e6e6e2)}
.rich-editor-compact .editor-toolbar>button,.rich-editor-compact .editor-color-trigger{display:grid;place-items:center;width:42px;height:42px;min-height:42px;padding:0;border:0;border-right:1px solid var(--line,#e6e6e2);border-radius:0;background:#fff;color:#111;font-size:16px}
.rich-editor-compact .editor-toolbar>button[aria-label=Bold]{font-weight:700}.rich-editor-compact .editor-toolbar>button[aria-label=Italic]{font-style:italic}
.rich-editor-compact .editor-toolbar>button[aria-pressed=true]{background:#ffe6d9;color:#8c2b08}
.rich-text-panel .rich-editor:not(.rich-editor-compact) .editor-toolbar{gap:0;padding:16px;background:#f7f7f5;border-bottom:1px solid var(--line,#e6e6e2)}
.rich-text-panel .rich-editor:not(.rich-editor-compact) .editor-toolbar>button,.rich-text-panel .rich-editor:not(.rich-editor-compact) .editor-color-trigger{display:grid;place-items:center;height:42px;min-height:42px;min-width:42px;padding:0 12px;border:0;border-right:1px solid var(--line,#e6e6e2);border-radius:0;background:#fff;color:#111;font-size:14px}
.rich-text-panel .rich-editor:not(.rich-editor-compact) .editor-toolbar>button[aria-pressed=true]{background:#ffe6d9;color:#8c2b08}
.rich-editor-compact .tiptap{min-height:100px;padding:14px 16px;font:400 16px/22px Gesta,Arial,sans-serif;outline:0}
.rich-editor-compact .tiptap>p{margin:0}.rich-editor-compact .tiptap>p+p{margin-top:10px}
.rich-editor-compact:focus-within{border-color:var(--ember,#ff5a1f);box-shadow:0 0 0 1px var(--ember,#ff5a1f)}
.editor-toolbar{position:relative;overflow:visible}.editor-color{position:relative}.editor-color-trigger span{display:block;width:18px;height:18px;border-radius:50%;background:var(--editor-color,currentColor);border:1px solid #a3a3a3}
.editor-color-menu{position:absolute;z-index:1000;left:0;top:48px;width:250px;padding:14px;background:#fff;border:1px solid var(--line,#e6e6e2);border-radius:10px;box-shadow:0 12px 32px #1112}
.editor-color-menu[hidden]{display:none}.editor-color-swatch{display:inline-block;width:30px;height:30px;min-height:30px;margin:0 6px 10px 0;padding:0;border:2px solid #fff;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #a3a3a3}
.editor-toolbar .editor-color-swatch{background:var(--swatch)}
.editor-color-swatch:focus-visible{outline:2px solid var(--ember,#ff5a1f);outline-offset:2px}.editor-color-default{display:block;width:100%;min-height:34px;padding:8px 0 0;border:0;border-top:1px solid var(--line,#e6e6e2);border-radius:0;background:#fff;color:#111;text-align:left}
/* Body-mounted palette escapes editor overflow and neighboring card stacks. */
body>.editor-color-menu{position:fixed;z-index:1000;box-sizing:border-box;display:grid;grid-template-columns:repeat(5,32px);gap:10px;width:max-content;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;margin:0;padding:14px}
body>.editor-color-menu[hidden]{display:none}
body>.editor-color-menu>.editor-color-swatch{display:grid;place-items:center;box-sizing:border-box;width:32px;height:32px;min-width:32px;min-height:32px;padding:0;margin:0;border:2px solid #fff;border-radius:9px;background:var(--swatch,#fff);color:#111;box-shadow:0 0 0 1px #a3a3a3}
.rich-editor-compact{overflow:hidden}



/* Canonical Forge rich-text toolbar. Keep every editor surface visually identical. */
.rich-editor-canon,
#rich-editor.rich-editor-canon{position:relative;width:100%;overflow:hidden;border:1px solid var(--border-strong,#a3a3a3);border-radius:10px;background:#fff}
.rich-editor-canon .editor-toolbar,
#rich-editor.rich-editor-canon .editor-toolbar{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:0;min-height:32px;padding:3px;background:#f7f7f5;border-bottom:1px solid var(--line,#e6e6e2);overflow:visible}
.rich-editor-canon .editor-toolbar>button,
.rich-editor-canon .editor-toolbar>.editor-color>.editor-color-trigger,
#rich-editor.rich-editor-canon .editor-toolbar>button,
#rich-editor.rich-editor-canon .editor-toolbar>.editor-color>.editor-color-trigger{display:grid;place-items:center;width:auto;height:26px;min-width:26px;min-height:26px;margin:0;padding:3px;border:0;border-right:1px solid var(--line,#e6e6e2);border-radius:0;background:#fff;color:#111;font:400 18px/20px Gesta,Arial,sans-serif}
.rich-editor-canon .editor-toolbar>button:first-child,
#rich-editor.rich-editor-canon .editor-toolbar>button:first-child{border-left:0}
.rich-editor-canon .editor-toolbar>button:hover,
.rich-editor-canon .editor-toolbar>.editor-color>.editor-color-trigger:hover,
#rich-editor.rich-editor-canon .editor-toolbar>button:hover,
#rich-editor.rich-editor-canon .editor-toolbar>.editor-color>.editor-color-trigger:hover{background:#fff4ed;color:#111}
.rich-editor-canon .editor-toolbar>button[aria-pressed=true],
#rich-editor.rich-editor-canon .editor-toolbar>button[aria-pressed=true]{background:#ffe6d9;color:#8c2b08}
.rich-editor-canon .editor-toolbar>button[aria-label=Bold],
.rich-editor-canon .editor-toolbar>button[aria-label="Heading 1"],
.rich-editor-canon .editor-toolbar>button[aria-label="Heading 2"]{font-weight:700!important}
.rich-editor-canon .editor-toolbar>button[aria-label=Italic]{font-style:italic!important}
.rich-editor-canon .editor-toolbar>button[aria-label=Underline]{text-decoration:underline!important;text-underline-offset:2px}
.rich-editor-canon .editor-color{position:relative;display:flex}
.rich-editor-canon .editor-color-trigger span{display:block;width:20px;height:20px;border-radius:50%;background:var(--editor-color,currentColor);border:1px solid #a3a3a3}
.rich-editor-canon .editor-toolbar>button[aria-label="Symbols and emoji"]{font-size:20px;line-height:20px}
.rich-editor-canon .editor-control-icon{display:block;width:20px;height:20px;background:transparent no-repeat center/20px 20px}
.rich-editor-canon .editor-control-icon-link{background-image:url("editor-link.svg")}
.rich-editor-canon .editor-control-icon-list{background-image:url("editor-list.svg")}
.rich-editor-canon .editor-control-icon-numbered-list{background-image:url("editor-numbered-list.svg")}
.rich-editor-canon .editor-control-icon-quote{background-image:url("editor-quote.svg")}
.rich-editor-canon .editor-control-icon-code{background-image:url("editor-code.svg")}
.rich-editor-canon .tiptap,
#rich-editor.rich-editor-canon .tiptap{min-height:100px;padding:14px 16px;overflow-wrap:anywhere;font:400 16px/22px Gesta,Arial,sans-serif;outline:0}
.rich-editor-canon .tiptap>p{margin:0}
.rich-editor-canon .tiptap>p+p{margin-top:10px}
.rich-editor-canon:focus-within{border-color:var(--ember,#ff5a1f);box-shadow:0 0 0 1px var(--ember,#ff5a1f)}
.rich-editor-canon .editor-html-panel{width:100%}
.rich-editor-canon .editor-html-panel[hidden]{display:none}
.rich-editor-canon .editor-html-source{min-height:100px}
@media(max-width:700px){.rich-editor-canon .editor-toolbar,#rich-editor.rich-editor-canon .editor-toolbar{min-height:32px;padding:3px}.rich-editor-canon .editor-toolbar>button,.rich-editor-canon .editor-toolbar>.editor-color>.editor-color-trigger,#rich-editor.rich-editor-canon .editor-toolbar>button,#rich-editor.rich-editor-canon .editor-toolbar>.editor-color>.editor-color-trigger{width:auto;height:26px;min-width:26px;min-height:26px}}


/* Canon toolbar spacing refinement. */
.rich-editor-canon .editor-toolbar,
#rich-editor.rich-editor-canon .editor-toolbar{padding:5px}
.rich-editor-canon .editor-toolbar>button,
.rich-editor-canon .editor-toolbar>.editor-color>.editor-color-trigger,
#rich-editor.rich-editor-canon .editor-toolbar>button,
#rich-editor.rich-editor-canon .editor-toolbar>.editor-color>.editor-color-trigger{height:30px;min-width:30px;min-height:30px;padding:5px}
.rich-editor-canon .editor-color-trigger span{width:16px;height:16px}
@media(max-width:700px){
  .rich-editor-canon .editor-toolbar,
  #rich-editor.rich-editor-canon .editor-toolbar{padding:5px}
  .rich-editor-canon .editor-toolbar>button,
  .rich-editor-canon .editor-toolbar>.editor-color>.editor-color-trigger,
  #rich-editor.rich-editor-canon .editor-toolbar>button,
  #rich-editor.rich-editor-canon .editor-toolbar>.editor-color>.editor-color-trigger{height:30px;min-width:30px;min-height:30px;padding:5px}
}


/* Embedded HTML mode uses Forge focus and active-state canon. */
.rich-editor-canon .editor-html-panel .cm-editor.cm-focused{outline:0!important;outline-offset:0!important}
.rich-editor-canon .editor-toolbar>button[aria-label="Visual editor"],
#rich-editor.rich-editor-canon .editor-toolbar>button[aria-label="Visual editor"]{background:#fff4ed!important;color:#111}