/* =========================================================
   components.css

   The design system's components where bridge.css and concept.css do not already
   draw them. Scoped like those two (html[data-ui="next"]) so it competes on equal
   terms with them until A10 strips the prefix from all three at once, and loaded
   after them so a component defined here wins a tie.
   ========================================================= */

/* ---------- Button: the variants and sizes concept.css does not have ---------- */
/* Amber with night text: a call to action on night or marketing surfaces only.
   White on amber fails contrast (1.9:1); night on amber is 11.6:1. */
html[data-ui="next"] .btn.btn-accent{
  background:var(--amber); color:var(--on-amber); border-color:var(--amber);
}
html[data-ui="next"] .btn.btn-accent:hover{ background:var(--amber-hover); border-color:var(--amber-hover); }

/* 56px: a gloved hand on a scanner's screen. */
html[data-ui="next"] .btn.btn-touch{ min-height:var(--touch-min); padding:0 20px; font-size:15px; }

/* Icon only: square, the glyph centred. */
html[data-ui="next"] .btn.btn-icon{ padding:0; width:32px; justify-content:center; }
html[data-ui="next"] .btn.btn-icon.btn-sm{ width:28px; }
html[data-ui="next"] .btn.btn-icon.btn-lg{ width:38px; }
html[data-ui="next"] .btn.btn-icon.btn-touch{ width:var(--touch-min); }

/* ---------- Segmented, small ---------- */
html[data-ui="next"] .seg.seg-sm button{ padding:4px 10px; font-size:12.5px; }

/* ---------- Pager: the gap between page runs ---------- */
html[data-ui="next"] .pager .pager-gap{ align-self:center; padding:0 4px; color:var(--ink-faint); }

/* ---------- Progress: a bar coloured by meaning ---------- */
html[data-ui="next"] .progress-bar.is-good{ background:var(--good); }
html[data-ui="next"] .progress-bar.is-warn{ background:var(--warn); }
html[data-ui="next"] .progress-bar.is-crit{ background:var(--crit); }

/* ---------- Accordion, on <details> ---------- */
html[data-ui="next"] .pv-acc{ border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-raised); overflow:hidden; }
html[data-ui="next"] .pv-acc-item + .pv-acc-item{ border-top:1px solid var(--line); }
html[data-ui="next"] .pv-acc-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; cursor:pointer; list-style:none;
  font-weight:600; color:var(--ink);
}
html[data-ui="next"] .pv-acc-head::-webkit-details-marker{ display:none; }
html[data-ui="next"] .pv-acc-head:hover{ background:color-mix(in srgb, var(--ink) 4%, transparent); }
html[data-ui="next"] .pv-acc-title{ flex:1; min-width:0; }
html[data-ui="next"] .pv-acc-chev{ color:var(--ink-muted); transition:rotate .18s var(--ease); }
html[data-ui="next"] .pv-acc-item[open] > .pv-acc-head .pv-acc-chev{ rotate:180deg; }
html[data-ui="next"] .pv-acc-body{ padding:4px 16px 16px; color:var(--ink-muted); }

