/* GENERATED FILE -- do not edit.
   tools/gen_screens.py writes this from tools/screens/shell.css.
   Edit that source and re-run the generator. */

/* ===========================================================================
   In-phone app screens -- generated markup, hand-written CSS.
   Emitted verbatim by tools/gen_screens.py as public/css/screens-shell.css.
   Every selector here is prefixed .scr / .a- so nothing in it can reach the
   page around it.

   Two rules hold the whole file together:

   1. NO COLOUR LITERALS. Everything paints through the page's in-phone theme
      tokens -- --appbg --appcard --appink --appmut --appline --appacc
      --appfill --appaccsoft --appgrn --onacc -- with no fallbacks, because those tokens
      are guaranteed by the four theme blocks. The one exception is --warn,
      the alert red, which the design tokens define for both themes and which
      has no --app* equivalent; it is used in exactly three places (the
      "withdrawn" badge, its glyph, and the delete-account row).

   2. NO FIXED CANVAS. .scr is an inline-size container and every length is
      calc(n * var(--u)), where --u is a thousandth-ish of the screen's own
      width -- 1u == 1px at the reference's 300px phone. So a screen fills
      whatever box the page hands it, at any size, with no scale transform
      and no second set of numbers. The n values below are the reference's
      own pixel values, unchanged, which is what makes them checkable.
   =========================================================================== */

.scr {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--appbg);
  color: var(--appink);
  font-family: Barlow, system-ui, sans-serif;
  container-type: inline-size;
}

.scr-in {
  --u: 1px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

@supports (container-type: inline-size) {
  .scr-in { --u: 0.3333cqw; }
}

.scr p { margin: 0; }

/* .scr-acasa .scr-cautare .scr-fisa .scr-jurnal .scr-calculator .scr-setari are
   deliberately unstyled. They are identity hooks: the page's fan/journey code
   and any per-screen entrance animation address a screen through them, and
   nothing here should depend on which screen it is. */

/* --------------------------------------------------------------- glyphs */
.a-ico {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  flex: none;
}

/* solid glyphs carry fill="currentColor"; make sure no stroke rides along */
.a-ico.is-fill { stroke: none; }

.a-mark {
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  flex: none;
}

.a-mark-ring { fill: var(--appacc); }
.a-mark-stem,
.a-mark-leaf { fill: var(--appgrn); }
.a-mark-leaf.is-light { opacity: 0.72; }

/* --------------------------------------------------------------- status bar */
.a-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(11 * var(--u)) calc(18 * var(--u)) calc(6 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 600;
  line-height: 1;
  color: var(--appink);
}

.a-status-t { font-variant-numeric: tabular-nums; }

.a-status-i {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
}

.a-status .a-ico {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
}

.a-status .a-ico-bat {
  width: calc(14 * var(--u));
  height: calc(8 * var(--u));
}

/* --------------------------------------------------------------- app bar */
.a-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.a-bar {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(6 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u));
}

.a-bar-t {
  flex: 1;
  font-family: 'Barlow Condensed', Barlow, system-ui, sans-serif;
  font-size: calc(17 * var(--u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--appink);
}

.a-bar.is-brand {
  padding-bottom: calc(10 * var(--u));
}

.a-bar.is-brand .a-bar-t {
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--appacc);
}

.a-bar.is-detail {
  padding-right: calc(16 * var(--u));
  padding-left: calc(16 * var(--u));
  padding-bottom: calc(12 * var(--u));
}

.a-bar.is-detail .a-bar-t {
  font-size: calc(16 * var(--u));
}

.a-ico-lead { color: var(--appink); }
.a-ico-trail {
  color: var(--appmut);
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
}

/* --------------------------------------------------------------- scroll body */
.a-scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 calc(14 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}

.a-scroll.is-tight { gap: calc(8 * var(--u)); }

.a-card {
  padding: calc(13 * var(--u));
  background: var(--appcard);
  border: var(--u) solid var(--appline);
}

/* micro labels and values shared by every card */
.a-lbl {
  font-size: calc(10 * var(--u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--appmut);
}

.a-val {
  margin-top: calc(4 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 500;
  line-height: 1;
  color: var(--appink);
}

.a-gap { height: calc(12 * var(--u)); }

.a-sect {
  margin-top: calc(4 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--appmut);
}

.a-mut {
  font-size: calc(11 * var(--u));
  font-weight: 400;
  line-height: 1.3;
  color: var(--appmut);
}

/* --------------------------------------------------------------- tab bar */
.a-tabs {
  display: flex;
  border-top: var(--u) solid var(--appline);
  background: var(--appcard);
  padding: calc(8 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u));
}

.a-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--u));
  color: var(--appmut);
}

.a-tab.is-on { color: var(--appacc); }

.a-tab-l {
  font-size: calc(10 * var(--u));
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.a-tab.is-on .a-tab-l { font-weight: 500; }