/* ==========================================================================
   CANETE DESIGN LLC — site styles
   Concept: solid volumes and precise joints, taken from the Plan C logo.
   ========================================================================== */

/* ---------- Fonts ----------
   Archivo (SIL Open Font License, see fonts/OFL-Archivo.txt), hosted with the site.
   One variable file holds every weight (100–900) and width (62–125%).
   If it can't load, the browser uses Helvetica Neue (Apple) or Arial (Windows). */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2-variations"),
       url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2-variations"),
       url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* colour */
  --paper:    #F7F8F8;   /* page background */
  --concrete: #E3E6E9;   /* quiet surfaces, hairlines */
  --ink:      #23272B;   /* text, logo walls */
  --joint:    #6E7479;   /* secondary text (logo groove grey, darkened for contrast) */
  --red:      #D62B27;   /* logo volume: active page, focus, key accents only */
  --red-deep: #A51F1C;

  /* type */
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* layout */
  --header-h: 96px;
  --gutter: clamp(20px, 4vw, 48px);
}

@media (max-width: 900px) {
  :root { --header-h: 76px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, address { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 20;
  height: var(--header-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-header--light { background: var(--paper); border-bottom: 1px solid var(--concrete); }
/* the header stays at the top while the page scrolls; once it has, a soft shadow sets it apart */
.site-header--light, .site-header--dark { position: sticky; top: 0; transition: box-shadow 0.25s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(35, 39, 43, 0.09); }
html { scroll-padding-top: var(--header-h); }   /* links to a spot in the page land below the header */
.site-header--dark  { background: var(--ink); color: #fff; }
.site-header--overlay {
  position: absolute; top: 0; left: 0; right: 0;
  color: #fff;
}

.brand {
  display: flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
}

.brand__mark { width: 47px; height: 47px; flex: none; }

.brand__text { display: flex; flex-direction: column; line-height: 1.2; }

.brand__name {
  font-size: 19.5px;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: 0.08em;
}

.brand__tag { font-size: 15.5px; opacity: 0.72; }

/* ---------- Navigation ---------- */
.site-nav { margin-right: clamp(0px, 4vw, 64px); }
.nav { display: flex; align-items: center; gap: 4px; }

.nav > li { position: relative; }

.nav a {
  display: block;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

/* current page: a short red bar, like the logo's volume */
.nav > li > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--red); }
.nav > li > a:hover { box-shadow: inset 0 -2px 0 currentColor; }
.nav > li > a[aria-current="page"]:hover { box-shadow: inset 0 -2px 0 var(--red); }

/* dropdown panels are always light */
.sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  padding: 8px 0;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--concrete);
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.sub .sub { top: -9px; left: 100%; }
.sub .sub.flip-left { left: auto; right: 100%; }

.sub li { position: relative; }
.sub a { padding: 9px 20px; font-size: 14px; font-weight: 400; }
.sub a:hover, .sub a:focus-visible { background: var(--paper); color: var(--red-deep); }

.has-sub:hover > .sub,
.has-sub:focus-within > .sub {
  visibility: visible;
  opacity: 1;
  transform: none;
}

/* a small caret on items with a flyout */
.sub .has-sub > a::after { content: "›"; float: right; margin-left: 16px; color: var(--joint); }

.menu-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: inherit;
  font: 500 15px var(--font);
  cursor: pointer;
}

.menu-toggle__bars,
.menu-toggle__bars::before {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease;
}
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before { content: ""; position: absolute; top: 6px; }

.nav-open .menu-toggle__bars { transform: translateY(3px) rotate(45deg); }
.nav-open .menu-toggle__bars::before { transform: translateY(-6px) rotate(-90deg); }

@media (max-width: 900px) {
  .site-nav { margin-right: 0; }
  .brand__mark { width: 39px; height: 39px; }
  .brand { gap: 12px; }
  .brand__name { font-size: 16px; }
  .brand__tag { font-size: 13px; }
  .menu-toggle { display: flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: 8px var(--gutter) 24px;
    background: var(--paper);
    color: var(--ink);
    border-bottom: 1px solid var(--concrete);
  }
  .nav-open .site-nav { display: block; }

  .nav { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > li { border-bottom: 1px solid var(--concrete); }
  .nav a { padding: 14px 0; font-size: 17px; }

  .sub, .sub .sub {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    min-width: 0;
    padding: 0 0 8px 16px;
    background: none;
    border: 0;
  }
  .sub a { padding: 8px 0; font-size: 15px; }
  .sub .has-sub > a::after { content: none; }
}

/* ==========================================================================
   Home: full-screen slideshow
   Each photo zooms 100% → 112% over 10 s; the next one cross-fades in over
   the last 1.5 s while both keep zooming.
   ========================================================================== */
.page-home { overflow: hidden; background: #000; }

.hero {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background: #000 center / cover no-repeat;
  opacity: 0;
  will-change: opacity, transform;
}

.hero__slide.is-active {
  z-index: 2;
  opacity: 1;
  transition: opacity 1.5s ease-in-out;
  animation: hero-zoom 10s linear forwards;
}

.hero__slide.is-leaving {
  z-index: 1;
  opacity: 1;
  animation: hero-zoom 10s linear forwards;
}

@keyframes hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

/* shading so the header and caption stay readable on any photo */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;
}
.hero::before { top: 0; height: 180px; background: linear-gradient(rgba(0,0,0,0.55), transparent); }
.hero::after { bottom: 0; height: 240px; background: linear-gradient(transparent, rgba(0,0,0,0.6)); }

.hero__caption {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 44px;
  z-index: 4;
  transition: opacity 0.6s ease;
}
.hero__caption.is-changing { opacity: 0; }

.hero__title {
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 500;
  font-stretch: 112%;
  line-height: 1.15;
}

.hero__place { margin-top: 6px; font-size: 15px; opacity: 0.8; }

.hero__progress {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 24px;
  z-index: 4;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
}

.hero__progress span {
  display: block;
  height: 100%;
  background: var(--red);
  transform-origin: left;
  transform: scaleX(0);
}
.hero__progress span.is-running { animation: hero-progress 8.5s linear forwards; }

@keyframes hero-progress { to { transform: scaleX(1); } }

/* ---------- Home: logo intro (see js/intro.js) ---------- */
.intro { display: none; }

.intro-active .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--paper);
  transition: background-color 1s ease;
}
.intro.is-leaving { background-color: rgba(247, 248, 248, 0); pointer-events: none; }
.intro.is-skipped { opacity: 0; transition: opacity 0.4s ease; }

.intro__canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(56vmin, 440px);
  height: min(56vmin, 440px);
  transform: translate(0, 0);
  translate: -50% -50%;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.intro__canvas.is-visible { opacity: 1; }

.intro__skip {
  position: absolute;
  right: var(--gutter);
  bottom: 28px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--joint);
  font: 14px var(--font);
  cursor: pointer;
}
.intro.is-leaving .intro__skip { visibility: hidden; }

/* the header logo waits while the 3D one is on its way */
.intro-active .site-header .brand__mark { visibility: hidden; }

/* ==========================================================================
   Portfolio: 3D tiles on a drafting table (see js/portfolio.js)
   ========================================================================== */
.page-portfolio { overflow: hidden; background: var(--paper); }

.portfolio {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  touch-action: none;
}

.portfolio__canvas { display: block; width: 100%; height: 100%; }

/* title of the current selection; moves with the tiles */
.portfolio__heading {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}
.portfolio__heading h1 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 500;
  font-stretch: 118%;
  line-height: 1.1;
}
.portfolio__heading p { margin-top: 6px; font-size: 14px; color: var(--joint); }

/* project name that follows the pointer */
.tile-label {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  padding: 7px 12px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.tile-label.is-visible { opacity: 1; }
.tile-label small { display: block; font-size: 12px; opacity: 0.7; }

/* back of the tile: description and photo slideshow */
.panel {
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-rows: minmax(0, 62fr) minmax(0, 38fr);
  background: #fff;
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}
.panel.is-open { opacity: 1; visibility: visible; }

.panel__photo { position: relative; min-height: 0; background: #0f0f0f; overflow: hidden; }
.panel__photo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.panel__arrow {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font: 300 30px/1 var(--font);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.panel__arrow:hover { background: var(--red); color: #fff; }
.panel__arrow--prev { left: 16px; }
.panel__arrow--next { right: 16px; }

.panel__count {
  position: absolute;
  right: 16px;
  bottom: 12px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
}

.panel__text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 24px;
  padding: clamp(16px, 2.4vw, 32px);
  min-height: 0;
}
.panel__title {
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 500;
  font-stretch: 115%;
  line-height: 1.15;
}
.panel__meta { margin-top: 6px; font-size: 14px; color: var(--joint); }
.panel__desc {
  grid-column: 1 / -1;
  margin-top: 14px;
  max-width: 62ch;
  overflow-y: auto;
  font-size: 15px;
  line-height: 1.55;
}
.panel__close {
  align-self: start;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 500 15px var(--font);
  box-shadow: inset 0 -2px 0 var(--red);
  cursor: pointer;
}

.portfolio__notice {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: var(--gutter);
  text-align: center;
  font-size: 16px;
}
.portfolio__notice[hidden] { display: none; }
.portfolio__notice p + p { color: var(--joint); font-size: 14px; }

/* keyboard / screen reader access to the projects */
.project-list button {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  border: 0; padding: 0;
}
.project-list button:focus-visible {
  width: auto; height: auto; clip: auto; z-index: 40; top: 12px; left: 12px;
  padding: 10px 14px; background: var(--ink); color: #fff; font: 14px var(--font);
}

/* ==========================================================================
   Content pages (Our firm, Careers)
   ========================================================================== */
.page {
  max-width: 1200px;
  padding: clamp(40px, 7vw, 96px) var(--gutter);
}
.page__head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.page h1 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 500;
  font-stretch: 118%;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.page__lead { margin-top: 18px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--joint); }

.page h2 { font-size: 22px; font-weight: 500; font-stretch: 112%; line-height: 1.2; }
.page p { max-width: 64ch; line-height: 1.6; }

/* blocks separated by the logo's joint: a 2px ink rule on top */
.blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px 48px;
}
.block { padding-top: 18px; border-top: 2px solid var(--ink); }
.block p { margin-top: 10px; color: #3F454A; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.split + .split { margin-top: clamp(48px, 7vw, 88px); }
.split p + p { margin-top: 14px; }
.portrait {
  aspect-ratio: 4 / 5;
  background: var(--concrete);
  display: grid;
  place-content: center;
  color: var(--joint);
  font-size: 14px;
}

.rows { border-top: 2px solid var(--ink); }
.rows li {
  display: grid;
  grid-template-columns: 90px minmax(0, 2fr) minmax(0, 2fr);
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--concrete);
}
.rows .rows__year { font-weight: 500; }
.rows .rows__sub { color: var(--joint); }

.job + .job { margin-top: 32px; }
.job__meta { margin-top: 4px; font-size: 14px; color: var(--joint); }

.note {
  margin-top: 56px;
  padding: 16px 20px;
  background: var(--concrete);
  font-size: 14px;
  color: #3F454A;
}

@media (max-width: 800px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .rows li { grid-template-columns: 70px minmax(0, 1fr); }
  .rows .rows__sub { grid-column: 2; }
  .portrait { max-width: 320px; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 8vw, 120px);
  max-width: 1200px;
  padding: clamp(40px, 7vw, 96px) var(--gutter);
}

.contact h1 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 500;
  font-stretch: 118%;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.contact__lead { margin-top: 16px; font-size: 18px; color: var(--joint); }

.contact__axon { display: block; width: min(240px, 70%); height: auto; margin: 48px 0; }

.contact address { font-style: normal; line-height: 1.6; }
.contact address strong { font-weight: 600; font-stretch: 112%; letter-spacing: 0.04em; }
.contact address a { text-decoration: none; box-shadow: inset 0 -1px 0 var(--ink); }

.form { display: grid; gap: 24px; align-content: start; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.form label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--joint); }

