/* AryaNote design system.
   Tokens first, then base elements, then the small set of component classes.

   Note on strategy: this file cannot restyle the existing markup on its own.
   The three .dc.html files carry ~760 inline style attributes, and an inline
   style beats any external rule. So the tokens below are the source of truth
   for new work, and the inline values are being migrated onto them. Anything
   still hardcoded is simply not yet converted. */

:root {
  /* ---- brand ------------------------------------------------------ */
  --ar-brand:        #0073EA;
  --ar-brand-strong: #0060B9;
  --ar-brand-soft:   #CCE5FF;

  /* ---- status / project accents ----------------------------------- */
  --ar-purple: #A25DDC;
  --ar-green:  #00C875;
  --ar-orange: #FDAB3D;
  --ar-red:    #E2445C;
  --ar-teal:   #00D2D2;
  --ar-pink:   #FF158A;
  --ar-navy:   #401694;

  /* Project colour ramp. Ordered so adjacent projects stay separable,
     including for the most common forms of colour blindness. */
  --ar-p1: #0073EA;
  --ar-p2: #FDAB3D;
  --ar-p3: #A25DDC;
  --ar-p4: #00C875;
  --ar-p5: #E2445C;
  --ar-p6: #00D2D2;
  --ar-p7: #FF158A;
  --ar-p8: #7F5347;

  /* ---- surfaces --------------------------------------------------- */
  /* The page sits a shade below the cards on purpose. At #F6F7FB a white
     card floated on a background almost its own colour and the only thing
     separating the two was a hairline; the boxes read as bland because
     they were barely there. Dropping the page to #EDF0F8 gives every
     surface above it something to stand on. */
  --ar-bg:       #EDF0F8;
  --ar-surface:  #FFFFFF;
  --ar-raised:   #FFFFFF;
  --ar-sunken:   #E4E9F4;
  --ar-border:   #CFD7E8;
  --ar-border-strong: #97A3C0;

  /* ---- the InfraBid graphic language, carried into the app ---------
     Marketing already spoke orange, navy and cream. The workspace spoke
     white and grey. They are one product, so these are now shared. */
  --ar-accent:      #F0913C;
  --ar-accent-deep: #B96712;
  --ar-accent-soft: #FCEEDC;
  --ar-deep:        #16233D;
  --ar-deep-2:      #0F1A30;
  --ar-cream:       #FDF6EA;
  --ar-cream-bd:    #EADCC0;

  /* ---- the card ----------------------------------------------------
     One shape for the whole product. The cut corner and the rail are what
     make it recognisable; see the surfaces section for why. */
  --ar-card-bd:     #C9D3E8;
  --ar-card-bd-hi:  #93A3C6;
  --ar-card-r:      18px;
  --ar-card-cut:    5px;
  --ar-card-rail:   3px;
  --ar-card-shadow:      0 1px 1px rgba(22, 35, 61, .05), 0 12px 26px -20px rgba(22, 35, 61, .58);
  --ar-card-shadow-lift: 0 2px 3px rgba(22, 35, 61, .07), 0 26px 46px -26px rgba(22, 35, 61, .66);

  /* ---- ink -------------------------------------------------------- */
  --ar-ink:      #21232D;
  --ar-ink-mid:  #4B4E69;
  --ar-ink-soft: #676879;
  --ar-on-brand: #FFFFFF;

  /* ---- type scale -------------------------------------------------
     Floor is 13px. Anything smaller is not a design choice, it is an
     accessibility problem, and this product is read for hours at a time. */
  --ar-text-xs:   13px;
  --ar-text-sm:   15px;
  --ar-text-base: 17px;
  --ar-text-lg:   19px;
  --ar-text-xl:   22px;
  --ar-text-2xl:  27px;
  --ar-text-3xl:  36px;
  --ar-text-4xl:  46px;
  --ar-text-5xl:  58px;

  --ar-leading-tight: 1.18;
  --ar-leading-body:  1.6;

  /* ---- geometry --------------------------------------------------- */
  --ar-radius-sm:  6px;
  --ar-radius:     10px;
  --ar-radius-lg:  16px;
  --ar-radius-pill: 999px;

  /* ---- elevation -------------------------------------------------- */
  --ar-shadow-sm: 0 1px 2px rgba(33,35,45,.08);
  --ar-shadow:    0 4px 14px rgba(33,35,45,.10);
  --ar-shadow-lg: 0 18px 44px rgba(33,35,45,.16);

  /* ---- motion ----------------------------------------------------- */
  --ar-ease: cubic-bezier(.2, .7, .3, 1);
  --ar-fast: 120ms;
  --ar-slow: 320ms;

  /* Minimum comfortable hit target. */
  --ar-tap: 44px;
}

/* ---------------------------------------------------------------- base */

body {
  font-size: var(--ar-text-base);
  line-height: var(--ar-leading-body);
  color: var(--ar-ink);
}

/* -------------------------------------------------------- components */

.ar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--ar-tap);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--ar-radius-sm);
  background: var(--ar-brand);
  color: var(--ar-on-brand);
  font-size: var(--ar-text-base);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--ar-fast) var(--ar-ease),
              box-shadow var(--ar-fast) var(--ar-ease),
              transform var(--ar-fast) var(--ar-ease);
}
.ar-btn:hover  { background: var(--ar-brand-strong); box-shadow: var(--ar-shadow); }
.ar-btn:active { transform: translateY(1px); }

.ar-btn--secondary {
  background: var(--ar-surface);
  color: var(--ar-ink);
  border-color: var(--ar-border-strong);
}
.ar-btn--secondary:hover { background: var(--ar-sunken); }

.ar-btn--ghost { background: transparent; color: var(--ar-brand); }
.ar-btn--ghost:hover { background: var(--ar-brand-soft); box-shadow: none; }

.ar-btn--danger { background: var(--ar-red); }
.ar-btn--danger:hover { background: #C2334A; }

/* ------------------------------------------------------------ surfaces
   Every box in this product used to be the same thing: a white rectangle,
   a 10px radius, a hairline border the same value as the page behind it,
   and a shadow set so low it may as well not have been there. Legible.
   Characterless.

   One card shape now carries the lot, and three things give it a face.
   A rail runs across the top in the accent colour, orange by default and
   the programme's own colour wherever a card belongs to one, so a wall of
   cards reads as a set rather than a grid of boxes. The bottom-left corner
   is cut back to 5px against 18px on the other three, which is the detail
   that makes the silhouette recognisable at a glance and costs nothing in
   the content area. The edge is a real border sitting over a layered
   shadow, dark enough to hold against the page.

   Set --ar-card-accent on any card to recolour its rail. */

.ar-card {
  position: relative;
  box-sizing: border-box;
  background: var(--ar-surface);
  border: 1px solid var(--ar-card-bd);
  border-radius: var(--ar-card-r) var(--ar-card-r) var(--ar-card-r) var(--ar-card-cut);
  box-shadow: var(--ar-card-shadow);
  transition: border-color var(--ar-fast) var(--ar-ease),
              box-shadow var(--ar-fast) var(--ar-ease),
              transform var(--ar-fast) var(--ar-ease);
}

/* The rail. Solid for the first 64px, then the same hue at a tenth of the
   weight for the rest of the width: a full-strength bar edge to edge shouts,
   and a 64px stub on its own looks like something failed to load. Pulled out
   by 1px on three sides so it caps the border rather than sitting inside it. */
.ar-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: var(--ar-card-rail);
  border-radius: var(--ar-card-r) var(--ar-card-r) 0 0;
  background-color: rgba(22, 35, 61, .11);
  background-image: linear-gradient(90deg,
    var(--ar-card-accent, var(--ar-accent)) 0 64px, transparent 64px);
  pointer-events: none;
}

/* Padding, so a card does not have to carry its own. */
.ar-card--pad    { padding: 20px 22px }
.ar-card--pad-sm { padding: 15px 16px }
.ar-card--pad-lg { padding: 26px 28px }

/* Anything you can click. The lift is small on purpose: the shadow does
   most of the talking, and a card that jumps is a card that distracts. */
.ar-card--lift { cursor: pointer }
.ar-card--lift:hover,
.ar-card--lift:focus-visible {
  transform: translateY(-3px);
  border-color: var(--ar-card-bd-hi);
  box-shadow: var(--ar-card-shadow-lift);
}
.ar-card--lift:active { transform: translateY(-1px) }

/* Surfaces other than white. Cream is the invitation - the boxes that ask
   you to start something. Deep is the one that answers back. */
.ar-card--cream {
  background: var(--ar-cream);
  border-color: var(--ar-cream-bd);
}
.ar-card--deep {
  background: var(--ar-deep);
  border-color: var(--ar-deep-2);
  color: #E7ECF6;
}
.ar-card--deep::before { background-color: rgba(255, 255, 255, .16) }

/* No rail, for the cards where it would be noise rather than signal: a
   dense list of small tiles, or a box nested inside another card. */
.ar-card--plain::before { display: none }

/* Flat: keeps the shape and the border, drops the elevation. For boxes
   that sit inside a card that is already lifted. */
.ar-card--flat { box-shadow: none }

/* An accent micro-label: the caption that opens a card. Shared in spirit
   with the marketing tiles' .ar-iblabel, one size up, because in the app it
   is read rather than glanced at. Named .ar-cap because .ar-eyebrow is
   already taken by the marketing hero's pill, which is a different thing. */
.ar-cap {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ar-accent-deep);
  margin: 0 0 8px;
}
.ar-card--deep .ar-cap { color: var(--ar-accent) }

/* The short orange rule that opens every page header. It was written out
   inline on five separate headers; it is one class now. */
.ar-rule {
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--ar-accent);
  margin-bottom: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .ar-card,
  .ar-card--lift:hover,
  .ar-card--lift:focus-visible,
  .ar-card--lift:active { transition: none; transform: none }
}

/* ---- page header band -----------------------------------------------
   Every view opens on one of these: an orange rule, a 40px title, a line
   of standfirst. It was a flat white slab closed by a hairline the same
   value as the page. Now it warms towards cream at the bottom and closes
   on a border you can actually see, so the header reads as a masthead
   rather than as the first inch of the scroll. */
.ar-pagehead {
  position: relative;
  overflow: hidden;
  background: linear-gradient(176deg, #FFFFFF 0%, #FFFFFF 58%, #FCF8F1 100%);
  border-bottom: 1px solid var(--ar-card-bd);
}

/* ---- a stack of rows inside a card ----------------------------------
   Lists used to be rows on the page with a rule under each, which is why
   a to-do list looked like a spreadsheet. The stack is a card now and the
   rules are internal, so the list has edges. */
.ar-rows {
  overflow: hidden;
}
.ar-rows > *:last-child { border-bottom: 0 !important }

/* ---- the month grid --------------------------------------------------
   Day names sit on navy. It is the one piece of real colour on the view
   and it does the work a grey strip was failing to do: it tells you where
   the grid starts. */
.ar-cal { overflow: hidden }
.ar-cal__dows {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--ar-deep);
}
.ar-cal__dow {
  padding: 10px 11px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C3CFE6;
  border-right: 1px solid rgba(255, 255, 255, .09);
}
.ar-cal__dow:last-child { border-right: 0 }

