/* IBM Plex Sans, self-hosted: a server may have no internet. Colours come only from the
   MudBlazor palette (AppiaTheme.cs) through its CSS variables — no hex values here. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 300; font-display: swap; src: url("fonts/ibm-plex-sans-latin-300.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 300; font-display: swap; src: url("fonts/ibm-plex-sans-latin-ext-300.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); }

html, body { font-family: "IBM Plex Sans", system-ui, sans-serif; }
code, pre, .mono, /* Monaco as the markdown editor: framed like an outlined field, filling its box. */
.md-monaco { border: 1px solid var(--mud-palette-lines-inputs); border-radius: 10px; overflow: hidden; }
.md-monaco:focus-within { border-color: var(--mud-palette-text-primary); }
.md-monaco .monaco-editor-container { height: 100%; }
.md-editor textarea { font-family: "IBM Plex Mono", ui-monospace, monospace !important; }

/* ── page structure ─────────────────────────────────────────────────────────── */

.page { max-width: 1440px; margin: 0 auto; }
.page-narrow { max-width: 1080px; margin: 0 auto; }
.muted { color: var(--mud-palette-text-secondary); }
.nowrap { white-space: nowrap; }
.clickable { cursor: pointer; }
.full-height { height: calc(100vh - var(--mud-appbar-height) - 48px); }
.sticky-top { position: sticky; top: calc(var(--mud-appbar-height) + 16px); }
.code-tag { white-space: nowrap; font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--mud-palette-text-secondary); }

.card { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; padding: 16px; }
.card-flush { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; overflow: hidden; }
.section-title { font-size: 13px; line-height: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.6px; color: var(--mud-palette-text-secondary); margin-bottom: 8px; }

/* Green is for action: a link is text, not a call to action. MudLink defaults to primary. */
.mud-link.mud-primary-text { color: var(--mud-palette-text-primary) !important; text-decoration-color: var(--mud-palette-tertiary); }
.mud-link.mud-primary-text:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Flat buttons: the guide raises contrast on hover, it never adds depth. */
.mud-button-filled, .mud-button-filled:hover, .mud-button-filled:active { box-shadow: none !important; }
.mud-button-filled.mud-button-filled-primary:hover { background-color: var(--mud-palette-primary-darken) !important; }
.mud-button-root { min-height: 36px; }
/* Outlined / text buttons default to primary, which puts lime text on white. Neutral text,
   neutral border; only the filled primary button is green. */
.mud-button-outlined.mud-button-outlined-primary, .mud-button-text.mud-button-text-primary { color: var(--mud-palette-text-primary) !important; }
.mud-button-outlined.mud-button-outlined-primary { border-color: var(--mud-palette-lines-inputs) !important; }
/* Toggle groups are a view switch, not an action: the selected item is a soft highlight
   (secondary), per the guide. */
.mud-toggle-group.mud-toggle-group-primary { border-color: var(--mud-palette-lines-inputs) !important; }
.mud-toggle-item.mud-toggle-item-selected { background-color: var(--mud-palette-secondary) !important; color: var(--mud-palette-secondary-text) !important; }
.mud-toggle-item { text-transform: none !important; }
/* Tabs: sentence case, the active one marked by contrast, not by green. */
.mud-tab { text-transform: none !important; font-weight: 500; letter-spacing: 0.1px; color: var(--mud-palette-text-secondary) !important; }
.mud-tab.mud-tab-active { color: var(--mud-palette-text-primary) !important; }
.mud-tab-slider { background: var(--mud-palette-text-primary) !important; }
.mud-tabs-tabbar { background: transparent !important; border-bottom: 1px solid var(--mud-palette-lines-default); border-top: 0 !important; }

.mud-dialog { border-radius: 12px !important; }
.mud-dialog .mud-dialog-content { padding-left: 24px; padding-right: 24px; }

.mud-nav-link.active:not(.mud-nav-link-disabled) { background: var(--mud-palette-primary) !important; color: var(--mud-palette-primary-text) !important; border-radius: 10px; }
.mud-nav-link.active .mud-nav-link-icon { color: var(--mud-palette-primary-text) !important; }
.mud-navmenu .mud-nav-link { border-radius: 10px; margin: 1px 8px; width: calc(100% - 16px); }

/* ── markdown ───────────────────────────────────────────────────────────────── */