.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #B9BEC3;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 16px var(--font);
}

.form textarea { min-height: 140px; resize: vertical; }

.form input:focus,
.form select:focus,
.form textarea:focus { outline: none; border-bottom: 2px solid var(--red); margin-bottom: -1px; }

.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }

.button {
  padding: 14px 28px;
  border: 0;
  background: var(--ink);
  color: #fff;
  font: 500 15px var(--font);
  cursor: pointer;
  transition: background 0.2s ease;
}
.button:hover { background: var(--red); }

.form__note { font-size: 13px; color: var(--joint); }
.form__error { font-size: 14px; color: var(--red-deep); }
.form__error:empty { display: none; }

.site-footer {
  padding: 24px var(--gutter);
  border-top: 1px solid var(--concrete);
  font-size: 13px;
  color: var(--joint);
}

@media (max-width: 800px) {
  .contact { grid-template-columns: minmax(0, 1fr); }
  .form__row { grid-template-columns: 1fr; }
  .contact__axon { margin: 32px 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-active, .hero__slide.is-leaving { animation: none; }
  .hero__progress { display: none; }
  .sub, .hero__caption { transition: none; }
}

/* ==========================================================================
   Employee area (employees/*.html, js/employees/*.js)
   ========================================================================== */
.page-staff { background: var(--paper); min-height: 100vh; }

.staff-header {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
  padding: 0 var(--gutter);
  background: var(--ink);
  color: #fff;
  flex-wrap: wrap;
}
.staff-header .brand__mark { width: 34px; height: 34px; }
.staff-header .brand__name { font-size: 15px; }
.staff-header .brand__tag { font-size: 12px; }
.staff-nav { display: flex; gap: 4px; margin-left: 24px; flex: 1; }
.staff-nav a { padding: 10px 12px; font-size: 15px; font-weight: 500; text-decoration: none; }
.staff-nav a:hover { box-shadow: inset 0 -2px 0 currentColor; }
.staff-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--red); }

