/* ==========================================================================
   Bay Brothers crew app shell.
   Loaded alongside /styles.css, so it inherits the site's colour tokens,
   fonts and .btn/.field classes rather than redefining them.
   ========================================================================== */

.app-body {
  background: var(--paper-warm);
  color: var(--slate);
  min-height: 100vh;
}

.app-shell { display: flex; min-height: 100vh; }

/* --------------------------------------------------------------- sidebar */

.app-sidebar {
  width: 232px; flex: none;
  background: var(--ink); color: rgba(255,255,255,.78);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.app-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 22px 20px; color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.app-brand-mark { width: 29px; flex: none; display: flex; align-items: center; }
.app-brand-mark svg { width: 100%; height: auto; }
.app-brand-mark img { width: 100%; height: auto; }

.app-nav { display: flex; flex-direction: column; padding: 14px 12px; gap: 2px; flex: 1; }
.app-nav a {
  color: rgba(255,255,255,.68); text-decoration: none;
  padding: 11px 14px; border-radius: var(--radius); font-size: .96rem; font-weight: 500;
}
.app-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
body[data-nav="dashboard"] .app-nav a[data-nav-item="dashboard"],
body[data-nav="calendar"] .app-nav a[data-nav-item="calendar"],
body[data-nav="jobs"] .app-nav a[data-nav-item="jobs"],
body[data-nav="clients"] .app-nav a[data-nav-item="clients"],
body[data-nav="board"] .app-nav a[data-nav-item="board"],
body[data-nav="measure"] .app-nav a[data-nav-item="measure"],
body[data-nav="prices"] .app-nav a[data-nav-item="prices"],
body[data-nav="reports"] .app-nav a[data-nav-item="reports"],
body[data-nav="team"] .app-nav a[data-nav-item="team"] {
  background: var(--accent); color: #fff;
}

.app-user {
  padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.09);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: .87rem;
}
.app-user strong { display: block; color: #fff; font-size: .93rem; }
.app-user span { color: rgba(255,255,255,.5); text-transform: capitalize; }

.btn-link {
  background: none; border: none; color: rgba(255,255,255,.55);
  font: inherit; font-size: .85rem; cursor: pointer; padding: 0; text-decoration: underline;
}
.btn-link:hover { color: #fff; }

/*
 * :not([hidden]) matters here: without it, this rule's specificity beats the
 * UA stylesheet's [hidden] { display:none }, so an owner-only element that a
 * page's own JS explicitly hides (e.g. a button only shown once a quote is
 * accepted) would get forced back to visible for an owner. Explicit JS hide
 * must always win over the role-visibility default.
 */
[data-owner-only] { display: none; }
body.is-owner [data-owner-only]:not([hidden]) { display: block; }
nav[data-owner-only], .app-nav a[data-owner-only] { display: none; }
body.is-owner .app-nav a[data-owner-only]:not([hidden]) { display: block; }

/* ----------------------------------------------------------------- main */

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 28px; background: var(--paper); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.app-page-title { font-size: 1.3rem; margin: 0; }

.app-menu-toggle {
  display: none; width: 38px; height: 38px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper); cursor: pointer; color: var(--ink);
}
.app-menu-toggle svg { width: 20px; height: 20px; }

.app-content { padding: 24px 28px 60px; flex: 1; }

.app-toast {
  margin: 0 28px; padding: 12px 16px; border-radius: var(--radius);
  font-size: .93rem; font-weight: 500;
}
.app-toast[data-kind="error"] { background: #fbeceb; border: 1px solid #e3bab6; color: #8a2f26; }
.app-toast[data-kind="ok"]    { background: #e8f3ec; border: 1px solid #b6d9c3; color: #1d5233; }

/* ---------------------------------------------------------------- login */

.app-login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--ink);
}
.app-login-card {
  width: 100%; max-width: 380px; background: var(--paper); border-radius: 8px;
  padding: 40px 34px; box-shadow: var(--shadow);
}
.app-login-card h1 { font-size: 1.4rem; margin-bottom: .3em; }
.app-login-card p.lede { color: var(--muted); font-size: .95rem; margin-bottom: 24px; }

/* ------------------------------------------------------------- surfaces */

.app-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.app-card + .app-card { margin-top: 18px; }

.app-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.app-toolbar .field { margin: 0; min-width: 220px; }

.app-grid { display: grid; gap: 18px; }
.app-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.app-grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.stat {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px;
}
.stat .num { font-family: var(--display); font-weight: 800; font-size: 1.7rem; color: var(--ink); }
.stat .label { font-size: .84rem; color: var(--muted); }

/* ------------------------------------------------------------------ list */

.app-list { display: flex; flex-direction: column; gap: 10px; }
.app-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: inherit;
}
a.app-row:hover { border-color: var(--accent); }
.app-row-main { min-width: 0; }
.app-row-title { font-weight: 700; color: var(--ink); }
.app-row-sub { font-size: .87rem; color: var(--muted); margin-top: 2px; }
.app-row-meta { display: flex; align-items: center; gap: 10px; flex: none; }

