/* qs-focus.css — design pass for the Focus (single-account) screen.
 *
 * Hand-authored source, not build output. Loads after visual-overhaul.css, so
 * rules here win without needing !important; reach for a higher-specificity
 * selector before reaching for the flag.
 *
 * Scope every rule to this screen. Shared token changes belong in
 * visual-overhaul.css and must be raised rather than duplicated here, so two
 * screens cannot drift apart on the same value.
 *
 * Bump the ?v=qs-focus-N key in scripts/build-static.js whenever this file changes,
 * or browsers keep serving the previous copy.
 */

/* --------------------------------------------------------------------------
 * DIRECTION
 *
 * DESIGN.md names this site's failure mode as flatness: every group is a
 * rounded card on a dark ground at the same weight, so nothing leads. The
 * elevate pass answers with the vernacular the subject already speaks -- the
 * ruled ledger. Hairlines carry the structure, figures sit on shared columns,
 * and exactly one accent (cyan) is spent saying *here*: the row under the
 * cursor, the day you selected, the control with focus. Nothing else is cyan.
 *
 * Everything below is either a property the generated markup does not set
 * inline, or a state the markup has no opinion about (hover, focus, selected,
 * empty). Numbers, labels and bindings are untouched.
 * ----------------------------------------------------------------------- */

.qs-focus-shell {
  /* Type scale, from DESIGN.md §3. The generated markup carries a drift of
     ad-hoc sizes (9px, 10.5px, 11.5px, 12.5px); these are the values used
     wherever a size is not already pinned inline. */
  --f-micro: 10px;
  --f-label: 11px;
  --f-body: 13px;
  --f-lead: 15px;

  /* Spacing, 4px scale only. */
  --f-1: 4px;
  --f-2: 8px;
  --f-3: 12px;
  --f-4: 16px;
  --f-6: 24px;

  /* The reading edge. One accent, used only to mark position. */
  --f-edge: var(--qt-cyan);
  --f-edge-wash: rgb(98 195 217 / 8%);
  --f-row-hover: rgb(255 255 255 / 3.5%);
}

/* ==========================================================================
 * 1. HERO BAND — identity, balance, return, money made
 *
 * The four figures are deliberately left at the size visual-overhaul.css
 * pins them to. Hierarchy is bought with label treatment and a reading edge
 * on the identity cell instead, per DESIGN.md §5 ("rank with weight and
 * color, not size").
 * ======================================================================= */

.qs-focus-shell .qs-focus-band {
  overflow: hidden;
  position: relative;
}

/* A hairline of accent along the top of the identity cell: the band reads
   left-to-right from a marked starting point rather than as four peers. */
.qs-focus-shell .qs-focus-band-lead::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    var(--f-edge) 0%,
    rgb(98 195 217 / 20%) 55%,
    transparent 100%
  );
}

/* The eyebrow labels (BALANCE / RETURN · MONEY-WEIGHTED / ...) carry the
   band's rhythm. Their size and color are inline; tracking and the small-caps
   feel are not, so that is where the craft goes. */
.qs-focus-shell .qs-focus-band-cell > :is(div, button):first-child {
  display: flex;
  gap: 6px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: var(--f-1);
  white-space: nowrap;
}

/* Figures line up on a common baseline across cells. */
.qs-focus-shell .qs-focus-band-cell {
  justify-content: flex-start;
  gap: 6px;
}