.ar-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.ar-cal__day {
  min-height: 112px;
  padding: 8px 9px;
  box-sizing: border-box;
  border-right: 1px solid #DCE2F0;
  border-bottom: 1px solid #DCE2F0;
  background: var(--ar-surface);
  cursor: pointer;
  overflow: hidden;
  transition: background var(--ar-fast) var(--ar-ease);
}
.ar-cal__day:nth-child(7n) { border-right: 0 }
/* six rows of seven: the last seven cells close the card themselves */
.ar-cal__day:nth-last-child(-n+7) { border-bottom: 0 }
.ar-cal__day:hover { background: #F4F8FF }
.ar-cal__day--wknd { background: #F5F8FD }
.ar-cal__day--out  { background: #E7ECF6 }
.ar-cal__day--today { background: #FFF7EE; box-shadow: inset 0 0 0 2px var(--ar-accent) }

.ar-cal__num {
  font-size: 12px;
  font-weight: 700;
  color: #5B6684;
}
.ar-cal__day--out .ar-cal__num { color: #A6B1C9 }
.ar-cal__num--today {
  background: var(--ar-deep);
  color: #FFFFFF;
  border-radius: var(--ar-radius-pill);
  padding: 2px 8px;
  display: inline-block;
}
.ar-cal__chips {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 5px;
}
.ar-cal__more {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ar-accent-deep);
  padding: 1px 4px;
}
.ar-cal-legend__cap {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ar-accent-deep);
}

@media (max-width: 980px) {
  .ar-cal__day { min-height: 88px }
  .ar-cal__dow { padding: 8px 7px; font-size: 10.5px; letter-spacing: .06em }
}

/* Legend swatch, shared by the calendar and the scheduler. */
.ar-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
}

/* --------------------------------------------------------- a11y */

/* The previous build had no visible focus ring anywhere, which makes the
   app unusable by keyboard. This is deliberately loud. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ar-brand);
  outline-offset: 2px;
  border-radius: var(--ar-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------- live board band
   The animated marketing band. Everything here is CSS-driven: the page
   uses a component runtime, and keyframes stay smooth without touching it.
   All motion is switched off by the reduced-motion block above. */

.ar-meter {
  height: 7px;
  border-radius: var(--ar-radius-pill);
  background: var(--ar-sunken);
  overflow: hidden;
}
.ar-meter > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ar-p1);
  transform-origin: left center;
  animation: ar-fill 2.6s var(--ar-ease) infinite alternate;
}

.ar-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--ar-radius-pill);
  font-size: var(--ar-text-xs);
  font-weight: 600;
  color: #fff;
  background: var(--ar-p1);
}

.ar-pulse { animation: ar-pulse 2.4s ease-in-out infinite }

@keyframes ar-rise {
  from { opacity: 0; transform: translateY(10px) }
  to   { opacity: 1; transform: none }
}
@keyframes ar-fill {
  from { transform: scaleX(.18) }
  to   { transform: scaleX(1) }
}
/* A lift-and-settle, as if the card were picked up and put back. An earlier
   version translated it far enough to leave the column entirely and sit over
   the heading, which just looked broken. */
@keyframes ar-pulse {
  0%, 100% { opacity: 1 }
  50%      { opacity: .55 }
}

@media (max-width: 860px) {
  .ar-board { grid-template-columns: 1fr }
}

/* Two-up marketing split. Lives here rather than inline because an inline
   style cannot carry a media query, which is why the older bands on this
   page still squeeze rather than stack on a narrow screen. */
.ar-split {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 56px;
  align-items: center;
}
@media (max-width: 1080px) {
  .ar-split { grid-template-columns: 1fr; gap: 36px }
}

/* ---------------------------------------------------- scheduler ribbon
   Word-style: tools grouped under captions, each with an icon above its
   label, rather than one undifferentiated strip of arrows and abbreviations. */

.ar-ribbon {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  background: var(--ar-surface);
  border-bottom: 1px solid var(--ar-border);
  padding: 3px 10px 0;
  flex: 0 0 auto;
  /* Deliberately NOT overflow:auto. Setting overflow on one axis forces the
     other to compute to auto as well, which turns the ribbon into a clipping
     container and swallows the hover explanations. Groups wrap instead. */
  overflow: visible;
}

.ar-rgroup {
  display: flex;
  flex-direction: column;
  padding: 0 9px;
  border-right: 1px solid var(--ar-border);
}
.ar-rgroup:last-child { border-right: none }

.ar-rgroup__row { display: flex; gap: 2px }

.ar-rgroup__cap {
  text-align: center;
  font-size: 11px;
  color: var(--ar-ink-soft);
  padding: 3px 0 4px;
  white-space: nowrap;
}

.ar-rbtn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 60px;
  min-height: 54px;
  padding: 28px 8px 6px;
  border: 1px solid transparent;
  border-radius: var(--ar-radius-sm);
  background-color: transparent;
  font-size: 12px;
  line-height: 1.2;
  color: var(--ar-ink-mid);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--ar-fast) var(--ar-ease),
              border-color var(--ar-fast) var(--ar-ease);
}
.ar-rbtn:hover {
  background-color: var(--ar-brand-soft);
  border-color: var(--ar-brand);
  color: var(--ar-ink);
}
.ar-rbtn:active { transform: translateY(1px) }

/* The richer hover explanation. Native title= is kept as the fallback for
   touch and for anyone whose browser suppresses this. */
.ar-rbtn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  z-index: 40;
  width: max-content;
  max-width: 260px;
  white-space: normal;
  text-align: left;
  padding: 9px 11px;
  border-radius: var(--ar-radius-sm);
  background: var(--ar-ink);
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: var(--ar-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ar-fast) var(--ar-ease),
              transform var(--ar-fast) var(--ar-ease);
}
.ar-rbtn[data-tip]:hover::after,
.ar-rbtn[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ------------------------------------------------------------- hero
   Light and colour-led rather than a dark photograph. The product is the
   hero: the board sits above the fold so the first thing anyone sees is
   what the thing actually does. The dashboard's own hero is .ar-mast,
   further down this file. */

.ar-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--ar-radius-pill);
  background: var(--ar-surface);
  border: 1px solid var(--ar-border);
  box-shadow: var(--ar-shadow-sm);
  font-size: var(--ar-text-sm);
  color: var(--ar-ink-mid);
}

/* Claims that are true and checkable, rather than invented social proof. */
.ar-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 20px;
  font-size: var(--ar-text-sm);
  color: var(--ar-ink-soft);
}
.ar-trust > span { display: inline-flex; align-items: center; gap: 7px }



/* ------------------------------------------------------ marketing widgets */

.ar-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  max-width: 1300px;
  margin: 0 auto;
}

.ar-metric {
  background: var(--ar-surface);
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius);
  padding: 20px 22px;
  box-shadow: var(--ar-shadow-sm);
  border-top: 4px solid #F0913C;
  transition: transform var(--ar-fast) var(--ar-ease),
              box-shadow var(--ar-fast) var(--ar-ease);
}
.ar-metric:hover { transform: translateY(-3px); box-shadow: var(--ar-shadow) }

.ar-metric__n {
  font-family: 'Century Gothic', Jost, 'URW Gothic', Futura, 'Trebuchet MS', sans-serif;
  font-size: var(--ar-text-3xl);
  line-height: 1;
  color: var(--ar-ink);
}
.ar-metric__l { font-size: var(--ar-text-sm); color: var(--ar-ink-soft); margin-top: 7px }

/* Side-by-side comparison. Deliberately factual: what the thing does and
   does not do, not a scoreboard against a named competitor. */
.ar-vs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  max-width: 1300px;
  margin: 0 auto;
}
/* The two-column comparison. The left column is the status quo and the
   right one is us, so they should not be the same object: one is a plain
   card, the other is the navy panel it is being compared against. */
.ar-vs__col {
  position: relative;
  border-radius: var(--ar-card-r) var(--ar-card-r) var(--ar-card-r) var(--ar-card-cut);
  padding: 24px 26px;
  border: 1px solid var(--ar-card-bd);
  background: var(--ar-surface);
  box-shadow: var(--ar-card-shadow);
}
.ar-vs__col--ours {
  background: var(--ar-deep);
  border-color: var(--ar-deep-2);
  color: #E4E9F2;
  box-shadow: var(--ar-card-shadow-lift);
}
.ar-vs__col--ours .ar-vs__h { color: var(--ar-accent) }
.ar-vs__h { font-size: var(--ar-text-lg); font-weight: 600; margin-bottom: 14px }
.ar-vs__li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0; font-size: var(--ar-text-sm); color: var(--ar-ink-mid);
  border-top: 1px solid var(--ar-border);
}
.ar-vs__li:first-of-type { border-top: none }
.ar-vs__mark { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff }

/* ------------------------------------------------- what / does / why
   The three questions a stranger has in the first ten seconds, answered
   above the fold-and-a-bit. Deliberately one short headline and one
   sentence each - the moment these grow into paragraphs they stop being
   read at all. */

.ar-three {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
  max-width: 1300px;
  margin: 0 auto;
}

.ar-q {
  position: relative;
  padding: 26px 26px 28px;
  border-radius: var(--ar-radius);
  background: var(--ar-surface);
  border: 1px solid var(--ar-border);
  box-shadow: var(--ar-shadow-sm);
  overflow: hidden;
  transition: transform var(--ar-fast) var(--ar-ease),
              box-shadow var(--ar-fast) var(--ar-ease);
}
.ar-q:hover { transform: translateY(-4px); box-shadow: var(--ar-shadow) }

/* Colour bar keyed to each question, so the three read as a set. */
.ar-q::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--ar-q-colour, #F0913C);
}

.ar-q__k {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--ar-text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ar-q-kicker, #676879);
  margin-bottom: 12px;
}

.ar-q__h {
  font-family: 'Century Gothic', Jost, 'URW Gothic', Futura, 'Trebuchet MS', sans-serif;
  font-size: var(--ar-text-xl);
  line-height: 1.2;
  letter-spacing: -.008em;
  color: var(--ar-ink);
  margin: 0 0 10px;
  text-wrap: balance;
}

.ar-q__p {
  font-size: var(--ar-text-sm);
  line-height: 1.55;
  color: var(--ar-ink-mid);
  margin: 0;
  text-wrap: pretty;
}

/* ============================================================ mobile
   The markup carries ~760 inline style attributes and an inline style beats
   any normal rule, so this layer reaches them with attribute selectors and
   !important. That is ugly, and it is the only thing that works short of
   rewriting every band as a class. New markup should use .ar-split and friends
   instead of inline grids, and then none of this applies to it. */

@media (max-width: 760px) {



  /* 3. Decorative absolutes must not widen the document. The gradient circles
        are ornament; the floating mock cards would land on top of real text. */
  [style*="border-radius: 50%"][style*="position: absolute"],
  [style*="border-radius:50%"][style*="position:absolute"],
  [style*="animation: ar-float"], [style*="animation:ar-float"] {
    display: none !important;
  }


  /* 5. Headlines set for a 1400px canvas. */
  h1 { font-size: 34px !important; line-height: 1.12 !important }
  h2 { font-size: 26px !important; line-height: 1.18 !important }


  /* 7. Full-width actions, so a thumb cannot miss. */
  .ar-btn { width: 100% }
}

/* ---- mobile: chrome that was eating the screen -------------------------
   Measured on a 375px viewport: the nav stood 143px tall before any content,
   and the consent banner covered the hero entirely. Both are fixed or sticky,
   so neither shows up as document overflow - they just take the screen. */

@media (max-width: 760px) {

  /* Header: tighter gaps and padding, and the link row is allowed to wrap
     without pushing the bar to three lines. */
  [style*="z-index: 30"][style*="position: sticky"],
  [style*="z-index:30"][style*="position:sticky"] {
    gap: 12px !important;
    padding: 8px 16px !important;
    font-size: 15px !important;
  }

  /* Consent notice: it has to stay reachable and readable, but it must not
     own the whole viewport. Capped and scrollable instead. */
  [style*="z-index: 200"][style*="position: fixed"],
  [style*="z-index:200"][style*="position:fixed"] {
    max-height: 62vh !important;
    overflow-y: auto !important;
    padding: 18px 18px 20px !important;
  }
  [style*="z-index: 200"][style*="position: fixed"] h2,
  [style*="z-index:200"][style*="position:fixed"] h2 {
    font-size: 20px !important;
  }
  [style*="z-index: 200"][style*="position: fixed"] p,
  [style*="z-index:200"][style*="position:fixed"] p {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
  }
}