.staff-user { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.staff-user button {
  padding: 8px 0; border: 0; background: none; color: inherit; font: 500 14px var(--font);
  opacity: 0.75; cursor: pointer;
}
.staff-user button:hover { opacity: 1; }

.avatar {
  display: inline-grid;
  place-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--concrete);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--large { width: 160px; height: 160px; font-size: 44px; }

.staff-main { max-width: 1280px; padding: clamp(32px, 5vw, 64px) var(--gutter) 80px; }
.staff-main h1 {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 500;
  font-stretch: 115%;
  line-height: 1.1;
}
.staff-lead { margin-top: 8px; color: var(--joint); font-size: 16px; }
.staff-section { margin-top: 48px; }
.staff-section > h2 { font-size: 20px; font-weight: 500; font-stretch: 112%; margin-bottom: 16px; }

/* dashboard tools */
.tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 36px;
}
.tool {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 190px;
  padding: 22px;
  background: #fff;
  border-top: 2px solid var(--ink);
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.tool:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(35, 39, 43, 0.1); }
.tool h2 { font-size: 19px; font-weight: 500; font-stretch: 112%; }
.tool p { color: #4A5055; font-size: 14px; line-height: 1.5; }
.tool__foot { margin-top: auto; font-size: 14px; font-weight: 500; }
a.tool .tool__foot { box-shadow: inset 0 -2px 0 var(--red); align-self: flex-start; padding-bottom: 2px; }
.tool--soon { border-top-color: var(--concrete); color: var(--joint); }
.tool--soon h2 { color: var(--ink); }

.badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 500;
  background: var(--concrete);
  color: var(--ink);
  white-space: nowrap;
}
.badge--draft { background: #FCEBD2; color: #7A4B0B; }
.badge--submitted { background: #DCEFE2; color: #1D5B33; }
.badge--empty { background: var(--concrete); color: var(--joint); }

/* list rows (contact requests, weeks) */
.list { background: #fff; border-top: 2px solid var(--ink); }
.list > li { padding: 16px 20px; border-bottom: 1px solid var(--concrete); }
.list__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.list__title { font-weight: 500; }
.list__meta { color: var(--joint); font-size: 14px; }
.list__text { margin-top: 6px; color: #3F454A; font-size: 14px; line-height: 1.5; max-width: 80ch; }
.list button.week-pick {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.list > li:has(.week-pick):hover { background: var(--paper); }
.week-pick__label { flex: 1; font-weight: 500; }
.week-pick__when { color: var(--joint); font-size: 14px; min-width: 90px; }
.week-pick__hours { color: var(--joint); font-size: 14px; min-width: 60px; text-align: right; }
.empty-note { padding: 20px; color: var(--joint); background: #fff; }

/* forms in the employee area */
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; color: var(--joint); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #C4C9CE;
  background: #fff;
  color: var(--ink);
  font: 15px var(--font);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--red); outline-offset: -1px; border-color: transparent; }
.field input[readonly] { background: var(--paper); color: var(--joint); }
.field textarea { min-height: 110px; resize: vertical; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.fields .field--wide { grid-column: 1 / -1; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
.button--quiet { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.button--quiet:hover { background: var(--ink); color: #fff; }
.button:disabled { opacity: 0.5; cursor: default; }
.form-msg { font-size: 14px; }
.form-msg--error { color: var(--red-deep); }
.form-msg--ok { color: #1D5B33; }

/* sign-in */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 32px var(--gutter); background: var(--concrete); }
.auth__card { width: min(420px, 100%); padding: 40px; background: #fff; border-top: 2px solid var(--ink); }
.auth__card .brand { margin-bottom: 32px; }
.auth__card h1 { font-size: 30px; font-weight: 500; font-stretch: 115%; }
.auth__card p { margin: 6px 0 28px; color: var(--joint); }
.auth__card form { display: grid; gap: 18px; }
.auth__back { display: inline-block; margin-top: 24px; font-size: 14px; color: var(--joint); }

/* profile */
.profile { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); margin-top: 36px; }
.profile__photo { display: grid; gap: 14px; justify-items: start; align-content: start; }
.profile__photo p { font-size: 13px; color: var(--joint); }
.profile__card { padding: 28px; background: #fff; border-top: 2px solid var(--ink); }
.profile__card + .profile__card { margin-top: 28px; }
.profile__card h2 { font-size: 19px; font-weight: 500; font-stretch: 112%; margin-bottom: 20px; }

/* timesheet */
.ts-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.ts-bar__week { font-size: 20px; font-weight: 500; font-stretch: 112%; }
.ts-nav { display: flex; gap: 6px; }
.ts-nav button {
  width: 40px; height: 40px; border: 1px solid #C4C9CE; background: #fff; color: var(--ink);
  font: 300 22px/1 var(--font); cursor: pointer;
}
.ts-nav button:hover { border-color: var(--ink); }
.ts-back { font-size: 14px; color: var(--joint); }

.ts-wrap { margin-top: 24px; overflow-x: auto; background: #fff; border-top: 2px solid var(--ink); }
.ts { width: 100%; min-width: 1080px; border-collapse: collapse; font-size: 14px; }
.ts th, .ts td { padding: 8px 6px; border-bottom: 1px solid var(--concrete); text-align: left; }
.ts th { font-size: 12px; font-weight: 500; color: var(--joint); white-space: nowrap; }
.ts th.day, .ts td.day, .ts td.total, .ts th.total { text-align: center; width: 62px; }
.ts th.weekend, .ts td.weekend { background: #F4F5F6; }
.ts select, .ts input {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font: 14px var(--font);
}
.ts select:hover, .ts input:hover { border-color: #D3D7DB; }
.ts select:focus, .ts input:focus { outline: 2px solid var(--red); outline-offset: -1px; background: #fff; }
.ts td.day input { text-align: center; padding: 7px 2px; }
.ts col.c-project { width: 22%; }
.ts col.c-function { width: 17%; }
.ts td.total, .ts tfoot td { font-weight: 500; }
.ts tfoot td { border-bottom: 0; border-top: 2px solid var(--ink); padding: 12px 6px; }
.ts .over { color: var(--red-deep); background: #FBE4E3; }
.ts .remove {
  width: 32px; height: 32px; border: 0; background: none; color: var(--joint);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.ts .remove:hover { color: var(--red); }
.ts-status { font-size: 14px; color: var(--joint); }

@media (max-width: 800px) {
  .staff-nav { order: 3; margin-left: 0; width: 100%; flex: none; overflow-x: auto; }
  .staff-header { padding-top: 10px; }
  .profile { grid-template-columns: minmax(0, 1fr); }
  .fields { grid-template-columns: 1fr; }
  .auth__card { padding: 28px; }
}

/* ---------- Employee area: icons, dialogs, tables, modules ---------- */
.icon { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.tool__icon { color: var(--ink); }
.tool__icon .icon { width: 30px; height: 30px; }
.tool--soon .tool__icon { color: var(--joint); }

.muted { color: var(--joint); }
.nowrap { white-space: nowrap; }

.icon-button {
  display: inline-grid;
  place-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.icon-button:hover { border-color: #C4C9CE; background: #fff; }
.icon-button--ok { background: var(--ink); color: #fff; }
.icon-button--ok:hover { background: var(--red); border-color: var(--red); }

/* pop-up dialogs */
.modal {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-top: 2px solid var(--ink);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(20, 24, 28, 0.25);
}
.modal::backdrop { background: rgba(35, 39, 43, 0.45); }
.modal--small { width: min(440px, calc(100vw - 32px)); }
.modal__body { padding: 28px; overflow-y: auto; max-height: calc(100vh - 48px); }
.modal h2 { font-size: 22px; font-weight: 500; font-stretch: 112%; margin-bottom: 20px; padding-right: 40px; }
.modal h3 { font-size: 15px; font-weight: 600; margin: 28px 0 12px; }
.modal__icons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.note-counter { font-size: 13px; color: var(--joint); text-align: right; margin-top: 6px; }

/* data tables */
.table-wrap { margin-top: 20px; overflow-x: auto; background: #fff; border-top: 2px solid var(--ink); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 12px 14px; border-bottom: 1px solid var(--concrete); text-align: left; vertical-align: top; }
.table th { font-size: 12px; font-weight: 500; color: var(--joint); white-space: nowrap; background: #fff; position: sticky; top: 0; }
.table__row { cursor: pointer; }
.table__row:hover, .table__row:focus-visible { background: var(--paper); outline: none; }
.table__row.is-inactive { color: var(--joint); }
.table__empty { padding: 28px 14px; color: var(--joint); }
.table__message { min-width: 320px; max-width: 60ch; line-height: 1.5; white-space: pre-wrap; }
.table strong { font-weight: 500; }

.person { display: flex; align-items: center; gap: 12px; }

.badge--proposal { background: #E1E9F5; color: #23456E; }
.badge--active { background: #DCEFE2; color: #1D5B33; }
.badge--inactive { background: #FCEBD2; color: #7A4B0B; }
.badge--closed { background: var(--concrete); color: #4A5055; }
.badge--cancelled { background: #F7DEDD; color: #8B1416; }

/* filters bar */
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 14px 16px; margin-top: 28px; }
.filters .field { min-width: 150px; }
.filters .field--grow { flex: 1; min-width: 220px; }
.page-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.page-tools .muted { font-size: 14px; }

/* team rows and project assignments */
.team-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 36px; gap: 10px; margin-bottom: 10px; }
.team-row select { width: 100%; padding: 9px 10px; border: 1px solid #C4C9CE; background: #fff; font: 14px var(--font); color: var(--ink); }
.add-link { padding: 6px 0; border: 0; background: none; color: var(--ink); font: 500 14px var(--font); box-shadow: inset 0 -2px 0 var(--red); cursor: pointer; }

.check { display: flex; gap: 8px; align-items: center; font-size: 14px; padding: 4px 0; }
.check input { width: 16px; height: 16px; accent-color: var(--ink); }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 16px; }
.levels { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.custom-box { margin-top: 14px; padding: 16px; background: var(--paper); }

/* timesheet notes button */
.note-button {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 220px;
  padding: 6px 8px;
  border: 1px solid transparent;
  background: none;
  color: var(--joint);
  font: 13px var(--font);
  text-align: left;
  cursor: pointer;
}
.note-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-button .icon { width: 16px; height: 16px; }
.note-button.has-note { color: var(--ink); }
.note-button:hover { border-color: #D3D7DB; background: #fff; }

/* profile */
.profile-top { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 32px; }
.profile-top h2 { font-size: 26px; font-weight: 500; font-stretch: 112%; }
.profile-top p { color: var(--joint); margin-top: 4px; }
.profile-top .actions { margin-top: 14px; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 36px; }
.profile-grid .tool { cursor: pointer; border: 0; border-top: 2px solid var(--ink); font: inherit; text-align: left; }
.profile-grid button.tool:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(35, 39, 43, 0.1); }
.my-projects select { width: 100%; padding: 10px 12px; border: 1px solid #C4C9CE; background: #fff; font: 15px var(--font); color: var(--ink); }
.my-projects p { margin-top: 12px; font-weight: 500; min-height: 1.5em; }

/* cloud storage */
.cloud { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; margin-top: 28px; align-items: start; }
.cloud__projects { background: #fff; border-top: 2px solid var(--ink); }
.cloud__projects input { width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--concrete); font: 14px var(--font); }
.cloud__projects input:focus { outline: 2px solid var(--red); outline-offset: -2px; }
.cloud__projects ul { max-height: 70vh; overflow-y: auto; }
.cloud__projects button {
  display: block; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--concrete);
  background: none; color: var(--ink); font: 14px var(--font); text-align: left; cursor: pointer;
}
.cloud__projects button:hover { background: var(--paper); }
.cloud__projects button[aria-current] { background: var(--ink); color: #fff; }
.cloud__projects button[aria-current] .muted { color: #C8CDD2; }
.cloud__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cloud__head h2 { font-size: 20px; font-weight: 500; font-stretch: 112%; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; color: var(--joint); }
.crumbs button { padding: 2px 0; border: 0; background: none; color: var(--ink); font: 14px var(--font); cursor: pointer; }
.crumbs button:hover { box-shadow: inset 0 -1px 0 currentColor; }
.cloud-tools { display: flex; gap: 10px; }
.cloud-tools .button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; }
.file-link { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--ink); font: 14px var(--font); text-decoration: none; cursor: pointer; text-align: left; }
.file-link:hover span { box-shadow: inset 0 -1px 0 currentColor; }
.row-actions { white-space: nowrap; text-align: right; width: 90px; }
#browser.is-dropping .table-wrap { outline: 2px dashed var(--red); outline-offset: 4px; }
.uploads { margin-top: 16px; background: #fff; }
.uploads li { display: grid; grid-template-columns: minmax(0, 1fr) 160px 180px; gap: 14px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--concrete); font-size: 14px; }
.upload__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__bar { height: 4px; background: var(--concrete); }
.upload__bar span { display: block; height: 100%; width: 0; background: var(--ink); transition: width 0.2s ease; }
.uploads li.is-done .upload__bar span { background: #1D5B33; }
.uploads li.is-failed .upload__state { color: var(--red-deep); }
.read-only-note { margin-top: 10px; font-size: 13px; color: var(--joint); }

@media (max-width: 900px) {
  .cloud { grid-template-columns: minmax(0, 1fr); }
  .cloud__projects ul { max-height: 240px; }
  .team-row { grid-template-columns: minmax(0, 1fr) 36px; }
  .team-row select:nth-child(2) { grid-column: 1; }
  .uploads li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* the private area in the main menu: a lock, set apart with a hairline */
.nav-area { margin-left: 8px; padding-left: 8px; border-left: 1px solid currentColor; border-color: rgba(128, 128, 128, 0.35); }
.nav-area > a { display: flex !important; align-items: center; gap: 7px; }
.nav-lock { width: 15px; height: 15px; flex: none; }
@media (max-width: 900px) {
  .nav-area { margin: 8px 0 0; padding: 0; border-left: 0; }
}

/* back of the tile: buttons, and the project information pop-up */
.panel { position: absolute; }
.panel__text { grid-template-columns: minmax(0, 1fr) auto; }
.panel__buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 22px; align-self: start; }
.panel__info {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px 11px 18px;
  border: 0;
  background: var(--ink);
  color: #fff;
  font: 500 14px var(--font);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.2s ease, gap 0.2s ease;
}
.panel__info svg { width: 16px; height: 16px; transition: transform 0.3s ease; }
.panel__info:hover:not(:disabled) { background: var(--red); gap: 16px; }
.panel__info:hover:not(:disabled) svg { transform: rotate(90deg); }
.panel__info:disabled { background: var(--concrete); color: #A3A9AE; cursor: default; }

.info {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow-y: auto;
  padding: clamp(28px, 5%, 56px);
  background: rgba(255, 255, 255, 0.97);
  color: var(--ink);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.info.is-open { opacity: 1; transform: none; }
/* a faint drafting grid behind the text */
.info::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--concrete) 1px, transparent 1px), linear-gradient(90deg, var(--concrete) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.45;
  pointer-events: none;
}
.info__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.info__close svg { width: 18px; height: 18px; }
.info__close:hover { background: var(--ink); color: #fff; }
.info__eyebrow { font-size: 13px; color: var(--joint); }
.info__title { margin-top: 6px; font-size: clamp(24px, 2.6vw, 36px); font-weight: 500; font-stretch: 115%; line-height: 1.1; padding-right: 56px; }
.info__lead { margin-top: 18px; max-width: 56ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; }
.info__facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 22px 28px;
  margin: 32px 0 0;
}
.info__facts div { padding-top: 10px; border-top: 2px solid var(--ink); }
.info__facts dt { font-size: 12px; color: var(--joint); }
.info__facts dd { margin: 4px 0 0; font-size: 16px; line-height: 1.4; }

/* ==========================================================================
   Public download page for file transfers (transfer.html)
   ========================================================================== */
.page-transfer { min-height: 100vh; background: var(--paper); }
.tr { display: grid; grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); min-height: 100vh; opacity: 0; transition: opacity 0.5s ease; }
.is-ready .tr { opacity: 1; }

.tr-side {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: clamp(28px, 4vw, 56px);
  background: var(--ink);
  color: #fff;
}
.tr-side .brand__mark { width: 40px; height: 40px; }
.tr-side .brand__name { font-size: 16px; }
.tr-side .brand__tag { font-size: 12px; }

.tr-sender { display: flex; align-items: center; gap: 14px; margin-top: clamp(40px, 8vh, 88px); }
.tr-avatar {
  display: grid; place-content: center; flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  background: #3A3F44; color: #fff; font-weight: 600;
}
.tr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tr-sender__name { font-size: 16px; font-weight: 500; }
.tr-sender__role { font-size: 13px; opacity: 0.65; }

.tr-kicker { margin-top: 36px; font-size: 13px; opacity: 0.65; }
.tr-title { margin-top: 6px; font-size: clamp(28px, 2.8vw, 40px); font-weight: 500; font-stretch: 115%; line-height: 1.1; }
.tr-message { margin-top: 20px; padding-left: 16px; border-left: 2px solid var(--red); font-size: 15px; line-height: 1.6; white-space: pre-wrap; opacity: 0.9; }
.tr-facts { display: grid; gap: 14px; margin: 32px 0 0; }
.tr-facts div { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.tr-facts dt { font-size: 12px; opacity: 0.6; }
.tr-facts dd { margin: 3px 0 0; font-size: 15px; }
.tr-foot { margin-top: auto; padding-top: 40px; display: grid; gap: 14px; font-size: 12px; line-height: 1.6; opacity: 0.65; }
.tr-foot a { color: inherit; }

.tr-main {
  position: relative;
  display: grid;
  align-items: start;
  padding: clamp(24px, 5vw, 72px);
  overflow: hidden;
}
/* the drafting table: a fine grid with a slow drift */
.tr-main::before {
  content: "";
  position: absolute;
  inset: -140px;
  background-image:
    linear-gradient(#D8DCE0 1px, transparent 1px), linear-gradient(90deg, #D8DCE0 1px, transparent 1px),
    linear-gradient(#E6E9EC 1px, transparent 1px), linear-gradient(90deg, #E6E9EC 1px, transparent 1px);
  background-size: 140px 140px, 140px 140px, 28px 28px, 28px 28px;
  animation: tr-drift 40s linear infinite;
  z-index: 0;
}
@keyframes tr-drift { to { transform: translate(140px, 140px); } }

.tr-card {
  position: relative;
  z-index: 1;
  max-width: 900px;
  width: 100%;
  background: #fff;
  border-top: 2px solid var(--ink);
  box-shadow: 0 24px 60px rgba(35, 39, 43, 0.12);
  animation: tr-rise 0.6s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes tr-rise { from { opacity: 0; transform: translateY(24px); } }

.tr-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 24px; border-bottom: 1px solid var(--concrete); }
.tr-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; color: var(--joint); }
.tr-crumbs button { padding: 2px 0; border: 0; background: none; color: var(--ink); font: 500 15px var(--font); cursor: pointer; }
.tr-crumbs button:last-child { color: var(--ink); }
.tr-crumbs button:hover { box-shadow: inset 0 -2px 0 var(--red); }
.tr-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tr-button {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px;
  background: var(--ink); color: #fff; font: 500 14px var(--font); text-decoration: none; cursor: pointer;
  transition: background 0.2s ease;
}
.tr-button:hover { background: var(--red); }
.tr-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tr-button--quiet { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tr-button--quiet:hover { background: var(--ink); color: #fff; }

.tr-listhead, .tr-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 150px 44px;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 24px;
}
.tr-listhead { height: 42px; font-size: 12px; color: var(--joint); border-bottom: 1px solid var(--concrete); }
.tr-files { max-height: 58vh; overflow-y: auto; }
.tr-row { min-height: 56px; border-bottom: 1px solid var(--concrete); animation: tr-in 0.35s ease both; transition: background 0.15s ease; }
@keyframes tr-in { from { opacity: 0; transform: translateX(-8px); } }
.tr-row:hover { background: var(--paper); }
.tr-row.is-selected { background: #F1F3F4; box-shadow: inset 3px 0 0 var(--red); }
.tr-name { display: inline-flex; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); font: 15px var(--font); text-align: left; }
.tr-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.tr-name { cursor: pointer; }
button.tr-name:hover span { box-shadow: inset 0 -1px 0 currentColor; }
.tr-name svg, .tr-down svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tr-meta { font-size: 13px; color: var(--joint); text-align: right; }
.tr-down { display: grid; place-content: center; width: 36px; height: 36px; color: var(--ink); opacity: 0.55; transition: opacity 0.15s ease, color 0.15s ease; }
.tr-row:hover .tr-down { opacity: 1; }
.tr-down:hover { color: var(--red); }
.tr-empty { padding: 28px 24px; color: var(--joint); }
.tr-hint { padding: 14px 24px 18px; font-size: 13px; color: var(--joint); }

/* square checkboxes, drawn */
.tr-check { position: relative; display: inline-grid; place-content: center; width: 20px; height: 20px; cursor: pointer; }
.tr-check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.tr-check span { width: 18px; height: 18px; border: 1.5px solid #A3A9AE; background: #fff; transition: all 0.15s ease; }
.tr-check input:checked + span { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 3px #fff; }
.tr-check input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }

.tr-notice { padding: clamp(28px, 5vw, 56px); }
.tr-notice h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; font-stretch: 115%; }
.tr-notice p { margin: 10px 0 28px; color: var(--joint); font-size: 16px; }
.is-bare .tr-sender, .is-bare .tr-kicker, .is-bare .tr-facts, .is-bare .tr-foot { display: none; }

@media (max-width: 860px) {
  .tr { grid-template-columns: minmax(0, 1fr); }
  .tr-sender { margin-top: 32px; }
  .tr-foot { padding-top: 24px; }
  .tr-listhead, .tr-row { grid-template-columns: 36px minmax(0, 1fr) 36px; padding: 0 12px 0 16px; }
  .tr-listhead .tr-meta, .tr-row .tr-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-main::before, .tr-card, .tr-row { animation: none; }
}

/* ---------- team area: dialogs and controls added with projects and transfers ---------- */
.modal--wide { width: min(1000px, calc(100vw - 32px)); }
.modal__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-right: 40px; }
.modal__head h2 { margin: 0; }
.modal__head--split { justify-content: space-between; padding-right: 0; }
.with-icon { display: inline-flex; align-items: center; gap: 8px; }
.center { text-align: center !important; }
.code { font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: 0.02em; }

.code-button {
  flex: none;
  padding: 8px 12px;
  border: 1px dashed #A3A9AE;
  background: var(--paper);
  color: var(--ink);
  font: 15px var(--font);
  cursor: pointer;
}
.code-button:hover { border: 1px solid var(--ink); }
.code-editor { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr; gap: 12px; align-items: start; }
.code-editor select[size] { height: auto; padding: 4px; overflow-y: auto; }
.code-editor input { font-variant-numeric: tabular-nums; text-align: center; }
.code-preview { margin-top: 14px; font-size: 14px; color: var(--joint); }
.code-preview .code { color: var(--ink); font-size: 18px; margin-left: 6px; }
.icon-button:disabled { opacity: 0.35; cursor: default; }
.icon-button--ok:disabled:hover { background: var(--ink); border-color: transparent; }

.section-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.section-button {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  border: 0; border-top: 2px solid var(--ink); background: var(--paper);
  color: var(--ink); font: 15px var(--font); text-align: left; cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.section-button .icon { width: 26px; height: 26px; }
.section-button span { display: grid; gap: 2px; }
.section-button small { font-size: 12px; color: var(--joint); }
.section-button:hover:not(:disabled) { background: var(--concrete); transform: translateY(-2px); }
.section-button:disabled { border-top-color: var(--concrete); color: var(--joint); cursor: default; }

.photo-thumb { display: block; width: 72px; height: 48px; object-fit: cover; background: var(--concrete); }
.sort-handle { cursor: grab; color: var(--joint); }
.sort-handle:hover { color: var(--ink); }
tr[data-sort].is-dragging { opacity: 0.4; }
tr[data-sort] td { vertical-align: middle; }
#photoTable input, #slideTable input { width: 18px; height: 18px; accent-color: var(--ink); }

.drop-zone {
  display: grid; justify-items: center; gap: 4px; padding: 26px 16px;
  border: 1.5px dashed #A3A9AE; background: var(--paper); text-align: center; color: var(--joint);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.drop-zone .icon { width: 28px; height: 28px; color: var(--ink); }
.drop-zone.is-dropping { border-color: var(--red); background: #FBF1F0; }
.upload-list { max-height: 220px; overflow-y: auto; }
.upload-list li { grid-template-columns: minmax(0, 1fr) 140px 110px 36px; }
.same-files { padding: 14px 16px; background: var(--paper); font-size: 14px; }

.chips-field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #C4C9CE; background: #fff; }
.chips-field:focus-within { outline: 2px solid var(--red); outline-offset: -1px; }
.chips { display: contents; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; background: var(--concrete); font-size: 14px; }
.chip button { display: grid; place-content: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: var(--joint); cursor: pointer; }
.chip button:hover { color: var(--red); }
.chip .icon { width: 14px; height: 14px; }
.chips-field input { flex: 1; min-width: 220px; padding: 6px 4px; border: 0; font: 15px var(--font); outline: none; }

.mini-select { margin-top: 4px; padding: 3px 6px; border: 1px solid #C4C9CE; background: #fff; font: 12px var(--font); color: var(--ink); }
.link-button { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--ink); font: 14px var(--font); text-align: left; cursor: pointer; }
.link-button:hover:not(:disabled) span { box-shadow: inset 0 -1px 0 currentColor; }
.link-button:disabled { color: var(--joint); cursor: default; }
.receivers { font-size: 13px; line-height: 1.5; }
.icon-button.is-done { color: #1D5B33; border-color: #1D5B33; }
.mail-preview { width: 100%; height: 60vh; border: 1px solid var(--concrete); background: #EEF0F2; }

@media (max-width: 800px) {
  .section-buttons { grid-template-columns: minmax(0, 1fr); }
  .code-editor { grid-template-columns: minmax(0, 1fr); }
  .upload-list li { grid-template-columns: minmax(0, 1fr) 36px; }
  .upload-list .upload__bar, .upload-list .upload__state { grid-column: 1; }
}

/* team area: the header stays in place while scrolling */
.staff-header { position: sticky; top: 0; z-index: 40; }

/* denser tables for long lists, still easy to read */
.page-staff .table { font-size: 13px; }
.page-staff .table th { font-size: 11.5px; letter-spacing: 0.01em; }
.page-staff .table th, .page-staff .table td { padding: 9px 12px; }
.page-staff .table .badge { font-size: 11px; padding: 2px 7px; }
.page-staff .table .muted { font-size: 12.5px; }
.page-staff .table strong { font-weight: 500; }
.page-staff #photoTable td, .page-staff #slideTable td { padding: 7px 10px; }

/* anything marked hidden stays hidden, whatever its display style */
[hidden] { display: none !important; }

/* the information pop-up covers the whole back of the tile, opaque,
   with its drafting grid kept inside it */
.info { grid-row: 1 / -1; grid-column: 1 / -1; background: #fff; isolation: isolate; }

/* My profile: career */
.career__lead { max-width: 70ch; font-size: 16px; line-height: 1.55; }
.career h3 { margin: 28px 0 10px; font-size: 15px; font-weight: 600; }
.career__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); background: #fff; }
.career__list li { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; padding: 14px 18px; border-bottom: 1px solid var(--concrete); font-size: 14px; line-height: 1.5; }
.career__list p { margin-top: 4px; }
.career__years { color: var(--joint); font-variant-numeric: tabular-nums; }
.career__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.career__tags li { padding: 6px 12px; background: #fff; border: 1px solid var(--concrete); font-size: 13px; }
@media (max-width: 700px) { .career__list li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* ==========================================================================
   Approvals, warnings, timesheet review, print preview
   ========================================================================== */
.badge--approved { background: #DCEFE2; color: #1D5B33; }
.badge--rejected { background: #F7DEDD; color: #8B1416; }
.level-note { margin-top: 10px; font-size: 13px; color: var(--joint); max-width: 80ch; }
.section-title { font-size: 20px; font-weight: 500; font-stretch: 112%; }
.subnav { display: flex; gap: 4px; margin-top: 22px; border-bottom: 1px solid var(--concrete); }
.subnav a { padding: 10px 14px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--joint); }
.subnav a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red); }

/* dashboard warnings */
.warnings { margin-top: 28px; background: #fff; border-top: 2px solid var(--ink); }
.warnings__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--concrete); }
.warnings__head h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 500; }
.warn-count { display: inline-grid; place-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--red); color: #fff; font-size: 12px; font-weight: 600; }
.warn-list { max-height: 260px; overflow-y: auto; }
.warn-item {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; width: 100%;
  padding: 11px 18px; border: 0; border-bottom: 1px solid var(--concrete); border-left: 3px solid var(--red);
  background: none; color: var(--ink); font: 14px var(--font); text-align: left; cursor: pointer;
}
.warn-item:hover { background: var(--paper); }
.warn-item--timesheet-missing, .warn-item--approval { border-left-color: #E0A43A; }
.warn-item__type { font-weight: 600; }
.warn-item__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.warn-item__from { font-size: 12px; white-space: nowrap; }
.warn-facts { display: grid; gap: 10px; margin: 0 0 16px; }
.warn-facts div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; font-size: 14px; }
.warn-facts dt { color: var(--joint); }
.warn-facts dd { margin: 0; }
.warn-message { padding: 14px 16px; background: var(--paper); border-left: 2px solid var(--red); font-size: 15px; line-height: 1.55; white-space: pre-wrap; }

/* people dropdown, coloured by how up to date they are */
.state-red { --state: #FBE4E3; --state-ink: #8B1416; }
.state-yellow { --state: #FFF4CC; --state-ink: #7A5B00; }
.state-green { --state: #E1F3E6; --state-ink: #1D5B33; }
.person-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }
.person-select { position: relative; min-width: min(420px, 100%); }
.person-picker {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 14px;
  border: 1px solid #A3A9AE; background: var(--state, #fff); color: var(--ink); font: 15px var(--font); text-align: left; cursor: pointer;
}
.person-picker::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); }
.person-list {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 360px; overflow-y: auto;
  margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid #A3A9AE; box-shadow: 0 16px 40px rgba(35, 39, 43, 0.18);
}
.person-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--state); border-bottom: 1px solid rgba(35, 39, 43, 0.06); font-size: 14px; cursor: pointer; }
.person-option:hover, .person-option:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.person-option[aria-selected] { box-shadow: inset 3px 0 0 var(--ink); }
.person-state { font-size: 12px; color: var(--state-ink); white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--joint); }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend li::before { content: ''; width: 14px; height: 14px; background: var(--state); border: 1px solid rgba(35, 39, 43, 0.15); }
#weeksBox { margin-top: 28px; }
.years { margin-top: 14px; font-size: 14px; }
.years select { margin-left: 6px; padding: 6px 8px; font: 14px var(--font); }

.status-filter { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; padding: 6px 12px 8px; border: 1px solid var(--concrete); }
.status-filter legend { padding: 0 4px; font-size: 13px; color: var(--joint); }

/* timesheet: holidays, review note, manager and locked modes */
.ts th.holiday, .ts td.holiday { background: #E3F0FB; }
.ts th.holiday { color: #23527C; }
.review-note { margin-top: 16px; padding: 12px 16px; font-size: 14px; line-height: 1.5; }
.review-note--rejected { background: #FBE4E3; border-left: 3px solid var(--red); color: #6B1210; }
.review-note--approved { background: #E1F3E6; border-left: 3px solid #1D5B33; color: #1D4A2C; }
.review-buttons { display: none; gap: 12px; }
.is-manager .review-buttons { display: inline-flex; }
.is-manager #submitWeek { display: none; }
.is-manager #saveWeek::after { content: ' (keep status)'; font-weight: 400; }
.is-locked #addRow, .is-locked #saveWeek, .is-locked #submitWeek { display: none; }

/* print preview */
.print-dialog { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; border: 0; background: #53585D; }
.print-dialog::backdrop { background: rgba(35, 39, 43, 0.6); }
.print-bar { display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: var(--ink); color: #fff; }
.print-bar__title { font-size: 15px; font-weight: 500; margin-right: auto; }
.print-bar__nav { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.print-bar .icon-button { color: #fff; }
.print-bar .icon-button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); border-color: transparent; }
.print-bar .button--quiet { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.print-stage { position: relative; display: flex; align-items: center; justify-content: center; height: calc(100vh - 58px); }
.print-sheet { overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); background: #fff; }
.print-sheet > .pp-page { transform-origin: top left; }
.print-arrow {
  position: absolute; top: 50%; display: grid; place-content: center; width: 48px; height: 48px; margin-top: -24px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); cursor: pointer;
}
.print-arrow:disabled { opacity: 0.25; cursor: default; }
.print-arrow--prev { left: 18px; }
.print-arrow--next { right: 18px; }
.print-frame { position: fixed; width: 0; height: 0; border: 0; visibility: hidden; }

/* About us: the team */
.team { margin-bottom: clamp(56px, 8vw, 96px); }
.team__title { margin-bottom: 28px; font-size: 22px; font-weight: 500; font-stretch: 112%; }
.team__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 40px 36px; }
.member { animation: member-in 0.6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes member-in { from { opacity: 0; transform: translateY(16px); } }
.member__photo {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--concrete);
  display: grid; place-content: center; color: var(--joint); font-size: 42px; font-weight: 500;
}
.member__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.02); transition: filter 0.5s ease, transform 0.8s ease; }
.member:hover .member__photo img { filter: none; transform: scale(1.02); }
/* the 2px ink joint and red square, echoing the logo */
.member__text { position: relative; padding-top: 16px; margin-top: 18px; border-top: 2px solid var(--ink); }
.member__text::before { content: ''; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; background: var(--red); }
.member__name { font-size: 20px; font-weight: 500; font-stretch: 112%; line-height: 1.2; }
.member__role { margin-top: 4px; color: var(--joint); font-size: 14px; }
.member__bio { margin-top: 14px; font-size: 15px; line-height: 1.65; color: #3F454A; max-width: 64ch; }
/* one person: photo beside the text */
.team__list--single { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.team__list--single .member { display: contents; }
.team__list--single .member__text { margin-top: 0; align-self: start; }
@media (max-width: 760px) { .team__list--single { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .member { animation: none; } }
.badge--about { background: #23272B; color: #fff; margin-left: 6px; font-size: 10.5px; }
.member__photo img { position: absolute; inset: 0; }

/* ==========================================================================
   News articles (shared by the editor and the public Newsfeed page)
   ========================================================================== */
.news-body { font-size: 16px; line-height: 1.7; color: #33393E; }
.news-body::after { content: ''; display: table; clear: both; }
.news-body h2 { margin: 1.1em 0 0.4em; font-size: 26px; font-weight: 500; font-stretch: 115%; line-height: 1.15; color: var(--ink); }
.news-body h3 { margin: 1em 0 0.35em; font-size: 20px; font-weight: 500; font-stretch: 112%; line-height: 1.25; color: var(--ink); }
.news-body h4 { margin: 0.9em 0 0.3em; font-size: 16px; font-weight: 600; color: var(--ink); }
.news-body p { margin: 0 0 0.85em; }
.news-body ul, .news-body ol { margin: 0 0 0.85em 1.4em; padding: 0; }
.news-body ul { list-style: square; }
.news-body li { margin-bottom: 0.25em; }
.news-body a { color: var(--ink); box-shadow: inset 0 -1px 0 var(--red); text-decoration: none; }
.news-body blockquote { margin: 1em 0; padding-left: 16px; border-left: 2px solid var(--red); font-size: 18px; }
.news-body img { display: block; max-width: 100%; height: auto; margin: 0.3em 0 0.9em; }
.news-body img.img-left { float: left; margin: 0.35em 1.4em 0.8em 0; }
.news-body img.img-right { float: right; margin: 0.35em 0 0.8em 1.4em; }
.news-body img.img-center { float: none; margin: 0.6em auto 1em; }
.news-body img.img-inline { display: inline-block; float: none; vertical-align: text-bottom; margin: 0 0.3em; max-width: 100%; }
.news-body > :first-child { margin-top: 0; }
@media (max-width: 600px) { .news-body img.img-left, .news-body img.img-right { float: none; width: 100% !important; margin: 0.6em 0 1em; } }

/* the public Newsfeed page */
.newsfeed { max-width: 980px; }
.news-item { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 32px; padding: 36px 0; border-top: 2px solid var(--ink);
             animation: member-in 0.6s cubic-bezier(.2, .7, .2, 1) both; }
.news-item:last-child { border-bottom: 1px solid var(--concrete); }
.news-date { display: grid; align-content: start; gap: 2px; }
.news-date__day { font-size: 44px; font-weight: 500; font-stretch: 115%; line-height: 1; }
.news-date__month { font-size: 13px; color: var(--joint); }
.news-headline { font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; font-stretch: 115%; line-height: 1.15; }
.news-by { margin: 8px 0 18px; font-size: 13px; color: var(--joint); }
@media (max-width: 700px) { .news-item { grid-template-columns: minmax(0, 1fr); gap: 12px; } .news-date { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 10px; } .news-date__day { font-size: 30px; } }

/* ==========================================================================
   Staff in Website and Newsfeed modules
   ========================================================================== */
.staff-photo { display: inline-grid; place-content: center; width: 48px; height: 60px; overflow: hidden; background: var(--concrete); color: var(--joint); }
.staff-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.cell-edit { display: block; width: 100%; padding: 4px 6px; margin: -4px -6px; border: 1px dashed transparent; background: none;
             color: var(--ink); font: inherit; text-align: left; cursor: text; }
.cell-edit:hover, .cell-edit:focus-visible { border-color: #A3A9AE; background: #fff; }
.cell-edit--text { line-height: 1.5; color: #3F454A; }

/* the article editor: a large dialog */
.editor { width: min(1180px, calc(100vw - 32px)); height: calc(100vh - 48px); max-height: none; }
.editor__form { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.editor__host { display: flex; flex-direction: column; min-height: 0; }
.editor__host .editor__scroll { flex: 1; min-height: 0; }
.editor__help:empty { display: none; }
.editor__help { width: 100%; font-size: 13px; margin-top: -6px; }
.editor__caret { position: absolute; width: 3px; background: var(--red); pointer-events: none; box-shadow: 0 0 0 2px rgba(214, 43, 39, 0.2); }
.editor__caret.is-copy::after { content: "+"; position: absolute; left: 6px; top: -14px; font: 600 14px var(--font); color: var(--red); }
.editor__area.is-moving-image, .editor__area.is-moving-image * { cursor: grabbing !important; }
.editor__area img.is-moving { opacity: 0.35; }
.editor__head { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 18px; padding: 20px 24px 14px; border-bottom: 1px solid var(--concrete); }
.editor__head h2 { width: 100%; margin: 0; font-size: 20px; }
.editor__headline { flex: 1; min-width: 260px; }
.editor__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 24px; background: var(--paper); border-bottom: 1px solid var(--concrete); }
.editor__bar select { padding: 7px 8px; border: 1px solid #C4C9CE; background: #fff; font: 14px var(--font); }
.tool-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #C4C9CE; background: #fff; color: var(--ink); font: 14px var(--font); cursor: pointer; }
.tool-btn:hover { border-color: var(--ink); }
.tool-btn.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tool-btn .icon { width: 17px; height: 17px; }
.editor__sep { width: 1px; height: 24px; margin: 0 6px; background: #C4C9CE; }
.editor__imgtools { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding-left: 12px; border-left: 1px solid #C4C9CE; font-size: 13px; }
.editor__scroll { position: relative; overflow-y: auto; background: var(--paper); }
.editor__area { max-width: 760px; min-height: 100%; margin: 0 auto; padding: 36px 44px 80px; background: #fff; outline: none; box-shadow: 0 0 0 1px var(--concrete); }
.editor__area.is-dropping { box-shadow: inset 0 0 0 2px var(--red); }
.editor__area img { cursor: pointer; }
.editor__area img.is-picked { outline: 2px solid var(--red); outline-offset: 2px; }
.image-frame { position: absolute; pointer-events: none; }
.image-frame span { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid var(--red); pointer-events: auto; }
.image-frame [data-grip="nw"] { left: -7px; top: -7px; cursor: nwse-resize; }
.image-frame [data-grip="ne"] { right: -7px; top: -7px; cursor: nesw-resize; }
.image-frame [data-grip="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.image-frame [data-grip="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }
.editor__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 24px; border-top: 1px solid var(--concrete); }
.editor__foot .muted { flex: 1; min-width: 240px; font-size: 13px; }

/* ==========================================================================
   Careers and the application form (apply.html)
   ========================================================================== */
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__thanks { padding: 20px 24px; background: #fff; border-left: 2px solid var(--red); font-size: 17px; line-height: 1.55; }

.job__text { margin-top: 10px; white-space: pre-line; }
.job__docs { margin-top: 10px; font-size: 15px; color: #3F454A; white-space: pre-line; }
.job__docs strong { font-weight: 600; }
.job__link { margin-top: 10px; font-size: 15px; }
.job__link a { color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px 0 var(--red); }
.job__apply { margin-top: 24px; }
.job__apply .button { display: inline-block; text-decoration: none; }

.page__back { margin-bottom: 14px; font-size: 14px; }
.page__back a { color: var(--joint); text-decoration: none; }
.page__back a::before { content: "\2190\00a0"; }
.page__back a:hover { color: var(--ink); }

.apply { max-width: 760px; }
.apply__count { margin-top: 6px; text-align: right; }
.apply__docs { padding: 18px 22px; background: #fff; border-top: 2px solid var(--ink); }
.apply__docs h2 { font-size: 17px; }
.apply__docs p { margin-top: 8px; white-space: pre-line; }
.apply__consent { display: flex !important; gap: 10px; align-items: flex-start; font-size: 14px !important; line-height: 1.5; color: var(--ink) !important; }
.form .apply__consent input { width: 18px; height: 18px; margin-top: 2px; padding: 0; flex: none; accent-color: var(--ink); }

.dropzone {
  display: grid; justify-items: center; gap: 8px; padding: 36px 20px;
  border: 2px dashed #B9BEC3; background: #fff; color: var(--joint); text-align: center; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone svg { width: 34px; height: 34px; }
.dropzone p { font-size: 15px; }
.dropzone strong { color: var(--ink); font-weight: 500; }
.dropzone:hover, .dropzone:focus-visible, .dropzone.is-over { border-color: var(--red); background: #FDF6F5; outline: none; }
.is-sending .dropzone { pointer-events: none; opacity: 0.6; }

.filelist:empty { display: none; }
.filelist { margin-top: -8px; background: #fff; }
.filelist li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--concrete); font-size: 14px; }
.filelist__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filelist__size { color: var(--joint); font-variant-numeric: tabular-nums; }
.filelist button { padding: 2px 0; border: 0; background: none; color: var(--joint); font: 13px var(--font); cursor: pointer; }
.filelist button:hover { color: var(--red-deep); }
.is-sending .filelist button { visibility: hidden; }

.upload-progress { height: 4px; background: var(--concrete); }
.upload-progress span { display: block; height: 100%; width: 0; background: var(--ink); transition: width 0.2s ease; }

@media (max-width: 640px) {
  .form__row { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Job Posts (Architects' Area)
   ========================================================================== */
.table tr.is-inactive { color: var(--joint); }
.table__clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.button--small { padding: 6px 12px; font-size: 13px; text-decoration: none; }
.row-actions .button--small { margin-right: 6px; vertical-align: middle; }

.badge--applied { background: #E1E9F5; color: #23456E; }
.badge--interview { background: #DCEFE2; color: #1D5B33; }
.badge--incomplete { background: #FCEBD2; color: #7A4B0B; }
.badge--archived { background: var(--concrete); color: #4A5055; }

.context-menu {
  position: fixed; z-index: 50; min-width: 200px; padding: 6px 0; margin: 0; list-style: none;
  background: #fff; border: 1px solid #C4C9CE; box-shadow: 0 10px 28px rgba(35, 39, 43, 0.18);
}
.context-menu button { display: block; width: 100%; padding: 8px 16px; border: 0; background: none; color: var(--ink); font: 14px var(--font); text-align: left; cursor: pointer; }
.context-menu button:hover, .context-menu button:focus-visible { background: var(--paper); outline: none; }
.context-menu button.is-current::after { content: "  \2713"; color: var(--joint); }
.context-menu__label { padding: 8px 16px 2px; font-size: 11.5px; color: var(--joint); }
.context-menu__sep { height: 1px; margin: 6px 0; background: var(--concrete); }
.context-menu .context-menu__danger { color: var(--red-deep); }

.app-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.app-head h2 { margin-bottom: 4px; padding-right: 0; }
.app-head p { font-size: 14px; }
.app-review {
  display: flex; flex-wrap: wrap; align-items: end; gap: 10px 24px; margin: 18px 0 22px; padding: 14px 18px;
  background: var(--paper); border-top: 2px solid var(--ink);
}
.app-review .field { min-width: 150px; }
.app-review .form-msg { flex: 1; min-width: 80px; text-align: right; }
.app-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 24px; margin: 0; }
.app-facts div { display: grid; gap: 2px; font-size: 14px; }
.app-facts dt { font-size: 12px; color: var(--joint); }
.app-facts dd { margin: 0; overflow-wrap: anywhere; }
.app-about { padding: 14px 16px; background: var(--paper); border-left: 2px solid var(--red); font-size: 15px; line-height: 1.55; white-space: pre-wrap; }
.app-files { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--concrete); }
.app-files li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--concrete); font-size: 14px; }
.app-files .app-file__icon .icon { width: 22px; height: 22px; color: var(--joint); }
.app-file__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.app-files .icon { width: 16px; height: 16px; }

/* ==========================================================================
   Dashboard tabs (Architects' Area)
   ========================================================================== */
.dash-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 36px; border-bottom: 2px solid var(--ink); }
.dash-tabs[hidden] { display: none; }
.dash-tabs button {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; margin-bottom: -2px;
  border: 0; border-bottom: 3px solid transparent; background: none; color: var(--joint);
  font: 500 15px var(--font); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease;
}
.dash-tabs button:hover { color: var(--ink); }
/* a thin vertical joint between tabs, like the logo's groove */
.dash-tabs button { position: relative; }
.dash-tabs button + button::before {
  content: ""; position: absolute; left: -3px; top: 50%; width: 1px; height: 20px; margin-top: -11px;
  background: #C4C9CE;
}
.dash-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red); }
.dash-tabs__count { min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--concrete); color: var(--joint); font-size: 12px; text-align: center; }
.dash-tabs button[aria-selected="true"] .dash-tabs__count { background: var(--ink); color: #fff; }
.dash-tabs + .tools { margin-top: 24px; }
.dash-tabs + .tools .tool { animation: dash-in 0.35s ease both; }
@keyframes dash-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 700px) {
  .dash-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .dash-tabs button { flex: none; padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { .dash-tabs + .tools .tool { animation: none; } }

/* ==========================================================================
   Edit About us / Services / Mission and values / Awards (Architects' Area)
   ========================================================================== */
.site-panel { margin-top: 28px; padding: 20px 22px; background: #fff; border-top: 2px solid var(--ink); }
.site-omit { font-size: 15px; }
.site-hidden-note { display: none; margin: 10px 0 0; padding: 10px 14px; background: #FCEBD2; color: #7A4B0B; font-size: 14px; }
.site-is-hidden .site-hidden-note { display: block; }
.site-texts { display: grid; gap: 12px; margin-top: 16px; }
.site-text {
  display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; gap: 16px; align-items: start;
  padding: 14px 16px; border: 1px solid var(--concrete); background: var(--paper); color: var(--ink);
  font: 14px/1.5 var(--font); text-align: left; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.site-text:hover { border-color: var(--ink); background: #fff; }
.site-text__label { font-weight: 600; }
.site-text__preview { color: #3F454A; }
.site-text__edit { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red); font-weight: 500; }
.site-panel .form-msg { margin-top: 10px; }
.site-is-hidden .site-texts, .site-is-hidden .staff-section { opacity: 0.6; }
@media (max-width: 700px) { .site-text { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* public pages: texts written in the editor */
.page-text { max-width: 760px; margin-top: clamp(48px, 7vw, 88px); }
.page__lead > p { margin: 0; max-width: none; font-size: inherit; line-height: inherit; color: inherit; }
.page__lead > p + p { margin-top: 12px; }
.page-group + .page-group { margin-top: clamp(40px, 6vw, 72px); }
.page-group > h2 { margin-bottom: 22px; }
.page-unavailable { margin-top: 18px; }
.page-unavailable a { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red); text-decoration: none; }
.page__lead.news-body { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--joint); }
.page__lead.news-body p { margin: 0 0 0.6em; max-width: 64ch; }
.page__lead.news-body > :last-child { margin-bottom: 0; }
.table .sort-cell { width: 44px; }

/* Staff management: the Custom modules, grouped like the dashboard tabs */
.module-groups { display: grid; gap: 14px; }
.module-group { margin: 0; padding: 10px 14px 12px; border: 1px solid var(--concrete); background: #fff; }
.module-group legend { padding: 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--joint); }
.module-group__extra { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--concrete); }
.restricted-mark .icon { width: 14px; height: 14px; vertical-align: -2px; color: var(--joint); }

/* ==========================================================================
   Architects' Area: the website's header, and under it the Area bar
   (Dashboard and one menu per dashboard tab). Both stay at the top.
   ========================================================================== */
.area-top { position: sticky; top: 0; z-index: 40; }
.area-top .site-header { position: relative; }
.area-bar {
  display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 0 var(--gutter);
  background: var(--ink); color: #fff;
}
.area-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.area-nav > a, .area-menu__button {
  display: inline-flex; align-items: center; gap: 6px; padding: 15px 12px; border: 0; background: none;
  color: #fff; font: 500 14.5px var(--font); text-decoration: none; cursor: pointer; opacity: 0.85;
}
.area-nav > a:hover, .area-menu__button:hover, .area-menu__button[aria-expanded="true"] { opacity: 1; }
.area-nav > a[aria-current="page"], .area-menu__button[data-current] { opacity: 1; box-shadow: inset 0 -3px 0 var(--red); }
.area-menu { position: relative; }
.area-menu + .area-menu::before, .area-nav > a + .area-menu::before {        /* thin joint between items */
  content: ""; position: absolute; left: -1px; top: 50%; width: 1px; height: 18px; margin-top: -9px; background: rgba(255, 255, 255, 0.18);
}
.area-menu__caret { width: 12px; height: 12px; transition: transform 0.2s ease; }
.area-menu__button[aria-expanded="true"] .area-menu__caret { transform: rotate(180deg); }
.area-menu__list {
  position: absolute; top: 100%; left: 0; z-index: 50; min-width: 250px; margin: 0; padding: 8px 0; list-style: none;
  background: #fff; color: var(--ink); border: 1px solid var(--concrete); border-top: 2px solid var(--red);
  box-shadow: 0 14px 30px rgba(20, 23, 26, 0.18);
  visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.area-menu__button[aria-expanded="true"] + .area-menu__list { visibility: visible; opacity: 1; transform: none; }
@media (hover: hover) {
  .area-menu:hover .area-menu__list { visibility: visible; opacity: 1; transform: none; }
}
.area-menu__item { display: flex; align-items: center; gap: 12px; padding: 9px 18px; color: var(--ink); font-size: 14px; text-decoration: none; }
.area-menu__item .icon { width: 20px; height: 20px; flex: none; color: var(--joint); }
.area-menu__item small { display: block; font-size: 11.5px; color: var(--joint); }
a.area-menu__item:hover, a.area-menu__item:focus-visible { background: var(--paper); color: var(--red-deep); }
a.area-menu__item:hover .icon { color: var(--red); }
.area-menu__item[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--red); }
.area-menu__item.is-soon { color: var(--joint); cursor: default; }
.area-bar .staff-user { color: #fff; }
.area-short { display: none; }
/* phones: one line, short names, menus open full width under the bar */
@media (max-width: 760px) {
  .area-bar { gap: 8px; min-height: 48px; padding-right: 12px; }
  .area-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .area-nav::-webkit-scrollbar { display: none; }
  .area-nav > a, .area-menu__button { flex: none; padding: 13px 9px; font-size: 15px; }
  .area-long { display: none; }
  .area-short { display: inline; }
  .area-bar .staff-user { gap: 8px; }
  .area-bar .staff-user [data-me-name] { display: none; }
  .area-bar .avatar { width: 30px; height: 30px; font-size: 11px; }
  .area-menu__list { position: fixed; left: 10px; right: 10px; top: auto; min-width: 0; }
  .area-menu__item { padding: 13px 18px; font-size: 16px; }
}

/* Staff management: after the access level */
.access-extra { margin-top: 14px; }
.access-extra__title { font-size: 14px; font-weight: 600; }
.limit-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); gap: 14px; }
.access-extra__buttons { margin-top: 14px; }
.contract-days { margin: 0; padding: 10px 14px; background: var(--paper); font-size: 14px; }

/* File transfers: space left today and this month */
.quota { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 28px; align-items: center; margin-top: 22px; padding: 14px 18px; background: #fff; border-top: 2px solid var(--ink); }
.quota__meter { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; }
.quota__label { color: var(--joint); }
.quota__bar { height: 6px; background: var(--concrete); border-radius: 3px; overflow: hidden; }
.quota__bar span { display: block; height: 100%; background: var(--ink); transition: width 0.4s ease; }
.quota__bar span.is-full { background: var(--red); }
.quota__text { font-variant-numeric: tabular-nums; white-space: nowrap; }
.quota__more { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; }

/* Request days off */
.days-summary { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 26px; padding: 18px 22px; background: #fff; border-top: 2px solid var(--ink); }
.days-summary__item { display: grid; gap: 2px; font-size: 13px; color: var(--joint); }
.days-summary__n { font-size: 30px; font-weight: 500; font-stretch: 112%; color: var(--ink); line-height: 1; }
.days-summary__item:first-child .days-summary__n { color: var(--red); }
.days-count { margin: 0; font-size: 14px; color: var(--joint); }
.steps .step { display: block; font-size: 12.5px; white-space: nowrap; }
.step--approved { color: #1D5B33; }
.step--rejected { color: var(--red-deep); }

/* File transfers management */
.th-sort { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.th-sort:hover { color: var(--ink); }
.th-sort.is-on { color: var(--ink); }
.th-sort.is-on::after { content: " \2193"; color: var(--red); }
.th-sort.is-on[data-dir="asc"]::after { content: " \2191"; }
.days-left { font-variant-numeric: tabular-nums; }
.days-left--soon { color: var(--red-deep); font-weight: 600; }

/* Approve days off: the three choices of the Master Administrator */
.approve-options { display: grid; gap: 12px; }
.approve-options .check { align-items: flex-start; }
.approve-options .check input { margin-top: 3px; }
.approve-ask { margin-left: 26px; }
.step--skipped { color: var(--joint); text-decoration: line-through; }
.days-summary__note { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--joint); }

/* ==========================================================================
   Office Standards: the schedule of rates
   ========================================================================== */
.rates { margin-top: 30px; }
.rates__head h2, .rates__name { font-size: 18px; font-weight: 600; }
.rates__name { width: 100%; max-width: 460px; padding: 6px 8px; border: 1px solid transparent; background: transparent; font-family: var(--font); color: var(--ink); }
.rates__name:hover, .rates__name:focus { border-color: #C4C9CE; background: #fff; }
.rates__note { display: block; width: 100%; max-width: 760px; margin-top: 4px; padding: 4px 8px; border: 1px solid transparent; background: transparent; font: italic 14px var(--font); color: var(--joint); }
input.rates__note:hover, input.rates__note:focus { border-color: #C4C9CE; background: #fff; }
.rates__table input { width: 100%; padding: 6px 8px; border: 1px solid transparent; background: transparent; font: 14px var(--font); color: var(--ink); }
.rates__table input:hover, .rates__table input:focus { border-color: #C4C9CE; background: #fff; outline: none; }
.rates__num { width: 140px; text-align: right; }
.rates__num input, span.rates__rate { text-align: right; font-variant-numeric: tabular-nums; }
.rates__table td:nth-child(3) { width: 180px; }
.rates .add-link { margin-top: 10px; }
.save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 30px; padding: 14px 0; background: var(--paper); border-top: 1px solid var(--concrete); }
.save-bar .form-msg { flex: 1; }

/* ==========================================================================
   Proposals and the wizard
   ========================================================================== */
.proposal-file { display: flex; flex-wrap: wrap; gap: 10px; }
.proposal-uploads { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--concrete); }
.proposal-uploads li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 9px 0; border-bottom: 1px solid var(--concrete); font-size: 14px; }
.proposal-uploads a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.proposal-uploads .icon { width: 18px; height: 18px; }
.wizard__frame { display: grid; grid-template-columns: 230px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.wizard__head { grid-column: 1 / -1; padding: 20px 26px 14px; border-bottom: 1px solid var(--concrete); }
.wizard__head h2 { margin: 0; font-size: 20px; }
.wizard__head p { margin-top: 2px; font-size: 13px; }
.wizard__steps { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; background: var(--paper); border-right: 1px solid var(--concrete); overflow-y: auto; }
.wizard__steps button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: none; color: var(--joint); font: 500 14px var(--font); text-align: left; cursor: pointer; }
.wizard__steps button span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--concrete); color: var(--ink); font-size: 12px; }
.wizard__steps button:hover { color: var(--ink); }
.wizard__steps button.is-on { color: var(--ink); background: #fff; box-shadow: inset 3px 0 0 var(--red); }
.wizard__steps button.is-on span { background: var(--ink); color: #fff; }
.wizard__body { padding: 18px 28px 30px; overflow-y: auto; }
.wizard__body h3 { margin: 22px 0 10px; font-size: 15px; }
.wizard__body h3:first-child { margin-top: 0; }
.wizard__hint { font-size: 13px; margin-bottom: 12px; }
.wizard__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 26px; border-top: 1px solid var(--concrete); }
.wizard__total { font-weight: 600; font-variant-numeric: tabular-nums; }
.wizard__foot .form-msg { flex: 1; min-width: 160px; }
.wizard__phase { margin-bottom: 10px; padding: 12px 14px; background: #fff; border: 1px solid var(--concrete); border-left: 3px solid var(--ink); }
.wizard__phase.is-off { border-left-color: var(--concrete); opacity: 0.75; }
.wizard__phase-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.wizard__phase-head .check { flex: 1; min-width: 220px; }
.wizard__mini { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--joint); }
.wizard__mini input { width: 64px; padding: 5px 7px; border: 1px solid #C4C9CE; font: 14px var(--font); text-align: right; }
.wizard__items { margin-top: 8px; padding-left: 24px; }
.wizard__sum { margin-top: 12px; font-size: 14px; font-weight: 500; }
.wizard__methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; margin-bottom: 12px; }
.wizard__hours { max-width: 620px; margin-top: 8px; }
.wizard__hours input { width: 80px; padding: 5px 7px; border: 1px solid #C4C9CE; font: 14px var(--font); text-align: right; }
.wizard__services { display: grid; gap: 6px; }
.wizard__service { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--concrete); font-size: 14px; }
.wizard__service select { padding: 6px 8px; border: 1px solid #C4C9CE; font: 13.5px var(--font); }
.wizard__terms { display: grid; gap: 10px; margin-bottom: 18px; }
.wizard__article { padding: 10px 14px; background: #fff; border: 1px solid var(--concrete); }
.wizard__article-body { margin: 4px 0 0 24px; font-size: 13px; color: var(--joint); }
.wizard__article-body .fields { margin-top: 6px; }
.wizard__review { display: grid; gap: 10px; margin: 0; }
.wizard__review div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; font-size: 14px; }
.wizard__review dt { color: var(--joint); }
.wizard__review dd { margin: 0; }
@media (max-width: 760px) {
  .wizard__frame { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .wizard__steps { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--concrete); padding: 8px; }
  .wizard__steps button { flex: none; }
  .wizard__service { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ---------------------------------------------------------------------------
   Proposal wizard (letter + contract scheme), Clients management, document preview
   --------------------------------------------------------------------------- */
.wizard__phase-tools { display: inline-flex; gap: 2px; }
.wizard__phase-tools .icon-button { font: 600 16px var(--font); }
.wizard__phase .fields { margin-top: 10px; }
.wizard__phase .add-link { margin-top: 4px; }
.wizard__phase textarea, .wizard__body textarea { font: 14px/1.45 var(--font); }
.wizard__helper { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; margin-bottom: 14px; padding: 12px 14px; background: #fff; border: 1px solid var(--concrete); border-left: 3px solid var(--red); }
.wizard__helper > strong { flex-basis: 100%; font-size: 14px; }
.wizard__helper .field { min-width: 160px; }
.wizard__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 8px; }
.wizard__custom { display: flex; align-items: center; gap: 6px; }
.wizard__custom input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid #C4C9CE; font: 14px var(--font); }
.wizard .checks { margin-bottom: 8px; }

.client-table td { vertical-align: middle; }
.client-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tree-col { width: 44px; }
.tree-toggle { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--ink); background: #fff; color: var(--ink); font: 600 18px/1 var(--font); cursor: pointer; }
.tree-toggle.is-open { background: var(--ink); color: #fff; }
.tree-toggle:disabled { border-color: var(--concrete); color: #B5BABE; cursor: default; }
.tree-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.client-row__sub { display: block; font-size: 13px; }
.client-row.is-archived td { color: var(--joint); }
.tree-row td { background: var(--paper); font-size: 14px; }
.tree-row--2 td:nth-child(2) { padding-left: 18px; }
.tree-indent { display: inline-block; margin-right: 10px; vertical-align: middle; }
.tree-indent .tree-toggle { width: 26px; height: 26px; font-size: 16px; }
.tree-row--3 td { background: #fff; }
.tree-row--3 td:nth-child(2) { padding-left: 64px; }
.tree-kind { display: inline-block; min-width: 92px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--joint); }
.status-pill { display: inline-block; padding: 2px 10px; border: 1px solid currentColor; font-size: 13px; white-space: nowrap; }
.status-pill--active { color: var(--ink); }
.status-pill--potential { color: #8A5A00; border-style: dashed; }
.status-pill--inactive { color: var(--joint); }
.client-row__status { display: none; }
.client-form { width: min(720px, 100vw - 24px); }
.client-form h3 { margin: 18px 0 8px; font-size: 15px; }
.client-form__projects { max-height: 180px; overflow-y: auto; padding: 6px 8px; border: 1px solid var(--concrete); }
.proposal-uploads__view { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 13px; }
.proposal-uploads__view .icon { width: 16px; height: 16px; }
@media (max-width: 760px) {
  .wizard__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .client-table thead th:nth-child(3), .client-table thead th:nth-child(4), .client-table thead th:nth-child(5),
  .client-row td:nth-child(3), .client-row td:nth-child(4), .client-row td:nth-child(5) { display: none; }
  .client-row .row-actions { width: auto; }
  .client-row .icon-button { width: 34px; height: 40px; }
  .client-table td, .client-table th { padding-left: 6px; padding-right: 6px; }
  .client-row__sub { display: none; }
  .client-row__status { display: table; margin-top: 6px; }
  .client-table thead th:nth-child(6), .client-row td:nth-child(6) { display: none; }
  .client-table .status-pill { padding: 2px 6px; font-size: 12px; }
  .tree-toggle { width: 40px; height: 40px; font-size: 22px; }
  .tree-row--3 td:nth-child(2) { padding-left: 28px; }
}

/* the document preview: pages on screen, plain pages on paper */
.doc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.doc-tools h1 { flex: 1; min-width: 200px; margin: 0; font-size: 22px; }
.doc-tools__right { display: flex; gap: 8px; }
.doc-hint { margin: 8px 0 18px; font-size: 13px; }
.doc-frame, .doc-frame > tbody, .doc-frame > tbody > tr, .doc-frame > tbody > tr > td { display: block; width: 100%; padding: 0; border: 0; }
.doc-frame > tbody > tr > td { display: grid; gap: 24px; justify-items: center; }
.doc-frame > thead, .doc-frame > tfoot { display: none; }
.doc-sheet { position: relative; box-sizing: border-box; width: 8.5in; max-width: 100%; min-height: 11in; padding: 0.9in 0.875in 1in; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06);
  color: var(--ink); font: 10pt/1.45 var(--font); text-align: justify; }
.doc-head { display: flex; align-items: flex-end; gap: 14px; margin: -0.35in 0 0.3in; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); }
.doc-head svg { width: 0.45in; height: 0.45in; flex: none; }
.doc-head strong { display: block; font-size: 13pt; letter-spacing: .08em; }
.doc-head small { display: block; font-size: 9pt; color: var(--joint); }
.doc-head small em { margin-left: 1.5em; font-size: 7.5pt; font-style: normal; }
.doc-sheet p { margin: 0 0 8pt; }
.doc-sheet strong { font-weight: 700; }
.doc-tab { display: inline-block; min-width: 0.5in; }
.doc-title { margin: 0 0 6pt; font: 700 16pt var(--font); text-align: center; }
.doc-subtitle { text-align: center; }
.doc-h1 { margin: 14pt 0 6pt; font: 700 12pt var(--font); }
.doc-h2 { margin: 10pt 0 4pt; font: 700 10pt var(--font); text-align: left; break-after: avoid; }
.doc-sheet .doc-left { margin: 0; text-align: left; }
.doc-sheet .doc-center { margin: 14pt 0 7pt; font-weight: 700; letter-spacing: .05em; text-align: center; break-after: avoid; }
.doc-sheet .doc-notice { margin: 12pt 0; font-weight: 700; font-style: italic; text-transform: uppercase; }
.doc-sheet .doc-small { font-size: 9pt; text-align: center; color: #333; }
.doc-sheet .doc-bullet, .doc-sheet .doc-bullet2, .doc-sheet .doc-num { display: flex; margin: 0 0 2pt; text-align: left; }
.doc-bullet { padding-left: 0.25in; } .doc-bullet2 { padding-left: 0.5in; }
.doc-bullet .doc-mark, .doc-bullet2 .doc-mark { flex: none; width: 0.25in; }
.doc-num .doc-mark { flex: none; }
.doc-num--1 { padding-left: 0.25in; } .doc-num--1 .doc-mark { width: 0.625in; }
.doc-num--2 { padding-left: 0.5in; } .doc-num--2 .doc-mark { width: 0.75in; }
.doc-num--3 { padding-left: 0.75in; } .doc-num--3 .doc-mark { width: 0.875in; }
.doc-sheet .doc-leader { display: flex; align-items: baseline; gap: 4px; margin: 0 0 2pt; text-align: left; }
.doc-leader.is-bold { font-weight: 700; }
.doc-dots { flex: 1; min-width: 20px; border-bottom: 1.5px dotted #000; transform: translateY(-3px); }
.doc-table { width: 100%; margin: 6pt 0 10pt; border-collapse: collapse; font-size: 10pt; }
.doc-table th, .doc-table td { padding: 3pt 5pt; border: 1px solid #999; text-align: left; }
.doc-table .is-right { text-align: right; } .doc-table .is-center { text-align: center; }
.doc-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5in; margin-top: 18pt; break-inside: avoid; }
.doc-sign p { margin: 0; text-align: left; }
.doc-foot { display: flex; justify-content: space-between; margin: 0; font-size: 8pt; color: var(--joint); }
.doc-sheet__footer { position: absolute; left: 0.875in; right: 0.875in; bottom: 0.4in; }
@media (max-width: 760px) {
  .doc-sheet { min-height: 0; padding: 24px 18px 48px; font-size: 15px; text-align: left; }
  .doc-sheet__footer { left: 18px; right: 18px; bottom: 14px; }
  .doc-head { margin: 0 0 16px; }
  .doc-tab { min-width: 2.6em; }
  .doc-sign { grid-template-columns: 1fr; gap: 18pt; }
}
@media print {
  @page { size: letter; margin: 0.5in 0.875in 0.45in; }
  .page-staff .area-top, .doc-tools, .doc-hint, #docMsg, .doc-sheet__footer, .doc-sheet .doc-head, .mobile-nav, .pm-bar { display: none !important; }
  body.page-staff, .page-staff .staff-main { padding: 0 !important; margin: 0 !important; background: #fff !important; max-width: none !important; }
  .doc-frame { display: table; width: 100%; border-collapse: collapse; }
  .doc-frame > thead { display: table-header-group; }
  .doc-frame > tfoot { display: table-footer-group; }
  .doc-frame > tbody { display: table-row-group; }
  .doc-frame > tbody > tr, .doc-frame > thead > tr, .doc-frame > tfoot > tr { display: table-row; }
  .doc-frame td { display: table-cell; padding: 0; }
  .doc-frame > thead .doc-head { margin: 0 0 0.3in; }
  .doc-frame > tfoot .doc-foot { padding-top: 0.25in; }
  .doc-sheet { display: block; width: auto; min-height: 0; padding: 0; box-shadow: none; break-after: page; }
  .doc-sheet:last-child { break-after: auto; }
}


/* Office Standards: tabs and office locations */
.subtabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 22px 0 6px; border-bottom: 1px solid var(--concrete); }
.subtabs button { padding: 12px 16px; border: 0; background: none; color: var(--joint); font: 500 15px var(--font); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; }
.subtabs button:hover { color: var(--ink); }
.subtabs button.is-on { color: var(--ink); box-shadow: inset 0 -3px 0 var(--red); }
.subtabs button:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.locations { display: grid; gap: 16px; margin: 16px 0 10px; }
.location { padding: 16px 18px; background: #fff; border: 1px solid var(--concrete); border-left: 3px solid var(--concrete); }
.location:has(.is-central) { border-left-color: var(--ink); }
.location__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.location__kind { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--joint); }
.location__kind.is-central { color: var(--ink); font-weight: 600; }
.location__tools { display: inline-flex; align-items: center; gap: 6px; }
.location h3 { margin: 0 0 4px; font-size: 17px; }
.location p { margin: 2px 0; }
.location__line { margin-top: 8px !important; font-size: 13px; }
@media (max-width: 760px) { .subtabs button { flex: 1; padding: 14px 10px; } }

/* Contact: the offices (from Office Standards) */
.contact__firm { margin: 0 0 18px; line-height: 1.6; }
.contact__firm strong { font-weight: 600; font-stretch: 112%; letter-spacing: 0.04em; }
.contact__offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px 32px; }
.office { font-style: normal; line-height: 1.6; }
.office__kind { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--joint); }
.office a { text-decoration: none; box-shadow: inset 0 -1px 0 var(--ink); }
@media (max-width: 760px) { .office a { display: inline-block; padding: 6px 0; } }

/* Document viewer (contracts and proposals, read only) and the embedded preview */
.doc-viewer { width: min(1100px, 100vw - 24px); }
.doc-viewer .modal__body { display: flex; flex-direction: column; height: min(88vh, 1100px); }
.doc-viewer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.doc-viewer__head h2 { margin: 0; }
.doc-viewer__bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 12px 0; }
.doc-viewer__bar .field { flex: 1; min-width: 220px; margin: 0; }
.doc-viewer__frame { flex: 1; min-height: 300px; border: 1px solid var(--concrete); background: var(--paper); }
.doc-viewer__frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.doc-viewer__empty { padding: 30px 20px; text-align: center; }
.is-embedded .area-top, .is-embedded .doc-tools, .is-embedded .doc-hint, .is-embedded .mobile-nav, .is-embedded .pm-bar { display: none !important; }
.is-embedded body, .is-embedded .staff-main { padding-top: 12px !important; margin-top: 0 !important; }

/* Projects management: a project's clients and consultants */
.parties-table td { vertical-align: middle; }
.parties-table .num { text-align: right; width: 90px; }
.parties-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 14px; }
.parties-add .field { flex: 1; min-width: 220px; margin: 0; }
.parties-add .add-link { align-self: center; }

/* Contracts: the contract window, its documents, statuses, the tree buttons */
.contract-form { width: min(760px, 100vw - 24px); }
.contract-form h3 { margin: 18px 0 6px; font-size: 15px; }
.contract-form__hint { margin: 0 0 8px; font-size: 13px; }
.contract-files { margin: 0 0 10px; padding: 0; list-style: none; }
.contract-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--concrete); font-size: 14px; }
.contract-files li.is-queued { color: var(--joint); }
.contract-files__tools { margin-left: auto; display: inline-flex; }
.contract-upload { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.contract-upload .field { min-width: 200px; margin: 0; }
.tree-doc { padding: 4px 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.tree-doc:hover { text-decoration: underline; }
.tree-doc .tree-kind { min-width: 0; margin-right: 4px; }
.contract-status { display: inline-block; padding: 1px 8px; border: 1px solid currentColor; font-size: 12.5px; white-space: nowrap; }
.contract-status--active { color: var(--ink); }
.contract-status--consumed { color: #2E6B3A; }
.contract-status--cancelled { color: var(--joint); text-decoration: line-through; }
.contract-group td { background: #EEF0F2; }
.contracts-table .num { text-align: right; white-space: nowrap; }
@media (max-width: 760px) {
  .contracts-table thead th:nth-child(4), .contracts-table .client-row td:nth-child(4),
  .contracts-table thead th:nth-child(6), .contracts-table .client-row td:nth-child(6) { display: none; }
  .tree-doc { padding: 8px 0; }
}

/* Access levels: everyone against every module */
.access-wrap { max-height: 72vh; overflow: auto; }
.access-table { width: auto; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.access-table th, .access-table td { white-space: nowrap; }
.access-table thead th { position: sticky; top: 0; z-index: 2; background: var(--paper); }
.access-table thead tr.access-groups th { height: 34px; padding-top: 6px; padding-bottom: 6px; }
.access-table thead tr.access-cols th { top: 34px; vertical-align: bottom; }
.access-table .access-name { min-width: 170px; }
.access-sticky { position: sticky; left: 0; z-index: 1; background: var(--paper); }
.access-table thead .access-sticky { z-index: 3; }
.access-table tbody .access-sticky { background: #fff; box-shadow: 1px 0 0 var(--concrete); font-weight: 400; text-align: left; color: var(--ink); font-size: 14px; }
.access-cell input:disabled:checked { opacity: .7; }
.access-group { text-align: left; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--joint); border-left: 2px solid var(--concrete); }
.access-col { width: 34px; min-width: 34px; max-width: 34px; height: 118px; padding: 6px 4px !important; }
.access-col span { display: inline-flex; align-items: center; gap: 4px; max-height: 108px; overflow: hidden; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 500; font-size: 13px; color: var(--ink); }
.access-col .icon { width: 13px; height: 13px; }
.access-col--first { border-left: 2px solid var(--concrete); }
.access-cell { text-align: center; padding: 0 !important; }
.access-cell input { width: 18px; height: 18px; margin: 10px 8px; accent-color: var(--ink); cursor: pointer; }
.access-cell input:disabled { cursor: default; opacity: .55; }
.access-cell.is-delegated input { accent-color: var(--red); opacity: 1; }
.access-cell.is-delegated { box-shadow: inset 0 0 0 2px rgba(214,43,39,.25); }
.access-legend--delegate { color: var(--red); font-weight: 600; }
.access-table tr.is-dirty td, .access-table tr.is-dirty .access-sticky { background: #FFF7E0; }
.access-table select { padding: 4px 6px; border: 1px solid #C4C9CE; font: 13.5px var(--font); }
.access-pending { display: block; font-size: 12px; color: #8A5A00; }
.access-page .restricted-mark .icon { width: 13px; height: 13px; vertical-align: -1px; }
@media (max-width: 760px) {
  .access-wrap { max-height: none; }
  .access-cell input { width: 22px; height: 22px; margin: 10px; }
}

/* Help: the tutorial window, the hints, the Help menu and the Help tab */
.help-window { width: min(640px, 100vw - 24px); }
.help-window__head { display: flex; align-items: center; gap: 12px; }
.help-window__head h2 { flex: 1; margin: 0; }
.help-window__icon .icon { width: 30px; height: 30px; color: var(--red); }
.help-window__intro { margin: 12px 0 14px; font-size: 16px; }
.help-window__steps { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 9px; line-height: 1.5; }
.help-window__steps li::marker { font-weight: 600; color: var(--red); }
.help-window__tips { margin: 0; padding: 10px 14px 10px 30px; background: var(--paper); border-left: 3px solid var(--concrete); font-size: 14px; color: var(--joint); }
.help-window__tips:empty { display: none; }
.help-tip { position: fixed; z-index: 1000; max-width: 300px; padding: 8px 11px; background: var(--ink); color: #fff; font: 13.5px/1.4 var(--font); box-shadow: 0 6px 18px rgba(0,0,0,.18); pointer-events: none; }
.help-tip[hidden] { display: none; }
button.area-menu__item { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.area-menu__item small { display: block; font-size: 12px; opacity: .7; }
.area-menu__sep { border-top: 1px solid rgba(255,255,255,.15); margin-top: 4px; padding-top: 4px; }
.help-switch { display: flex !important; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; }
.help-switch input { width: 16px; height: 16px; accent-color: var(--red); }
.area-menu--help { margin-left: auto; }
button.tool--help { border: 0; border-top: 2px solid var(--ink); font: inherit; text-align: left; cursor: pointer; }
@media (max-width: 760px) {
  .area-menu--help { margin-left: 0; }
  .help-tip { max-width: calc(100vw - 32px); }
}
.area-menu--help .area-menu__list { max-height: min(75vh, 640px); overflow-y: auto; right: 0; left: auto; }

/* Mail management */
.mail-defaults { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 18px 0 6px; padding: 12px 16px; background: #fff; border: 1px solid var(--concrete); border-left: 3px solid var(--ink); }
.mail-provider { margin: 0 0 4px; font-size: 13px; }
.mail-table .num { text-align: right; white-space: nowrap; }
.mail-own { font-weight: 600; color: var(--ink); }
.mail-routes { font-size: 13px; color: var(--joint); }
.mail-status--active { color: var(--ink); }
.mail-status--suspended { color: #8A5A00; border-style: dashed; }
.mail-status--closing { color: var(--red); }
@media (max-width: 760px) {
  .mail-table thead th:nth-child(3), .mail-table td:nth-child(3), .mail-table thead th:nth-child(6), .mail-table td:nth-child(6),
  .mail-table thead th:nth-child(7), .mail-table td:nth-child(7) { display: none; }
}

/* Projects in Website: the client, private unless ticked */
.web-client .check { margin-top: 8px; }
.web-client__note { margin: 4px 0 0; font-size: 13px; }