.md { font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.md h1 { font-size: 24px; line-height: 30px; font-weight: 500; margin: 20px 0 8px; }
.md h2 { font-size: 24px; line-height: 30px; font-weight: 400; margin: 24px 0 8px; }
.md h3 { font-size: 18px; line-height: 24px; font-weight: 500; margin: 20px 0 6px; }
.md > :first-child { margin-top: 0; }
.md p { margin: 0 0 12px; }
.md ul, .md ol { margin: 0 0 12px; padding-left: 24px; }
.md li { margin: 2px 0; }
.md code { background: var(--mud-palette-background-gray); padding: 1px 6px; border-radius: 4px; font-size: 14px; }
.md pre { background: var(--mud-palette-background-gray); padding: 12px; border-radius: 10px; overflow: auto; }
.md blockquote { margin: 0 0 12px; padding: 8px 16px; border-left: 3px solid var(--mud-palette-tertiary); background: var(--mud-palette-background-gray); border-radius: 0 10px 10px 0; }
.md blockquote p:last-child { margin-bottom: 0; }
.md table { border-collapse: collapse; margin: 0 0 12px; font-size: 14px; }
.md th, .md td { border: 1px solid var(--mud-palette-lines-default); padding: 6px 10px; text-align: left; }
.md th { background: var(--mud-palette-background-gray); font-weight: 500; }
.md img { max-width: 100%; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; display: block; margin: 8px 0 12px; }
.md a { color: var(--mud-palette-text-primary); text-decoration: underline; text-decoration-color: var(--mud-palette-tertiary); text-underline-offset: 3px; }
.md .footnotes { font-size: 13px; color: var(--mud-palette-text-secondary); border-top: 1px solid var(--mud-palette-lines-default); margin-top: 16px; padding-top: 8px; }
.md .footnotes hr { display: none; }
.md sup a { text-decoration: none; font-size: 11px; padding: 0 4px; border-radius: 4px; background: var(--mud-palette-background-gray); }
.md-compact { font-size: 14px; line-height: 20px; }
.md-compact p { margin-bottom: 6px; }

.md-editor textarea { font-size: 14px !important; line-height: 21px !important; }

/* ── diff ───────────────────────────────────────────────────────────────────── */

.diff { font-size: 14px; line-height: 22px; white-space: normal; overflow-wrap: anywhere; }
.diff ins { text-decoration: none; background: color-mix(in srgb, var(--mud-palette-tertiary) 22%, transparent); border-radius: 3px; }
.diff del { background: color-mix(in srgb, var(--mud-palette-error) 18%, transparent); border-radius: 3px; }

/* ── floating "edit with AI" on a selection ─────────────────────────────────── */

.ai-float { position: fixed; z-index: 1400; transform: translate(-50%, -110%); }

/* ── meetings ───────────────────────────────────────────────────────────────── */

.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--mud-palette-lines-default); border-left: 1px solid var(--mud-palette-lines-default); }
.cal-head { padding: 6px 8px; font-size: 13px; color: var(--mud-palette-text-secondary); border-right: 1px solid var(--mud-palette-lines-default); border-bottom: 1px solid var(--mud-palette-lines-default); text-transform: capitalize; }
.cal-cell { min-height: 112px; padding: 4px 6px; border-right: 1px solid var(--mud-palette-lines-default); border-bottom: 1px solid var(--mud-palette-lines-default); }
.cal-cell.other { background: var(--mud-palette-background-gray); }
.cal-cell.today .cal-day { background: var(--mud-palette-text-primary); color: var(--mud-palette-surface); }
.cal-day { display: inline-block; min-width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 12px; font-size: 13px; }
.cal-ev { display: block; font-size: 12px; line-height: 16px; padding: 2px 6px; margin-top: 3px; border-radius: 6px; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
          background: var(--mud-palette-background-gray); border-left: 3px solid var(--mud-palette-lines-inputs); }
.cal-ev.ready { border-left-color: var(--mud-palette-tertiary); }
.cal-ev.live { border-left-color: var(--mud-palette-error); }
.cal-ev.processing { border-left-color: var(--mud-palette-info); }
.cal-ev.cancelled { text-decoration: line-through; opacity: .6; }
.cal-ev.failed { border-left-color: var(--mud-palette-error); }

.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mud-palette-error); display: inline-block; animation: pulse 1.4s infinite; }
@keyframes pulse { 0% { opacity: 1 } 50% { opacity: .3 } 100% { opacity: 1 } }