/* The header needs 560px to sit on one line, so on a phone it wrapped to
   three rows and stood 135px tall before any content. Reordered into two:
   identity and the actions on top, the section links beneath. */
@media (max-width: 760px) {
  [style*="z-index: 30"][style*="position: sticky"],
  [style*="z-index:30"][style*="position:sticky"] {
    min-height: 0 !important;
    row-gap: 8px !important;
  }
  /* 1 logo · 2 section links · 3 spacer · 4 sign in · 5 request access */
  [style*="z-index: 30"][style*="position: sticky"] > :nth-child(1) { order: 1 }
  [style*="z-index: 30"][style*="position: sticky"] > :nth-child(3) { display: none !important }
  [style*="z-index: 30"][style*="position: sticky"] > :nth-child(4) { order: 2; margin-left: auto }
  [style*="z-index: 30"][style*="position: sticky"] > :nth-child(5) { order: 3 }
  [style*="z-index: 30"][style*="position: sticky"] > :nth-child(2) {
    order: 4;
    flex-basis: 100%;
    overflow-x: auto;
    gap: 18px !important;
  }
}

/* ---- mobile: the workspace ---------------------------------------------
   The portal is a fixed 224px sidebar beside the content, which leaves about
   150px for the actual workspace on a phone. On mobile the sidebar becomes a
   horizontal strip along the top and the content takes the full width. */

@media (max-width: 760px) {

  /* the app shell stops being a row */
  [style*="display: flex"][style*="height: 100vh"],
  [style*="display:flex"][style*="height:100vh"] {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh;
  }

  /* sidebar -> top strip, scrolling sideways if the nav is long */
  [style*="flex: 0 0 224px"], [style*="flex:0 0 224px"] {
    flex: 0 0 auto !important;
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow-x: auto !important;
    gap: 4px !important;
    padding: 8px 12px !important;
  }
  /* its inner groups sit inline rather than stacked */
  [style*="flex: 0 0 224px"] > div, [style*="flex:0 0 224px"] > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  [style*="flex: 0 0 224px"] button, [style*="flex:0 0 224px"] button {
    white-space: nowrap !important;
  }

  /* the scheduler grid and the notes three-pane are genuinely wide; let them
     scroll inside themselves rather than stretching the page */
  .aw { overflow-x: auto }
}

/* Four hero stats across a 375px screen gives each about 80px, which wraps
   "On the critical path" onto three lines. Two by two instead. */
@media (max-width: 760px) {
  [style*="flex: 1 1 0"][style*="padding: 0px 22px"],
  [style*="flex:1 1 0"][style*="padding:0 22px"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 14px 20px !important;
    border-left: none !important;
  }
  [style*="flex: 1 1 0"][style*="padding: 0px 22px 34px 0px"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 14px 20px !important;
  }
}

/* ==================================================== app shell
   The workspace is reached through a browser but should behave like an app:
   thumb-sized targets, one obvious primary action per screen, and navigation
   that sits where a thumb already is. */

/* Anything actionable clears the 44px minimum, everywhere. */
.arya-app button,
.arya-app a[href],
.arya-app select,
.arya-app input:not([type="checkbox"]):not([type="radio"]) {
  min-height: 44px;
}
/* Except things that are deliberately small and inline: the block ribbon,
   table cells, and the tiny row controls inside lists. */
.arya-app .ar-rbtn,
.arya-app .ar-nav button,
.arya-app .ar-cal__chips button,
.arya-app .ar-swatchrow button,
.arya-app [style*="display: table-cell"] input,
.arya-app [style*="table-cell"] input { min-height: 0 }

