/* ============================================================================
   MemoUpdate — operator design system
   Palette sampled from static/logo-rectangle.png: deep teal spine (#388878),
   mint rule (#78D0B8), memo cream (#F8E8C0), pencil amber (#F8B850), charcoal
   wordmark (#484848), plus the product's own default form accent (#29b973).
   Text-bearing tokens are darkened from the logo values to clear WCAG AA 4.5:1
   on every surface they sit on; the logo values stay for dots, rules and fills.
   ========================================================================== */

:root {
  /* surfaces */
  --bg:          #FCFCFB;
  --surface:     #FFFFFF;
  --raised:      #F5F8F7;
  --hover:       #EDF3F1;
  --cream:       #F8E8C0;   /* logo page — a highlight tint, never the ground */
  --cream-soft:  #FDF7E7;

  /* lines */
  --line:        #E4E9E7;
  --line-soft:   #EFF3F1;
  --line-strong: #C9D2CF;

  /* text — all verified ≥4.5:1 on --surface, --raised and --hover */
  --ink:         #23282B;
  --ink-2:       #4A5257;
  --ink-3:       #677176;

  /* brand */
  --teal:        #1F6B5C;   /* accent: links, primary button, focus */
  --teal-deep:   #16544A;
  --teal-tint:   rgba(31,107,92,.10);
  --mint:        #78D0B8;   /* decorative only: dots, rules, bars */
  --amber:       #F8B850;   /* decorative */
  --amber-ink:   #8A5A08;   /* the same idea, safe for glyphs */
  --amber-tint:  rgba(248,184,80,.16);
  --green:       #1B8F55;
  --green-tint:  rgba(27,143,85,.12);
  --red:         #B3352A;
  --red-tint:    rgba(179,53,42,.10);
  --neutral-dot: #B7C1BE;

  --r-sm: 5px;
  --r:    8px;
  --r-lg: 12px;
  --shadow:    0 1px 2px rgba(35,40,43,.06);
  --shadow-lg: 0 10px 34px rgba(35,40,43,.12);

  --font:    "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --display: "Gabarito", var(--font);
  --mono:    "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --sidebar-w: 216px;
  --topbar-h: 54px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 14px; -webkit-font-smoothing: antialiased;
}
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
::selection { background: var(--teal-tint); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 3px; }

/* Tailwind supplied this and template scripts toggle it at runtime to open and
   close panels: the captcha key fields, the notification branches, the
   newsletter panels and the add-connection dialog. It outlives Tailwind.
   `!important` is deliberate — .btn, .field-2 and several components below set
   `display`, and a bare `.hidden` loses to them on specificity. */
.hidden { display: none !important; }

/* ------------------------------------------------------------------ sidebar */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 9px; height: var(--topbar-h); padding: 0 14px; border-bottom: 1px solid var(--line-soft); }
.brand .memo { width: 22px; height: 26px; flex: none; display: block; }
.brand .wordmark { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: -.015em; color: var(--ink); }

.side-body { flex: 1; overflow-y: auto; padding: 12px 0 18px; }
.side-label { display: block; padding: 0 16px 6px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.side-rule { height: 1px; background: var(--line-soft); margin: 14px 12px; }
.nav { list-style: none; margin: 0; padding: 0 8px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 13.5px; font-weight: 500; text-decoration: none;
}
.nav a:hover { background: var(--raised); color: var(--ink); text-decoration: none; }
.nav a.active { background: var(--teal-tint); color: var(--teal-deep); font-weight: 600; }
.nav a.active svg { color: var(--teal); }
.nav svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }

/* workspace switcher */
.ws { position: relative; padding: 4px 12px 10px; }
.ws-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r);
  font: 600 13px var(--font); color: var(--ink); cursor: pointer; text-align: left;
}
.ws-btn:hover { border-color: var(--line-strong); }
.ws-btn .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-btn svg { flex: none; color: var(--ink-3); }
.ws-menu {
  position: absolute; left: 12px; right: 12px; top: calc(100% - 4px); z-index: 60; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg);
}
.ws-menu[hidden] { display: none; }
.ws-menu button, .ws-menu a {
  display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 9px;
  background: none; border: 0; border-radius: var(--r-sm); text-align: left;
  font: 500 13px var(--font); color: var(--ink-2); cursor: pointer; text-decoration: none;
}
.ws-menu button:hover, .ws-menu a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.ws-menu button[aria-current="true"] { color: var(--teal-deep); }
.ws-menu .new { margin-top: 4px; border-top: 1px solid var(--line-soft); padding-top: 8px; color: var(--teal); font-weight: 600; }

.side-foot { border-top: 1px solid var(--line-soft); padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: #388878; color: #fff; font: 600 12px var(--font);
}
.side-foot .who { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot .out { font-size: 12.5px; color: var(--ink-3); }
.side-foot .out:hover { color: var(--red); text-decoration: none; }

/* ------------------------------------------------------------------- shell */
.main { margin-left: var(--sidebar-w); min-height: 100%; }
.topbar {
  height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 22px;
  border-bottom: 1px solid var(--line); background: rgba(252,252,251,.92); backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 20;
}
.topbar .crumb { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.topbar .spacer { flex: 1; }
.hamburger { display: none; background: none; border: 0; padding: 6px; border-radius: var(--r-sm); color: var(--ink-2); cursor: pointer; }
.hamburger:hover { background: var(--hover); }
.page { padding: 22px 22px 64px; max-width: 1500px; }

/* ------------------------------------------------------- header + summary */
.head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
h1 { font-family: var(--display); font-size: 27px; font-weight: 600; letter-spacing: -.025em; margin: 0; }
.head-sub { margin: 5px 0 0; font-size: 13px; color: var(--ink-3); }
.head-sub b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.head-acts { display: flex; gap: 8px; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; gap: 7px; font: 500 13px var(--font);
  padding: 8px 13px; border-radius: var(--r); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background .13s, border-color .13s, color .13s;
}
.btn:hover { background: var(--raised); border-color: var(--ink-3); text-decoration: none; }
.btn-primary { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.btn-danger { color: var(--red); border-color: var(--line-strong); }
.btn-danger:hover { background: var(--red-tint); border-color: var(--red); }
.btn-sm { padding: 5px 10px; font-size: 12.5px; border-radius: var(--r-sm); }

/* ------------------------------------------------------------------ filters */
/* One grid, not a wrap. The search flexes; the three attribute controls hold a
   fixed track so they never reflow into an orphan row at an awkward width. */
.filterbar {
  display: grid; gap: 8px; margin-bottom: 12px;
  grid-template-columns: minmax(200px, 1fr) repeat(3, 170px) auto;
  align-items: center;
}
@media (max-width: 1180px) { .filterbar { grid-template-columns: minmax(200px,1fr) repeat(2,170px) auto; } }
@media (max-width: 900px)  { .filterbar { grid-template-columns: 1fr 1fr; } .filterbar .search { grid-column: 1 / -1; } }
@media (max-width: 560px)  { .filterbar { grid-template-columns: 1fr; } }

/* Every control on this row is one height, one radius, one border. */
.search, .control, .filterbar .btn { height: 36px; }
.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); padding: 0 11px;
}
.search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
.search svg { color: var(--ink-3); flex: none; }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 400 13.5px var(--font); color: var(--ink); }
.search input::placeholder { color: var(--ink-3); }

/* Native select chrome is the loudest source of mismatch on this row: three
   widths, three arrow styles, three heights. Drawn instead. */