.player { background: var(--mud-palette-dark); border-radius: 10px; aspect-ratio: 16 / 9; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.player img { width: 100%; height: 100%; object-fit: contain; }
.player-time { position: absolute; left: 12px; bottom: 10px; color: white; font-size: 13px; background: rgba(0,0,0,.55); padding: 2px 8px; border-radius: 6px; }

.transcript-line { display: grid; grid-template-columns: 56px 1fr; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.transcript-line:hover { background: var(--mud-palette-background-gray); }
.transcript-line.current { background: var(--mud-palette-background-gray); box-shadow: inset 3px 0 0 var(--mud-palette-tertiary); }
.transcript-time { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--mud-palette-text-secondary); padding-top: 2px; }

.shot-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.shot-strip figure { margin: 0; flex: 0 0 180px; cursor: pointer; }
.shot-strip img { width: 180px; border-radius: 8px; border: 1px solid var(--mud-palette-lines-default); display: block; }
.shot-strip figcaption { font-size: 12px; line-height: 16px; color: var(--mud-palette-text-secondary); margin-top: 4px; }

/* ── planning board ─────────────────────────────────────────────────────────── */

.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; overflow-x: auto; align-items: start; }
.board-col { background: var(--mud-palette-background-gray); border-radius: 10px; padding: 8px; min-height: 200px; }
.board-zone { min-height: 120px; display: flex; flex-direction: column; gap: 6px; }
.board-item { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; padding: 8px 10px; font-size: 14px; line-height: 18px; cursor: grab; }

/* ── assistant ──────────────────────────────────────────────────────────────── */

.chat { display: flex; flex-direction: column; gap: 10px; }
.chat-msg { padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 20px; }
.chat-msg.user { background: var(--mud-palette-background-gray); align-self: flex-end; max-width: 88%; }
.chat-msg.assistant { border: 1px solid var(--mud-palette-lines-default); }
.chat-tool { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--mud-palette-text-secondary); }

/* ── graph ──────────────────────────────────────────────────────────────────── */

/* The canvas: pan, zoom, orbit and hover run in js/graph.js; this is the paint. A node's colour
   is its type (--c, set per node); the selection rings in the tertiary colour. */
.graph-stage { position: relative; }
.graph-canvas { display: block; width: 100%; height: 600px; background: var(--mud-palette-background-gray); border-radius: 8px; cursor: grab; touch-action: none; user-select: none; }
.graph-canvas text { fill: var(--mud-palette-text-primary); font-family: "IBM Plex Sans"; pointer-events: none; paint-order: stroke; stroke: var(--mud-palette-background-gray); stroke-width: 3px; stroke-linejoin: round; }
.graph-canvas .node-label { font-weight: 500; }
.graph-canvas .edge-label { fill: var(--mud-palette-text-secondary); font-weight: 400; }
.graph-canvas .minor { display: none; }
.graph-canvas .arrow { fill: var(--mud-palette-text-secondary); }
.graph-canvas .arrow.hot { fill: var(--mud-palette-tertiary); }

.graph-canvas .ge path, .graph-canvas line.ge { fill: none; stroke: var(--mud-palette-text-secondary); stroke-width: 1.2; }
.graph-canvas .ge.soft path, .graph-canvas line.ge.soft { stroke-dasharray: 3 3; stroke-width: 1; }
.graph-canvas .ge.hot path, .graph-canvas line.ge.hot { stroke: var(--mud-palette-tertiary); stroke-width: 2.2; }
.graph-canvas.g2d .ge { opacity: var(--edge-alpha); transition: opacity .15s; }
.graph-canvas.g2d .ge.hot { opacity: 1; }
.graph-canvas.g2d.has-sel .ge:not(.hot) { opacity: calc(var(--edge-alpha) * .35); }

.graph-canvas .gn { cursor: pointer; transition: opacity .15s; }
.graph-canvas .gn .shape, .graph-canvas circle.gn { fill: var(--c); fill-opacity: .9; stroke: var(--mud-palette-surface); stroke-width: 1.5; }
.graph-canvas .gn:hover .shape, .graph-canvas circle.gn:hover { stroke: var(--mud-palette-text-primary); stroke-width: 2; }
.graph-canvas .gn.sel .shape, .graph-canvas circle.gn.sel { stroke: var(--mud-palette-tertiary); stroke-width: 3; }
.graph-canvas .gn .halo { fill: none; stroke: var(--mud-palette-tertiary); stroke-width: 2; stroke-opacity: .45; stroke-dasharray: 4 3; }
.graph-canvas.g2d.has-sel .gn:not(.sel):not(.near) { opacity: .4; }