@media (max-width: 760px) {

  /* ---- bottom tab bar ------------------------------------------------
     The nav group leaves the sidebar and becomes a fixed bar along the
     bottom, which is the one place a thumb reaches without regripping. */
  .ar-nav {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    flex-direction: row !important;
    justify-content: space-around;
    gap: 0 !important;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    background: #21232D;
    border-top: 1px solid #2B2D3C;
    box-shadow: 0 -8px 24px rgba(0,0,0,.28);
  }
  .ar-nav button {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-height: 56px !important;
    padding: 6px 2px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    position: relative;
  }
  /* the label is the second span; the flexible spacer is the third */
  .ar-nav button > span:nth-child(2) {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .ar-nav button > span:nth-child(3) { display: none !important }
  /* count becomes a badge pinned to the icon */
  .ar-nav button > span:nth-child(4) {
    position: absolute; top: 2px; left: 50%; margin-left: 4px;
  }

  /* content must not hide behind the bar */
  .arya-app { padding-bottom: 78px }

  /* the rest of the old sidebar - logo, schedules list, account footer -
     is chrome that a phone does not need taking vertical space. */
  /* Keep the brand bar - it is the way home - and drop the rest of the
     sidebar chrome, which a phone does not need taking vertical space. */
  .ar-shell-aside > :not(.ar-nav):not(.ar-brandbar):not(.ar-backbtn) { display: none !important }
  .ar-shell-aside {
    position: static !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  /* ---- one obvious action ------------------------------------------- */
  .arya-app .ar-btn { width: 100%; min-height: 52px; font-size: 17px }
}

/* The hero stat row is a plain flex row of four. Targeting the row and letting
   it wrap is more robust than matching each cell's inline padding, which
   changes whenever the stats are restyled. */
@media (max-width: 760px) {
  .arya-app [style*="margin-top: 34px"][style*="display: flex"] {
    flex-wrap: wrap !important;
    row-gap: 4px;
  }
  .arya-app [style*="margin-top: 34px"][style*="display: flex"] > div {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 12px 18px 0 !important;
    border-left: none !important;
  }
}

/* ---- brand bar ---------------------------------------------------------
   The logo is a control, not decoration: it goes home from anywhere. On a
   phone it becomes the top app bar, because the sidebar it used to live in
   is gone and there would otherwise be no way back. */
.ar-brandbar { border-radius: 10px }
.ar-brandbar:hover { background: rgba(255,255,255,.06) }

@media (max-width: 760px) {
  .ar-brandbar {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 60;
    width: auto !important;
    min-height: 54px;
    padding: 0 16px !important;
    background: #21232D !important;
    border-bottom: 1px solid #2B2D3C;
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
  /* content clears the bar top and bottom */
  .arya-app { padding-top: 54px }
}

/* ==================================================== mobile first
   The base rules below ARE the phone layout. Desktop is the enhancement,
   added at min-width, which is the opposite of how this file started.

   The trick that makes it possible without rewriting 780 inline styles:
   each band keeps its desktop measurements inline, but as CUSTOM PROPERTIES
   (--ar-cols, --ar-band-pad, --ar-w). A custom property is not a layout
   declaration, so it no longer beats these rules - it just supplies a value
   for the desktop branch to use. One narrow, mechanical change per band. */

/* ---- band: a full-width section ---- */
.ar-band {
  padding: 40px 20px;
}

/* ---- two-column split ---- */
.ar-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

/* ---- anything that was given a fixed pixel width ---- */
.ar-fluid {
  width: 100%;
  max-width: var(--ar-w, 100%);
}

@media (min-width: 761px) {
  .ar-band  { padding: var(--ar-band-pad, 84px 56px) }
  .ar-2col  { grid-template-columns: var(--ar-cols, 1fr 1fr); gap: var(--ar-col-gap, 40px) }
  .ar-fluid { width: var(--ar-w, auto); max-width: none }
}

/* ---- phone navigation stack -------------------------------------------
   The notes view is three panes on a desktop and three screens on a phone.
   Which screen is showing is component state, not a breakpoint, because a
   breakpoint cannot express "the user tapped into this notebook". */

.ar-backbtn { display: none }

@media (max-width: 760px) {
  .ar-backbtn {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 8px;
    z-index: 61;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 54px;
    padding: 0 10px;
    background: none;
    border: none;
    color: #FFFFFF;
    font: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }
  /* the brand shifts right to make room, and stops being the whole bar */
  .ar-backbtn ~ .ar-brandbar { padding-left: 56px !important }

  /* a pane that is on screen is the whole screen */
  .ar-pane {
    border-right: none !important;
    position: static !important;
  }
}


/* ================================================================
   InfraBid graphic language - orange band, cream mini-cards, icon
   chips and the navy panel. Marketing surfaces only; the palette is
   deliberately three families: orange, navy, grey.
   ================================================================ */

/* ---- AryaNote / InfraBid-style section band ------------------------- */

.ar-ibband {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  background: #F0913C;
  border-radius: 26px;
  padding: 44px 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  font-family: 'Century Gothic', Jost, 'URW Gothic', Futura, 'Trebuchet MS', sans-serif;
}

/* Line-work motif layer (inline SVG) */
.ar-ibband__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Left title block */
.ar-ibband__copy {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
}

.ar-ibband__title {
  margin: 0 0 10px;
  font-size: 44px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #16233D;
}

.ar-ibband__caption {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #16233D;
  opacity: 0.86;
  max-width: 46ch;
}

/* Right slot: a cream mini-card is dropped in here */
.ar-ibband__slot {
  position: relative;
  z-index: 1;
  flex: none;
  align-self: center;
  margin-left: auto;
}

/* ---- Modifiers ------------------------------------------------------ */

.ar-ibband--hero {
  padding-top: 64px;
  padding-bottom: 64px;
}
.ar-ibband--hero .ar-ibband__title {
  font-size: 54px;
}

.ar-ibband--slim {
  padding: 28px 32px;
}
.ar-ibband--slim .ar-ibband__title {
  font-size: 26px;
  margin-bottom: 6px;
}

/* ---- Responsive ----------------------------------------------------- */

@media (max-width: 900px) {
  .ar-ibband {
    flex-wrap: wrap;
    padding: 36px 28px;
    gap: 28px;
  }
  .ar-ibband--hero {
    padding-top: 44px;
    padding-bottom: 44px;
  }
  .ar-ibband--slim {
    padding: 22px 24px;
    gap: 18px;
  }
  .ar-ibband__copy {
    flex: 1 1 100%;
  }
  .ar-ibband__title {
    font-size: 32px;
  }
  .ar-ibband--hero .ar-ibband__title {
    font-size: 38px;
  }
  .ar-ibband--slim .ar-ibband__title {
    font-size: 23px;
  }
  .ar-ibband__slot {
    margin-left: 0;
  }
}

/* ============================================================
   AryaNote x InfraBid-Pro graphic language - mini-UI tile kit
   All colour literals from the approved AryaNote palette.
   Shadows are palette navy #16233D / #0F1A30 at low alpha.
   ============================================================ */

/* ---- cream carrier card ---- */
.ar-ibcard {
  display: flex;
  gap: 8px;
  width: max-content;
  padding: 10px;
  box-sizing: border-box;
  background: #FDF6EA;
  border: 1px solid #EFE3CC;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(22, 35, 61, 0.08);
}

/* ---- base tile ---- */
.ar-ibtile {
  position: relative;
  flex: none;
  width: 132px;
  height: 96px;
  padding: 9px 10px;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Century Gothic', Jost, 'URW Gothic', Futura, 'Trebuchet MS', sans-serif;
  line-height: 1;
}
.ar-ibtile--navy {
  background: #16233D;
}
.ar-ibtile--white {
  background: #FFFFFF;
  border: 1px solid #E9ECF3;
}

/* ---- micro-label ---- */
.ar-iblabel {
  display: block;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0 0 4px;
}
.ar-ibtile--navy .ar-iblabel {
  color: #F0913C;
}
.ar-ibtile--white .ar-iblabel {
  color: #4B4E69;
}

/* ============ a. GAUGE (navy) ============ */
.ar-ibgauge-svg {
  display: block;
  width: 84px;
  height: auto;
  margin: 1px auto 0;
}
.ar-ibgauge-val {
  margin-top: 3px;
  text-align: center;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
  white-space: nowrap;
}

/* ============ b. BASELINE VS LIVE bars (white) ============ */
.ar-ibcmp-rows {
  margin-top: 2px;
}
.ar-ibcmp-row {
  margin-bottom: 3px;
}
.ar-ibcmp-base {
  height: 4px;
  border-radius: 2px;
  background: #737E96;
}
.ar-ibcmp-live {
  height: 4px;
  border-radius: 2px;
  background: #F0913C;
  margin-top: 1px;
}
.ar-ibcmp-row:nth-child(1) .ar-ibcmp-base { width: 70%; }
.ar-ibcmp-row:nth-child(1) .ar-ibcmp-live { width: 78%; margin-left: 6%; }
.ar-ibcmp-row:nth-child(2) .ar-ibcmp-base { width: 52%; }
.ar-ibcmp-row:nth-child(2) .ar-ibcmp-live { width: 44%; margin-left: 14%; }
.ar-ibcmp-row:nth-child(3) .ar-ibcmp-base { width: 84%; }
.ar-ibcmp-row:nth-child(3) .ar-ibcmp-live { width: 92%; margin-left: 3%; }
.ar-ibcmp-row:nth-child(4) .ar-ibcmp-base { width: 40%; }
.ar-ibcmp-row:nth-child(4) .ar-ibcmp-live { width: 56%; margin-left: 16%; }
.ar-ibcmp-legend {
  margin-top: 3px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #676879;
  white-space: nowrap;
}

/* ============ c. GANTT THUMB (white) ============ */
.ar-ibgantt-svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 2px;
}

/* ============ d. CALENDAR (navy) ============ */
.ar-ibcal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-top: 5px;
}
.ar-ibcal-c {
  height: 9px;
  border-radius: 2px;
  background: #22345A;
}
.ar-ibcal-c:nth-child(3),
.ar-ibcal-c:nth-child(11),
.ar-ibcal-c:nth-child(17) {
  background: #F0913C;
}
.ar-ibcal-c:nth-child(24) {
  background: #FFFFFF;
}
.ar-ibcal-dia {
  position: absolute;
  right: 11px;
  bottom: 7px;
  width: 6px;
  height: 6px;
  background: #F0913C;
  transform: rotate(45deg);
}

/* ============ e. CHECKLIST (white) ============ */
.ar-ibtodo-rows {
  margin-top: 1px;
}
.ar-ibtodo-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}
.ar-ibck {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  box-sizing: border-box;
}
.ar-ibck--done {
  background: #16233D;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ar-ibck--open {
  background: #FFFFFF;
  border: 1px solid #D0D4E4;
}
.ar-ibck-svg {
  display: block;
  width: 9px;
  height: 9px;
}
.ar-ibtodo-line {
  height: 5px;
  border-radius: 999px;
  background: #E9ECF3;
}
.ar-ibtodo-row:nth-child(1) .ar-ibtodo-line { width: 74%; }
.ar-ibtodo-row:nth-child(2) .ar-ibtodo-line { width: 56%; }
.ar-ibtodo-row:nth-child(3) .ar-ibtodo-line { width: 84%; background: #F0913C; }
.ar-ibtodo-row:nth-child(4) .ar-ibtodo-line { width: 46%; }

/* ============ g. PRINT SHEET (white, bonus) ============ */
.ar-ibsheet-rule {
  height: 2px;
  border-radius: 1px;
  background: #16233D;
  margin: 2px 0 7px;
}
.ar-ibsheet-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 7px;
}
.ar-ibsheet-tick {
  flex: none;
  width: 6px;
  height: 5px;
  border-radius: 1px;
  background: #16233D;
}
.ar-ibsheet-bar {
  height: 5px;
  border-radius: 2px;
}
.ar-ibsheet-rows .ar-ibsheet-row:nth-child(1) { margin-left: 0; }
.ar-ibsheet-rows .ar-ibsheet-row:nth-child(2) { margin-left: 8px; }
.ar-ibsheet-rows .ar-ibsheet-row:nth-child(3) { margin-left: 16px; }
.ar-ibsheet-rows .ar-ibsheet-row:nth-child(4) { margin-left: 24px; }
.ar-ibsheet-rows .ar-ibsheet-row:nth-child(1) .ar-ibsheet-bar { width: 66px; background: #16233D; }
.ar-ibsheet-rows .ar-ibsheet-row:nth-child(2) .ar-ibsheet-bar { width: 44px; background: #A9B0C2; }
.ar-ibsheet-rows .ar-ibsheet-row:nth-child(3) .ar-ibsheet-bar { width: 54px; background: #16233D; }
.ar-ibsheet-rows .ar-ibsheet-row:nth-child(4) .ar-ibsheet-bar { width: 34px; background: #A9B0C2; }
.ar-ibsheet-dia {
  flex: none;
  width: 6px;
  height: 6px;
  margin-left: 3px;
  background: #F0913C;
  transform: rotate(45deg);
}

/* ============ f. DOC TRIO (transparent carrier, for navy panels) ============ */
.ar-ibdocs {
  position: relative;
  width: 172px;
  height: 118px;
  font-family: 'Century Gothic', Jost, 'URW Gothic', Futura, 'Trebuchet MS', sans-serif;
  line-height: 1;
}
.ar-ibdoc {
  position: absolute;
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0 4px 10px rgba(15, 26, 48, 0.22);
}
.ar-ibdoc--plan {
  left: 0;
  bottom: 4px;
  z-index: 2;
  width: 58px;
  height: 76px;
  padding: 7px 7px 6px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
}
.ar-ibdoc--grid {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 1;
  width: 66px;
  height: 92px;
  background: #263B69;
  border: 1px solid #33477A;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ar-ibdoc--memo {
  right: 0;
  bottom: 10px;
  z-index: 3;
  width: 56px;
  height: 70px;
  padding: 7px;
  background: #FFFFFF;
  transform: rotate(6deg);
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 12px rgba(15, 26, 48, 0.28);
}
.ar-ibdoc-line {
  height: 3px;
  border-radius: 2px;
  margin-bottom: 4px;
}
.ar-ibdoc-line--navy   { background: #16233D; }
.ar-ibdoc-line--grey   { background: #A9B0C2; }
.ar-ibdoc-line--orange { background: #F0913C; }
.ar-ibdoc-line--w1 { width: 100%; }
.ar-ibdoc-line--w2 { width: 84%; }
.ar-ibdoc-line--w3 { width: 92%; }
.ar-ibdoc-line--w4 { width: 68%; }
.ar-ibdoc-line--w5 { width: 58%; }
.ar-ibdoc-tag {
  margin-top: auto;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #B4661B;
  white-space: nowrap;
}
.ar-ibdoc-win {
  display: grid;
  grid-template-columns: repeat(2, 12px);
  gap: 5px;
}
.ar-ibdoc-pane {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #F0913C;
}
.ar-ibdoc-foot {
  margin-top: auto;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: #A9B0C2;
}

/* ============================================================
   AryaNote x InfraBid graphic language - icon chips + bullets
   All colour literals are from the locked AryaNote palette.
   ============================================================ */

/* 46px rounded chip that centres a 24px stroke icon.
   The icon inherits its colour from the chip via currentColor. */
.ar-ibicon{
  width:46px;
  height:46px;
  min-width:46px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  background:#E9ECF3;
  color:#16233D;
}
.ar-ibicon svg{
  width:24px;
  height:24px;
  display:block;
  flex:0 0 auto;
}

/* Chip variants */
.ar-ibicon--orange{background:#F0913C;color:#16233D;}
.ar-ibicon--navy{background:#16233D;color:#F0913C;}
.ar-ibicon--ghost{background:#E9ECF3;color:#16233D;}
.ar-ibicon--cream{background:#FDF6EA;border:1px solid #EFE3CC;color:#B4661B;}

/* Bare inline usage note:
   the svg needs no chip - dropped straight into flowing content it
   inherits currentColor from the nearest coloured ancestor, e.g.
   <span class='ar-ibinline'><svg ...></svg>Critical path</span>
   or any element carrying style='color:#B4661B'. */
.ar-ibinline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#4B4E69;
}
.ar-ibinline svg{
  width:20px;
  height:20px;
  flex:0 0 auto;
}

/* Orange bullet dot for list rows (replaces plain colour swatches).
   Sized 8px; the -1px nudge optically centres it against 15-17px text. */
.ar-ibdot{
  display:inline-block;
  width:8px;
  height:8px;
  min-width:8px;
  border-radius:999px;
  background:#F0913C;
  margin-right:10px;
  vertical-align:middle;
  position:relative;
  top:-1px;
}
.ar-ibdot--navy{background:#16233D;}

/* ============================================================
   AryaNote x InfraBid graphic language
   Asset: navy content panel + pill buttons
   Self-contained. All classes prefixed ar-ib. Palette literals only.
   ============================================================ */

/* ---- The navy panel ---------------------------------------- */

.ar-ibpanel {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  background: #16233D;
  border-radius: 26px;
  padding: 48px 54px;
  font-family: 'Century Gothic', Jost, 'URW Gothic', Futura, 'Trebuchet MS', sans-serif;
}

.ar-ibpanel__eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  color: #F0913C;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ar-ibpanel__title {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
  max-width: 18ch;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.12;
}

.ar-ibpanel__lede {
  position: relative;
  z-index: 1;
  margin: 0 0 26px;
  max-width: 54ch;
  color: #C7D0E2;
  font-size: 16px;
  line-height: 1.6;
}

.ar-ibpanel__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 840px;
}

.ar-ibpanel__li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #E4E9F2;
  font-size: 14.5px;
  line-height: 1.55;
}

.ar-ibpanel__li::before {
  content: '';
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: #F0913C;
}

.ar-ibpanel__cta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

.ar-ibpanel__foot {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  color: #8FA0BF;
  font-size: 12.5px;
  line-height: 1.5;
}

/* Slot for the three-document illustration cluster (separate asset). */
.ar-ibpanel__art {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 54px;
  z-index: 0;
  width: 300px;
  min-height: 210px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Faint navy-on-navy line-work echo, bottom-left corner. */
.ar-ibpanel__lines {
  position: absolute;
  left: -6px;
  bottom: -8px;
  z-index: 0;
  opacity: 0.8;
  pointer-events: none;
  display: block;
}

/* ---- Pill buttons (work on navy, orange and light grounds) -- */

.ar-ibpill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: transparent;
  font-family: 'Century Gothic', Jost, 'URW Gothic', Futura, 'Trebuchet MS', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.ar-ibpill:focus-visible {
  outline: 2px solid #F0913C;
  outline-offset: 2px;
}

/* Primary on navy ground */
.ar-ibpill--white {
  background: #FFFFFF;
  color: #16233D;
}

.ar-ibpill--white:hover {
  background: #F0913C;
  color: #16233D;
}

/* Secondary on navy ground */
.ar-ibpill--outline-light {
  border-color: rgba(255, 255, 255, 0.45);
  color: #FFFFFF;
}

.ar-ibpill--outline-light:hover {
  border-color: #FFFFFF;
}

/* Primary on orange or light ground */
.ar-ibpill--navy {
  background: #16233D;
  color: #FFFFFF;
}

.ar-ibpill--navy:hover {
  background: #0F1A30;
}

/* Secondary on orange or light ground */
.ar-ibpill--outline-dark {
  border-color: rgba(22, 35, 61, 0.6);
  color: #16233D;
}

.ar-ibpill--outline-dark:hover {
  border-color: #16233D;
}

/* Accent, for light grounds */
.ar-ibpill--orange {
  background: #F0913C;
  color: #16233D;
}

.ar-ibpill--orange:hover {
  background: #E8862F;
}

/* Tertiary text links */
.ar-ibpill--quiet {
  border-color: transparent;
  padding: 0 10px;
  color: #C7D0E2;
}

.ar-ibpill--quiet:hover {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ar-ibpill--quiet-dark {
  border-color: transparent;
  padding: 0 10px;
  color: #4B4E69;
}

.ar-ibpill--quiet-dark:hover {
  color: #16233D;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Responsive -------------------------------------------- */

.ar-ibpanel__art .ar-ibdocs { transform: scale(1.25) }

@media (max-width: 1150px) {
  .ar-ibpanel__art { display: none }
}
@media (max-width: 900px) {
  .ar-ibpanel__lines { display: none }
}

@media (max-width: 760px) {
  .ar-ibpanel {
    padding: 40px 32px;
  }
  .ar-ibpanel__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .ar-ibpanel {
    padding: 32px 22px;
  }
  .ar-ibpanel__title {
    font-size: 27px;
  }
  .ar-ibpill {
    width: 100%;
  }
  .ar-ibpill--quiet {
    width: auto;
  }
}

/* ---- composition helpers for the bands and slots ---- */

/* Two cream cards stacked in a band slot, the second tilted for depth. */
.ar-ibslotcards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
}
.ar-ibslotcards .ar-ibcard:nth-child(2) {
  transform: rotate(-2.2deg) translateX(-16px);
}

/* Labelled inline symbols on an orange band (replaces the coloured chips). */
.ar-ibband__chips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 20px;
}
.ar-ibband__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: #16233D;
}
.ar-ibband__chip svg { width: 20px; height: 20px; flex: 0 0 auto }

.ar-ibband__cta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* A metric card head: icon chip beside the big figure. */
.ar-ibmetrichead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Panel column set for the who-it-is-for treatment. */
.ar-ibpanel__cols {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 34px;
}
@media (max-width: 900px) {
  .ar-ibpanel__cols { grid-template-columns: 1fr; gap: 26px }
}

/* The marketing link colour (.ar-mkt a) must not bleed into pills rendered
   as anchors - restate the pill colours at higher specificity. */
.ar-mkt a.ar-ibpill { text-decoration: none }
.ar-mkt a.ar-ibpill--white { color: #16233D }
.ar-mkt a.ar-ibpill--white:hover { color: #16233D }
.ar-mkt a.ar-ibpill--outline-light { color: #FFFFFF }
.ar-mkt a.ar-ibpill--outline-light:hover { color: #FFFFFF }
.ar-mkt a.ar-ibpill--navy { color: #FFFFFF }
.ar-mkt a.ar-ibpill--navy:hover { color: #FFFFFF }
.ar-mkt a.ar-ibpill--outline-dark { color: #16233D }
.ar-mkt a.ar-ibpill--outline-dark:hover { color: #16233D }
.ar-mkt a.ar-ibpill--orange { color: #16233D }
.ar-mkt a.ar-ibpill--orange:hover { color: #16233D }
.ar-mkt a.ar-ibpill--quiet { color: #C7D0E2 }
.ar-mkt a.ar-ibpill--quiet:hover { color: #FFFFFF }
.ar-mkt a.ar-ibpill--quiet-dark { color: #4B4E69 }
.ar-mkt a.ar-ibpill--quiet-dark:hover { color: #16233D }

/* Form controls on navy panels */
.ar-ibpanel input::placeholder { color: #AEB8CC; opacity: 1 }

/* ---- skeleton loader --------------------------------------------------
   Placeholder blocks shown while a data-driven module loads. The sweep is
   decorative, so it is switched off for anyone who asks for reduced motion:
   the block still reads as "loading" without it. */
.ar-skel {
  position: relative;
  overflow: hidden;
  background: var(--ar-sunken);
  border-radius: 6px;
}
.ar-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation: ar-skel-sweep 1.4s infinite;
}
@keyframes ar-skel-sweep {
  100% { transform: translateX(100%) }
}
@media (prefers-reduced-motion: reduce) {
  .ar-skel::after { animation: none }
}

/* ---- feed rows with a picture column ----------------------------------
   Sizing lives here rather than inline so the media block can shrink on
   narrow screens. The block is a positioning context: the branded tile is
   the background layer and the publisher's own picture, when there is one
   and third-party images are allowed, sits on top of it. A picture that
   fails to load therefore falls back to the tile, not to a broken icon. */
.ar-feed-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  content-visibility: auto;
  contain-intrinsic-size: auto 132px;
}
.ar-feed-media {
  position: relative;
  flex: 0 0 118px;
  width: 118px;
  height: 86px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-top: 2px;
}
@media (max-width: 720px) {
  .ar-feed-row { gap: 13px }
  .ar-feed-media {
    flex-basis: 84px;
    width: 84px;
    height: 64px;
  }
}
@media (max-width: 430px) {
  .ar-feed-row { gap: 11px }
  .ar-feed-media {
    flex-basis: 72px;
    width: 72px;
    height: 56px;
    border-radius: 10px;
  }
}
/* Below roughly a small phone the picture would crowd the headline out of
   its own line, so the column goes and the headline gets the full width. */
@media (max-width: 330px) {
  .ar-feed-media { display: none }
}

/* ---- overview masthead -------------------------------------------------
   The dashboard opens like the front page of a trade paper: a coloured band
   carrying the headline and the live figures, then the stories underneath.
   The measurements live here rather than inline so the band can compress on
   a phone without the dashboard keeping a second set of styles for it. */
.ar-mast {
  position: relative;
  overflow: hidden;
  border-radius: var(--ar-radius-lg);
  background: #F4B23F;
}
.ar-mast-in {
  position: relative;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 34px 26px 0;
}
.ar-mast-copy { flex: 1 1 420px; min-width: 0 }
/* Dropped clear of the banner controls in the band's top right corner, so
   the card and the buttons never sit on top of one another. */
.ar-mast-side { flex: 0 1 340px; min-width: 250px; margin-top: 32px }
@media (max-width: 760px) { .ar-mast-side { margin-top: 4px } }

/* The headline stacks, and the last word of each line sits in a colour
   block. display:flex on the line keeps the block hugging the word instead
   of stretching to the column. */
.ar-mast-head {
  font-family: 'Century Gothic', Jost, 'URW Gothic', Futura, 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 5.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #16233D;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ar-mast-line { display: flex; align-items: baseline; gap: 0.28em; flex-wrap: wrap }
.ar-mark {
  display: inline-block;
  padding: 0.06em 0.3em 0.14em;
  border-radius: 8px;
  color: #FFFFFF;
}

.ar-mast-foot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 26px 26px 0;
  padding: 13px 0 20px;
  border-top: 1px solid rgba(22, 35, 61, 0.24);
}
.ar-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(22, 35, 61, 0.4);
  border-radius: var(--ar-radius-pill);
  padding: 4px 12px;
  font-size: var(--ar-text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #16233D;
}
.ar-live > i { width: 7px; height: 7px; border-radius: 50%; background: #16233D; display: block }
.ar-figs { display: flex; gap: 22px; flex-wrap: wrap; margin-left: auto }
.ar-fig { display: flex; align-items: baseline; gap: 7px; color: #16233D }
.ar-fig > b {
  font-family: 'Century Gothic', Jost, 'URW Gothic', Futura, 'Trebuchet MS', sans-serif;
  font-size: var(--ar-text-2xl);
  font-weight: 700;
  line-height: 1;
}
.ar-fig > span { font-size: var(--ar-text-xs) }
/* A middot between figures, the way a masthead strip runs them together.
   The pseudo-element is a flex item of .ar-fig, so it lands before the
   figure it separates rather than after the one it follows. */
.ar-fig + .ar-fig::before { content: "\00B7"; margin-right: 15px; opacity: 0.55 }
@media (max-width: 760px) {
  /* The banner controls sit in the band's top right corner. On a narrow
     screen the headline runs the full width and would slide under them, so
     the copy starts below the buttons instead. */
  .ar-mast-in { padding-top: 56px }
}
@media (max-width: 560px) {
  .ar-figs { margin-left: 0; gap: 14px }
  .ar-mast-in { padding: 56px 18px 0 }
  .ar-mast-foot { margin: 20px 18px 0 }
  /* Wrapped onto two rows the separator lands at the start of a line, where
     it reads as a stray mark rather than as a separator. */
  .ar-fig + .ar-fig::before { display: none }
}

/* ---- top stories ------------------------------------------------------
   A lead picture beside a rail of headlines, each with its own thumbnail.
   Every story gets a picture block whatever the source shipped: the tile
   underneath carries the publisher's name, so a story with no photograph
   still reads as a story rather than as a gap. */
.ar-top { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start }
@media (min-width: 861px) {
  .ar-top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 30px }
}
.ar-lead {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ar-sunken);
  aspect-ratio: 16 / 10;
  text-decoration: none;
}
.ar-lead:hover { text-decoration: none }
.ar-lead > .ar-shot { border-radius: inherit }
.ar-lead-cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 70px 20px 18px;
  background: linear-gradient(to top, rgba(11, 20, 40, 0.92) 0%, rgba(11, 20, 40, 0.6) 44%, rgba(11, 20, 40, 0) 100%);
  color: #FFFFFF;
}
.ar-flag {
  display: inline-block;
  background: #F0913C;
  color: #16233D;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
}
.ar-story {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--ar-sunken);
  /* Replaces the lazy loading the <img> used to give us: a row that is off
     screen is not rendered, so its picture is not fetched. Measured at 9 of
     40 fetched on first paint, against 40 of 40 without it. The intrinsic
     size keeps the scrollbar honest while a row is skipped. */
  content-visibility: auto;
  contain-intrinsic-size: auto 108px;
}
.ar-story:last-child { border-bottom: none }
.ar-thumb {
  position: relative;
  flex: 0 0 88px;
  width: 88px;
  height: 66px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-top: 2px;
}

/* The publisher's picture, painted as a background rather than an <img>.
   A broken <img> draws the browser's torn-page glyph over the tile, and it
   does so for a 404, a hotlink refusal and a non-image payload alike; a
   background that fails to load simply does not paint, so the branded tile
   underneath is what the reader sees. Verified in a browser against all
   three failure modes. */
.ar-shot {
  position: absolute;
  inset: 0;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 430px) {
  .ar-thumb { flex-basis: 72px; width: 72px; height: 56px }
}
/* The publisher's name across a tile that has no photograph behind it.
   Sized here rather than inline so it can shrink with the block it sits in:
   an inline font-size would beat the phone breakpoint and the longer names
   would break mid-word. */
.ar-token {
  font-family: 'Century Gothic', Jost, 'URW Gothic', Futura, 'Trebuchet MS', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-align: center;
  padding: 0 5px;
  overflow-wrap: anywhere;
}
.ar-token--lead { font-size: 17px; letter-spacing: 0.1em }
@media (max-width: 430px) {
  .ar-token { font-size: 8.5px }
  .ar-token--lead { font-size: 15px }
}

/* The kicker: publisher and date, set small and spaced like a newspaper
   standfirst so it never competes with the headline above it. */
.ar-kicker {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--ar-ink-soft);
}

/* ---- the programme builder --------------------------------------------
   Four answers on one line where there is room, stacked where there is not.
   Every control is at least the comfortable tap target, because this is the
   one form in the app somebody fills in on a phone while sitting in a
   supervision meeting. */
.ar-gen {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  align-items: flex-end;
}
.ar-gen__field { display: flex; flex-direction: column; gap: 8px }
.ar-gen__field--go { margin-left: auto }
.ar-gen__label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ar-ink-soft);
}
.ar-gen__pills { display: flex; gap: 8px }
.ar-gen__num {
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius);
  padding: 0 12px;
  height: var(--ar-tap);
  width: 104px;
  font-size: 16px;
  outline: none;
  background: var(--ar-surface);
  color: var(--ar-ink);
}
.ar-gen__num:focus { border-color: var(--ar-brand) }
@media (max-width: 620px) {
  .ar-gen { gap: 16px }
  .ar-gen__field, .ar-gen__field--go { width: 100%; margin-left: 0 }
  .ar-gen__num { width: 100% }
  .ar-gen__field--go > button { width: 100% }
}

/* ---- self-hosted brand fallback face -----------------------------------
   Jost, served from our own origin: no request leaves this site for a font,
   which matters for both privacy (no pre-consent third-party call) and
   speed. Variable weight axis covers 300 to 600 from one 26 KB file. */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  /* optional, not swap: the file is same-origin and preloaded, so it is
     nearly always ready for first paint; when it is not, the fallback stays
     and nothing reflows. Zero layout shift either way. */
  font-display: optional;
  src: url('assets/fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- accessibility ------------------------------------------------------
   Keyboard users get an unmistakable focus ring everywhere; pointer users
   are not shouted at. And anyone who asked their system for reduced motion
   gets exactly that: the decorative animation set becomes still. */
:focus-visible {
  outline: 2px solid var(--ar-brand);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   THE PHONE APP LAYER
   ==========================================================================
   Everything below this line is the mobile redesign. It is deliberately the
   last thing in the file so it wins over the older attribute-selector patches
   above without having to out-specify them one by one.

   Two rules govern it:

   1. Phone markup is its own markup. Where a desktop panel could not be made
      to behave, the component renders a separate mobile block behind
      `isMobile`, and this layer styles that block with classes. Fighting 760
      inline styles with !important is how the previous pass ended up brittle.
   2. Nothing here may reach a tablet or a desktop. Every rule is inside
      `@media (max-width: 760px)` unless it is a class that only phone markup
      ever uses.
   ========================================================================== */

/* ---- tokens the phone layer works in ---------------------------------- */
:root {
  --ar-safe-t: env(safe-area-inset-top, 0px);
  --ar-safe-b: env(safe-area-inset-bottom, 0px);
  --ar-safe-l: env(safe-area-inset-left, 0px);
  --ar-safe-r: env(safe-area-inset-right, 0px);
  --ar-appbar-h: 54px;
  --ar-tabbar-h: 58px;
  /* what a scrolling region must clear, top and bottom */
  --ar-chrome-t: calc(var(--ar-appbar-h) + var(--ar-safe-t));
  --ar-chrome-b: calc(var(--ar-tabbar-h) + var(--ar-safe-b));
}

/* ==================================================== 1. iPhone Safari base
   Applies at every width, because these are correctness rules rather than
   layout: a 15px input makes Safari zoom the page on focus and never zoom
   back, and a stray wide child turns the whole document into a sideways
   scroller. */

@media (max-width: 760px) {
  html, body {
    overflow-x: hidden;
    overscroll-behavior-y: none;
    -webkit-text-size-adjust: 100%;
  }
  /* 16px is the threshold below which iOS Safari zooms on focus. It is not a
     preference: at 15.9px the page jumps and the user has to pinch back. */
  input, textarea, select, .arya-app input, .arya-app textarea, .arya-app select {
    font-size: 16px !important;
  }
  /* except the schedule grid, which is a spreadsheet and is zoomed as a whole */
  .aq input { font-size: 12.5px !important }
  * { -webkit-tap-highlight-color: rgba(0,115,234,.14) }
  /* the browser's own checkbox is 13px of ink; scaled up it is a real target */
  .arya-app input[type="checkbox"], .arya-app input[type="radio"] {
    width: 26px; height: 26px; flex: 0 0 26px;
  }
}

/* ---- small controls that the 44px floor was deforming -----------------
   `.arya-app button { min-height: 44px }` is right for a button and wrong
   for a tick box drawn in a line of prose: it stretched a 17px square into
   a 17x44 lozenge. These two keep their drawn size and get their 44px of
   target from a transparent pseudo-element instead. This applies at every
   width, because the floor does. */

.arya-app .ar-blockbox {
  min-height: 0 !important;
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  font-size: 15px !important;
  align-self: center;
  position: relative;
}
.arya-app .ar-blockbox::after { content: ''; position: absolute; inset: -9px }

.arya-app .ar-dotbtn {
  min-height: 0 !important;
  width: 11px !important;
  height: 11px !important;
  flex: 0 0 11px !important;
  align-self: center;
  position: relative;
}
.arya-app .ar-dotbtn::after { content: ''; position: absolute; inset: -16px }

/* ==================================================== 2. app bar
   One line: back or brand on the left, the page title in the middle, one
   contextual action and an overflow menu on the right. Nothing else earns a
   place in 54 points of height. */

.ar-appbar { display: none }

@media (max-width: 760px) {
  .ar-appbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 4px;
    height: calc(var(--ar-appbar-h) + var(--ar-safe-t));
    padding: var(--ar-safe-t) max(8px, var(--ar-safe-r)) 0 max(8px, var(--ar-safe-l));
    background: #21232D;
    color: #FFFFFF;
    border-bottom: 1px solid #2B2D3C;
  }
  .ar-appbar__title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Century Gothic', Jost, 'URW Gothic', Futura, 'Trebuchet MS', sans-serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
  }
  .ar-appbar__title--lead { text-align: left; padding-left: 8px }
  .ar-appbar__sub {
    display: block;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #6B7590;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* icon buttons in the bar: 44px of target around a small glyph */
  .ar-appbar button, .ar-appbar a {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
    border: none;
    color: #FFFFFF;
    font: inherit;
    font-size: 16px;
    padding: 0 8px;
    border-radius: 10px;
    cursor: pointer;
  }
  .ar-appbar button:active { background: rgba(255,255,255,.12) }
  .ar-appbar__act {
    font-size: 15px !important;
    font-weight: 600;
    padding: 0 12px !important;
    white-space: nowrap;
  }
  .ar-appbar__act--strong {
    background: var(--ar-brand) !important;
    min-height: 36px !important;
  }
  .ar-appbar__glyph { font-size: 22px; line-height: 1 }
  /* the mark, when the bar is showing the brand rather than a back arrow */
  .ar-appbar__mark {
    position: relative;
    width: 19px; height: 19px;
    border: 2.5px solid #F6F7FB;
    border-radius: 50%;
    display: block;
    flex: 0 0 auto;
  }
  .ar-appbar__mark::after {
    content: '';
    position: absolute; top: -3px; right: -2px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: oklch(0.7 0.19 66);
    border: 2px solid #21232D;
  }
}

/* ==================================================== 3. bottom tab bar
   Four destinations, because five is where labels start truncating at 390
   points and a truncated label is worse than no label. */

@media (max-width: 760px) {
  .ar-nav {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around;
    gap: 0 !important;
    padding: 4px max(2px, var(--ar-safe-r)) calc(4px + var(--ar-safe-b)) max(2px, var(--ar-safe-l)) !important;
    background: #21232D;
    border-top: 1px solid #2B2D3C;
    box-shadow: 0 -6px 22px rgba(0,0,0,.26);
  }
  .ar-nav button {
    flex: 1 1 0;
    min-width: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-height: 54px !important;
    padding: 5px 2px !important;
    font-size: 11.5px !important;
    letter-spacing: 0.005em;
    border-radius: 12px !important;
    position: relative;
    background: none !important;
  }
  /* the icon */
  .ar-nav button > span:nth-child(1) {
    width: 24px !important; height: 24px !important;
    background-size: 24px 24px !important;
  }
  /* the label */
  .ar-nav button > span:nth-child(2) {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.1;
  }
  /* the flexible spacer desktop uses to push the count right */
  .ar-nav button > span:nth-child(3) { display: none !important }
  /* the count, as a badge on the icon */
  .ar-nav button > span:nth-child(4) {
    position: absolute;
    top: 1px;
    left: 50%;
    margin-left: 5px;
    min-width: 17px;
    padding: 0 4px !important;
    font-size: 10.5px !important;
    line-height: 17px !important;
    height: 17px !important;
    text-align: center;
  }
  /* the active tab is stated twice: a filled pill and a full-strength label,
     because on a dark bar a tint alone is not legible in sunlight */
  .ar-nav button[aria-current="page"] {
    background: rgba(255,255,255,.14) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
  }
}

/* ==================================================== 4. the shell
   The workspace stops being a sidebar plus a pane and becomes one scrolling
   screen between two fixed bars. */

@media (max-width: 760px) {
  .arya-app {
    display: block !important;
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible !important;
    padding-top: var(--ar-chrome-t);
    padding-bottom: calc(var(--ar-chrome-b) + 8px);
  }
  /* the sidebar keeps only the nav, which is now the tab bar */
  .ar-shell-aside {
    display: contents !important;
  }
  .ar-shell-aside > :not(.ar-nav) { display: none !important }
  /* the content pane is no longer a scroll container of its own: nested
     scrollers on iOS trap momentum and hide the bottom of the page */
  .arya-app > .aw {
    overflow: visible !important;
    height: auto !important;
    flex: none !important;
  }
  /* the old fixed brand bar is replaced by .ar-appbar */
  .ar-brandbar, .ar-backbtn { display: none !important }
}

/* ==================================================== 5. phone typography
   The hero blocks were set for a 1400 point canvas. On a phone the page title
   belongs in the app bar, so the band that repeated it is dropped entirely
   and the screen starts on content. */

@media (max-width: 760px) {
  .ar-hero-mob-hide { display: none !important }
  .ar-band { padding: 16px 16px 20px; box-sizing: border-box; max-width: 100% }
  .arya-app .ar-band *, .arya-app .ar-band { box-sizing: border-box }

  /* A `1fr` track is `minmax(auto, 1fr)`, and `auto` will not shrink below
     the widest item's min-content. One nowrap line inside the dashboard's
     lists was therefore making a 358px column 485px wide and pushing the
     page sideways, where `overflow-x: hidden` then quietly clipped it.
     `minmax(0, 1fr)` lets the track shrink and the text wrap instead. */
  .ar-2col { grid-template-columns: minmax(0, 1fr) }
  .ar-2col > * { min-width: 0 }
  /* the same problem one level down: flex items default to min-width auto */
  .arya-app .ar-band > div > div { min-width: 0 }
}

/* ---- the dashboard masthead ------------------------------------------
   On a desktop it is a front page. On a phone the same block filled the
   whole first screen before a single number, so it is compressed: smaller
   headline, full-width actions, and the figures two by two. */

@media (max-width: 760px) {
  .ar-mast-in { padding: 20px 16px 0; gap: 16px }
  .ar-mast-head { font-size: 30px; gap: 4px; margin-top: 2px }
  .ar-mast-copy p { font-size: 16px !important; margin-top: 10px !important }
  .ar-mast-copy > div:last-child {
    display: flex !important;
    flex-direction: column;
    gap: 10px !important;
    margin-top: 18px !important;
  }
  .ar-mast-copy > div:last-child > button {
    width: 100%;
    min-height: 52px;
    justify-content: center;
    font-size: 16.5px !important;
    border-radius: 14px !important;
  }
  .ar-mast-foot { margin: 16px 16px 0; padding: 12px 0 16px; gap: 10px }
  .ar-figs {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    width: 100%;
  }
  .ar-fig { padding: 0 !important; border: none !important }
  /* the interpuncts between the figures belong to a single row */
  .ar-fig + .ar-fig::before { content: none }
}

/* ==================================================== 6. buttons
   One size of primary button, thumb-height, and it fills the width unless it
   is sharing a row with exactly one sibling. */

.ar-mbtn {
  display: none;
}

@media (max-width: 760px) {
  .ar-mbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 20px;
    border: none;
    border-radius: 14px;
    background: var(--ar-brand);
    color: #FFFFFF;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
  }
  .ar-mbtn:active { background: var(--ar-brand-strong) }
  .ar-mbtn--ink { background: #21232D }
  .ar-mbtn--ink:active { background: #35384A }
  .ar-mbtn--quiet {
    background: #FFFFFF;
    color: var(--ar-ink);
    border: 1px solid var(--ar-border);
  }
  .ar-mbtn--quiet:active { background: var(--ar-sunken) }
  .ar-mbtn--danger { background: var(--ar-red) }
  .ar-mbtn--sm { min-height: 46px; font-size: 16px; border-radius: 12px }
  .ar-mbtn--auto { width: auto }
  .ar-mbtn__ic { font-size: 20px; line-height: 1; font-weight: 400 }

  .ar-mrow-actions {
    display: flex;
    gap: 10px;
  }
  .ar-mrow-actions > * { flex: 1 1 0 }
}

/* ==================================================== 7. segmented control */

.ar-seg { display: none }

@media (max-width: 760px) {
  .ar-seg {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: var(--ar-sunken);
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
  }
  .ar-seg > button {
    flex: 1 1 0;
    min-height: 42px;
    border: none;
    border-radius: 9px;
    background: none;
    color: var(--ar-ink-soft);
    font: inherit;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 8px;
  }
  .ar-seg > button[aria-pressed="true"] {
    background: #FFFFFF;
    color: var(--ar-ink);
    box-shadow: var(--ar-shadow-sm);
  }
}

/* ==================================================== 8. big list rows
   The row IS the control: the whole thing is tappable, and any secondary
   control inside it carries its own 44 point target. */

.ar-mrow { display: none }

@media (max-width: 760px) {
  .ar-mlist {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .ar-mlist--flush {
    gap: 0;
    background: #FFFFFF;
    border: 1px solid var(--ar-card-bd);
    border-radius: var(--ar-card-r) var(--ar-card-r) var(--ar-card-r) var(--ar-card-cut);
    overflow: hidden;
    box-shadow: var(--ar-card-shadow);
  }
  .ar-mlist--flush > .ar-mrow {
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid #E4E9F4;
  }
  .ar-mlist--flush > .ar-mrow:last-child { border-bottom: none }

  .ar-mrow {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    min-height: 64px;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1px solid var(--ar-card-bd);
    border-radius: var(--ar-card-r) var(--ar-card-r) var(--ar-card-r) var(--ar-card-cut);
    box-shadow: var(--ar-card-shadow);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }
  .ar-mrow:active { background: #F1F3F8 }
  .ar-mrow__body { flex: 1 1 auto; min-width: 0 }
  .ar-mrow__title {
    font-size: 17px;
    line-height: 1.3;
    color: var(--ar-ink);
    overflow-wrap: anywhere;
  }
  .ar-mrow__title--strong { font-weight: 700 }
  .ar-mrow__title--done { color: #6B7590; text-decoration: line-through }
  .ar-mrow__meta {
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--ar-ink-soft);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
  }
  .ar-mrow__chev {
    flex: 0 0 auto;
    align-self: center;
    color: #C5C7D0;
    font-size: 20px;
    line-height: 1;
  }
  .ar-mrow__rail {
    flex: 0 0 4px;
    align-self: stretch;
    border-radius: 3px;
    margin: -2px 0;
  }
  /* the tick box: 30 points of ink inside 48 points of target */
  .ar-mcheck {
    flex: 0 0 auto;
    width: 48px; height: 48px;
    margin: -8px -8px -8px -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
  }
  .ar-mcheck > span {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--ar-border);
    display: block;
    position: relative;
    background: #FFFFFF;
    transition: background var(--ar-fast) var(--ar-ease), border-color var(--ar-fast) var(--ar-ease);
  }
  .ar-mcheck[aria-pressed="true"] > span {
    background: var(--ar-green);
    border-color: var(--ar-green);
  }
  .ar-mcheck[aria-pressed="true"] > span::after {
    content: '';
    position: absolute;
    left: 8px; top: 4px;
    width: 7px; height: 13px;
    border: solid #FFFFFF;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(43deg);
  }

  /* a small status word inside a row */
  .ar-mtag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .ar-mtag--crit { background: oklch(0.95 0.062 66); color: oklch(0.46 0.179 66) }
  .ar-mtag--done { background: oklch(0.95 0.08 155); color: oklch(0.42 0.15 155) }
  .ar-mtag--now  { background: oklch(0.94 0.058 250); color: oklch(0.38 0.182 250) }
  .ar-mtag--mute { background: var(--ar-sunken); color: var(--ar-ink-soft) }
  .ar-mtag--milestone { background: #21232D; color: #FFFFFF }

  .ar-mgrouphead {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 20px 2px 9px;
    font-family: 'Century Gothic', Jost, 'URW Gothic', Futura, 'Trebuchet MS', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ar-ink-soft);
  }
  .ar-mgrouphead:first-child { padding-top: 4px }
  .ar-mgrouphead > b { font-weight: 400; color: #A9ABB6 }

  .ar-mempty {
    padding: 30px 18px;
    text-align: center;
    color: #6B7590;
    font-size: 15.5px;
    line-height: 1.55;
  }
}

/* ==================================================== 9. sticky action bar
   The one primary action of a screen, parked above the tab bar where the
   thumb already is. */

.ar-mdock { display: none }

@media (max-width: 760px) {
  .ar-mdock {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--ar-chrome-b);
    z-index: 65;
    display: flex;
    gap: 10px;
    padding: 10px max(12px, var(--ar-safe-l)) 10px max(12px, var(--ar-safe-r));
    background: linear-gradient(to top, var(--ar-bg) 62%, rgba(237,240,248,0));
    pointer-events: none;
  }
  .ar-mdock > * { pointer-events: auto }
  .ar-mdock .ar-mbtn { box-shadow: 0 10px 26px -12px rgba(11,20,40,.6) }
  /* a screen with a dock needs the extra clearance underneath it */
  .ar-has-dock { padding-bottom: calc(var(--ar-chrome-b) + 78px) !important }
}

/* ==================================================== 10. sheets
   Two shapes. A full-screen sheet is an editor and owns the screen; a bottom
   sheet is a short menu and keeps the context visible behind it. */

.ar-sheet { display: none }

@media (max-width: 760px) {
  .ar-sheet {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: rgba(22,35,61,.42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .ar-sheet__scrim { position: absolute; inset: 0; border: none; background: none; padding: 0 }

  /* --- bottom sheet: the ••• menu --- */
  .ar-sheet__menu {
    position: relative;
    background: #FFFFFF;
    border-radius: 20px 20px 0 0;
    padding: 8px 8px calc(10px + var(--ar-safe-b));
    /* --ar-vvh is the height the user can actually see, published by
       mobile.js from visualViewport. 100dvh does not shrink for the
       keyboard; this does. */
    max-height: min(78vh, calc(var(--ar-vvh, 100vh) - 56px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -20px 50px -28px rgba(11,20,40,.9);
    animation: ar-sheet-up 180ms var(--ar-ease);
  }
  .ar-sheet__grip {
    width: 38px; height: 4px;
    border-radius: 2px;
    background: #D0D4E4;
    margin: 4px auto 8px;
  }
  .ar-sheet__head {
    padding: 4px 14px 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6B7590;
  }
  .ar-sheet__item {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    box-sizing: border-box;
    min-height: 54px;
    padding: 0 14px;
    border: none;
    background: none;
    border-radius: 12px;
    font: inherit;
    font-size: 17px;
    color: var(--ar-ink);
    text-align: left;
    cursor: pointer;
  }
  .ar-sheet__item:active { background: var(--ar-sunken) }
  .ar-sheet__item--danger { color: var(--ar-red) }
  .ar-sheet__item[disabled] { color: #C5C7D0; cursor: default }
  .ar-sheet__ic { flex: 0 0 22px; text-align: center; font-size: 18px; opacity: .8 }
  .ar-sheet__rule { height: 1px; background: #EDEFF5; margin: 6px 14px }

  /* --- full-screen sheet: an editor --- */
  .ar-sheet--full { justify-content: stretch }
  .ar-sheet__full {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* keeps Cancel and Save on screen once the keyboard is up */
    max-height: var(--ar-vvh, 100dvh);
    background: var(--ar-bg);
    animation: ar-sheet-up 200ms var(--ar-ease);
  }
  .ar-sheet__bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    height: calc(var(--ar-appbar-h) + var(--ar-safe-t));
    padding: var(--ar-safe-t) max(6px, var(--ar-safe-r)) 0 max(6px, var(--ar-safe-l));
    background: #FFFFFF;
    border-bottom: 1px solid #E6E9EF;
  }
  .ar-sheet__bar > button {
    min-height: 44px;
    min-width: 44px;
    padding: 0 12px;
    border: none;
    background: none;
    font: inherit;
    font-size: 17px;
    color: var(--ar-brand);
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
  }
  .ar-sheet__bar > button:active { background: var(--ar-sunken) }
  .ar-sheet__bar .ar-sheet__save { font-weight: 700 }
  .ar-sheet__bar .ar-sheet__cancel { color: var(--ar-ink-soft) }
  .ar-sheet__bartitle {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ar-sheet__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* the software keyboard covers the bottom of the sheet: this is the
       clearance that keeps the field you are typing in reachable */
    padding: 16px 16px calc(40vh + var(--ar-safe-b));
  }
}

@keyframes ar-sheet-up {
  from { transform: translateY(14px); opacity: .6 }
  to   { transform: translateY(0); opacity: 1 }
}

/* ==================================================== 11. forms
   A phone form is one field per line, a large label above it, and a control
   that is 52 points tall. Nothing is placed side by side. */

@media (max-width: 760px) {
  .ar-mfield { display: block; margin-bottom: 16px }
  .ar-mfield__label {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ar-ink-soft);
    margin-bottom: 7px;
  }
  .ar-mfield__hint {
    font-size: 13.5px;
    color: #6B7590;
    line-height: 1.45;
    margin-top: 6px;
  }
  .ar-minput,
  .ar-mfield input,
  .ar-mfield select,
  .ar-mfield textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
    padding: 13px 14px;
    border: 1px solid var(--ar-border);
    border-radius: 12px;
    background: #FFFFFF;
    color: var(--ar-ink);
    font: inherit;
    font-size: 16px !important;
    line-height: 1.35;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
  }
  .ar-mfield select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23676879' stroke-width='1.8'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
  }
  .ar-mfield textarea { min-height: 110px; resize: vertical; line-height: 1.55 }
  .ar-minput:focus,
  .ar-mfield input:focus,
  .ar-mfield select:focus,
  .ar-mfield textarea:focus { border-color: var(--ar-brand); box-shadow: 0 0 0 3px rgba(0,115,234,.14) }
  .ar-mfield__two { display: flex; gap: 10px }
  .ar-mfield__two > * { flex: 1 1 0; min-width: 0 }
  .ar-msub { display: block }
  .ar-msub > span {
    display: block;
    font-size: 13px;
    color: var(--ar-ink-soft);
    margin-bottom: 5px;
  }

  /* a disclosure that keeps specialist controls out of the way */
  .ar-mdisclose { border-top: 1px solid #E6E9EF; margin-top: 6px }
  .ar-mdisclose > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    font-size: 16.5px;
    font-weight: 600;
    color: var(--ar-ink-mid);
    cursor: pointer;
  }
  .ar-mdisclose > summary::-webkit-details-marker { display: none }
  .ar-mdisclose > summary::after {
    content: '⌄';
    font-size: 20px;
    line-height: 1;
    color: #6B7590;
    transform: translateY(-3px);
  }
  .ar-mdisclose[open] > summary::after { content: '⌃'; transform: translateY(3px) }
  .ar-mdisclose__in { padding: 6px 0 14px }

  /* the quick-add line that sits at the top of a list screen */
  .ar-mquick { display: flex; gap: 9px; align-items: stretch; margin-bottom: 16px }
  .ar-mquick > input { flex: 1 1 auto; min-width: 0 }
  .ar-mquick > button { flex: 0 0 auto; width: auto; padding: 0 20px }
}

/* ==================================================== 12. search field */

@media (max-width: 760px) {
  .ar-msearch {
    position: relative;
    margin-bottom: 14px;
  }
  .ar-msearch > input {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 12px 14px 12px 42px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #EDEFF5;
    font: inherit;
    font-size: 16px !important;
    outline: none;
    -webkit-appearance: none;
  }
  .ar-msearch > input:focus { background: #FFFFFF; border-color: var(--ar-brand) }
  .ar-msearch::before {
    content: '';
    position: absolute;
    left: 13px; top: 50%;
    width: 18px; height: 18px;
    margin-top: -9px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23676879' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat center / 18px;
    pointer-events: none;
  }
}

/* ==================================================== 13. calendar */

.ar-mcal { display: none }

@media (max-width: 760px) {
  .ar-mcal { display: block }
  .ar-mcal__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
  }
  .ar-mcal__bar > button {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border: 1px solid var(--ar-border);
    border-radius: 12px;
    background: #FFFFFF;
    font: inherit;
    font-size: 20px;
    line-height: 1;
    color: var(--ar-ink-mid);
    cursor: pointer;
  }
  .ar-mcal__bar > button:active { background: var(--ar-sunken) }
  .ar-mcal__month {
    flex: 1 1 auto;
    text-align: center;
    font-family: 'Century Gothic', Jost, 'URW Gothic', Futura, 'Trebuchet MS', sans-serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.005em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ar-mcal__dows {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 2px;
  }
  .ar-mcal__dow {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ar-accent-deep);
    padding: 4px 0;
  }
  .ar-mcal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    background: #FFFFFF;
    border: 1px solid var(--ar-card-bd);
    border-radius: var(--ar-card-r) var(--ar-card-r) var(--ar-card-r) var(--ar-card-cut);
    padding: 6px;
    box-shadow: var(--ar-card-shadow);
  }
  .ar-mcal__day {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: none;
    border-radius: 12px;
    font: inherit;
    font-size: 16.5px;
    color: var(--ar-ink);
    cursor: pointer;
    padding: 0;
  }
  .ar-mcal__day:active { background: var(--ar-sunken) }
  .ar-mcal__day--out { color: #C5C7D0 }
  .ar-mcal__day--today {
    font-weight: 700;
    color: var(--ar-accent-deep);
    box-shadow: inset 0 0 0 2px var(--ar-accent);
  }
  .ar-mcal__day--sel {
    background: var(--ar-deep) !important;
    color: #FFFFFF !important;
    font-weight: 700;
  }
  .ar-mcal__day--sel.ar-mcal__day--today { color: #FFFFFF !important }
  .ar-mcal__dots {
    display: flex;
    gap: 3px;
    height: 6px;
    align-items: center;
    justify-content: center;
  }
  .ar-mcal__dot { width: 5px; height: 5px; border-radius: 50%; display: block }
  .ar-mcal__day--sel .ar-mcal__dot { box-shadow: 0 0 0 1px rgba(255,255,255,.65) }
  .ar-mcal__selhead {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 22px 2px 10px;
  }
  .ar-mcal__selhead h2 {
    font-family: 'Century Gothic', Jost, 'URW Gothic', Futura, 'Trebuchet MS', sans-serif;
    font-size: 20px !important;
    font-weight: 700;
    margin: 0;
    line-height: 1.2 !important;
  }
  .ar-mcal__selhead span { font-size: 13.5px; color: #6B7590 }
}

/* ==================================================== 14. notes
   Two screens, not three panes: a list, then a page that fills the display.
   The notebook and section pickers become a strip of chips above the list. */

@media (max-width: 760px) {
  .ar-pane {
    border-right: none !important;
    position: static !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  .ar-notes-mob, .ar-mchips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0 12px;
    margin: 0 -16px 0;
    padding-left: 16px;
    padding-right: 16px;
  }
  .ar-notes-mob::-webkit-scrollbar, .ar-mchips::-webkit-scrollbar { display: none }
  .ar-chipbtn {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--ar-border);
    border-radius: 999px;
    background: #FFFFFF;
    font: inherit;
    font-size: 15px;
    color: var(--ar-ink-mid);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    cursor: pointer;
  }
  .ar-chipbtn[aria-pressed="true"] {
    background: #21232D;
    border-color: #21232D;
    color: #FFFFFF;
    font-weight: 600;
  }
  .ar-chipbtn__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto }

  /* the notes screen is a stack on a phone, not a row of panes */
  .ar-notes-wrap {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* the writing surface */
  .ar-noteedit { padding: 0 }
  .arya-app .ar-noteedit__title {
    font-size: 26px !important;
    line-height: 1.25 !important;
    font-weight: 600;
    padding-bottom: 4px !important;
  }
  /* the block ribbon scrolls sideways rather than wrapping to three rows */
  .ar-noteribbon {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 0 !important;
    margin: 0 0 14px !important;
    position: sticky;
    top: var(--ar-chrome-t);
    z-index: 8;
    background: var(--ar-bg) !important;
    border-top: 1px solid #E6E9EF;
    border-bottom: 1px solid #E6E9EF;
  }
  .ar-noteribbon::-webkit-scrollbar { display: none }
  .ar-noteribbon > button {
    flex: 0 0 auto;
    min-width: 46px !important;
    min-height: 46px !important;
    font-size: 17px !important;
    border-radius: 12px !important;
  }
}

/* ==================================================== 15. schedule (gantt)
   The grid is a spreadsheet and cannot be made touch friendly, so on a phone
   it is one of two views rather than the only one. The list is the default;
   the timeline keeps every pixel of the desktop chart and scrolls inside its
   own box. */

.ar-gmob { display: none }

@media (max-width: 760px) {
  .arya-screen {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }
  .ar-gmob { display: block }
  .ar-mdock.ar-gmob { display: flex }
  .ar-gdesk { display: none !important }

  /* the schedule is a full-screen drill-down, so it carries an app bar but no
     tab bar: the way back is the arrow, the way forward is a task */
  .arya-screen { padding-top: var(--ar-chrome-t) }
  .arya-screen .ar-mdock {
    bottom: 0;
    padding-bottom: calc(10px + var(--ar-safe-b));
  }

  .ar-gmob__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px calc(90px + var(--ar-safe-b));
  }
  /* the timeline: full desktop chart, scrolling inside itself only */
  .ar-gmob__tl {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .ar-gmob__tl > .aq {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .ar-gmob__tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--ar-bg);
    border-bottom: 1px solid #E6E9EF;
  }
  .ar-gmob__tools .ar-seg { flex: 1 1 auto }
  .ar-gmob__zooms {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--ar-sunken);
    border-radius: 11px;
  }
  .ar-gmob__zooms > button {
    min-width: 44px;
    min-height: 40px;
    border: none;
    border-radius: 9px;
    background: none;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ar-ink-soft);
    cursor: pointer;
  }
  .ar-gmob__zooms > button[aria-pressed="true"] {
    background: #FFFFFF;
    color: var(--ar-ink);
    box-shadow: var(--ar-shadow-sm);
  }
  .ar-gmob__stats {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 0 14px;
  }
  .ar-gmob__stats::-webkit-scrollbar { display: none }
  .ar-gmob__stat {
    flex: 0 0 auto;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 9px 13px;
    box-shadow: var(--ar-shadow-sm);
    min-width: 84px;
  }
  .ar-gmob__stat b {
    display: block;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
  }
  .ar-gmob__stat span {
    display: block;
    font-size: 12px;
    color: var(--ar-ink-soft);
    margin-top: 2px;
    white-space: nowrap;
  }
  /* the indent of a sub-task, stated as a rail rather than whitespace so it
     survives a narrow screen */
  .ar-mrow--sub { margin-left: 16px }
  .ar-mrow--summary { background: #FBFCFE }

  /* the desktop chrome that has no place on a phone */
  .ar-ribbon { display: none !important }
}

/* ---- importing a spreadsheet on a phone -------------------------------
   The dialog is a desktop panel floating in a dark room. On a phone it
   becomes the screen, its two-column mapping form becomes one column, and
   the preview table scrolls inside its own box. */

@media (max-width: 760px) {
  /* the dialog is absolutely positioned inside .arya-screen, whose padding
     box starts behind the fixed app bar; without this its heading is hidden */
  .ar-import {
    padding: 0 !important;
    align-items: stretch !important;
    top: var(--ar-chrome-t) !important;
  }
  .ar-import__panel {
    border-radius: 0 !important;
    max-height: 100% !important;
    max-width: none !important;
    padding-top: var(--ar-safe-t);
    padding-bottom: var(--ar-safe-b);
    -webkit-overflow-scrolling: touch;
  }
  .ar-import__panel > div { padding-left: 16px !important; padding-right: 16px !important }
  .ar-import__fields { grid-template-columns: minmax(0, 1fr) !important }
  .ar-import__fields label { flex-wrap: wrap }
  .ar-import__fields label > span:first-child { flex: 1 0 100% !important; margin-bottom: 4px }
  .ar-import__panel select { min-height: 48px }
  /* the preview is a table and stays a table; it scrolls rather than wraps */
  .ar-import__panel [style*="border-radius: 12px"][style*="overflow: hidden"] {
    overflow-x: auto !important;
  }
  .ar-import__panel button { min-height: 48px }
}

/* ==================================================== 15b. the keyboard
   mobile.js marks the document while a text field has focus. Everything
   pinned to the bottom of the screen gets out of the way: on iOS a fixed
   element stays with the layout viewport, so the tab bar would otherwise sit
   on top of the field being typed into. */

@media (max-width: 760px) {
  html.ar-kb .ar-nav,
  html.ar-kb .ar-mdock { display: none !important }
  /* the screen no longer has to clear bars that are not there */
  html.ar-kb .arya-app { padding-bottom: 16px }
  html.ar-kb .ar-has-dock { padding-bottom: 24px !important }
  /* a full-screen sheet already reserves keyboard clearance; with the bars
     gone it does not need as much */
  html.ar-kb .ar-sheet__body { padding-bottom: calc(28vh + var(--ar-safe-b)) }
}

/* ==================================================== 16. tablet
   Not a big phone and not a small desktop: the sidebar comes back as a
   narrow rail, and lists use the extra width for two columns. */

@media (min-width: 761px) and (max-width: 1024px) {
  /* The sidebar keeps its width: squeezing it only truncates the labels, and
     the space it would give back is not enough to change any layout. What a
     tablet actually needs is tighter bands and finger-sized controls. */
  .ar-band { padding: 28px 26px }
  .ar-2col { gap: 22px }
  /* touch targets stay generous: a tablet is still a finger */
  .arya-app button, .arya-app a[href], .arya-app select { min-height: 44px }
}

/* ==================================================== 17. print
   None of the phone chrome may reach paper. */

@media print {
  .ar-appbar, .ar-nav, .ar-mdock, .ar-sheet, .ar-gmob { display: none !important }
  /* theme.css loads after the schedule's own print rules, so the phone
     layer's `display: flex !important` on .arya-screen was outranking the
     `display: none !important` that keeps the live UI off the paper. This
     restores it, for a narrow print width as well as a wide one. */
  .arya-screen { display: none !important }
  .arya-print { display: block !important }
}