/* ------------------------------------------------------------------ pill */

.pill {
  display: inline-block; padding: 4px 11px; border-radius: 100px;
  font-size: .78rem; font-weight: 700; text-transform: capitalize; white-space: nowrap;
}
.pill-lead         { background: #fdf3e0; color: #8a5a10; }
.pill-lost         { background: #f2f2f2; color: #999; text-decoration: line-through; }
.pill-quote        { background: #eee; color: #555; }
.pill-scheduled    { background: #e3edfb; color: #2a5aa8; }
.pill-in_progress  { background: var(--accent-lite); color: var(--accent-dim); }
.pill-complete     { background: #e8f3ec; color: #1d5233; }
.pill-invoiced     { background: #f1e9fb; color: #6a3ba0; }
.pill-cancelled    { background: #f2f2f2; color: #999; text-decoration: line-through; }
.pill-draft        { background: #eee; color: #555; }
.pill-sent         { background: #e3edfb; color: #2a5aa8; }
.pill-accepted     { background: #e8f3ec; color: #1d5233; }
.pill-declined     { background: #fbeceb; color: #8a2f26; }
.pill-unpaid       { background: #fbeceb; color: #8a2f26; }
.pill-partially_paid { background: var(--accent-lite); color: var(--accent-dim); }
.pill-paid         { background: #e8f3ec; color: #1d5233; }
.pill-void         { background: #f2f2f2; color: #999; }

/* ----------------------------------------------------------------- table */

.app-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.app-table th {
  text-align: left; font-size: .77rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line);
}
.app-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.app-table td.num, .app-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.app-table input[type="text"], .app-table input[type="number"] {
  width: 100%; padding: 7px 9px; border: 1px solid #d8d3cc; border-radius: 4px; font: inherit;
}

/* --------------------------------------------------------------- forms */

.app-form { display: grid; gap: 16px; max-width: 640px; }
.app-form-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .app-form-row { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- tabs */

.app-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.app-tab {
  padding: 10px 4px; margin-right: 20px; font-weight: 600; font-size: .93rem;
  color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; font-family: inherit;
}
.app-tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.app-panel[hidden] { display: none; }

/* --------------------------------------------------------------- pieces */

.app-empty { padding: 30px; text-align: center; color: var(--muted); font-size: .93rem; }
.app-note { background: var(--paper-warm); border-radius: var(--radius); padding: 12px 14px; font-size: .9rem; }
.app-note + .app-note { margin-top: 8px; }
.app-note-meta { color: var(--muted); font-size: .78rem; margin-top: 4px; }

.checklist-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.checklist-item:last-child { border-bottom: none; }
.checklist-item.is-done .checklist-label { text-decoration: line-through; color: var(--muted); }
.checklist-item input[type="checkbox"] { width: 18px; height: 18px; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.photo-grid figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); position: relative; }
.photo-grid img { width: 100%; height: 130px; object-fit: cover; display: block; }
.photo-grid figcaption { padding: 6px 8px; font-size: .76rem; color: var(--muted); }
.photo-grid .photo-remove {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(18,23,28,.7); color: #fff; border: none; cursor: pointer; font-size: .85rem; line-height: 1;
}

.signature-pad { border: 1px solid var(--line); border-radius: var(--radius); touch-action: none; background: #fff; display: block; width: 100%; height: 180px; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.calendar-day { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); min-height: 120px; padding: 8px; }
.calendar-day.is-today { border-color: var(--accent); }
.calendar-day-num { font-size: .78rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.calendar-job {
  display: block; font-size: .78rem; padding: 4px 6px; border-radius: 3px;
  background: var(--accent-lite); color: var(--accent-dim); margin-bottom: 4px; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 900px) {
  .calendar-grid { grid-template-columns: 1fr; }
  .calendar-day-num { display: flex; justify-content: space-between; }
}

/* ------------------------------------------------------------ measure */

.measure-map { height: 62vh; min-height: 420px; width: 100%; }
.measure-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--paper);
}
.measure-bar-bottom { border-bottom: none; border-top: 1px solid var(--line); justify-content: space-between; }
.measure-bar input[type="search"] {
  flex: 1; font: inherit; padding: 8px 10px; border: 1px solid #d8d3cc; border-radius: 4px;
}
.measure-hint { font-size: .85rem; color: var(--muted); }
.measure-readout { font-size: .88rem; color: var(--ink); white-space: nowrap; }
/* Leaflet sets its own z-index stack; keep it under the app's modals. */
.leaflet-pane, .leaflet-top, .leaflet-bottom { z-index: 5; }

@media (max-width: 1000px) {
  /* Side panel drops under the map rather than squeezing it to a slit. */
  #measure-root .app-grid { grid-template-columns: 1fr !important; }
  .measure-map { height: 52vh; min-height: 320px; }
}

/* -------------------------------------------------------------- board */

.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 12px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 12px;
}

.board-col {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 140px;
  display: flex;
  flex-direction: column;
}
/* Only while a card is actually being dragged over it — a permanently
   highlighted column reads as "selected", which it isn't. */
.board-col.is-over { border-color: var(--accent); background: var(--accent-lite); }

.board-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-weight: 700; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.board-col-count {
  background: var(--paper); border: 1px solid var(--line); border-radius: 100px;
  padding: 1px 8px; font-size: .75rem; color: var(--content, var(--slate));
}
.board-col-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }

.board-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; cursor: grab; text-decoration: none; color: inherit; display: block;
}
.board-card:hover { border-color: var(--accent); }
.board-card:active { cursor: grabbing; }
.board-card.is-dragging { opacity: .4; }
.board-card-title { font-weight: 700; font-size: .93rem; color: var(--ink); }
.board-card-sub { font-size: .82rem; color: var(--muted); margin-top: 3px; }
.board-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
/* The move-by-select fallback. HTML5 drag-and-drop does not work on touch, and
   this board is genuinely useful on a phone, so dragging is the nice path and
   this is the one that always works. */
.board-card-foot select {
  font: inherit; font-size: .78rem; padding: 3px 6px; max-width: 130px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--paper-warm); color: var(--slate);
}
.board-empty { padding: 14px; text-align: center; font-size: .82rem; color: var(--muted); }

/* ---------------------------------------------------------- price list */

.price-cat { font-family: var(--display); font-weight: 800; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  padding: 18px 0 8px; }
.price-table input[type="text"] { min-width: 180px; }
.price-table input[type="number"] { width: 96px; }
.price-table select { font: inherit; padding: 6px 8px; border: 1px solid #d8d3cc; border-radius: 4px; }
.needs-pricing { color: var(--accent-dim); font-weight: 700; font-size: .75rem; white-space: nowrap; }
.margin-pct { font-variant-numeric: tabular-nums; font-size: .85rem; }
.margin-pct.is-negative { color: #8a2f26; font-weight: 700; }

/* -------------------------------------------------------------- modal */

.app-modal-backdrop {
  position: fixed; inset: 0; background: rgba(18,23,28,.5); z-index: 200;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
}
.app-modal-backdrop[hidden] { display: none; }
.app-modal { background: var(--paper); border-radius: 8px; width: 100%; max-width: 480px; padding: 28px; }
.app-modal h2 { font-size: 1.15rem; margin-bottom: 18px; }
.app-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* -------------------------------------------------------------- mobile */

@media (max-width: 900px) {
  .app-sidebar {
    position: fixed; left: 0; top: 0; z-index: 150; transform: translateX(-100%);
    transition: transform .2s; width: 240px;
  }
  body.nav-open .app-sidebar { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.25); }
  .app-menu-toggle { display: flex; align-items: center; justify-content: center; }
  .app-content { padding: 18px 16px 60px; }
  .app-topbar { padding: 14px 16px; }
}

/* ==========================================================================
   Client portal (/portal/) and the two-door login page.

   Deliberately warmer and plainer than the crew app: the person reading this
   is a homeowner checking on their roof once a week, not a tradesman using a
   tool all day. Fewer affordances, bigger type, nothing to learn.
   ========================================================================== */

/* ------------------------------------------------------------ login page */

/* The login card is otherwise a plain white box on a dark ground, so the logo
   is the only thing identifying whose site this is — worth giving it room. */
.login-logo { display: block; text-align: center; margin-bottom: 26px; }
.login-logo img { height: 118px; width: auto; margin: 0 auto; }

.login-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: var(--paper-warm, #f7f5f2); padding: 5px; border-radius: 6px; margin-bottom: 24px;
}
.login-tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: .92rem;
  padding: 11px 8px; border-radius: 4px; color: var(--muted);
}
.login-tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(18,23,28,.12); }

/* A 4-digit PIN is short and gets read off a phone screen — wide letter
   spacing makes it obvious it is four separate characters, not a word. */
.pin-input {
  font-family: var(--display); font-size: 1.5rem; font-weight: 700;
  letter-spacing: .5em; text-indent: .25em; text-align: center; max-width: 200px;
}

.login-help { font-size: .9rem; color: var(--muted); margin-top: 20px; text-align: center; }

/* ---------------------------------------------------------- portal shell */

.portal-body { background: var(--paper-warm, #f7f5f2); }

.portal-header { background: var(--ink); color: #fff; }
.portal-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.portal-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; }
.portal-brand strong { display: block; font-family: var(--display); font-weight: 800; font-size: 1.05rem; }
.portal-brand small { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.portal-header-actions { display: flex; align-items: center; gap: 14px; }
.portal-signout {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: rgba(255,255,255,.6); font-size: .88rem; padding: 6px;
}
.portal-signout:hover { color: #fff; }

.portal-main { padding: 34px 24px 80px; max-width: 780px; }

.portal-summary { margin-bottom: 26px; }
.portal-summary h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin-bottom: .25em; }
.portal-address { color: var(--muted); margin-bottom: .8em; }
.portal-status-line { margin: 0; }
.portal-pill {
  display: inline-block; padding: 6px 15px; border-radius: 100px;
  font-family: var(--display); font-weight: 700; font-size: .85rem;
  background: var(--ink); color: #fff;
}
.portal-pill[data-status="in_progress"] { background: var(--accent); }
.portal-pill[data-status="complete"], .portal-pill[data-status="invoiced"] { background: #2f7d4f; }
.portal-pill[data-status="cancelled"], .portal-pill[data-status="lost"] { background: var(--muted); }

.portal-card {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 24px; margin-bottom: 20px;
}
.portal-card h2 { font-size: 1.2rem; margin-bottom: .6em; }
.portal-card h3 { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: .6em; }
.portal-note { color: var(--muted); font-size: .92rem; margin-bottom: 1.1em; }

.portal-update { border-left: 3px solid var(--accent); }

.portal-dates { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.portal-dates .portal-card p { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink); margin: 0; }

/* -------------------------------------------------------------- timeline */

.portal-timeline { list-style: none; margin: 0; padding: 0; }
.portal-step { display: flex; gap: 15px; padding-bottom: 22px; position: relative; }
.portal-step:last-child { padding-bottom: 0; }
/* The connecting line, drawn between dots rather than as a border on the item
   so the last step doesn't trail a line into nothing. */
.portal-step:not(:last-child)::before {
  content: ''; position: absolute; left: 8px; top: 20px; bottom: 4px;
  width: 2px; background: var(--line);
}
.portal-step[data-state="done"]:not(:last-child)::before { background: #2f7d4f; }
.portal-step-dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 2px;
  border: 2px solid var(--line); background: #fff; position: relative; z-index: 1;
}
.portal-step[data-state="done"] .portal-step-dot { background: #2f7d4f; border-color: #2f7d4f; }
.portal-step[data-state="current"] .portal-step-dot {
  border-color: var(--accent); background: var(--accent);
  box-shadow: 0 0 0 4px rgba(194,106,50,.18);
}
.portal-step-text strong { display: block; font-family: var(--display); color: var(--ink); }
.portal-step[data-state="todo"] .portal-step-text strong { color: var(--muted); font-weight: 600; }
.portal-step-text small { color: var(--muted); font-size: .88rem; }

/* ---------------------------------------------------------------- photos */

.portal-photos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.portal-photo { margin: 0; }
.portal-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; display: block; }
.portal-photo figcaption { font-size: .8rem; color: var(--muted); margin-top: 6px; }

.portal-upload { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.portal-upload label { margin: 0; cursor: pointer; }
.portal-upload-status { font-size: .88rem; color: var(--muted); }

/* --------------------------------------------------------------- thread */

.portal-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.portal-msg { padding: 14px 16px; border-radius: 6px; max-width: 85%; }
.portal-msg p { margin: 0 0 6px; }
.portal-msg small { font-size: .78rem; color: var(--muted); }
/* Client messages sit right and tinted, staff replies left and plain — the
   same convention as every messaging app, so it needs no explaining. */
.portal-msg[data-from="client"] { background: var(--accent-lite, #f3e5d9); align-self: flex-end; }
.portal-msg[data-from="staff"] { background: var(--paper-warm, #f7f5f2); border: 1px solid var(--line); align-self: flex-start; }

.portal-ask textarea { width: 100%; }

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

/* The client's PIN, shown big enough to read off a screen while reading it
   out over the phone. */
.portal-pin-display {
  font-family: var(--display); font-weight: 800; font-size: 2rem;
  letter-spacing: .28em; color: var(--ink); margin: 0;
}

/* Unread-question count on the Client portal tab. */
.tab-badge {
  display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 6px;
  border-radius: 100px; background: var(--accent); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 1.5; text-align: center;
}

/* Escape hatch on the login page — see the comment in login.html. */
.login-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .88rem; color: var(--muted); text-decoration: none;
  margin-bottom: 18px; padding: 6px 0; min-height: 40px;
}
.login-back:hover { color: var(--ink); }
.login-back svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------ team page */

/* .btn-link is defined white-on-dark for the sidebar's "Sign out". Inside a
   row on the light page background that is invisible, so it is re-coloured
   here rather than changed globally — the sidebar still needs the white one. */
.app-row-actions {
  display: flex; align-items: center; gap: 14px; flex: none; flex-wrap: wrap;
  justify-content: flex-end;
}
.app-row-actions .btn-link { color: var(--accent-dim); }
.app-row-actions .btn-link:hover { color: var(--accent); }
.app-row-actions .btn-link-danger { color: #a8332b; }
.app-row-actions .btn-link-danger:hover { color: #7f231d; }

/* "you" / "no access" markers next to a name. */
.app-row-you {
  display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: 100px;
  background: var(--paper-warm); color: var(--muted);
  font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  vertical-align: middle;
}

/* A deactivated person stays listed — their job history references them — but
   is visibly dimmed so the active crew reads at a glance. */
.app-row.is-inactive { opacity: .55; }
.app-row.is-inactive .app-row-title { text-decoration: line-through; text-decoration-thickness: 1px; }

@media (max-width: 620px) {
  /* Stack the row on a phone: name over actions, rather than squeezing four
     controls onto one line and shrinking the tap targets. */
  .app-row-actions { width: 100%; justify-content: flex-start; margin-top: 10px; }
  .app-row-actions .btn-link { padding: 6px 0; min-height: 34px; display: inline-flex; align-items: center; }
}