select.control {
  appearance: none; -webkit-appearance: none; width: 100%;
  font: 500 13px var(--font); color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 0 30px 0 11px; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='%23677176'><path d='M5.3 7.3a1 1 0 011.4 0L10 10.6l3.3-3.3a1 1 0 111.4 1.4l-4 4a1 1 0 01-1.4 0l-4-4a1 1 0 010-1.4z'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
select.control:hover { border-color: var(--ink-3); }
select.control:focus-visible { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
select.control.is-set { border-color: var(--teal); color: var(--teal-deep); background-color: var(--teal-tint); }

.filterbar .reset { justify-self: start; }
.linkbtn { background: none; border: 0; padding: 0; font: 600 13px var(--font); color: var(--teal); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linkbtn[hidden] { display: none; }

/* ------------------------------------------------------------ table header */
/* The state filter partitions the table, so it lives on the table rather than
   floating beside controls that only narrow it. */
.tabs {
  display: flex; align-items: stretch; gap: 2px; padding: 0 8px;
  border-bottom: 1px solid var(--line);
  /* The tab underline sits on the container's own border, so the buttons hang
     1px past the box. With overflow-x:auto alone that vertical px raises a
     scrollbar inside the strip; clipping the y axis is what removes it. */
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a { text-decoration: none; }
.tabs a:hover { text-decoration: none; }
.tabs button, .tabs a {
  position: relative; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  border: 0; background: none; cursor: pointer; padding: 12px 12px 11px;
  font: 500 13px var(--font); color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button:hover, .tabs a:hover { color: var(--ink); }
.tabs button[aria-selected="true"], .tabs a[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--teal); }
.tabs button .dot, .tabs a .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--neutral-dot); flex: none; }
.tabs button.live .dot, .tabs a.live .dot { background: var(--green); }
.tabs button.idle .dot, .tabs a.idle .dot { background: var(--mint); }
.tabs button.off .dot, .tabs a.off .dot { background: var(--red); }
.tabs a.blocked .dot { background: var(--amber); }
.tabs button .n, .tabs a .n {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--ink-3); background: var(--raised); border-radius: 20px; padding: 1px 7px;
}
.tabs button[aria-selected="true"] .n, .tabs a[aria-selected="true"] .n { color: var(--teal-deep); background: var(--teal-tint); }
.tabs .spacer { flex: 1; }
.tabs .matchnote { align-self: center; padding-right: 10px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* -------------------------------------------------------------------- table */
.tablecard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.tablescroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; }
table.data thead th {
  /* .tablescroll sets overflow-x:auto, which computes overflow-y to auto and makes
     it the scrollport. A `top` of the topbar height would then offset the header
     54px DOWN inside that box, below the first row. It pins to the container. */
  position: sticky; top: 0; z-index: 2; text-align: left; white-space: nowrap;
  font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
  padding: 10px 14px; background: var(--raised); border-bottom: 1px solid var(--line);
}
table.data thead th.c { text-align: center; }
table.data thead th.sortable { cursor: pointer; user-select: none; }
table.data thead th.sortable:hover { color: var(--ink-2); }
table.data thead th.sortable::after { content: "↕"; margin-left: 5px; opacity: .35; }
table.data thead th.sort-asc, table.data thead th.sort-desc { color: var(--teal); }
table.data thead th.sort-asc::after { content: "↑"; opacity: 1; }
table.data thead th.sort-desc::after { content: "↓"; opacity: 1; }
table.data tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); font-size: 13px; vertical-align: middle; }
table.data tbody td.c { text-align: center; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr.row { cursor: pointer; transition: background .12s; }
table.data tbody tr.row:hover { background: var(--hover); }
table.data tbody tr.is-off { background: repeating-linear-gradient(-45deg, rgba(179,53,42,.03) 0 7px, transparent 7px 14px); }

.f-title { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.f-title a { color: inherit; }
.f-title a:hover { color: var(--teal); }
.f-slug { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.muted { color: var(--ink-3); }
.date { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); }

.site { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.site .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--neutral-dot); }
.site.live .dot { background: var(--green); }
.site.off .dot  { background: var(--red); }
.site.blocked .dot { background: var(--amber); }
.site a { color: var(--ink); border-bottom: 1px solid var(--line-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site a:hover { color: var(--teal); border-bottom-color: var(--teal); text-decoration: none; }

.pill { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.p-neutral { background: rgba(35,40,43,.05); color: var(--ink-3); }
.p-mint    { background: rgba(120,208,184,.22); color: #14614F; }
.p-teal    { background: var(--teal-tint); color: var(--teal-deep); }
.p-amber   { background: var(--amber-tint); color: var(--amber-ink); }
.p-red     { background: var(--red-tint); color: var(--red); }
.f-title .pill { margin-left: 7px; vertical-align: 1px; }

.entries { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--teal); padding: 2px 8px; border-radius: var(--r-sm); }
.entries:hover { background: var(--teal-tint); text-decoration: none; }
.entries.zero { color: var(--ink-3); }
.acts { white-space: nowrap; }
.card-acts { display: none; }
.rowacts { display: flex; gap: 6px; justify-content: flex-end; }
.rowmenu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; padding: 0; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--ink-3);
}
tr:hover .rowmenu { border-color: var(--line); color: var(--ink-2); }
.rowmenu:hover { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.rowmenu[aria-expanded="true"] { background: var(--teal-tint); border-color: var(--teal); color: var(--teal-deep); }

.menu {
  position: fixed; z-index: 80; min-width: 176px; padding: 5px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}
.menu[hidden] { display: none; }
.menu button, .menu a {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px;
  border: 0; background: none; border-radius: var(--r-sm); cursor: pointer; text-align: left;
  font: 500 13px var(--font); color: var(--ink-2); text-decoration: none;
}
.menu button:hover, .menu a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.menu svg { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
.menu .sep { height: 1px; background: var(--line-soft); margin: 5px 4px; }
.menu .danger { color: var(--red); }
.menu .danger svg { color: var(--red); }
.menu .danger:hover { background: var(--red-tint); color: var(--red); }

/* ------------------------------------------------------- empty + pagination */
.empty { padding: 66px 22px; text-align: center; }
.empty h3 { font-family: var(--display); font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.empty p { margin: 0 0 16px; color: var(--ink-3); font-size: 13px; }
.pagebar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 13px; }
.pagebar .note { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pager { display: flex; gap: 4px; flex-wrap: wrap; }
.pager button {
  min-width: 31px; height: 31px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center;
  font: 500 12.5px var(--font); color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.pager button:hover:not(:disabled) { background: var(--raised); border-color: var(--line-strong); color: var(--ink); }
.pager button.active { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }
.pager button:disabled { opacity: .45; cursor: default; }
.pager .gap { padding: 0 3px; color: var(--ink-3); align-self: center; font-size: 12.5px; }

.flash { padding: 10px 14px; border-radius: var(--r); font-size: 13px; margin-bottom: 14px; border: 1px solid; }
.flash.success { background: var(--green-tint); border-color: rgba(27,143,85,.3); color: #14663D; }
.flash.error   { background: var(--red-tint); border-color: rgba(179,53,42,.3); color: var(--red); }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: none; }
  .main { margin-left: 0; }
  .hamburger { display: inline-flex; }
  .page { padding: 18px 14px 56px; }
}
@media (max-width: 900px) {
  .tabs { padding: 0 4px; }
  .tabs button { padding: 11px 9px; }
}
@media (max-width: 760px) {
  table.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tablecard { background: none; border: 0; border-radius: 0; }
  table.data tbody tr {
    display: block; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 10px;
  }
  table.data tbody td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 4px 0; border: 0; }
  table.data tbody td::before {
    content: attr(data-label); font-size: 10px; font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-3); flex: none;
  }
  table.data tbody td:first-child { display: block; padding-bottom: 8px; }
  table.data tbody td:first-child::before { display: none; }
  /* A card should not print a row to say a value is absent. */
  table.data tbody td.empty-cell { display: none; }
  table.data tbody td.acts { padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--line-soft); }
  table.data tbody td.acts::before { display: none; }
  .rowacts { justify-content: flex-start; width: 100%; }
  /* A card has room, and a popover on a phone is a worse target than a button. */
  .rowmenu { display: none; }
  .card-acts { display: flex; gap: 6px; flex-wrap: wrap; }
  .site { max-width: 62%; }
}

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

/* ==========================================================================
   Components added for the form editor and company settings
   ========================================================================== */

/* page-level tabs — same grammar as the table tabs, standing on their own */
.pagetabs {
  display: flex; gap: 2px; margin: 0 0 -1px; padding: 0 4px;
  border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
.pagetabs::-webkit-scrollbar { display: none; }
.pagetabs a {
  padding: 11px 14px 10px; font: 500 13.5px var(--font); color: var(--ink-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; white-space: nowrap;
}
.pagetabs a:hover { color: var(--ink); text-decoration: none; }
.pagetabs a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--teal); }

/* section card */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 16px; }
.card + .card { margin-top: 0; }
.card-head { padding: 16px 18px 0; }
.card-head h2 { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.card-head p { margin: 5px 0 0; font-size: 13px; color: var(--ink-3); max-width: 68ch; }
.card-body { padding: 16px 18px 18px; }
.card-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 12px 18px; border-top: 1px solid var(--line-soft); background: var(--raised);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.card-foot .note { margin-right: auto; font-size: 12.5px; color: var(--ink-3); }

/* fields */
.field { margin-bottom: 15px; }
.field:last-child { margin-bottom: 0; }
.field > label, .field-label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.input, textarea.input, select.input {
  width: 100%; font: 400 13.5px var(--font); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r); padding: 9px 11px;
}
select.input { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='%23677176'><path d='M5.3 7.3a1 1 0 011.4 0L10 10.6l3.3-3.3a1 1 0 111.4 1.4l-4 4a1 1 0 01-1.4 0l-4-4a1 1 0 010-1.4z'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; }
textarea.input { resize: vertical; min-height: 84px; line-height: 1.5; }
.input.mono { font-family: var(--mono); font-size: 12.5px; }
.input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
.input::placeholder { color: var(--ink-3); }
.help { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.help a { color: var(--teal); }
.field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .field-2 { grid-template-columns: 1fr; } }
.inline-input { display: flex; align-items: center; gap: 8px; }
.inline-input .fixed { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }

.check { display: flex; align-items: flex-start; gap: 9px; padding: 9px 0; cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--teal); flex: none; }
.check .t { font-size: 13.5px; font-weight: 500; }
.check .d { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 400; margin-top: 2px; }

