:root {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: #1f2937;
  background: #f8f7fa;
}

* { box-sizing: border-box; }

body {
  margin: 0;
}

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: #ffffff;
  color: #1f2937;
  padding: 20px;
  border-right: 1px solid #ece8f4;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar h1 {
  margin: 0 0 16px;
  font-size: 18px;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.sidebar a {
  color: #475569;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
}

.sidebar a.active,
.sidebar a:hover {
  background: #ede9fe;
  color: #4c1d95;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #ece8f4;
}

.sidebar-footer-error {
  color: #dc2626;
  font-size: 13px;
  margin-bottom: 8px;
}

.logout-button {
  width: 100%;
  background: #ffffff;
  color: #475569;
  border: 1px solid #ece8f4;
}

.logout-button:hover:not(:disabled) {
  background: #ede9fe;
  color: #4c1d95;
}

.logout-button:disabled {
  background: #f3f4f6;
  color: #9ca3af;
}

.content {
  padding: 24px;
  background: #f8f7fa;
}

.page.hidden { display: none; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

button {
  border: 0;
  background: #7368ef;
  color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

input,
select,
textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
}

/* An empty disabled field is otherwise indistinguishable from an editable one:
   the browser default only dims the text, and a field that is disabled because
   it does not apply has none. Matches the dimming `tr.is-disabled-row` uses. */
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  background: #f1f5f9;
  opacity: 0.55;
}

.tld-length-input {
  width: 64px;
  min-width: 64px;
  padding-left: 8px;
  padding-right: 8px;
}

.search-rank-input {
  width: 52px;
  min-width: 52px;
  padding-left: 6px;
  padding-right: 6px;
}

.search-mode-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.search-mode-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.search-mode-option input[type="radio"] {
  width: auto;
  margin: 0;
}

.search-mode-rank-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 22px;
}

.tld-charset-input {
  min-width: 220px;
}

button:disabled {
  cursor: not-allowed;
  background: #94a3b8;
}

.opensearch-debug-layout {
  display: grid;
  gap: 16px;
}

