/* ============================================================
   Albatross Invest — shared display components
   The bento cards and the year by year chart. Extracted from
   platform.css so the public calculator and the adviser platform
   draw the same components from one place rather than each
   keeping a copy. Built only from the tokens in brand.css.
   ============================================================ */
@import url('brand.css');

/* ============================================================
   Bento cards
   The large soft-cornered blocks from the brand guidelines, the
   ones carrying the target-return figures. Same geometry here,
   filled only from the palette, with a thin mark in the corner.
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.bcard {
  position: relative;
  grid-column: span 3; min-height: 176px; border-radius: 22px; padding: 22px 24px;
  display: flex; flex-direction: column; justify-content: space-between; border: 1px solid transparent;
  text-decoration: none; color: inherit; overflow: hidden;
  container-type: inline-size;
}

/* ---- a card that opens something ----
   Pointing at it trades the card's own mark for the disc that says it opens,
   the same one the prospectus covers carry. The two swap in place, so nothing
   on the card moves. */
.bcard.is-act { width: 100%; text-align: left; font: inherit; cursor: pointer;
  transition: filter .18s ease; }
.bcard.is-act:hover, .bcard.is-act:focus-visible { filter: brightness(.97); outline: 0; }
.bcard.is-act:focus-visible { border-color: currentColor; }
.bcard.is-act .top { position: relative; }
.bcard.is-act .top .ico { transition: opacity .2s ease; }
.bcard .grab {
  position: absolute; top: -8px; right: -8px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  opacity: 0; transform: translateY(-3px); transition: opacity .2s ease, transform .2s ease;
}
.bcard .grab .gico { display: block; width: 16px; height: 16px; }
.bcard--navy .grab, .bcard--teal .grab { background: var(--ai-white); color: var(--ai-navy); }
.bcard--sky .grab, .bcard--mist .grab, .bcard--bone .grab,
.bcard--sage .grab, .bcard--plain .grab { background: var(--ai-navy); color: var(--ai-white); }
.bcard.is-act:hover .grab, .bcard.is-act:focus-visible .grab { opacity: 1; transform: none; }
.bcard.is-act:hover .top .ico, .bcard.is-act:focus-visible .top .ico { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .bcard .grab, .bcard.is-act .top .ico, .bcard.is-act { transition: none; }
  .bcard.is-act:hover .grab, .bcard.is-act:focus-visible .grab { transform: none; }
}
.bcard.s2 { grid-column: span 2; }
.bcard.s3 { grid-column: span 3; }
.bcard.s4 { grid-column: span 4; }
.bcard.s5 { grid-column: span 5; }
.bcard.s6 { grid-column: span 6; }
.bcard.s7 { grid-column: span 7; }
.bcard.s8 { grid-column: span 8; }
.bcard.s9 { grid-column: span 9; }
.bcard.s10 { grid-column: span 10; }
.bcard.s11 { grid-column: span 11; }
.bcard.s12 { grid-column: span 12; }
.bcard.tall { min-height: 236px; }

.bcard--navy { background: var(--ai-navy); }
.bcard--sky  { background: var(--ai-sky); }
.bcard--teal { background: var(--ai-teal); }
.bcard--mist { background: var(--ai-mist); }
.bcard--bone { background: var(--ai-bone); }
.bcard--sage { background: var(--ai-sage); }
.bcard--plain { background: var(--ai-white); border-color: var(--ai-rule); }

/* White on Sky fails contrast, so a sky card always carries navy text,
   exactly as the target-return cards in the guidelines do. */
.bcard--navy, .bcard--teal { color: var(--ai-white); }
.bcard--sky, .bcard--mist, .bcard--bone, .bcard--sage, .bcard--plain { color: var(--ai-navy); }

.bcard .ico { display: block; width: 19px; height: 19px; opacity: .85; }
.bcard--navy .ico, .bcard--teal .ico { color: var(--ai-white); }
.bcard--sky  .ico { color: var(--ai-navy); }
.bcard--mist .ico, .bcard--sage .ico { color: var(--ai-teal); }
.bcard--plain .ico { color: var(--ai-slate); }
.bcard--bone .ico { color: var(--ai-slate); }

.bcard .lab {
  margin: 0; font-family: var(--ai-font-display); font-size: 12px; letter-spacing: .09em;
  text-transform: uppercase; line-height: 1.35;
}
.bcard--navy .lab { color: var(--ai-sky); }
.bcard--teal .lab { color: var(--ai-mist); }
.bcard--sky  .lab { color: var(--ai-navy); opacity: .72; }
.bcard--mist .lab { color: var(--ai-teal); }
.bcard--bone .lab, .bcard--plain .lab, .bcard--sage .lab { color: var(--ai-slate); }

.bcard .fig {
  margin: 12px 0 0; font-family: var(--ai-font-data); font-variant-numeric: tabular-nums; line-height: .96;
  letter-spacing: -.01em;
  /* cqi is one per cent of the card's own width, so a narrow card sets a
     smaller figure without anything having to know where it was placed */
  font-size: clamp(21px, 13cqi, 40px);
}
.bcard .fig.big { font-size: clamp(26px, 16cqi, 56px); }
/* the quieter tail of a figure, the way the guidelines set the pence back */
.bcard .fig em { font-style: normal; font-size: .62em; opacity: .5; }
.bcard .sub { margin: 9px 0 0; font-size: 12.5px; line-height: 1.4; opacity: .72; }
.bcard .lab, .bcard .sub { min-width: 0; overflow-wrap: anywhere; }
.bcard .fig { min-width: 0; white-space: nowrap; }
.bcard .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bcard .foot { margin-top: 14px; }