/* radio cards (embed theme, brand base) */
.radiocards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 700px) { .radiocards { grid-template-columns: 1fr; } }
.radiocards label {
  display: block; padding: 11px 12px; border: 1px solid var(--line-strong);
  border-radius: var(--r); cursor: pointer; background: var(--surface);
}
.radiocards label:hover { border-color: var(--ink-3); }
.radiocards input { position: absolute; opacity: 0; pointer-events: none; }
.radiocards input:checked + .rc { color: var(--teal-deep); }
.radiocards label:has(input:checked) { border-color: var(--teal); background: var(--teal-tint); }
.radiocards label:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }
.rc-swatch { display: block; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--line); margin-bottom: 9px; }
.rc-name { display: block; font-size: 13.5px; font-weight: 600; }
.rc-desc { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }

/* code block */
.codeblock {
  position: relative; background: #17201E; color: #D8E6E1; border-radius: var(--r);
  padding: 14px 92px 14px 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  overflow-x: auto; white-space: pre;
}
.codeblock .copy {
  position: absolute; top: 9px; right: 9px; padding: 5px 11px; cursor: pointer;
  font: 600 12px var(--font); color: #D8E6E1; background: rgba(216,230,225,.1);
  border: 1px solid rgba(216,230,225,.25); border-radius: var(--r-sm);
}
.codeblock .copy:hover { background: rgba(216,230,225,.2); }