.opensearch-search-form {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(260px, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.opensearch-search-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

.opensearch-search-form button {
  min-height: 37px;
}

.opensearch-result {
  min-height: 320px;
  max-height: 70vh;
  margin: 16px 0 0;
  overflow: auto;
  padding: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #111827;
  color: #e5e7eb;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: pre;
}

@media (max-width: 900px) {
  .opensearch-search-form {
    grid-template-columns: 1fr;
  }
}

.secondary-button {
  background: #475569;
}

.nats-connection-line,
.nats-messages-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nats-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #94a3b8;
}

.nats-status-dot.connecting { background: #f59e0b; }
.nats-status-dot.connected { background: #16a34a; }
.nats-status-dot.error { background: #dc2626; }

.nats-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.nats-publish-panel form,
.nats-publish-panel form > label {
  display: grid;
  gap: 8px;
}

.nats-publish-panel form {
  gap: 14px;
}

.nats-mode-control {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

.nats-mode-control label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nats-mode-control input { width: auto; }
.nats-messages-heading { justify-content: space-between; }
.nats-messages-heading h3 { margin-right: 12px; }

.nats-table-wrap {
  max-height: calc(100vh - 190px);
  overflow: auto;
}

.nats-table-wrap table { margin-top: 0; }
.nats-table-wrap th { position: sticky; top: 0; background: #fff; z-index: 1; }
.nats-table-wrap td:nth-child(3) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.nats-table-wrap pre {
  max-width: 540px;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.nats-mode-badge {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
}

.nats-mode-badge.jetstream {
  background: #dcfce7;
  color: #166534;
}

@media (max-width: 1000px) {
  .nats-layout { grid-template-columns: 1fr; }
  .nats-table-wrap { max-height: 60vh; }
}

@media (max-width: 700px) {
  .layout { display: block; }

  .sidebar {
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid #ece8f4;
    position: static;
    height: auto;
  }

  .sidebar h1 { margin-bottom: 10px; }

  .sidebar nav {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .sidebar a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .sidebar-footer { padding-top: 10px; }

  .logout-button { width: auto; }

  .content {
    min-width: 0;
    padding: 12px;
  }

  .page-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .nats-layout,
  .nats-layout .panel {
    min-width: 0;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  background: #fff;
}

th, td {
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  padding: 10px;
}

tr:hover td { background: #f8fafc; }

tr.is-disabled-row td {
  color: #94a3b8;
  background: #f8fafc;
}

tr.is-disabled-row:hover td {
  background: #f8fafc;
}

tr.is-disabled-row input,
tr.is-disabled-row select,
tr.is-disabled-row textarea,
tr.is-disabled-row button {
  opacity: 0.55;
}

.order-cell {
  font-weight: 600;
}

.move-group {
  display: flex;
  gap: 6px;
}

.move-btn {
  background: #7368ef;
  padding: 4px 8px;
}

.row-btn {
  background: #7368ef;
  padding: 4px 8px;
}

.panel-title-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.panel-title-actions h3 {
  margin: 0;
}

.icon-btn {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #4338ca;
  cursor: pointer;
}

.icon-btn:hover {
  background: #eef2ff;
}

.icon-btn.danger {
  color: #b91c1c;
}

.icon-btn.danger:hover {
  background: #fee2e2;
}

.icon-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Promotion column widths.
   Two bounds per column, because the two tables fail in opposite directions.
   The TLD table has twelve columns and no slack, so its columns sit at
   whatever minimum their contents demand — and `#promotion-body input` below
   pins every input at 90px, which with 10px of cell padding either side is
   exactly the 110px the currency and amount columns were showing for two or
   three characters. There a `width` is only a hint the browser weighs against
   content; the `min-width` is what it must honour. The Kumo table has seven
   columns in the same panel and plenty of slack, so it needs the opposite: a
   `width` to stop a column sprawling to an even share of the row.
   Column width lands at roughly the control minimum plus 20px of padding. */
#promotion-body td:nth-child(4) select { min-width: 126px; }  /* Mode, fits "voucher_code" */
#promotion-body td:nth-child(6) input  { min-width: 52px; }   /* Discount % */
#promotion-body td:nth-child(7) input  { min-width: 74px; }   /* Fixed EUR */
#promotion-body td:nth-child(8) input  { min-width: 52px; }   /* Curr */

.kumo-promotions-table th:nth-child(2),
.kumo-promotions-table td:nth-child(2) { width: 146px; }
.kumo-promotions-table th:nth-child(4),
.kumo-promotions-table td:nth-child(4) { width: 128px; }
.kumo-promotions-table th:nth-child(5),
.kumo-promotions-table td:nth-child(5) { width: 80px; }
.kumo-promotions-table td:nth-child(2) select { min-width: 126px; }  /* Mode */
.kumo-promotions-table td:nth-child(5) input  { min-width: 52px; }   /* Currency */

.sale-promotions-scroll tr.promotion-conflict td {
  background: #fee2e2;
}

.sale-promotions-scroll tr.promotion-conflict:hover td {
  background: #fecaca;
}

.tld-category-cell {
  width: 100%;
  text-align: left;
  white-space: normal;
}

.price-strike {
  text-decoration: line-through;
  color: #64748b;
  margin-right: 6px;
}

.promo-price {
  color: #166534;
  font-weight: 600;
}

.link-btn {
  border: 0;
  background: transparent;
  color: #4338ca;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.hint {
  color: #475569;
  margin-bottom: 12px;
}

.message {
  margin: 10px 0;
  padding: 10px;
  border-radius: 8px;
}

.message.success {
  background: #dcfce7;
  color: #166534;
}

.message.error {
  background: #fee2e2;
  color: #991b1b;
}

.hidden { display: none; }

.survey-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.survey-status.draft { background: #fef9c3; color: #854d0e; }
.survey-status.published { background: #dcfce7; color: #166534; }
.survey-status.archived { background: #e5e7eb; color: #4b5563; }

.split {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  margin-top: 12px;
}

.panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
}

.panel h3 {
  margin-top: 0;
}

.stack-form {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.snippet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.snippet-item {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
}

.snippet-item.active {
  border-color: #2563eb;
  background: #eff6ff;
}

.snippet-name {
  font-weight: 600;
}

.snippet-code {
  font-size: 12px;
  color: #64748b;
}

#snippet-record-table td input {
  min-width: 90px;
}

#snippet-record-table tr.new-row td {
  background: #f8fafc;
}

.muted {
  color: #64748b;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.history-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  margin: 8px 0 12px;
}

.history-toolbar .field {
  min-width: 160px;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
}

.history-grid h4 {
  margin: 0 0 6px;
  font-size: 13px;
  color: #334155;
}

.d3-chart {
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.field {
  display: grid;
  gap: 4px;
}

.field > span {
  font-size: 12px;
  color: #64748b;
  text-transform: capitalize;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 40;
}

.modal.hidden {
  display: none;
}

.modal-card {
  width: min(980px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 16px;
}

.modal-card-lg {
  width: min(1240px, 100%);
}

.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn-primary {
  background: #7368ef;
}

.search-results {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  max-height: 200px;
  overflow-y: auto;
}

.search-results li {
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
}

.search-results li:last-child {
  border-bottom: none;
}

.search-results li:hover:not(.muted) {
  background: #ede9fe;
}

#tld-history-modal .history-grid {
  margin-top: 12px;
}

#tld-history-modal .d3-chart {
  min-height: 220px;
}

.search-results li.muted {
  cursor: default;
  color: #64748b;
}

.template-grid {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.template-group h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.template-languages-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 12px;
}

.template-language {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px;
  background: #f8fafc;
}

.template-language.missing {
  color: #64748b;
  display: grid;
  place-items: center;
}

.template-language-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.template-language-header h4 {
  margin: 0;
}

.email-markdown-doc details {
  margin-top: 8px;
}

.email-markdown-doc summary {
  cursor: pointer;
  font-weight: 600;
}

.email-markdown-doc ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.email-markdown-doc pre {
  margin: 8px 0 0;
  padding: 10px;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 8px;
  overflow-x: auto;
}

.email-markdown-doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.45;
}

.pricing-admin-grid {
  grid-template-columns: 1fr 1.2fr;
}

.panel-footer-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.tld-overview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.tld-overview-toolbar h3 {
  margin: 0;
}

.tld-overview-note {
  color: #475569;
  font-size: 12px;
}

.tld-overview-toolbar input {
  max-width: 220px;
}

.toolbar-link {
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.toolbar-link:hover {
  text-decoration: underline;
}

.sale-promotions-panel {
  display: flex;
  flex-direction: column;
}

.sale-promotions-scroll {
  max-height: 420px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.sale-promotions-scroll table {
  margin: 0;
}

.sale-promotions-scroll thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 1;
}

.table-scroll {
  overflow: auto;
}

.customer-events-table-scroll {
  max-height: 70vh;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.customer-prices-table-scroll {
  max-height: 60vh;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.customer-prices-table-scroll table {
  margin: 0;
}

.customer-prices-table-scroll thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 1;
}

.customer-events-table-scroll table {
  margin: 0;
}

.customer-events-table-scroll thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 1;
}

#tld-overview-scroll {
  max-height: 420px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

#tld-overview-scroll table {
  margin: 0;
}

#tld-overview-scroll thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 1;
}

.checkbox-field {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.checkbox-field input[type="checkbox"] {
  width: auto;
}

#tier-class-body input,
#promotion-body input,
#customer-prices-body input,
#customer-prices-body select {
  min-width: 90px;
}

.markup-input-trigger {
  position: relative;
}

.markup-input-trigger input[disabled] {
  background: #f8fafc;
  color: #0f172a;
  cursor: pointer;
}

.markup-input-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
}

@media (max-width: 980px) {
  .pricing-admin-grid {
    grid-template-columns: 1fr;
  }
  .template-languages-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Domain action runs: the list, and the d3 state graph of a selected run.

   The node/edge colours are the vocabulary of the graph definition itself
   (public/data/reggae-state-graph.json), so they are named after its `kind`
   values rather than after what they look like. Two of them carry meaning an
   operator must not have to look up: `money` marks a state after which a
   marketplace purchase cannot be undone, and `is-current` marks the state the
   run is actually sitting in.
   --------------------------------------------------------------------------- */

.compact-table th,
.compact-table td {
  padding: 6px 8px;
  font-size: 13px;
}

.compact-table td.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

tr.run-row-open td { background: #fdfcff; }
tr.run-row-selected td { background: #eef2ff; }

.run-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.run-badge-pending { background: #e0e7ff; color: #3730a3; }
.run-badge-running { background: #cffafe; color: #155e75; }
.run-badge-succeeded { background: #dcfce7; color: #166534; }
.run-badge-failed { background: #fee2e2; color: #991b1b; }
.run-badge-warn { background: #fef3c7; color: #92400e; }
.run-badge-blocked { background: #ede9fe; color: #5b21b6; }

.graph-canvas {
  margin-top: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  overflow: auto;
  /* Tall: the graph is the reason this modal exists, and the register process
     needs the room. The trace table below it is a scroll away. */
  max-height: 74vh;
  min-height: 340px;
  resize: vertical;
}

.graph-canvas svg { display: block; }

/* The run modal is the widest thing in the panel: a 14-column process graph
   next to a trace table. `modal-card-lg` alone left it in a 900px column. */
#action-runs-modal .modal-card { width: min(1680px, 96vw); }

.graph-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: #4b5563;
}

.graph-legend span { display: inline-flex; align-items: center; gap: 4px; }
.graph-legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* Nodes. Fill by kind; the stroke is what state overlay uses. */
.graph-node rect {
  stroke: #cbd5e1;
  stroke-width: 1.5;
  rx: 6;
  ry: 6;
}

/* Sized to be read at the fitted zoom, not only at 1:1. */
.graph-node text { font-size: 15px; font-weight: 600; fill: #1f2937; pointer-events: none; }
.graph-node .node-sub { font-size: 12px; font-weight: 400; fill: #6b7280; }

.graph-node.kind-work rect { fill: #f1f5f9; }
.graph-node.kind-decision rect { fill: #fef9c3; }
.graph-node.kind-wait rect { fill: #e0f2fe; }
.graph-node.kind-report rect { fill: #fae8ff; }
.graph-node.kind-terminal rect { fill: #f8fafc; stroke-dasharray: 4 3; }

.graph-node.is-money rect { stroke: #b45309; stroke-width: 2.5; }

/* The run's own position. Thick outline rather than a different fill, so the
   node keeps saying what kind of state it is. */
.graph-node.is-current rect { stroke: #4338ca; stroke-width: 3.5; }
.graph-node.is-current-failed rect { stroke: #b91c1c; stroke-width: 3.5; }
.graph-node.is-visited rect { stroke: #0f766e; stroke-width: 2.5; }
.graph-node.is-dimmed { opacity: 0.45; }

/* Durations sit on top of the edges they belong to, so they need to stay
   readable where a line or a box runs underneath. `paint-order: stroke` draws
   the white halo first and the glyphs over it. */
.graph-edge-label {
  font-size: 12px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}

.graph-legend-sep {
  padding-left: 6px;
  border-left: 1px solid #d1d5db;
  color: #6b7280;
}

.graph-node-marker {
  font-size: 13px;
  font-weight: 700;
  fill: #b91c1c;
}

/* Edges by kind. `stay` is a self-loop (a deliberate wait), `fail` is the only
   thing that reaches settle_failed -- a thrown error holds the state instead. */
.graph-edge { fill: none; stroke-width: 2; }
.graph-edge.kind-advance { stroke: #94a3b8; }
.graph-edge.kind-stay { stroke: #0284c7; stroke-dasharray: 3 3; }
.graph-edge.kind-fail { stroke: #dc2626; stroke-dasharray: 5 3; }
.graph-edge.kind-complete { stroke: #16a34a; }
.graph-edge.is-taken { stroke-width: 4; stroke-opacity: 1; }
.graph-edge.is-dimmed { stroke-opacity: 0.3; }

.graph-tooltip {
  position: fixed;
  z-index: 50;
  max-width: 380px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #111827;
  color: #f9fafb;
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
}

.graph-tooltip strong { color: #fff; }
.graph-tooltip ul { margin: 4px 0 0; padding-left: 16px; }