.qs-focus-shell .qs-focus-band :is(div, button)[style*="font-size:32px"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* The account <select> is the only control in the band. Quiet at rest,
   legible on hover, unmistakable on focus. */
.qs-focus-shell .qs-focus-band select {
  transition:
    border-color var(--qt-motion-fast) var(--qt-ease-out),
    background-color var(--qt-motion-fast) var(--qt-ease-out);
  cursor: pointer;
}

.qs-focus-shell .qs-focus-band select:hover {
  border-color: var(--qt-line-strong);
  background-color: var(--qt-panel-hover);
}

/* The status badge next to the meta line. */
.qs-focus-shell .qs-focus-meta {
  display: flex;
  gap: var(--f-2);
  align-items: center;
  flex-wrap: wrap;
}

/* ==========================================================================
 * 2. PANELS — the ruled-ledger shell
 * ======================================================================= */

/* Panels separate by background step and one hairline, never by drop shadow
   (DESIGN.md §5). visual-overhaul gives the band a shadow; the panels below
   it get depth from the rule instead. */
.qs-focus-shell .qs-focus-panel {
  position: relative;
  box-shadow: none;
}

/* Panel heads: a consistent hairline under every title row, so the panels
   read as one ruled system rather than a set of unrelated cards. */
.qs-focus-shell .qs-panel-head,
.qs-focus-shell .qs-card-head {
  align-items: center;
  gap: var(--f-3);
}

.qs-focus-shell .qs-card-title,
.qs-focus-shell .qs-card-subtitle {
  text-wrap: balance;
}

/* ==========================================================================
 * 3. ADVANCED ANALYTICS disclosure
 *
 * The toggle is a flex <button>, so it shrank to its content width and its
 * inline border-top drew a ~175px stub that read as a broken divider. A
 * button is content-width by default; the rule it carries is meant to span
 * the section.
 * ======================================================================= */

.qs-focus-shell .qs-advanced-toggle {
  width: 100%;
  justify-content: flex-start;
  margin-top: var(--f-2);
  padding-bottom: var(--f-2);
  border-radius: 0;
  background: none;
  transition: color var(--qt-motion-fast) var(--qt-ease-out);
}

.qs-focus-shell .qs-advanced-toggle:hover :is(div, span) {
  color: var(--qt-text);
}

/* The chevron already rotates from a binding; give it a fixed box so the
   label does not shift by a pixel between states. */
.qs-focus-shell .qs-advanced-toggle > :is(div, span):first-child {
  display: inline-flex;
  width: 12px;
  justify-content: center;
  transform-origin: center;
}

/* ==========================================================================
 * 4. METRIC GRIDS — RISK & RETURN (4x2), TAIL & DISTRIBUTION, BENCHMARK
 * ======================================================================= */

/* Five metrics in a two-column grid left a visibly ruled empty sixth cell.
   When the last cell is alone on its row, let it take the full width so the
   grid closes cleanly. Scoped to the two-column grids only -- the 4x2 grid
   is always full. */
.qs-focus-shell .qs-metric-grid[style*="repeat(2,"] > :is(div, button):last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Figures in a stat cell are compared down a column -- that is the whole point
   of a 4x2 grid -- so they get tabular figures even though the markup only
   asked for them in the hero band. */
.qs-focus-shell .qs-metric-grid > :is(div, button) > :is(div, button),
.qs-focus-shell .qs-risk-cells > :is(div, button) > :is(div, button) {
  font-variant-numeric: tabular-nums;
}

/* A metric cell is not interactive, but it is scannable: a whisper of ground
   on hover helps the eye hold a row across four columns. */
.qs-focus-shell .qs-metric-grid > :is(div, button) {
  transition: background-color var(--qt-motion-fast) var(--qt-ease-out);
}

.qs-focus-shell .qs-metric-grid > :is(div, button):hover {
  background-color: var(--f-row-hover);
}

/* ==========================================================================
 * 5. ALLOCATION + RISK PROFILE
 * ======================================================================= */

/* Legend rows: the ticker, its bar and its two figures are a table in all but
   name, so the figures get tabular treatment and the row gets a hover. */
.qs-focus-shell .qs-allocation-grid :is(div, button)[style*="font-variant-numeric"] {
  font-variant-numeric: tabular-nums;
}

/* The donut and its legend share the panel; the hint line at the foot is an
   affordance, not a caption, so it sits on its own rule. */
.qs-focus-shell .qs-allocation-grid + :is(div, button),
.qs-focus-shell .qs-focus-panel > :is(div, button):last-child[style*="border-top"] {
  letter-spacing: .01em;
}

/* Risk gauge: the scale labels (LOW / MODERATE / HIGH) are a legend for the
   needle above them and should recede below it. */
.qs-focus-shell .qs-risk-lead {
  align-items: baseline;
  gap: var(--f-3);
}

/* The allocation/risk row now stretches (see the align-items change in
   build-static.js), so the risk panel is full height and closes on its three
   metric cells the way the allocation panel closes on its hint line, instead
   of stopping short and leaving 190px of page ground beside a tall neighbour.
   The slack that remains sits between the gauge and those cells.

   Two things were tried to take that slack up and neither is worth the
   fragility: `margin-top: auto` on .qs-risk-cells (auto margins resolve
   before flex-grow, so the margin swallows the space and nothing else can
   grow), and growing .qs-panel-body (it wraps only the lead block, not the
   gauge and scale below it, so centring it moves the wrong element). Left as
   breathing room against the dense donut opposite. */

.qs-focus-shell .qs-risk-cells > :is(div, button) {
  transition: background-color var(--qt-motion-fast) var(--qt-ease-out);
}

.qs-focus-shell .qs-risk-cells > :is(div, button):hover {
  background-color: var(--f-row-hover);
}

/* ==========================================================================
 * 6. CHARTS — indexed growth, drawdown
 * ======================================================================= */

/* Gridlines are chrome. They were drawn at the same value as the panel
   borders, which put them at the same visual weight as structure; recede
   them so the series leads. */
.qs-focus-shell .qs-performance-chart line,
.qs-focus-shell .qs-curve-plot line {
  opacity: .55;
}

/* The series end-marker overlaps its own line. dataviz asks for a surface
   ring on overlapping marks so the mark stays legible against the stroke. */
.qs-focus-shell .qs-performance-chart circle,
.qs-focus-shell .qs-curve-plot circle {
  stroke: var(--qt-panel);
  stroke-width: 2;
  paint-order: stroke fill;
}

/* Keyboard scrubbing is a first-class path on these charts, but neither the
   shared focus-ring rule (a / input / select / [onclick]) nor frontend-qa's
   (button / [role=button] / [role=tab]) matches a focusable <svg>, so tabbing
   onto either chart was completely invisible. */
.qs-focus-shell svg[tabindex="0"]:focus-visible {
  outline: 2px solid var(--qt-focus);
  outline-offset: 3px;
  border-radius: var(--qt-radius-sm);
}

/* Axis tick labels sit in small plates over the plot. Tabular figures keep
   them from shifting as the scrub moves through values. */
.qs-focus-shell .qs-perf-yaxis :is(div, button),
.qs-focus-shell .qs-curve-ticks :is(div, button) {
  font-variant-numeric: tabular-nums;
}

/* The rebase note ("REBASED TO 0.0% AT PERIOD START") explains what zero on
   the axis means. It was floating hard against the toolbar above it; give it
   room and tie it to the plot it annotates. */
.qs-focus-shell .qs-chart-frame {
  margin-top: var(--f-1);
}

.qs-focus-shell .qs-curve-readout {
  font-variant-numeric: tabular-nums;
}

/* DRAWDOWN CURVE and TAIL & DISTRIBUTION share a row, and tail is the taller
   of the two. The drawdown panel's whole body is one non-growing block, so
   the stretch left ~130px of empty ground below its readout. Let the body
   take the slack and pin the readout to the foot, so the panel closes on a
   line of text the way the panel beside it closes on a metric cell. */
.qs-focus-shell .qs-focus-panel > :is(div, button):has(svg[viewBox="0 0 1200 150"]) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* The readout carries an inline margin-top, so it cannot be pushed with
   `margin-top: auto`. Grow the axis-label row above it instead: the labels
   stay hard under the plot and the slack lands below them. */
.qs-focus-shell .qs-focus-panel > :is(div, button):has(svg[viewBox="0 0 1200 150"]) > :nth-last-child(2) {
  flex: 1 1 auto;
  align-items: flex-start;
}

/* The hover readout and the mode-explanation sentence sit after the chart
   panel closes, so they read as loose page text: flush with the panel's outer
   edge rather than with the plot inside it. Indenting them onto the panel's
   content column is enough to bind them to the chart -- a second bordered box
   under the first would just be the nested card DESIGN.md §5 rules out. */
.qs-focus-shell .qs-chart-readout,
.qs-focus-shell .qs-chart-note {
  padding-left: var(--f-6);
  padding-right: var(--f-6);
}

.qs-focus-shell .qs-chart-readout {
  padding-top: var(--f-2);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
 * 7. TIMEFRAME PILLS + CHART MODE TABS
 * ======================================================================= */

/* 1W / 1M / 5Y are two- and three-character targets that measured ~26px tall.
   The 44px floor frontend-qa applies only kicks in below 760px, so every
   touch device between 761px and 1024px -- iPad portrait, hybrid laptops --
   got the 26px version. Raise the resting size to match the drawdown panel's
   copy of the same control, and take the full 44px wherever the pointer is
   coarse, at any width. */
.qs-focus-shell .qs-focus-toolbar > :is(div, button):first-child > :is(div, button),
.qs-focus-shell .qs-chart-toolbar > :is(div, button):first-child > :is(div, button) {
  min-width: 40px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    box-shadow var(--qt-motion-fast) var(--qt-ease-out),
    color var(--qt-motion-fast) var(--qt-ease-out);
}

/* The pills' background and colour are both bound inline, so hover has to be
   drawn with a property the markup left alone. */
.qs-focus-shell .qs-focus-toolbar > :is(div, button):first-child > :is(div, button):hover,
.qs-focus-shell .qs-chart-toolbar > :is(div, button):first-child > :is(div, button):hover {
  box-shadow: inset 0 0 0 1px var(--qt-line-strong);
}

@media (pointer: coarse) {
  .qs-focus-shell .qs-focus-toolbar > :is(div, button):first-child > :is(div, button),
  .qs-focus-shell .qs-chart-toolbar > :is(div, button):first-child > :is(div, button) {
    min-width: 44px;
    min-height: 44px;
  }

  .qs-focus-shell .qs-cal-step,
  .qs-focus-shell .qs-cal-latest {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Every promoted <button> on this screen flashes the platform tap highlight;
   the shared rule covers a / input / select but not button. */
.qs-focus-shell button {
  -webkit-tap-highlight-color: transparent;
}

.qs-focus-shell .qs-focus-toolbar select {
  cursor: pointer;
  transition: border-color var(--qt-motion-fast) var(--qt-ease-out);
}

.qs-focus-shell .qs-focus-toolbar select:hover {
  border-color: var(--qt-line-strong);
}

/* ==========================================================================
 * 8. RETURNS CALENDAR
 *
 * dataviz: the heat cells are a diverging encoding (loss / nothing / gain)
 * scaled by magnitude. The scale itself is data-bound inline and is left
 * exactly as it is. What is raised here is everything around it -- the
 * legend's legibility, the cell's states, and the value's readability at
 * 375, where it was being clipped.
 * ======================================================================= */

/* The legend was set at 8px, below the 10px floor DESIGN.md sets and below
   what anyone can read. It is the key to the whole grid; it earns 10px. */
.qs-focus-shell .qs-heat-legend {
  gap: 6px;
  color: var(--qt-muted);
  font: 700 var(--f-micro) / 1 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
}

.qs-focus-shell .qs-heat-legend i {
  width: 26px;
  height: 10px;
  border-radius: 2px;
  border-color: rgb(255 255 255 / 12%);
}

/* Weekday heads are column labels for the grid below; align them to the
   cells' own text rather than centring them over a left-aligned cell. */
.qs-focus-shell .qs-cal-weekday {
  padding-bottom: 6px;
  text-align: left;
  padding-left: 11px;
}

/* Day cells. The background, border-color, opacity and cursor are all
   data-bound inline and untouched. Hover, focus and the selected state are
   not, and that is where a calendar becomes usable. */
.qs-focus-shell .qs-cal-day {
  gap: var(--f-2);
  transition:
    border-color var(--qt-motion-fast) var(--qt-ease-out),
    box-shadow var(--qt-motion-fast) var(--qt-ease-out);
}

.qs-focus-shell .qs-cal-day[aria-disabled="false"]:hover {
  border-color: var(--qt-line-strong);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);
}

.qs-focus-shell .qs-cal-day[aria-pressed="true"] {
  box-shadow:
    inset 0 0 0 1px var(--f-edge),
    0 0 0 1px rgb(98 195 217 / 25%);
}

.qs-focus-shell .qs-cal-day:focus-visible {
  outline: 2px solid var(--qt-focus);
  outline-offset: 2px;
  z-index: 1;
}

/* Days outside the displayed month are context, not data. */
.qs-focus-shell .qs-cal-day[aria-disabled="true"] {
  cursor: default;
}

.qs-focus-shell .qs-cal-daynum {
  color: rgb(255 255 255 / 62%);
  font-size: var(--f-body);
  letter-spacing: .01em;
}

.qs-focus-shell .qs-cal-dayvalue {
  letter-spacing: -.01em;
}

/* Month navigation: « ‹ › » are icon-only targets. They carry proper
   aria-labels already; what they lacked was a hover state. */
.qs-focus-shell .qs-cal-step,
.qs-focus-shell .qs-cal-latest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--qt-motion-fast) var(--qt-ease-out),
    border-color var(--qt-motion-fast) var(--qt-ease-out);
}

.qs-focus-shell .qs-cal-step:hover {
  border-color: var(--qt-line-strong);
  background: var(--qt-panel-hover);
}

/* The month strip under the grid. Selected month is marked with the same
   reading edge the calendar uses, so one visual idea covers both. */
.qs-focus-shell .qs-cal-monthbtn {
  transition:
    border-color var(--qt-motion-fast) var(--qt-ease-out),
    background-color var(--qt-motion-fast) var(--qt-ease-out);
}

.qs-focus-shell .qs-cal-monthbtn:hover {
  border-color: var(--qt-line-strong);
}

.qs-focus-shell .qs-cal-monthvalue {
  font-variant-numeric: tabular-nums;
}

/* The stat chips (MONTH / BEST DAY / WORST DAY / UP-DOWN) are a summary of
   the grid; keep their figures on a shared column. */
.qs-focus-shell .qs-cal-chip-value {
  font-variant-numeric: tabular-nums;
}

/* The hint line is an affordance. Quiet, but not invisible. */
.qs-focus-shell .qs-cal-hint {
  color: var(--qt-muted);
  font-size: var(--f-body);
  line-height: 1.5;
}

/* ==========================================================================
 * 9. OPEN POSITIONS TABLE
 *
 * DESIGN.md §5: "Left-align text, right-align numbers. Always. A
 * right-aligned mono column is what makes a table scannable." The generated
 * markup left every numeric column ragged-left. The cells carry no
 * text-align and no font-family inline, so this is winnable from here.
 * ======================================================================= */

/* Columns 3-6 are QUANTITY / ENTRY / MARK / P&L. */
.qs-focus-shell .qs-positions-table > :is(div, button) > :is(div, button):nth-child(n + 3) {
  text-align: right;
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* The header cells must sit over the column they name. */
.qs-focus-shell .qs-positions-table > :is(div, button):first-child > :is(div, button):nth-child(n + 3) {
  font-family: "IBM Plex Mono", monospace;
}

/* SIDE is a category, not a magnitude. It keeps its binding colour but drops
   to label scale so it stops competing with the P&L column, which is the one
   thing in this table anyone scans for. */
.qs-focus-shell .qs-positions-table > :is(div, button) > :is(div, button):nth-child(2) {
  font: 700 var(--f-label) / 1 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
  align-self: center;
}

.qs-focus-shell .qs-positions-table > :is(div, button) > :is(div, button):first-child {
  letter-spacing: .01em;
}

/* The mobile rule floors every direct child of the table at 620px so the six
   columns keep their tracks. The no-positions message is also a direct child,
   so an empty account got a 620px-wide one-line sentence inside a 327px
   viewport and a scrollbar under it. Only the grid rows need the floor. */
.qs-focus-shell .qs-positions-table > :is(div, button):not([style*="grid-template-columns"]) {
  min-width: 0;
}

/* Row hover. A wide table needs the eye anchored across six columns. */
.qs-focus-shell .qs-positions-table > :is(div, button) {
  align-items: center;
  transition: background-color var(--qt-motion-fast) var(--qt-ease-out);
}

.qs-focus-shell .qs-positions-table {
  overscroll-behavior-inline: contain;
}

.qs-focus-shell .qs-positions-table > :is(div, button):not(:first-child):hover {
  background-color: var(--f-row-hover);
}

/* The header is the one row that should not light up. */
.qs-focus-shell .qs-positions-table > :is(div, button):first-child:hover {
  background-color: transparent;
}

/* ==========================================================================
 * 10. EMPTY STATES
 *
 * The benchmark-relative panel and the no-positions line are the two places
 * this screen can be empty. An empty screen is an invitation to act, so both
 * get the same composed treatment rather than a bare sentence.
 * ======================================================================= */

.qs-focus-shell .qs-advanced-panel > :is(div, button)[style*="background:oklch(14%"] {
  display: flex;
  gap: var(--f-3);
  align-items: center;
  line-height: 1.5;
}

/* ==========================================================================
 * 11. MOTION + INTERACTION FLOOR
 * ======================================================================= */

.qs-focus-shell :is(a, button, select, [onclick], [sc-camel-on-click]):focus-visible {
  outline: 2px solid var(--qt-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .qs-focus-shell *,
  .qs-focus-shell *::before,
  .qs-focus-shell *::after {
    transition-duration: .01ms;
    animation-duration: .01ms;
    animation-iteration-count: 1;
  }
}

/* ==========================================================================
 * 12. NARROW VIEWPORTS
 * ======================================================================= */

@media (max-width: 760px) {
  /* The calendar's own scroll track exists precisely so the cells are not
     squeezed until the return clips. It was set to 336px, which is narrower
     than 375 -- so the track never engaged and the values were cut off
     mid-figure instead ("-0.09%" rendering as "-0.09"). Widen the track past
     the viewport so it does what it was built to do, and give the figure back
     a readable size. The page itself does not scroll: .qs-cal-scroll owns
     the overflow and contains the inline overscroll. */
  .qs-focus-shell .qs-cal-weekdays,
  .qs-focus-shell .qs-cal-grid {
    min-width: 420px;
    gap: 5px;
  }

  /* Now that the track actually engages, say so: without an edge fade the
     grid simply stops at Thursday and nothing suggests Friday and Saturday
     are one swipe away. */
  .qs-focus-shell .qs-cal-scroll {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  }

  .qs-focus-shell .qs-cal-dayvalue {
    min-height: 12px;
    font-size: var(--f-micro);
    letter-spacing: -.01em;
    white-space: nowrap;
  }

  .qs-focus-shell .qs-cal-daynum {
    font-size: var(--f-label);
  }

  .qs-focus-shell .qs-cal-day {
    min-height: 62px;
    padding: 7px 8px;
  }

  .qs-focus-shell .qs-cal-weekday {
    padding-left: 8px;
  }

  /* Touch targets. */
  .qs-focus-shell .qs-cal-step,
  .qs-focus-shell .qs-cal-latest {
    min-width: 44px;
    min-height: 44px;
  }

  .qs-focus-shell .qs-focus-toolbar > :is(div, button):first-child > :is(div, button),
  .qs-focus-shell .qs-chart-toolbar > :is(div, button):first-child > :is(div, button) {
    min-height: 44px;
    min-width: 44px;
  }

  /* The positions table scrolls to reach MARK and P&L. Nothing said so --
     the last visible column simply ended at the panel edge. A fade at the
     scroll edge is the standard tell that content continues. */
  .qs-focus-shell .qs-positions-table {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
}