/* Connect page: the URL's Copy button has to be a sibling of .codeblock
   rather than its child -- exactly the reasoning in form_edit.html's
   .embedwrap -- so the button's own label never ends up in the clipboard
   next to the URL. Same visual treatment as .codeblock .copy, duplicated
   under this wrapper rather than shared, since the two aren't nested the
   same way. */
.mcp-urlwrap { position: relative; margin: 0; }
.mcp-urlwrap .copy {
  position: absolute; top: 9px; right: 9px; padding: 5px 11px; cursor: pointer;
  font: 600 12px var(--font); color: #D8E6E1; background: rgba(216,230,225,.1);
  border: 1px solid rgba(216,230,225,.25); border-radius: var(--r-sm);
}
.mcp-urlwrap .copy:hover { background: rgba(216,230,225,.2); }
.mcp-steps { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.7; }
.mcp-steps li { margin-bottom: 4px; }

/* key/value readout */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 22px; }
.kv dt { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.kv dd { margin: 0; font-size: 13.5px; }
.kv dd.mono { font-family: var(--mono); font-size: 12.5px; }

/* sticky save bar */
.savebar {
  position: sticky; bottom: 0; z-index: 40; margin: 18px -22px -64px; padding: 12px 22px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border-top: 1px solid var(--line-strong); box-shadow: 0 -6px 22px rgba(35,40,43,.07);
}
.savebar .msg { flex: 1; min-width: 200px; font-size: 13px; color: var(--ink-2); }
.savebar .msg b { color: var(--ink); }
.savebar[hidden] { display: none; }

/* ------------------------------------------------------------ form builder */
.builder { display: grid; grid-template-columns: 208px minmax(0,1fr) 268px; gap: 14px; align-items: start; }
@media (max-width: 1180px) { .builder { grid-template-columns: 180px minmax(0,1fr); } .builder .props { grid-column: 1 / -1; } }
@media (max-width: 820px)  { .builder { grid-template-columns: 1fr; } }
.rail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; position: sticky; top: 70px; }
.rail h3 { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 9px; }
.palette { display: grid; gap: 4px; }
.palette button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  font: 500 13px var(--font); color: var(--ink-2); text-align: left;
}
.palette button:hover { background: var(--hover); border-color: var(--line); color: var(--ink); }
.palette .ic {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 4px;
  background: var(--raised); border: 1px solid var(--line); color: var(--ink-3);
}
.palette .ic svg { width: 13px; height: 13px; }
.rail .tip { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--ink-3); line-height: 1.5; }