/* ---------- Toasts ---------- */
html[data-ui="next"] .pv-toasts{
  position:fixed; left:50%; bottom:24px; translate:-50% 0;
  z-index:var(--z-toast);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none;
}
html[data-ui="next"] .pv-toast{
  pointer-events:auto;
  display:flex; align-items:center; gap:12px;
  min-width:280px; max-width:min(520px, calc(100vw - 32px));
  padding:10px 10px 10px 14px;
  background:var(--night); color:var(--on-night);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-pop);
  font-size:13.5px;
  animation:pv-toast-in .22s var(--ease) both;
}
/* The tone is a 3px edge, so the text stays on night and keeps its contrast. */
html[data-ui="next"] .pv-toast.is-good{ box-shadow:inset 3px 0 0 var(--good-night), var(--shadow-pop); }
html[data-ui="next"] .pv-toast.is-warn{ box-shadow:inset 3px 0 0 var(--warn-night), var(--shadow-pop); }
html[data-ui="next"] .pv-toast.is-crit{ box-shadow:inset 3px 0 0 var(--crit-night), var(--shadow-pop); }
html[data-ui="next"] .pv-toast.is-info{ box-shadow:inset 3px 0 0 var(--signal-night), var(--shadow-pop); }
html[data-ui="next"] .pv-toast-text{ flex:1; min-width:0; }
html[data-ui="next"] .pv-toast-action{
  background:none; border:0; padding:4px 6px; border-radius:var(--radius-xs);
  color:var(--amber); font-weight:600; cursor:pointer;
}
html[data-ui="next"] .pv-toast-action:hover{ background:var(--night-raised); }
html[data-ui="next"] .pv-toast-x{
  background:none; border:0; padding:4px; border-radius:var(--radius-xs);
  color:var(--on-night-muted); cursor:pointer; display:inline-flex;
}
html[data-ui="next"] .pv-toast-x:hover{ color:var(--on-night); background:var(--night-raised); }
@keyframes pv-toast-in{ from{ opacity:0; translate:0 8px; } to{ opacity:1; translate:0 0; } }
@media (prefers-reduced-motion:reduce){
  html[data-ui="next"] .pv-toast{ animation:none; }
  html[data-ui="next"] .pv-acc-chev{ transition:none; }
}

/* ---------- Logo ---------- */
/* The lockup and the mark never squeeze in a flex row; their width follows the height. */
html[data-ui="next"] .pv-logo,
html[data-ui="next"] .pv-mark{ flex-shrink:0; width:auto; }

/* ---------- Radio-button groups (btn-check + label.btn) ---------- */
/* The checked option reads as Segmented's: a teal tint, teal text. Bootstrap drew it
   from variables the design system's buttons never set, so it only got an outline. */
html[data-ui="next"] .btn-check:checked + .btn,
html[data-ui="next"] .btn-check:active + .btn{
  background:var(--signal-soft); color:var(--signal);
  border-color:color-mix(in srgb, var(--signal) 30%, transparent);
  font-weight:600;
}
html[data-ui="next"] .btn-check:focus-visible + .btn{ outline:2px solid var(--focus); outline-offset:2px; }

/* =========================================================
   A5: the existing components in the approved PrinterVision look
   (brand/design-reference/components: StatusChip, Tabs, DeviceTable,
   Button). Same markup and classes; only the paint changes.
   ========================================================= */

/* Chips: soft-filled pills, no outline. */
html[data-ui="next"] .chip{
  border-radius:var(--radius-full);
  border-color:transparent;
  background:var(--surface-sunken);
  color:var(--ink-muted);
  font-weight:600;
  padding:2px 9px;
}
html[data-ui="next"] .chip.chip-on{ background:var(--signal-soft); color:var(--signal); border-color:transparent; }
html[data-ui="next"] .chip.chip-off{ background:var(--surface-sunken); color:var(--ink-muted); }
html[data-ui="next"] .chip.chip-warn{ background:var(--warn-soft); color:var(--warn); border-color:transparent; }
html[data-ui="next"] .chip.chip-crit,
html[data-ui="next"] .chip.chip-alert{ background:var(--crit-soft); color:var(--crit); border-color:transparent; }

/* Tabs: the current tab is ink, underlined in ink. Teal is for links and data. */
html[data-ui="next"] .tabs button.on{ color:var(--ink); border-bottom-color:var(--ink); font-weight:600; }

/* Table heads: small uppercase labels, as the reference's device table. */
html[data-ui="next"] table.tbl th{
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-muted);
}
html[data-ui="next"] table.tbl tbody tr:hover > td{ background:var(--surface); }