/* a caption sitting under the card, as the target-return set is captioned */
.bcap { margin: 10px 2px 0; font-size: 13px; color: var(--ai-text-muted); }

/* ---- the year by year chart: brand palette only, no third colour ---- */
.chartwrap { padding: 22px 24px 4px; }
.chart { display: block; width: 100%; height: auto; }
.chart .grid { stroke: var(--ai-rule); stroke-width: 1; }
.chart .base { stroke: var(--ai-navy); stroke-width: 1; }
.chart .tick { fill: var(--ai-text-muted); font-family: var(--ai-font-data); font-variant-numeric: tabular-nums; font-size: 13px; }
/* ---- comparison band ----
   Two series with the space between them hatched, so the gap itself is the
   quantity being read rather than something to measure off an axis. The hatch
   is the only fill: no third colour enters the palette to say "difference". */
.chart .hatchline { stroke: var(--ai-slate); stroke-opacity: .42; stroke-width: 1; }
.chart .band { stroke: none; }
.chart .line-a { stroke: var(--ai-navy); stroke-width: 1.6; fill: none;
  stroke-linejoin: round; stroke-linecap: round; }
.chart .line-b { stroke: var(--ai-teal); stroke-width: 2; fill: none;
  stroke-linejoin: round; stroke-linecap: round; }
.chart .vtx-a { fill: var(--ai-navy); }
.chart .vtx-b { fill: var(--ai-teal); }
.chart .area-b { fill: var(--ai-mist); }
/* a month of a single series; the last one is hatched because it is not over */
.chart .bar { fill: var(--ai-teal); }
.chart .bar-now { stroke: var(--ai-slate); stroke-opacity: .3; stroke-width: 1; }
/* every month answers for itself when it is pointed at */
.chart .barcol .hit { fill: transparent; }
.chart .barcol .bar, .chart .barcol .bar-now { transition: opacity .15s ease; }
.chart .barcol .hov { opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.chart .barcol:hover .hov { opacity: 1; }
.chart .barcol:hover .bar { opacity: .82; }

@media (prefers-reduced-motion: reduce) {
  .chart .barcol .hov, .chart .barcol .bar, .chart .barcol .bar-now { transition: none; }
}

/* the figure that matters, said on the chart rather than under it */
.chart .stem { stroke: var(--ai-navy); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .callout { fill: var(--ai-sage); }
.chart .callout-t { fill: var(--ai-navy); font-family: var(--ai-font-data); font-variant-numeric: tabular-nums; font-size: 13px; }

/* ---- what the number in the box means ----
   A pound in front or a per cent behind, set in the figure face and in the
   muted text colour so it reads as part of the frame rather than as typed
   content. The box makes room for it so nothing can sit underneath. */
.inputwrap { position: relative; display: block; }
.unitmark { position: absolute; top: 0; height: 42px; line-height: 42px; pointer-events: none;
  font-family: var(--ai-font-data); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ai-text-muted); }
.unitmark--pre  { left: 14px; }
.unitmark--post { right: 14px; }
.control.has-pre  { padding-left: 29px; }
.control.has-post { padding-right: 32px; }
/* a select carries its own arrow on the right, so a suffix goes before it */
select.control.has-post { padding-right: 46px; }
.inputwrap .unitmark--post.is-inset { right: 32px; }
/* A field carrying the % / £ toggle shows its unit beside the number the same
   way a money box does: a pound in front, or a per cent behind. The mark is
   held clear of the toggle, and the box makes the extra room for it. */
.inputwrap .unitmark--unit { right: 78px; }
.control.has-unit.has-unitmark { padding-right: 95px; }

/* Narrower than this the twelve column bento cannot hold four cards, so the
   leader takes the full width and the rest pair off underneath. Every span is
   covered, or a card is left stranded on a row of its own. */
@media (max-width: 1280px) {
  .bcard { grid-column: span 4; }
  .bcard.s2 { grid-column: span 4; }
  .bcard.s3 { grid-column: span 6; }
  .bcard.s4, .bcard.s5, .bcard.s6, .bcard.s7, .bcard.s8,
  .bcard.s9, .bcard.s10, .bcard.s11, .bcard.s12 { grid-column: span 12; }
}
@media (max-width: 900px) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bcard, .bcard.s2, .bcard.s3, .bcard.s4, .bcard.s5, .bcard.s6, .bcard.s7,
  .bcard.s8, .bcard.s9, .bcard.s10, .bcard.s11, .bcard.s12 { grid-column: span 4; } }

/* ---- the clear button on a search box ----
   The browser's own is a grey disc with a cross cut out of it, which belongs
   to no brand. This is the same control drawn as a thin cross in the muted
   text colour, darkening on hover like every other quiet action. The shape is
   a mask, so its colour comes from the tokens rather than from the image. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-left: 10px;
  cursor: pointer;
  background-color: var(--ai-text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  transition: background-color .15s ease;
}
input[type="search"]::-webkit-search-cancel-button:hover { background-color: var(--ai-navy); }