/* Arunodya Feeds - three colours and nothing else: the brand orange, white paper,
   near-black ink. Orange is 2.78:1 on white, so it is structure and never ink:
   buttons take black text on orange, never white.

   Deliberately one theme. A dark cut of this makes the orange the brightest thing
   on the screen and the portal reads as a night dashboard, which it is not - a
   vendor opens it on a phone in daylight. color-scheme pins the native bits too
   (scroll bars, the date picker, select popups), which otherwise turn charcoal on
   a machine set to dark and leave the page looking half-repainted. */
:root {
  color-scheme: light;
  --accent: #ef7b2e;
  --accent-soft: #fdf1e8;
  /* Ink for anything sitting on the orange. 6.7:1 - white would be 2.78:1. */
  --on-accent: #121212;
  /* The brand orange darkened until it can carry words: 6.1:1 on white. */
  --accent-ink: #a34700;
  --ink: #121212;
  --paper: #fff;
  --card: #fff;
  --line: #e2e0dd;
  --muted: #5b5651;
  --bad: #c22e00;
  --good: #1b7a3d;
  --radius: 12px;
  --shadow: 0 1px 2px rgb(18 18 18 / 6%), 0 8px 24px rgb(18 18 18 / 4%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* Two rows at the top. The thin brand band carries the name and how to reach us;
   the white row under it carries the mark and the links. Only the pair sticks -
   the band's own height changes as it wraps, so a second sticky under it would
   need a height nobody can know up front. */
header.top { position: sticky; top: 0; z-index: 5; }

/* The band is the same orange in both themes, so its ink is fixed here and never
   taken from --ink - the dark theme's cream would sit at 2.7:1 on orange. */
.bar {
  display: flex;
  align-items: center;
  gap: 10px 32px;
  flex-wrap: wrap;
  padding: 20px 32px;
  background: var(--accent);
  color: var(--on-accent);
}

.bar h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Dark type on the orange band goes thin and washed out at a normal weight - the
   band is the loudest colour on the page and it swallows fine strokes. 700 puts the
   addresses, the numbers and the two links back on top of it. */
.contact { margin-left: auto; display: flex; align-items: center; gap: 4px 28px; flex-wrap: wrap; font-size: 17px; font-weight: 700; }
.contact .stack { display: flex; flex-direction: column; }
.contact a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; padding: 3px 0; }
.contact a:hover { text-decoration: underline; }
/* The icons are drawn at 1.8; on the band they are set beside 700 type and have to
   hold their own against it. */
.contact svg { width: 20px; height: 20px; flex: none; stroke-width: 2.3; }

/* A thumb needs the full target; a mouse does not, and forcing 44px on every row
   would double the height of the band on the desk. */
@media (pointer: coarse) { .contact a { min-height: 44px; } }

/* On a phone the band wraps into a ragged block - Career ends up floating beside a
   phone number, because it is one item aligned against a two-line stack. One item
   per line, all starting at the same margin. */
@media (max-width: 700px) {
  .contact { flex-direction: column; align-items: flex-start; gap: 0; margin-left: 0; }
  .contact .stack { width: 100%; }
}

.bar a:focus-visible { outline-color: var(--on-accent); }

/* ---- the white row: mark on the left, links on the right ---- */
.navbar {
  display: flex;
  align-items: center;
  gap: 12px 34px;
  flex-wrap: wrap;
  padding: 16px 32px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

/* The mark is the sunrise stacked over the wordmark - squeeze it and the name
   under it stops being readable, which is the point of putting it there. The
   wordmark is near-black on white, which is the page it now always sits on.
   The block sits at the left edge; inside it the mark is centred over the tagline,
   which is the wider of the two and therefore sets the block's width. */
.navbar .brand { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.navbar .mark { display: flex; }
.navbar .mark img { height: 96px; width: auto; display: block; }
/* The mark has no tagline drawn into it, so it is set underneath as type.
   --accent-ink, not --accent: the vivid orange is 2.78:1 and cannot carry words. */
.navbar .tagline {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.03em;
  color: var(--accent-ink);
}

.mainnav { margin-left: auto; display: flex; align-items: stretch; gap: 0 30px; flex-wrap: wrap; }
.mainnav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 4px 2px;
  /* These are the way round the site, so they are set in the page's own ink at the
     weight of a heading. Grey at 600 read as if they had been disabled. */
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
/* Hover now has to move somewhere, since the resting state is already full ink. */
.mainnav a:hover { color: var(--accent-ink); }
/* Plain --accent as text is 2.78:1; --accent-ink is the same hue at 6.1:1. The
   underline can stay the vivid colour - a rule carries no words. */
.mainnav a[aria-current] { color: var(--accent-ink); border-bottom-color: var(--accent); }
/* Drawn at 1.8 and set beside 700 type they looked like a lighter pass. */
.mainnav svg { width: 20px; height: 20px; flex: none; stroke-width: 2.3; }

/* Staff have no links here - they are the purchase department - so who-am-I takes
   the right edge there, and falls in behind the links on the vendor pages. */
.navbar .who { margin-left: auto; color: var(--muted); font-size: 15px; text-align: right; }
.navbar .mainnav ~ .who { margin-left: 0; }

/* The banners across the top of the home page. Full width and whole: the words
   are printed into the picture, so cropping to a shorter strip would cut the
   headline off. Dark backing so the moment before the first one loads is not a
   white flash the height of the banner. */
.hero { position: relative; background: #0d2b1d; line-height: 0; }
/* 16:9 at every width, the ratio the artwork was drawn at. Pinned rather than left
   to `height: auto` so the box is the right shape before the picture has loaded. */
.hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.hero img[hidden] { display: none; }

.hero .controls { position: absolute; left: 0; right: 0; bottom: clamp(0px, 0.8vw, 10px);
  display: flex; align-items: center; justify-content: center; }
.hero .dots { display: flex; }
/* The dot is 12px; the thumb it is aimed at is not, so the button around it is
   the full 44 and only the ::after is drawn. */
.hero .controls button {
  width: 44px; height: 44px; min-height: 0; padding: 0;
  display: grid; place-items: center;
  background: none; border: none; border-radius: 50%;
}
.hero .dots button::after {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  background: rgb(255 255 255 / 60%); border: 1px solid rgb(18 18 18 / 40%);
}
.hero .dots button[aria-current]::after { background: var(--accent); border-color: var(--on-accent); }
.hero .dots button:hover::after { background: #fff; }

/* Nothing on this page moves except the banners, and they move on their own -
   so there has to be a way to stop them. It is the only control here that says
   what it does with a shape rather than a dot. */
.hero #hold svg { width: 15px; height: 15px; color: #fff; filter: drop-shadow(0 1px 2px rgb(18 18 18 / 70%)); }
.hero #hold svg path { fill: currentColor; }
.hero #hold:hover svg { color: var(--accent); }


main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 80px; }

/* A page that runs the whole width of the window. Anything on such a page that
   still reads better in a column - a list, a form to fill in - says so with
   `narrow` and keeps the usual 1100. */
/* 32px is the band's own side padding - so the first card starts on the same line
   the logo above it starts on, rather than a few pixels inside it. */
main.wide { max-width: none; padding-inline: clamp(16px, 3vw, 32px); }
main.wide > section.narrow { max-width: 1100px; margin-inline: auto; }

/* Four fields across and no more. Left to itself auto-fit would put seven 200px
   boxes on a 1600px screen, and a row of seven is a form nobody can read across.
   A grid that has already said how many columns it wants - `pairs`, `doors` - is
   left alone: four is the default for a plain row of fields, not a law. Without
   the exclusion this rule reached inside the careers text column and cut the two
   doors there into quarters of it. */
@media (min-width: 1000px) {
  main.wide .grid:not(.pairs):not(.doors) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The document rows are a name on the left and its file button on the right. Across
   a whole 1600px window those two are a foot apart and stop looking like one row. */
#docs { max-width: 900px; }

/* Careers: the words and the two doors on the left, the photograph filling the
   right, the way the reference page sets it out. The text column is capped -
   a line of prose 900px long is unreadable no matter how wide the screen is -
   and the photograph takes every pixel that is left. Below 860px there is no
   room for two columns and it stacks. */
.split { display: grid; gap: 24px; grid-template-columns: minmax(0, 620px) 1fr; align-items: stretch; }
/* The words are shorter than the photograph beside them - sat in the middle of
   that height rather than pinned to the top with a hole underneath. */
.split > div { align-self: center; }
.split img.side {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  /* Left to itself the picture is taller than the words beside it and stretches
     the card - capped, and `cover` takes the crop off the ceiling and the table
     rather than off anybody's face. */
  max-height: 520px;
  object-fit: cover;
  /* Wide screens crop the photograph top and bottom - biased upward so the crop
     comes off the desk rather than off the faces. */
  object-position: center 28%;
  border-radius: var(--radius);
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split img.side { min-height: 0; max-height: 260px; object-position: center 30%; }
}

/* The careers heading, sized and set like the reference one rather than like a
   section title. */
h2.big {
  font-size: 30px;
  line-height: 1.2;
  margin-bottom: 10px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
p.lead { margin: 0 0 10px; font-weight: 700; color: var(--accent-ink); }

section.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

/* Headings carry as far as their weight lets them. 800 rather than the browser's
   700, and a step up in size with it: at 18px against 16px body text a heading was
   only just louder than the sentence under it, and a page of them read flat. */
h2 { font-size: 20px; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 + p.sub { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
h3 { font-size: 16px; font-weight: 800; margin: 22px 0 10px; }
h2.big, .cardhead h2 { font-weight: 800; }
dt { font-weight: 700; }

/* A field label is the heading of its box, and on the login and feedback forms it
   is the only heading there is - so it carries the same weight as one. */
label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
label .opt { font-weight: 400; color: var(--muted); }

input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}

textarea { min-height: 72px; resize: vertical; }

/* A password box and the eye that opens it. The eye sits inside the box rather than
   beside it, so the field keeps the width of every other field in the row. */
.pw { position: relative; display: block; }
.pw input { padding-right: 48px; }
.pw .peek {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  /* Not a button in the page's sense - no fill, no border, no weight. */
  min-height: 36px;
  padding: 6px 8px;
  background: none;
  border: 0;
  color: var(--muted);
}
.pw .peek:hover { color: var(--ink); background: none; }
.pw .peek svg { width: 21px; height: 21px; display: block; }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.field { min-width: 0; }
.field.wide { grid-column: 1 / -1; }

/* Two columns and never three - the careers form pairs its fields left and right,
   the way the reference one does, so the pairing has to survive a wide screen.
   `doors` is the same two-up shape for the pair of panels on the careers page. */
.grid.pairs, .grid.doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .grid.pairs, .grid.doors { grid-template-columns: 1fr; } }

/* The mark against a field that cannot be left empty. Red alone says nothing to
   a screen reader, so the input carries `required` and this is aria-hidden. */
.req { color: var(--bad); font-weight: 700; }

/* Feedback & Contact: the form on the left, the office beside it, the way the
   reference page sets it out. The form leads at every width - it is what the
   page is for, the address is what you fall back on. */
/* Edge to edge across the window. The form keeps a fixed width - a text box a
   metre wide is worse to type in, not better - and everything left over goes to
   the office, where the map can use it. */
.contact-cols { display: grid; gap: clamp(32px, 4vw, 64px);
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr); align-items: start; }
@media (max-width: 700px) { .contact-cols { grid-template-columns: 1fr; } }

/* The form sits in a tinted box, the addresses on the open page. */
.formbox { background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }

.office h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
  font-size: 17px;
}
.office h3 svg { width: 20px; height: 20px; flex: none; color: var(--accent-ink); }
.office p { margin: 8px 0; }
.office a { display: inline-flex; align-items: center; gap: 6px; }
.office a svg { width: 16px; height: 16px; flex: none; }
.office .map { display: block; width: 100%; height: clamp(280px, 26vw, 400px);
  border: 1px solid var(--line); border-radius: var(--radius); }
/* The link under the map, for the driver who wants it on his own phone. */
.office .map + p { margin-top: 12px; }

/* The captcha picture, and the arrow that fetches another one. */
.cap { display: inline-flex; }
.cap svg { border: 1px solid var(--line); border-radius: 8px; }
.cap ~ button svg { width: 22px; height: 22px; display: block; }

/* A titled box - the shape the careers page uses for its two doors. */
.panel { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; height: 100%; }
.panel h3 {
  margin: 0;
  padding: 12px 16px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 16px;
}
.panel p { margin: 14px 0; padding: 0 16px; }
.panel .row { padding: 0 16px 14px; }

button {
  min-height: 44px;
  padding: 11px 18px;
  font: inherit;
  font-weight: 650;
  color: var(--ink);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: filter 150ms ease;
}

button:hover { filter: brightness(1.06); }
button:active { filter: brightness(0.94); }
button:disabled { opacity: 0.55; cursor: default; filter: none; }

button.ghost { background: transparent; border-color: var(--line); color: var(--ink); }
button.ghost:hover { background: var(--accent-soft); }
button.link { background: none; border: none; color: var(--ink); text-decoration: underline; padding: 0 4px; min-height: 32px; }
button.small { min-height: 36px; padding: 7px 12px; font-size: 14px; }
/* The cross that takes an attached file back off. No underline - it is a symbol,
   not a word - and it turns red only under the pointer, so a row of seven of
   them does not read as seven errors. */
button.link.x {
  text-decoration: none; font-size: 20px; line-height: 1;
  min-width: 32px; color: var(--muted);
}
button.link.x:hover, button.link.x:focus-visible { color: var(--bad); }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }
/* The buttons under a set of fields sat flush against the last one - and a focused
   box draws its ring 4px outside itself, so the ring landed on top of the button.
   Collapses with the message's own margin when there is a message to show. */
.grid ~ .row { margin-top: 16px; }
.spacer { flex: 1; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.l1 td { background: var(--accent-soft); }
/* The lowest quote, called out where it is a word rather than a whole row.
   --accent-ink, not --accent - the vivid orange cannot carry text. */
strong.l1 { color: var(--accent-ink); }
.table-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }

.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.tag.open { background: var(--accent-soft); border-color: var(--accent); }
.tag.closed { color: var(--muted); }
.tag.awarded { color: var(--good); border-color: currentcolor; }
.tag.cancelled, .tag.rejected { color: var(--bad); border-color: currentcolor; }

.msg { padding: 12px 14px; border-radius: 10px; font-size: 14px; margin: 14px 0; border: 1px solid var(--line); }
.msg.err { color: var(--bad); border-color: currentcolor; }
.msg.ok { color: var(--good); border-color: currentcolor; }
.msg:empty { display: none; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: "Cascadia Mono", Consolas, monospace; font-size: 13px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tabs button {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--muted);
  font-weight: 700;
  padding: 12px 14px;
  /* The row scrolls sideways on a narrow screen - which it can only do if the
     buttons keep their own width instead of being squeezed until they wrap. */
  flex: none;
  white-space: nowrap;
}
.tabs button[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); }

/* Three steps have to fit across a 390px phone, or the last one hangs off the edge
   and reads as though the form has been cut short. */
@media (max-width: 560px) {
  .tabs button { padding: 12px 4px; font-size: 13px; }
}

details { border-top: 1px solid var(--line); padding: 10px 0; }
details summary { cursor: pointer; font-weight: 700; font-size: 14px; min-height: 32px; }

/* One issued document - what it is on the left, what he has to do about it on
   the right. Wraps on a phone rather than squeezing the buttons. */
.paper {
  display: flex; gap: 12px; flex-wrap: wrap;
  align-items: flex-start; justify-content: space-between;
  padding: 10px 0; border-top: 1px dashed var(--line);
}
.paper:first-of-type { border-top: 0; }

/* His documents are the one thing on the page he reads rather than scans - an
   order he has to load against, a balance he has to agree with. The page defaults
   put all of that in 13px grey stacked on 10px, which reads as fine print on a
   notice he is being asked to act on. Set at the body size, given room to breathe,
   and the reference itself made the biggest thing in the row - it is what he came
   here to find. Scoped to this list; the tender accordion below stays as it is. */
#papers > details { padding: 16px 0; }
#papers summary { font-size: 16px; min-height: 36px; }
#papers > details > p.small { font-size: 14px; margin: 10px 0 4px; }
#papers .paper { padding: 14px 0; gap: 14px 28px; }
#papers .paper a { font-size: 17px; font-weight: 700; }
#papers .paper .small { font-size: 14px; line-height: 1.65; margin-top: 3px; }
/* The line the desk wrote him and the line he wrote back are what the row is
   about; the file size and the date it was issued are not. */
#papers .paper .small:last-child { font-size: 13px; }

dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  padding: 22px;
  max-width: 440px;
  width: calc(100% - 32px);
}
dialog::backdrop { background: rgb(0 0 0 / 45%); }

/* A page of terms does not read at 440px - the numbers end up further from their
   sentences than the sentences are long. */
dialog.terms { max-width: 660px; }
/* And it scrolls inside the box, so the Cancel and Next under it stay on screen
   however long the list gets. */
.scroller {
  max-height: 46vh; overflow: auto;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 14px 14px 4px; margin: 12px 0;
}
.tick { gap: 8px; align-items: flex-start; }
.tick input { width: auto; min-height: 0; margin-top: 3px; }

/* "* Mandatory Fields." sits opposite the heading, as it does on the form this
   one is modelled on. It wraps under on a narrow screen rather than squeezing. */
.cardhead { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 24px; }
.cardhead h2 { margin: 0; }
.cardhead .star { margin: 0; color: var(--bad); font-weight: 600; }

/* An empty box is only wrong once he has said he is finished. Before the first
   Submit a form of thirty fields would otherwise open entirely in red. */
form.tried :invalid { border-color: var(--bad); }
form.tried :invalid:focus { outline-color: var(--bad); }

@media (max-width: 560px) {
  /* Both rows wrap on a phone - sticky would leave nothing to read under them. */
  header.top { position: static; }
  .bar { padding: 14px 16px; gap: 8px 18px; }
  .bar h1 { font-size: 25px; }
  .navbar { padding: 12px 16px; gap: 10px 20px; }
  .navbar .mark img { height: 70px; }
  .navbar .tagline { font-size: 13px; }
  .contact, .mainnav { margin-left: 0; font-size: 15px; gap: 3px 20px; }
  /* .mainnav a sets its own size, so the parent rule above never reaches it. */
  .mainnav a { font-size: 15px; min-height: 48px; }
  main { padding: 14px 12px 60px; }
  section.card { padding: 16px; border-radius: 10px; }
  .table-wrap { margin: 0 -16px; padding: 0 16px; }
}