/* Hovering a node: it and its neighbours, their names and the edges between them; the rest steps back. */
.graph-canvas.focusing .gn:not(.hl) { opacity: .12 !important; }
.graph-canvas.focusing .ge:not(.hl) { opacity: .05 !important; }
.graph-canvas.focusing .ge.hl { opacity: 1 !important; }
.graph-canvas.focusing .ge.hl path, .graph-canvas.focusing line.ge.hl { stroke: var(--mud-palette-text-primary); }
.graph-canvas.focusing .gn.hl, .graph-canvas.focusing [data-for].hl { opacity: 1 !important; }
.graph-canvas.focusing .hl .minor, .graph-canvas.focusing .minor.hl { display: inline; }
.graph-canvas.focusing [data-for]:not(.hl) { opacity: .1 !important; }
/* Searching: the names that match stay lit and named, the rest fade (hovering still wins). */
.graph-canvas.searching .gn:not(.match) { opacity: .15 !important; }
.graph-canvas.searching [data-for]:not(.match) { opacity: .1 !important; }
.graph-canvas.searching .ge:not(.match) { opacity: .06 !important; }
.graph-canvas.searching .gn.match .shape, .graph-canvas.searching circle.gn.match { stroke: var(--mud-palette-text-primary); stroke-width: 2.5; }
.graph-canvas.searching .gn.match, .graph-canvas.searching [data-for].match { opacity: 1 !important; }
.graph-canvas.focusing.searching .gn.hl, .graph-canvas.focusing.searching .ge.hl { opacity: 1 !important; }
.graph-none { display: flex; align-items: center; justify-content: center; cursor: default; }


.graph-tools { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none; }
.graph-tools > * { pointer-events: auto; }
.graph-tools-left { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.graph-search { align-items: center; padding: 0 4px 0 8px; }
.graph-search .mud-input-control { margin: 0; width: 210px; }
.graph-tool-group { display: flex; background: var(--mud-palette-surface); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.graph-panel { position: absolute; top: 52px; right: 8px; width: 290px; max-height: calc(100% - 60px); overflow-y: auto; z-index: 3; }

.graph-full { position: fixed; inset: 0; z-index: 1300; background: var(--mud-palette-surface); padding: 12px 16px; overflow: auto; }
.graph-full .graph-canvas { height: calc(100vh - 110px); }

.graph-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.graph-legend svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.graph-legend svg * { fill: var(--mud-palette-surface); stroke: var(--mud-palette-text-secondary); stroke-width: 1.5; }
.graph-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.graph-legend-sep { width: 1px; height: 14px; background: var(--mud-palette-lines-default); }
.graph-type { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border: 1px solid var(--mud-palette-lines-default); border-radius: 999px; background: none; color: var(--mud-palette-text-primary); font: inherit; font-size: .75rem; cursor: pointer; }
.graph-type .graph-swatch { margin-right: 1px; }
.graph-type:hover { background: var(--mud-palette-action-default-hover); }
.graph-type.on { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); }
.graph-type.off { color: var(--mud-palette-text-disabled); text-decoration: line-through; }
.graph-type.off .graph-swatch { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--mud-palette-text-disabled); }

/* ── login ──────────────────────────────────────────────────────────────────── */

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--mud-palette-background); }
.brand-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--mud-palette-dark); display: inline-flex; align-items: center; justify-content: center; color: var(--mud-palette-primary); font-weight: 600; font-size: 16px; }

mark { background: var(--mud-palette-secondary); color: var(--mud-palette-secondary-text); border-radius: 3px; padding: 0 1px; }
/* A selected list item is a highlight, not an action. */
.mud-list-item.mud-selected-item { color: var(--mud-palette-text-primary) !important; background-color: var(--mud-palette-background-gray) !important; }
.mud-list-item.mud-selected-item .mud-icon-root { color: inherit !important; }
.mud-treeview-item-content.mud-treeview-item-selected { color: var(--mud-palette-text-primary) !important; background-color: var(--mud-palette-background-gray) !important; }
.mud-treeview-item-content.mud-treeview-item-selected .mud-typography { font-weight: 500; }

/* ── plain forms (sign-in, setup: static pages, no Blazor circuit) ───────────────── */
.form-label { display: block; font-size: 13px; line-height: 18px; color: var(--mud-palette-text-secondary); margin-bottom: 4px; }
.form-input { display: block; width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; border: 0; border-bottom: 1px solid var(--mud-palette-lines-inputs);
              background: var(--mud-palette-background-gray); color: var(--mud-palette-text-primary); font: inherit; font-size: 16px; outline: none; }
.form-input:hover { border-bottom-color: var(--mud-palette-primary-darken); }
.form-input:focus { border-bottom: 2px solid var(--mud-palette-primary); }
.form-button { display: block; width: 100%; height: 40px; border: 0; border-radius: 10px; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text);
               font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }
.form-button:hover { background: var(--mud-palette-primary-darken); }
.form-error { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--mud-palette-error); color: var(--mud-palette-error); font-size: 14px; line-height: 20px; }
.form-note { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--mud-palette-lines-default); font-size: 14px; line-height: 20px; }
.form-note a { color: var(--mud-palette-text-primary); }