/* Primary buttons: ink with a hairline of light along the top edge. */
html[data-ui="next"] .btn.btn-blue{ box-shadow:inset 0 1px 0 color-mix(in srgb, var(--on-inverse) 12%, transparent), var(--shadow-1); }
html[data-ui="next"] .btn.btn-accent{ box-shadow:inset 0 1px 0 color-mix(in srgb, var(--on-inverse) 35%, transparent), var(--shadow-1); }

/* =========================================================
   D1: status chips, the instrument strip and the fleet table
   (brand/design-reference/components: StatusChip, LocationLabel,
   DeviceTable). The readouts are PrinterVision's own: no cards,
   no delta pills, a drawing per figure.
   ========================================================= */

/* ---------- Status: one shape for every state ---------- */
/* StatusChip, StatusDot and the identity history's .dot-* rows share it. */
html[data-ui="next"] .pv-status,
html[data-ui="next"] .dot.dot-good,
html[data-ui="next"] .dot.dot-warn,
html[data-ui="next"] .dot.dot-crit,
html[data-ui="next"] .dot.dot-idle,
html[data-ui="next"] .dot.dot-info{
  display:inline-flex; align-items:center; gap:7px;
  height:24px; padding:0 10px 0 8px;
  border-radius:var(--radius-full);
  font-size:12.5px; line-height:1; font-weight:600; white-space:nowrap;
  background:var(--surface-sunken); color:var(--ink-muted);
}
html[data-ui="next"] .pv-status::before,
html[data-ui="next"] .dot.dot-good::before,
html[data-ui="next"] .dot.dot-warn::before,
html[data-ui="next"] .dot.dot-crit::before,
html[data-ui="next"] .dot.dot-idle::before,
html[data-ui="next"] .dot.dot-info::before{
  content:""; flex:none; width:6px; height:6px;
  border-radius:var(--radius-full); background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}
html[data-ui="next"] .pv-status-good, html[data-ui="next"] .dot.dot-good{ background:var(--good-soft); color:var(--good); }
html[data-ui="next"] .pv-status-warn, html[data-ui="next"] .dot.dot-warn{ background:var(--warn-soft); color:var(--warn); }
html[data-ui="next"] .pv-status-crit, html[data-ui="next"] .dot.dot-crit{ background:var(--crit-soft); color:var(--crit); }
html[data-ui="next"] .pv-status-info, html[data-ui="next"] .dot.dot-info{ background:var(--signal-soft); color:var(--signal); }
html[data-ui="next"] .pv-status-live::before{ animation:pv-pulse 1.8s ease-out infinite; }
@keyframes pv-pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); }
  100%{ box-shadow:0 0 0 7px color-mix(in srgb, currentColor 0%, transparent); }
}
@media (prefers-reduced-motion:reduce){ html[data-ui="next"] .pv-status-live::before{ animation:none; } }

/* ---------- Instrument strip ---------- */
/* The hairlines are each cell's left and top edge, drawn over its neighbour; the outer ones
   are clipped. A short last row leaves no grey gaps, as a gap-on-a-line background would. */
html[data-ui="next"] .pv-readouts{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  background:var(--surface-raised);
  border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden;
}
html[data-ui="next"] .pv-readout{
  display:flex; flex-direction:column; gap:10px; min-width:0;
  padding:var(--space-4) var(--space-5) var(--space-4);
  background:var(--surface-raised); color:var(--ink); text-decoration:none;
  box-shadow:-1px 0 0 var(--line), 0 -1px 0 var(--line);
}
html[data-ui="next"] a.pv-readout-link:hover{ background:var(--surface); }
html[data-ui="next"] a.pv-readout-link:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px; }
html[data-ui="next"] .pv-readout-label{
  font:var(--type-label); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted);
}
html[data-ui="next"] .pv-readout-value{
  font:var(--type-metric); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
  display:flex; align-items:baseline; gap:6px; min-width:0;
}
html[data-ui="next"] .pv-readout-of{ font:500 15px/1 var(--font-sans); color:var(--ink-muted); letter-spacing:0; }
html[data-ui="next"] .pv-readout-visual{ display:block; }
html[data-ui="next"] .pv-readout-note{
  display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center;
  font-size:12.5px; line-height:16px; color:var(--ink-muted);
}