.canvas { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px 24px; }
.canvas-title { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.canvas-legend { margin: 4px 0 18px; font-size: 12.5px; color: var(--ink-3); }
.canvas-legend i { color: var(--red); font-style: normal; }
.cfield {
  position: relative; border: 1px solid transparent; border-radius: var(--r); padding: 10px 12px 12px;
  margin-bottom: 6px; cursor: pointer;
}
.cfield:hover { border-color: var(--line); background: var(--raised); }
.cfield.sel { border-color: var(--teal); background: var(--teal-tint); }
.cfield .grip { position: absolute; left: -2px; top: 13px; color: var(--ink-3); opacity: 0; cursor: grab; }
.cfield:hover .grip, .cfield.sel .grip { opacity: 1; }
.cfield label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.cfield label i { color: var(--red); font-style: normal; margin-left: 2px; }
.cfield .fake {
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface);
  padding: 9px 11px; font-size: 13px; color: var(--ink-3);
}
.cfield .fake.tall { min-height: 62px; }
.canvas-submit { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; gap: 12px; }
.canvas-submit .fakebtn { padding: 9px 18px; border-radius: var(--r); font: 600 13.5px var(--font); color: #fff; }
.canvas-submit .note { font-size: 12px; color: var(--ink-3); font-style: italic; }
.props { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; position: sticky; top: 70px; }
.props h3 { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 11px; }
.props .none { font-size: 13px; color: var(--ink-3); line-height: 1.5; }

/* --------------------------------------------------------- settings extras */
.settings-layout { display: grid; grid-template-columns: 196px minmax(0,1fr); gap: 22px; align-items: start; }
@media (max-width: 980px) { .settings-layout { grid-template-columns: 1fr; } .subnav { position: static; } }
.subnav { position: sticky; top: 70px; }
.subnav h3 { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.subnav h3 + h3, .subnav a + h3 { margin-top: 18px; }
.subnav a {
  display: block; padding: 6px 10px; margin: 0 0 1px -10px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; color: var(--ink-2); text-decoration: none;
}
.subnav a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.subnav a.active { background: var(--teal-tint); color: var(--teal-deep); font-weight: 600; }

.rowitem {
  display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.rowitem:last-child { border-bottom: 0; }
.rowitem .who { flex: 1; min-width: 0; }
.rowitem .nm { display: block; font-size: 13.5px; font-weight: 600; }
.rowitem .sub { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.rowitem select.input { width: auto; min-width: 118px; padding: 6px 30px 6px 10px; font-size: 12.5px; }

.emptybox {
  padding: 26px 20px; text-align: center; border: 1px dashed var(--line-strong);
  border-radius: var(--r); background: var(--raised);
}
.emptybox p { margin: 0 0 12px; font-size: 13px; color: var(--ink-3); }

/* --------------------------------- company settings: anchored sections (Task 8)
   The topbar is sticky, so an anchored section would land underneath it. */
.settings-layout section[id] { scroll-margin-top: 70px; }

/* ------------------------------------- company settings: connections (Task 9)
   Consolidated here in Task 13; these were page-local while
   templates/company_settings.html could not touch this file. */

/* An identifier -- a grant id, a credential prefix, a console path. It must
   not break mid-token: a half-read prefix cannot be matched against the one
   Connect shows. */
.conn-id { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.conn-alert { color: var(--red); font-weight: 600; }

/* The connection popover carries two fields of its own, not just menu items,
   so it is wider than the dashboard's row menu. */
.conn-menu { min-width: 260px; max-width: min(320px, calc(100vw - 16px)); padding: 8px; }
.conn-menu .field { margin: 2px 5px 8px; }
.conn-menu .check { padding: 4px 5px; }
.conn-menu form + form { margin-top: 2px; }
.conn-row { align-items: flex-start; }
.conn-row .pill, .conn-row .rowmenu { margin-top: 2px; }
/* .rowmenu is hidden below 760px because a dashboard row also renders
   .card-acts as plain buttons there. A connection row has no such duplicate --
   the popover is the only place these five controls exist -- so it stays at
   every width. */
@media (max-width: 760px) { .conn-row .rowmenu { display: inline-flex; } }

.conn-add { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.conn-add > .btn { margin-top: 4px; }
/* A button that reads as a link: it reveals the typed fields, it does not
   submit anything. */
.linkbtn {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--teal-deep); text-decoration: underline;
}
/* Three slugs that belong on one line, the way .field-2 pairs two. */
.field-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 700px) { .field-3 { grid-template-columns: 1fr; } }

/* The add-connection dialog. */
#connect-setup-dialog {
  width: min(520px, calc(100vw - 32px)); padding: 18px;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink);
}
#connect-setup-dialog::backdrop { background: rgba(35, 40, 43, .42); }
#connect-setup-dialog h3 {
  font-family: var(--display); font-size: 17px; font-weight: 600;
  letter-spacing: -.015em; margin: 0 0 10px;
}
#connect-setup-dialog .picklist { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 4px; }
/* connect-setup.js builds these rows; they were full-width, left-aligned
   Tailwind utilities until Task 13 removed Tailwind. */
#connect-setup-dialog .picklist .btn { width: 100%; justify-content: flex-start; text-align: left; }
#connect-setup-dialog .picklist .btn.is-muted { opacity: .5; }
#connect-setup-dialog .dialog-acts { display: flex; align-items: center; gap: 8px; margin-top: 16px; }

/* An inline advisory panel: something is wrong and here is what to do about it.
   Lived page-locally in form_edit.html and company_settings.html until both
   needed it; promoted here so the two cannot drift apart. */
.notebox {
  padding: 11px 13px; margin-bottom: 12px; border-radius: var(--r);
  border: 1px solid var(--amber); background: var(--amber-tint);
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
}
.notebox strong { color: var(--ink); }
.notebox-title {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--amber-ink); margin-bottom: 4px;
}
.notebox-red { border-color: rgba(179,53,42,.4); background: var(--red-tint); }
.notebox-red .notebox-title { color: var(--red); }

/* A pill whose value comes from the workspace default rather than from the row
   itself. Dotted rather than a different colour: the value is the same fact,
   only its source differs, and a second colour would read as a second state. */
.pill.is-inherited { border: 1px dotted currentColor; background: transparent; }