/* The fleet as a barcode. */
/* Spread across the readout like a printed code, whether the fleet is 12 devices or 400. */
html[data-ui="next"] .pv-fleet{ display:flex; align-items:stretch; justify-content:space-between; gap:1px; height:28px; overflow:hidden; }
html[data-ui="next"] .pv-fleet i{ flex:1 1 0; min-width:1px; max-width:3px; border-radius:1px; background:var(--ink); }
html[data-ui="next"] .pv-fleet i.w{ max-width:6px; flex-grow:2; }
html[data-ui="next"] .pv-fleet i.q{ background:var(--line-strong); }
html[data-ui="next"] .pv-fleet i.warn{ background:var(--warn); }
html[data-ui="next"] .pv-fleet i.crit{ background:var(--crit); }

/* The day as its hours. */
html[data-ui="next"] .pv-hours{ display:block; }
html[data-ui="next"] .pv-hours-cols{ display:grid; grid-template-columns:repeat(24, 1fr); gap:2px; align-items:end; height:28px; }
html[data-ui="next"] .pv-hours-cols i{
  display:block; height:calc(var(--h) * 1%); min-height:2px; border-radius:1px 1px 0 0;
  background:color-mix(in srgb, var(--ink) 38%, transparent);
}
html[data-ui="next"] .pv-hours-cols i.zero{ background:var(--line); }
html[data-ui="next"] .pv-hours-cols i.now{ background:var(--amber); min-height:4px; }
html[data-ui="next"] .pv-hours-cols i.next{ height:2px; background:var(--line); }
html[data-ui="next"] .pv-hours-ticks{
  display:grid; grid-template-columns:repeat(4, 1fr); margin-top:4px;
  font:500 10px/1 var(--font-sans); letter-spacing:.06em; color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
html[data-ui="next"] .pv-hours-ticks b{ font-weight:500; }

/* ---------- Location label: the amber beam label ---------- */
html[data-ui="next"] .pv-loc{
  display:inline-flex; align-items:center; gap:10px; height:40px; padding:0 12px 0 8px;
  border-radius:var(--radius-xs); background:var(--amber); color:var(--on-amber);
  box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--night) 12%, transparent);
}
html[data-ui="next"] .pv-loc-bars{ display:block; width:30px; height:24px; }
html[data-ui="next"] .pv-loc-bars rect{ fill:var(--on-amber); }
html[data-ui="next"] .pv-loc-code{ font:var(--type-location); line-height:1; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
html[data-ui="next"] .pv-loc-code i{ font-style:normal; opacity:.4; padding:0 1px; }
html[data-ui="next"] .pv-loc-sm{ height:24px; gap:6px; padding:0 7px 0 5px; }
html[data-ui="next"] .pv-loc-sm .pv-loc-bars{ width:16px; height:13px; }
html[data-ui="next"] .pv-loc-sm .pv-loc-code{ font-size:12.5px; }

/* ---------- Signal and battery ---------- */
html[data-ui="next"] .pv-signal{ display:inline-flex; align-items:center; white-space:nowrap; }
html[data-ui="next"] .pv-bars{ display:inline-flex; align-items:flex-end; gap:2px; height:14px; margin-right:8px; }
html[data-ui="next"] .pv-bars i{ width:3px; border-radius:1px; background:var(--line); }
html[data-ui="next"] .pv-bars i:nth-child(1){ height:4px; }
html[data-ui="next"] .pv-bars i:nth-child(2){ height:7px; }
html[data-ui="next"] .pv-bars i:nth-child(3){ height:10px; }
html[data-ui="next"] .pv-bars i:nth-child(4){ height:14px; }
html[data-ui="next"] .pv-bars[data-level="4"] i,
html[data-ui="next"] .pv-bars[data-level="3"] i:nth-child(-n+3),
html[data-ui="next"] .pv-bars[data-level="2"] i:nth-child(-n+2){ background:var(--ink); }
html[data-ui="next"] .pv-bars[data-level="1"] i:nth-child(1){ background:var(--warn); }
html[data-ui="next"] .pv-dbm{ font-size:12px; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
html[data-ui="next"] .pv-batt{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
html[data-ui="next"] .pv-batt i{ position:relative; width:44px; height:6px; border-radius:var(--radius-full); background:var(--surface-sunken); overflow:hidden; }
html[data-ui="next"] .pv-batt i::before{ content:""; position:absolute; inset:0 auto 0 0; width:calc(var(--pct) * 1%); border-radius:inherit; background:var(--ink-muted); }
html[data-ui="next"] .pv-batt-low{ color:var(--warn); font-weight:600; }
html[data-ui="next"] .pv-batt-low i::before{ background:var(--warn); }

/* ---------- Fleet table cells ---------- */
html[data-ui="next"] .pv-dev{ display:flex; align-items:center; gap:12px; min-width:0; }
html[data-ui="next"] .pv-dev-ico{ width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--surface-sunken); color:var(--ink-muted); }
html[data-ui="next"] .pv-dev-ico svg{ width:18px; height:18px; }
html[data-ui="next"] .pv-dev-name{ display:block; font-weight:600; color:var(--ink); }
html[data-ui="next"] .pv-dev-id{ display:block; font-size:12px; line-height:16px; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
html[data-ui="next"] .pv-op{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
html[data-ui="next"] .pv-avatar{
  width:26px; height:26px; flex:none; border-radius:var(--radius-full);
  display:grid; place-items:center; font-size:10.5px; font-weight:600; letter-spacing:.02em;
  background:var(--surface-sunken); color:var(--ink);
}
html[data-ui="next"] .pv-count{
  display:inline-grid; place-items:center; min-width:20px; height:18px; padding:0 6px; margin-left:6px;
  border-radius:var(--radius-full); background:var(--surface-sunken); color:var(--ink-muted);
  font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums;
}
html[data-ui="next"] .pv-count-crit{ background:var(--crit-soft); color:var(--crit); }

/* The fleet table's tabs sit on the panel head's rule instead of drawing a second, shorter one. */
html[data-ui="next"] .pv-fleet-panel > .panel-head{ padding-bottom:0; align-items:flex-end; }
html[data-ui="next"] .pv-fleet-panel > .panel-head .tabs{ border-bottom:0; margin-bottom:-1px; }

/* ---------- Health: rules as gauges against their threshold ---------- */
/* Same hairline grid as the readouts, no coloured edges and no tinted cards: the state
   is the word under each rule, and the rail shows how close the value is to alerting. */
html[data-ui="next"] .pv-gauges{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  background:var(--surface-raised);
  border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden;
}
html[data-ui="next"] .pv-gauge{
  display:flex; flex-direction:column; gap:8px; min-width:0;
  padding:var(--space-3) var(--space-4) var(--space-3);
  box-shadow:-1px 0 0 var(--line), 0 -1px 0 var(--line);
}
html[data-ui="next"] .pv-gauge-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; min-width:0; }
html[data-ui="next"] .pv-gauge-name{
  font-size:12.5px; line-height:16px; font-weight:500; color:var(--ink-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
html[data-ui="next"] .pv-gauge-info{ flex:none; width:13px; height:13px; margin-top:1px; color:var(--ink-faint); cursor:help; }
html[data-ui="next"] .pv-gauge-value{
  font:600 22px/26px var(--font-display); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
  color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html[data-ui="next"] .pv-gauge-unit{ font:500 12px/1 var(--font-sans); color:var(--ink-muted); margin-left:4px; letter-spacing:0; }
html[data-ui="next"] .pv-gauge-foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:11.5px; line-height:14px; color:var(--ink-muted); white-space:nowrap; min-width:0;
}
html[data-ui="next"] .pv-gauge-rule{ overflow:hidden; text-overflow:ellipsis; min-width:0; font-variant-numeric:tabular-nums; }
html[data-ui="next"] .pv-gauge-state{ display:inline-flex; align-items:center; gap:6px; flex:none; font-weight:600; }
html[data-ui="next"] .pv-gauge-state::before{ content:""; width:6px; height:6px; border-radius:var(--radius-full); background:currentColor; }
html[data-ui="next"] .pv-gauge.is-healthy .pv-gauge-state{ color:var(--good); }
html[data-ui="next"] .pv-gauge.is-warning .pv-gauge-state,
html[data-ui="next"] .pv-gauge.is-warning .pv-gauge-value{ color:var(--warn); }
html[data-ui="next"] .pv-gauge.is-breaching .pv-gauge-state,
html[data-ui="next"] .pv-gauge.is-breaching .pv-gauge-value{ color:var(--crit); }
html[data-ui="next"] .pv-gauge.is-unknown .pv-gauge-value{ color:var(--ink-faint); font-size:17px; }
html[data-ui="next"] .pv-gauge.is-disabled > *{ opacity:.5; }

/* The threshold rail. */
html[data-ui="next"] .pv-thr{ display:block; padding:4px 0; }
html[data-ui="next"] .pv-thr-track{ position:relative; display:block; height:6px; border-radius:var(--radius-full); background:var(--surface-sunken); }
html[data-ui="next"] .pv-thr-zone{
  position:absolute; top:0; bottom:0; border-radius:var(--radius-full);
  background:repeating-linear-gradient(-45deg, var(--line-strong) 0 3px, transparent 3px 6px);
}
html[data-ui="next"] .pv-thr-crit .pv-thr-zone{ background:repeating-linear-gradient(-45deg, var(--crit) 0 3px, transparent 3px 6px); }
html[data-ui="next"] .pv-thr-warn .pv-thr-zone{ background:repeating-linear-gradient(-45deg, var(--warn) 0 3px, transparent 3px 6px); }
html[data-ui="next"] .pv-thr-notch{ position:absolute; left:50%; top:-4px; bottom:-4px; width:2px; margin-left:-1px; border-radius:1px; background:var(--ink); }
html[data-ui="next"] .pv-thr-mark{
  position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:var(--radius-full); background:var(--ink);
  box-shadow:0 0 0 2px var(--surface-raised);
}
html[data-ui="next"] .pv-thr-good .pv-thr-mark{ background:var(--good); }
html[data-ui="next"] .pv-thr-warn .pv-thr-mark{ background:var(--warn); }
html[data-ui="next"] .pv-thr-crit .pv-thr-mark{ background:var(--crit); }
html[data-ui="next"] .pv-thr-quiet .pv-thr-notch{ background:var(--line-strong); }

/* ---------- Blazor's error bar (PvScripts) ----------
   Blazor only switches #blazor-error-ui to display:block when the page loses its server session to an error; hiding
   it is left to the stylesheet. Nothing hid it, so "Something went wrong and this page stopped responding. Reload" sat
   at the foot of every page, under the rail. Hidden here, and a bar over everything when it is shown. */
#blazor-error-ui{
  display:none;
  position:fixed; left:50%; bottom:20px; translate:-50% 0; z-index:calc(var(--z-toast) + 1);
  max-width:calc(100vw - 32px);
  padding:12px 16px; border-radius:var(--radius-sm);
  background:var(--crit-soft); color:var(--crit); border:1px solid color-mix(in srgb, var(--crit) 35%, transparent);
  box-shadow:var(--shadow-pop); font-size:14px;
}
#blazor-error-ui .reload{ color:inherit; font-weight:600; margin-left:8px; text-decoration:underline; }