/*
 * People portal styles, matched to the Tequipy backoffice (Tailwind + shadcn/ui tokens):
 * Tequipy orange (--tpy-*), neutral greys, square corners, Inter and JetBrains Mono.
 * Token names follow the backoffice, so they read the same in both code bases.
 */

/* ---------- Fonts (self-hosted, SIL Open Font License, see /fonts) ---------- */
@font-face {
  font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
  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 {
  /* Polish and Portuguese letters: ą ć ę ł ń ś ź ż, ã õ … */
  font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
  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;
}
@font-face {
  font-family: "JetBrains Mono Variable"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations");
  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;
}

/* ---------- Tokens ---------- */
:root {
  --tpy-50: #ffe9e0;  --tpy-100: #ffdaca; --tpy-200: #ffcab4; --tpy-500: #ff9669;
  --tpy-700: #ff6c1b; --tpy-800: #c44d00; --tpy-900: #893300; --tpy-950: #521b00;

  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --primary: var(--tpy-700);
  --primary-foreground: #0a0a0a;        /* 6.99:1 on the orange. White would be 2.83:1. */
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent: #f5f5f5;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #a1a1a1;
  --focus: #737373;                     /* 3:1 or more for focus outlines */
  --sidebar: #fafafa;
  --success: #008236;
  --destructive: #c10007;
  --info: #0069a8;
  --warning-text: var(--tpy-900);
  --away: #6b6f76;

  --radius: 0;
  --radius-field: 8px;                  /* text fields, selects and text areas */
  --shadow-card: 0 0 0 1px rgb(10 10 10 / 0.05), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-pop: 0 0 0 1px rgb(10 10 10 / 0.05), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --font-sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --tracking-widest: 0.1em;
  color-scheme: light;
}

/* Dark mode: the standard shadcn/ui neutral dark tokens with the same Tequipy orange. */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #fafafa;
    --card: #171717;
    --muted: #262626;
    --muted-foreground: #a1a1a1;
    --accent: #262626;
    --border: rgb(255 255 255 / 0.1);
    --input: rgb(255 255 255 / 0.15);
    --ring: #737373;
    --focus: #a1a1a1;
    --sidebar: #171717;
    --success: #05df72;
    --destructive: #ff6467;
    --info: #74d4ff;
    --warning-text: var(--tpy-500);
    --away: #8a8f96;
    --shadow-card: 0 0 0 1px rgb(255 255 255 / 0.08);
    --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.1), 0 10px 15px -3px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--foreground);
  background: var(--background);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--foreground); text-underline-offset: 3px; }
a:hover { color: var(--tpy-800); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.boot { padding: 2rem; color: var(--muted-foreground); }
code, .mono { font-family: var(--font-mono); font-size: 0.86em; }

/* ---------- Shell: side menu, top bar, content ---------- */
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.side {
  background: var(--sidebar); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 0.6rem; height: 64px; padding: 0 1rem; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--foreground); }
.brand img { height: 22px; width: auto; display: block; }
.brand .wordmark { font-weight: 700; font-size: 20px; letter-spacing: -0.03em; }
.brand .product { font-size: 10px; font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--muted-foreground); border-left: 1px solid var(--border); padding-left: 0.6rem; }
.nav { display: flex; flex-direction: column; padding: 0.75rem 0.5rem 1rem; }
.nav h4 {
  margin: 1.1rem 0.5rem 0.35rem; font-size: 10px; line-height: 14px; font-weight: 600;
  letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--muted-foreground);
}
.nav a {
  display: block; padding: 0.4rem 0.6rem; color: var(--foreground); text-decoration: none; font-size: 14px;
}
.nav a:hover { background: var(--accent); color: var(--foreground); }
.nav a[aria-current="page"] { background: var(--accent); font-weight: 500; box-shadow: inset 2px 0 0 var(--primary); }

.content { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 15; height: 64px;
  display: flex; align-items: center; gap: 0.75rem; padding: 0 clamp(1rem, 3vw, 2rem);
  background: var(--background); border-bottom: 1px solid var(--border);
}
.topbar h1 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.025em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .tools { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; position: relative; }

main { padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem; max-width: 1240px; width: 100%; }
h2 { font-size: 16px; line-height: 24px; font-weight: 600; margin: 2rem 0 0.75rem; }
/* Section labels, as on tequipy.com: small, uppercase, wide spacing. */
main > h2 {
  font-size: 11px; line-height: 16px; letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--muted-foreground); margin: 2rem 0 0.6rem;
}
main > h2:first-child { margin-top: 0; }
h3 { font-size: 14px; font-weight: 600; }
p.lead { color: var(--muted-foreground); margin: 0 0 1.5rem; max-width: 72ch; font-size: 14px; }
.muted { color: var(--muted-foreground); }
.row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.mt { margin-top: 1rem; }
.mb { margin-bottom: 1rem; }
.mt-s { margin-top: 0.35rem; }
.stack { display: grid; gap: 0.9rem; }
.nowrap { white-space: nowrap; }

.panel { background: var(--card); box-shadow: var(--shadow-card); border-radius: var(--radius); padding: 1.5rem; }
.panel + .panel { margin-top: 1rem; }
.panel > h2:first-child, .panel h2.flush { margin-top: 0; }
h2.flush { margin: 0; }

/* ---------- Person menu ---------- */
.person { position: relative; }
.person-btn {
  display: flex; align-items: center; gap: 0.5rem; background: transparent; border: 1px solid transparent; padding: 0.25rem 0.5rem 0.25rem 0.25rem; color: var(--foreground);
}
.person-btn:hover, .person-btn[aria-expanded="true"] { background: var(--accent); border-color: var(--border); color: var(--foreground); }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; background: var(--tpy-50); color: var(--tpy-900); font-weight: 600; font-size: 12px; }
.person-btn .who-name { font-weight: 500; }
.person-btn .who-role { display: block; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.person-btn .who { text-align: left; line-height: 18px; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; z-index: 30;
  background: var(--card); box-shadow: var(--shadow-pop); padding: 0.35rem 0;
}
.menu .menu-head { padding: 0.5rem 0.9rem 0.6rem; border-bottom: 1px solid var(--border); margin-bottom: 0.35rem; }
.menu .menu-head small { display: block; color: var(--muted-foreground); }
.menu a { display: block; padding: 0.45rem 0.9rem; text-decoration: none; color: var(--foreground); }
.menu a:hover { background: var(--accent); }

/* ---------- Forms and buttons ---------- */
label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 14px; font-weight: 500; color: var(--foreground); }
label .hint, label .error-text { font-weight: 400; }
input, select, textarea {
  font: inherit; font-weight: 400; color: var(--foreground); background: var(--background);
  border: 1px solid var(--input); border-radius: var(--radius-field); padding: 0.45rem 0.7rem; min-height: 36px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
input::placeholder, textarea::placeholder { color: var(--muted-foreground); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
input:disabled, select:disabled { background: var(--muted); color: var(--muted-foreground); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { min-height: 0; box-shadow: none; accent-color: var(--primary); width: 16px; height: 16px; }
textarea { min-height: 5.5rem; resize: vertical; width: 100%; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; align-items: end; }
.form-grid .wide { grid-column: 1 / -1; }
/* Integrations: one field in each row, with its hint below, so long values and hints stay readable. */
.form-grid.single { grid-template-columns: minmax(0, 1fr); max-width: 640px; align-items: start; gap: 1.25rem; }
.row.fields-end { align-items: flex-end; }
label.check { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 400; }
label.radio { align-items: flex-start; }
label.radio input { margin-top: 0.15rem; }
.hint { font-size: 13px; line-height: 18px; color: var(--muted-foreground); }
.error-text { color: var(--destructive); }

button, .btn {
  font: inherit; font-size: 14px; font-weight: 500; line-height: 20px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 8px 12px; border-radius: var(--radius); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--primary); background: var(--primary); color: var(--primary-foreground);
  transition: background-color 0.15s, border-color 0.15s;
}
button:hover, .btn:hover { background: var(--tpy-500); border-color: var(--tpy-500); color: var(--primary-foreground); }
button.ghost, .btn.ghost { background: var(--background); color: var(--foreground); border-color: var(--border); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
button.ghost:hover, .btn.ghost:hover { background: var(--accent); border-color: var(--border); }
button.danger, .btn.danger { background: transparent; color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 40%, transparent); }
button.danger:hover { background: color-mix(in oklab, var(--destructive) 10%, transparent); border-color: var(--destructive); color: var(--destructive); }
button.small, .btn.small-btn { padding: 4px 8px; font-size: 13px; line-height: 18px; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.cta { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; padding: 12px 16px; }
a.small-link { font-size: 13px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.panel.table-wrap { padding: 0; }
.panel.table-wrap > .empty, .panel.table-wrap > p { padding: 1.25rem 1.5rem; margin: 0; }
/* Panel headers, as on the Integrations page. In a table panel the header keeps the panel padding. */
.panel-head { gap: 0.5rem; }
.panel-head + .hint { margin: 0.35rem 0 0; }
.panel.table-wrap > .panel-head { padding: 1.25rem 1.5rem 0; position: sticky; left: 0; }
.panel.table-wrap > .panel-head + .hint { padding: 0.35rem 1.5rem 0.75rem; margin: 0; position: sticky; left: 0; }
.panel.table-wrap > .panel-head + table, .panel.table-wrap > .panel-head + .empty { margin-top: 0.75rem; }
.panel + .panel, section.panel + section.panel, .panel.mt { margin-top: 1rem; }
h2 + .panel, h2 + form.panel { margin-top: 0; }

/* Profile pictures */
img.avatar { object-fit: cover; border-radius: 50%; padding: 0; background: var(--muted); }
span.avatar { border-radius: 50%; flex: none; }
.avatar.av-28 { width: 28px; height: 28px; font-size: 11px; }
.avatar.av-32 { width: 32px; height: 32px; font-size: 12px; }
.avatar.av-40 { width: 40px; height: 40px; font-size: 15px; }
.avatar.av-112 { width: 112px; height: 112px; font-size: 40px; }
.photo-editor .hint { margin: 0; }
.photo-editor .stack { gap: 0.6rem; }
.person-link { display: inline-flex; align-items: center; gap: 0.6rem; }
.photo-editor { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; margin-top: 0.75rem; }
.photo-editor .stack { flex: 1; min-width: 240px; }
.file-btn { cursor: pointer; }
.camera video { width: 100%; max-width: 360px; aspect-ratio: 1; object-fit: cover; background: #000; border-radius: var(--radius-field); transform: scaleX(-1); }
.camera[hidden] { display: none; }
.details { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem 1.5rem; margin: 1rem 0 0; }
.details dt { font-size: 12px; color: var(--muted-foreground); }
.details dd { margin: 0.15rem 0 0; font-weight: 500; }
table { width: 100%; border-collapse: collapse; background: transparent; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-weight: 500; color: var(--muted-foreground); white-space: nowrap; height: 40px; vertical-align: middle; }
tbody tr:hover td { background: color-mix(in oklab, var(--muted) 60%, transparent); }
td.num, th.num { text-align: right; }
tr:last-child td { border-bottom: 0; }
td.actions { white-space: nowrap; }
td.actions .row { gap: 0.35rem; }
.empty { padding: 1.25rem; color: var(--muted-foreground); }
table.audit td { font-size: 13px; }
table.audit td.changes { min-width: 16rem; word-break: break-word; }
table.audit td.changes div + div { margin-top: 0.15rem; }

/* ---------- Badges (backoffice: 10 px, uppercase, 10% tint) ---------- */
.tag {
  display: inline-flex; align-items: center; font-size: 10px; line-height: 16px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.02em; padding: 0 6px; white-space: nowrap;
  color: var(--muted-foreground); background: color-mix(in oklab, currentColor 10%, transparent);
  border: 1px solid transparent; border-radius: var(--radius);
}
.tag.pending, .tag.self, .tag.manager, .tag.draft { color: var(--warning-text); background: color-mix(in oklab, var(--primary) 14%, transparent); }
.tag.approved, .tag.done, .tag.active { color: var(--success); }
.tag.rejected { color: var(--destructive); }
.tag.info { color: #fff; background: var(--info); }
.tag.cancelled, .tag.closed { color: var(--muted-foreground); }
.swatch { display: inline-block; width: 10px; height: 10px; background: var(--c, var(--primary)); margin-right: 0.45rem; vertical-align: baseline; }

/* ---------- Notices ---------- */
.notice { border-left: 3px solid var(--primary); }
.notice.error { border-left-color: var(--destructive); }
p.notice { margin: 0; padding: 0.6rem 0.8rem; background: var(--card); box-shadow: var(--shadow-card); border-left: 3px solid var(--primary); }
p.notice.error { border-left-color: var(--destructive); }
p.notice.overlap { margin-top: 0.75rem; background: color-mix(in oklab, var(--primary) 8%, var(--card)); box-shadow: none; }
.notice p:first-child { margin-top: 0; }
.notice p:last-child { margin-bottom: 0; }
code.secret { display: inline-block; border-radius: var(--radius-field); padding: 0.4rem 0.6rem; background: var(--muted); border: 1px solid var(--border); user-select: all; word-break: break-all; }

/* ---------- Overview numbers (website style: big number, small caption) ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.stat {
  background: var(--card); box-shadow: var(--shadow-card); padding: 1.25rem 1.5rem; text-decoration: none; color: var(--muted-foreground); display: block;
  font-size: 11px; line-height: 16px; letter-spacing: var(--tracking-widest); text-transform: uppercase; font-weight: 500;
  transition: box-shadow 0.15s;
}
.stat b { display: block; font-size: 36px; line-height: 40px; letter-spacing: -0.03em; color: var(--foreground); font-weight: 600; text-transform: none; margin-bottom: 0.35rem; }
.stat:hover { color: var(--muted-foreground); box-shadow: var(--shadow-card), inset 0 -2px 0 var(--primary); }

/* ---------- Balance: one cell per allocated day ---------- */
.balances { display: grid; gap: 1.5rem; }
.balance-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.5rem; }
.balance-head strong { font-size: 14px; font-weight: 600; }
.balance-left { font-size: 24px; font-weight: 600; letter-spacing: -0.025em; }
.balance-left small { font-size: 13px; font-weight: 400; color: var(--muted-foreground); }
.strip { display: flex; flex-wrap: wrap; gap: 3px; }
.strip i { width: 12px; height: 20px; border: 1px solid var(--c, var(--primary)); }
.strip i.used { background: var(--c, var(--primary)); }
.strip i.pending { background: repeating-linear-gradient(135deg, var(--c, var(--primary)) 0 3px, transparent 3px 6px); }
.balance-legend { font-size: 13px; color: var(--muted-foreground); margin-top: 0.4rem; }

/* ---------- Calendar ---------- */
.cal { overflow-x: auto; background: var(--card); box-shadow: var(--shadow-card); }
.cal-grid { display: grid; grid-template-columns: 180px repeat(var(--days), minmax(28px, 1fr)); min-width: calc(180px + var(--days) * 28px); }
.cal-cell { border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); min-height: 40px; }
.cal-cell.we { background: var(--muted); }
.cal-cell.hol { background: repeating-linear-gradient(135deg, var(--muted) 0 4px, var(--card) 4px 8px); }
.cal-head { font-size: 11px; line-height: 14px; text-align: center; padding: 0.4rem 0; color: var(--muted-foreground); border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); }
.cal-head.today { color: var(--foreground); font-weight: 600; box-shadow: inset 0 2px 0 var(--primary); background: color-mix(in oklab, var(--primary) 8%, transparent); }
.cal-name { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: sticky; left: 0; background: var(--card); z-index: 2; font-weight: 500; }
.cal-name small { color: var(--muted-foreground); margin-left: 0.35rem; font-weight: 400; font-size: 11px; }
.cal-bar {
  align-self: center; height: 22px; margin: 0 2px; z-index: 1;
  background: var(--c, var(--primary)); color: #fff; font-size: 11px; font-weight: 500; padding: 0 0.4rem;
  overflow: hidden; white-space: nowrap; line-height: 22px;
}
.cal-bar.pending {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 28%, var(--card)) 0 5px, var(--card) 5px 9px);
  color: var(--foreground); border: 1px solid var(--c); line-height: 20px; font-weight: 600;
}
.cal-legend { display: flex; gap: 1.25rem; font-size: 13px; color: var(--muted-foreground); margin-top: 0.75rem; flex-wrap: wrap; }
.cal-legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 0.4rem; vertical-align: -0.1rem; border: 1px solid var(--border); }
.cal-legend .l-we::before { background: var(--muted); }
.cal-legend .l-hol::before { background: repeating-linear-gradient(135deg, var(--muted-foreground) 0 2px, transparent 2px 4px); }
.cal-legend .l-pen::before { background: repeating-linear-gradient(135deg, var(--primary) 0 3px, transparent 3px 6px); }
.cal-legend .l-away::before { background: var(--away); }

/* ---------- Reviews ---------- */
/* Self, manager and peer answers side by side. One column on narrow screens. */
.q { border-top: 1px solid var(--border); padding: 1.25rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.q:first-of-type { border-top: 0; }
.q h3 { grid-column: 1 / -1; margin: 0; }
.q .side-label { font-size: 10px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 0.35rem; font-weight: 600; }
.q .answer-text { white-space: pre-wrap; }
.rating { display: flex; gap: 4px; margin-bottom: 0.5rem; }
.rating label { flex-direction: row; }
.rating input { position: absolute; opacity: 0; pointer-events: none; }
.rating span {
  width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border);
  cursor: pointer; color: var(--foreground); font-weight: 600; background: var(--background);
}
.rating span:hover { background: var(--accent); }
.rating input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.rating input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.rating input:disabled + span { cursor: default; }
.locked { color: var(--muted-foreground); font-style: italic; }
.rating { flex-wrap: wrap; }
.scale-labels { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.q .q-help { grid-column: 1 / -1; margin: -1rem 0 0; }
.choices { display: grid; gap: 0.4rem; }
.picked { margin: 0; padding-left: 1.1rem; }
.section-head { padding-top: 1.25rem; }
.section-head + .q { border-top: 0; }

/* Form builder */
.grow { flex: 1; min-width: 0; }
.form-block { background: var(--card); box-shadow: var(--shadow-card); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; }
.form-block .targets { margin-top: 1rem; padding: 1rem; background: var(--muted); }
.form-block .targets h3 { margin: 0 0 0.5rem; }
.section-edit { border-left: 3px solid var(--border); padding-left: 1rem; margin-top: 1.5rem; }
.q-edit { border-top: 1px dashed var(--border); padding: 0.75rem 0; }
.q-num { min-width: 1.5rem; color: var(--muted-foreground); font-weight: 600; }
select[multiple] { min-height: 6.5rem; padding: 0.25rem; }
.member-list { display: grid; gap: 0.35rem; max-height: 26rem; overflow: auto; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-field); }
.member-list label[hidden] { display: none; }
input[type="search"] { width: 100%; }
.question-row { display: grid; grid-template-columns: 1fr 160px auto; gap: 0.6rem; align-items: center; margin-bottom: 0.5rem; }
input.narrow { width: 6rem; text-align: right; }
.annual-days { flex-wrap: nowrap; }
.annual-days select { width: auto; }
.annual-days [hidden] { display: none; }

/* ---------- Sign-in page (tequipy.com style) ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.login-art {
  background: var(--foreground); color: var(--background); padding: clamp(2rem, 5vw, 4rem);
  display: flex; flex-direction: column; justify-content: space-between;
}
.login-art .wordmark { font-weight: 700; font-size: 26px; letter-spacing: -0.03em; }
.login-art img { height: 28px; width: auto; filter: invert(1); align-self: flex-start; }
.login-art .eyebrow { font-size: 11px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--tpy-500); font-weight: 600; }
.login-art h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 600; margin: 0.75rem 0 1rem; max-width: 14ch; }
.login-art p { color: color-mix(in oklab, var(--background) 65%, transparent); max-width: 40ch; margin: 0; font-size: 15px; line-height: 24px; }
.login-art .facts { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: 11px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: color-mix(in oklab, var(--background) 60%, transparent); }
.login-main { display: grid; place-items: center; padding: 2rem 1rem; }
.login form { width: min(380px, 100%); display: grid; gap: 1rem; box-shadow: none; padding: 0; background: transparent; }
.login form h1 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.025em; margin: 0; }
.login .eyebrow-dark { font-size: 11px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--muted-foreground); font-weight: 600; }
.btn.google { width: 100%; gap: 0.75rem; }
.btn.google svg { width: 18px; height: 18px; flex: none; }
.login details summary { cursor: pointer; }

/* ---------- Notifications ---------- */
.bell { position: relative; background: var(--background); border: 1px solid var(--border); color: var(--foreground); width: 36px; height: 36px; padding: 0; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
.bell:hover, .bell[aria-expanded="true"] { background: var(--accent); border-color: var(--border); color: var(--foreground); }
.bell .badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--primary); color: var(--primary-foreground); font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
}
.bell-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: min(400px, calc(100vw - 1.5rem)); max-height: 75vh; overflow-y: auto;
  background: var(--card); box-shadow: var(--shadow-pop);
}
.bell-head { display: flex; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--card); z-index: 1; }
.bell-panel h4 { margin: 0.9rem 1rem 0.35rem; font-size: 10px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--muted-foreground); font-weight: 600; }
.bell-panel .pad { padding: 0 1rem; }
.bell-foot { padding: 0.65rem 1rem; border-top: 1px solid var(--border); text-align: center; }
ul.notes { list-style: none; margin: 0; padding: 0; }
.bell-panel ul.notes li { padding: 0.7rem 1rem; border-top: 1px solid var(--border); }
ul.notes.flat li { padding: 0.85rem 0; border-top: 1px solid var(--border); }
ul.notes.flat li:first-child { border-top: 0; padding-top: 0; }
.note-title { font-weight: 600; }
.note-body { color: var(--muted-foreground); margin-top: 0.15rem; }
.manager-note { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 0.3rem; }
li.note.unread .note-title::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--primary); margin-right: 0.45rem; vertical-align: 0.1rem; }
li.note.security .note-title { color: var(--destructive); }

/* ---------- Integrations ---------- */
ul.domains { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.4rem; }
ul.domains li { display: flex; align-items: center; gap: 0.6rem; }
#test-result ul, #smtp-result ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }

/* ---------- Toast ---------- */
#toast {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  background: var(--foreground); color: var(--background); padding: 0.65rem 1rem; box-shadow: var(--shadow-pop);
  opacity: 0; pointer-events: none; transition: opacity 0.2s; max-width: 90vw; z-index: 50;
}
#toast.show { opacity: 1; }
#toast.error { background: var(--destructive); color: #fff; }

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .nav { flex-direction: row; flex-wrap: wrap; gap: 2px; padding: 0.5rem; }
  .nav h4 { display: none; }
  .nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--primary); }
  .topbar h1 { font-size: 18px; }
  .person-btn .who { display: none; }
  .q { grid-template-columns: 1fr; }
  .question-row { grid-template-columns: 1fr; }
  .login { grid-template-columns: 1fr; }
  .login-art { padding: 1.5rem; gap: 1.5rem; }
  .login-art h2 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { #toast, button, .btn, .stat { transition: none; } }
input.code-input { width: 5rem; text-transform: uppercase; }
.panel-head + .form-grid, .panel-head + .stack, .panel-head + .row { margin-top: 1rem; }
.person-link span { white-space: nowrap; }
.steps { margin: 0.75rem 0; padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.details dd code { word-break: break-all; }

/* ---------- Org chart: nested lists, lines drawn with borders ---------- */
.oc-wrap { overflow: auto; padding: 1.5rem 1rem; max-height: calc(100vh - 230px); }
.oc-tree, .oc-tree ul { display: flex; justify-content: center; margin: 0; padding: 0; }
.oc-tree { min-width: max-content; }
.oc-tree ul { position: relative; padding-top: 20px; }
.oc-tree li { list-style: none; position: relative; padding: 20px 6px 0; display: flex; flex-direction: column; align-items: center; }
/* Each child draws half of the line above it; the first and last child end the line. */
.oc-tree li::before, .oc-tree li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 20px; border-top: 1px solid var(--ring); }
.oc-tree li::after { right: auto; left: 50%; border-left: 1px solid var(--ring); }
.oc-tree li:only-child::before, .oc-tree li:only-child::after { display: none; }
.oc-tree li:only-child { padding-top: 0; }
.oc-tree li:first-child::before, .oc-tree li:last-child::after { border: 0 none; }
.oc-tree li:last-child::before { border-right: 1px solid var(--ring); }
.oc-tree ul::before { content: ''; position: absolute; top: 0; left: 50%; height: 20px; border-left: 1px solid var(--ring); }
/* The tops of the chart have no line above them. */
.oc-tree > li { padding-top: 0; }
.oc-tree > li::before, .oc-tree > li::after { display: none; }
.oc-tree > li + li { margin-left: 2rem; }
.oc-card { position: relative; display: flex; gap: 0.6rem; align-items: center; width: 220px; padding: 0.6rem 0.75rem 0.9rem;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-field); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); text-align: left; }
.oc-card.oc-me { border-color: var(--primary); }
.oc-card.oc-hit { box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 45%, transparent); }
.oc-text { display: flex; flex-direction: column; min-width: 0; }
.oc-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-title, .oc-dept { font-size: 12px; line-height: 16px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-dept { color: var(--warning-text); }
.oc-toggle { position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%); z-index: 1;
  padding: 0 8px; min-height: 0; height: 22px; font-size: 11px; line-height: 20px; border-radius: 11px;
  background: var(--background); color: var(--foreground); border: 1px solid var(--ring); }
.oc-toggle[aria-expanded="true"] { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
.oc-toggle:hover { background: var(--accent); color: var(--foreground); border-color: var(--ring); }

/* ---------- Profile: header panel and two columns ---------- */
.profile-hero { display: flex; gap: 2rem; align-items: flex-start; margin-bottom: 1rem; }
.hero-photo { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; flex: none; }
.hero-photo .photo-controls { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: center; max-width: 180px; }
.hero-photo .camera video { max-width: 240px; }
.hero-main { flex: 1; min-width: 0; }
.hero-title h2 { font-size: 22px; line-height: 28px; letter-spacing: -0.02em; }
.hero-sub { margin: 0.25rem 0 0; color: var(--muted-foreground); font-size: 15px; }
.hero-tags { margin-top: 0.75rem; gap: 0.35rem; }
.hero-facts { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.profile-hero .hint { margin: 1rem 0 0; }
.tag.info-soft { color: var(--foreground); background: var(--muted); }
.btn.small-btn { padding: 4px 10px; font-size: 13px; line-height: 18px; }

.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
/* No stacked-panel margin inside the grid: the grid gap spaces the panels. */
.profile-grid > section.panel, .profile-grid > form > section.panel,
.profile-grid section.panel + section.panel { margin: 0; }
/* Top: the save bar on the right. Left: personal details, portal access, Google. Right: the tall Job panel over two rows. */
@media (min-width: 1101px) {
  .profile-grid .profile-actions { grid-row: 1; }
  .profile-grid .pf-personal { grid-column: 1; grid-row: 2; }
  .profile-grid .pf-access { grid-column: 1; grid-row: 3; }
  .profile-grid .pf-job { grid-column: 2; grid-row: 2 / span 2; }
  .profile-grid .profile-google { grid-column: 1; grid-row: 4; }
}
/* The form's panels take part in the grid. The save bar spans both columns and stays in view. */
.profile-form { display: contents; }
.profile-actions { grid-column: 1 / -1; order: 10; position: sticky; bottom: 0; z-index: 2; margin: 0;
  padding: 0.75rem 1.5rem; background: var(--card); box-shadow: var(--shadow-card); }
/* On a person's profile the save bar sits in the top right corner and stays in view below the top bar. */
.profile-grid .profile-actions { order: -1; justify-self: end; max-width: 100%; top: calc(64px + 0.75rem); bottom: auto; }
.details.details-one { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .profile-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .profile-hero { flex-direction: column; align-items: stretch; }
  .hero-photo { align-items: center; }
}

/* Warning before the sign-out after inactivity */
#idle-warning { position: fixed; left: 50%; top: 1rem; transform: translateX(-50%); z-index: 50; width: min(520px, calc(100% - 2rem));
  padding: 1rem 1.25rem; background: var(--card); color: var(--foreground); border-left: 4px solid var(--primary); box-shadow: var(--shadow-pop); }
#idle-warning[hidden] { display: none; }
#idle-warning p { margin: 0 0 0.75rem; }

/* ---------- Values ---------- */
.value-icon { font-size: 20px; margin-right: 0.25rem; }
.value-fields { display: grid; gap: 1rem; max-width: 720px; }
.icon-field input { width: 5rem; text-align: center; font-size: 18px; }
.value-text { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0.75rem 0 0; }
.value-text dt { font-size: 12px; color: var(--muted-foreground); padding-top: 2px; }
.value-text dd { margin: 0; }
.value-card.archived { opacity: 0.6; }
.replace-form { border-top: 1px dashed var(--border); padding-top: 1rem; }
.value-card form[hidden] { display: none; }

/* ---------- To do and review cycles v2 ---------- */
.nav-count { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 0.35rem; border-radius: 9px;
  background: var(--primary); color: var(--primary-foreground); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.todo-list { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.todo-list li + li { border-top: 1px solid var(--border); }
.todo-list a { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.6rem 0; text-decoration: none; color: var(--foreground); }
.todo-list a:hover strong { text-decoration: underline; }
.todo-list a > span:nth-child(2) { flex: 1; }
.value-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0.75rem 0 0; padding: 0; }
.value-chips li { padding: 0.3rem 0.7rem; background: var(--muted); border-radius: 999px; font-size: 13px; font-weight: 500; }
.extra-questions > summary { cursor: pointer; }
.form-grid.top { align-items: start; }

/* ---------- Review form v2 ---------- */
.stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.stars input { position: absolute; opacity: 0; pointer-events: none; }
.stars label { font-size: 28px; line-height: 1; color: var(--border); cursor: pointer; padding: 0 1px; transition: color 0.1s; }
.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color: #f5a524; }
.stars input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
.stars-view { font-size: 20px; letter-spacing: 1px; color: #f5a524; }
.stars-view span { color: var(--border); }
.value-desc { margin: 0.35rem 0 0; }
.value-more { margin-top: 0.5rem; font-size: 14px; }
.value-more summary { cursor: pointer; color: var(--muted-foreground); }
.value-more p { margin: 0.5rem 0 0; }
.value-review .q { border-top: 1px solid var(--border); margin-top: 1rem; padding-bottom: 0; }
.answer-example { margin-top: 0.35rem; font-size: 14px; }
.review-actions { margin-top: 1rem; }

/* ---------- Feedback requests ---------- */
.feedback-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.feedback-list li { display: flex; gap: 0.4rem; align-items: center; }
.peer-feedback { border-top: 1px dashed var(--border); margin-top: 1rem; padding-top: 0.75rem; }
.peer-item + .peer-item { margin-top: 0.75rem; }
.peer-item .stars-view { font-size: 16px; margin-left: 0.35rem; }
p.flush { margin: 0; }
.peer-feedback .side-label { font-size: 10px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 0.5rem; font-weight: 600; }

/* ---------- KPI and result ---------- */
.kpi-input { width: 7rem; }
input.kpi-cell { width: 5rem; }
.result-row { display: flex; gap: 2rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
.result-big b { font-size: 44px; line-height: 1; letter-spacing: -0.03em; }
.result-big .hint { margin-left: 0.35rem; }
.result-facts { flex: 1; margin: 0; }

/* ---------- Summaries ---------- */
.sum-comments { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem 1.5rem; margin-top: 0.75rem; }
.sum-comment .side-label { display: block; font-size: 10px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--muted-foreground); font-weight: 600; margin-bottom: 0.25rem; }
.sum-comment .stars-view { font-size: 15px; }
.band-bars { display: grid; gap: 0.4rem; margin-top: 0.75rem; }
.band-bar { display: grid; grid-template-columns: 170px 1fr 40px; gap: 0.75rem; align-items: center; background: transparent; color: var(--foreground); border: 1px solid transparent; padding: 4px 6px; text-align: left; font-weight: 400; }
.band-bar:hover, .band-bar.on { background: var(--accent); border-color: var(--border); color: var(--foreground); }
.band-bar b { text-align: right; }
.band-track { height: 12px; background: var(--muted); border-radius: 6px; overflow: hidden; }
.band-fill { display: block; height: 100%; width: var(--w, 0%); border-radius: 6px; }
.band-underperforming { background: var(--destructive); }
.band-below { background: var(--tpy-500); }
.band-performing { background: var(--ring); }
.band-above { background: var(--success); }
.band-top { background: #0a7a3a; }
.band-none { background: var(--border); }

/* ---------- Reviews tab: one section per person ---------- */
.person-reviews { background: var(--card); box-shadow: var(--shadow-card); border-radius: var(--radius); margin-bottom: 0.75rem; }
.person-reviews[hidden] { display: none; }
.person-reviews > summary { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.25rem; cursor: pointer; list-style: none; }
.person-reviews > summary::-webkit-details-marker { display: none; }
.person-reviews > summary::after { content: '▾'; margin-left: 0.75rem; color: var(--muted-foreground); transition: transform 0.15s; }
.person-reviews:not([open]) > summary::after { transform: rotate(-90deg); }
.person-reviews > summary:hover { background: var(--accent); }
.pr-who { display: flex; flex-direction: column; min-width: 0; }
.pr-chips { margin-left: auto; color: var(--muted-foreground); font-size: 13px; white-space: nowrap; }
.person-reviews table { border-top: 1px solid var(--border); }
.danger-zone { border-left: 3px solid var(--destructive); }
/* Cycle sections, with one section per person inside. Both start closed. */
.cycle-reviews { background: var(--card); box-shadow: var(--shadow-card); border-radius: var(--radius); margin-bottom: 0.75rem; }
.cycle-reviews[hidden] { display: none; }
.cycle-reviews > summary { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; }
.cycle-reviews > summary::-webkit-details-marker { display: none; }
.cycle-reviews > summary::after { content: '▾'; margin-left: 0.75rem; color: var(--muted-foreground); transition: transform 0.15s; }
.cycle-reviews:not([open]) > summary::after { transform: rotate(-90deg); }
.cycle-reviews > summary:hover { background: var(--accent); }
.cr-name { display: flex; flex-direction: column; gap: 0.1rem; }
.cr-name strong { font-size: 16px; }
.cr-body { padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--border); }
.cr-head { margin: 1.25rem 0 0.5rem; font-size: 13px; text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--muted-foreground); }
h3.cr-head, .cr-head h3 { font-size: 11px; font-weight: 600; }
.cr-giving { margin-top: 0; }
.cr-people .person-reviews { box-shadow: none; border: 1px solid var(--border); margin-bottom: 0.5rem; }
.cr-people .person-reviews > summary { padding: 0.6rem 0.9rem; }
.pr-chips { display: inline-flex; gap: 0.4rem; align-items: center; }
/* The same column widths in every review table, so the rows line up. */
.review-row { table-layout: fixed; }
.review-row th:nth-child(1) { width: 16%; }
.review-row th:nth-child(2) { width: 15%; }
.review-row th:nth-child(3) { width: 25%; }
.review-row th:nth-child(4) { width: 7%; }
.review-row th:nth-child(5) { width: 19%; }
.review-row th:nth-child(6) { width: 18%; }
.review-row td.actions .row { flex-wrap: nowrap; justify-content: flex-end; }
/* Links next to a small heading keep normal letters. */
.cr-head a { text-transform: none; letter-spacing: normal; font-size: 13px; font-weight: 400; margin-left: 1rem; }
.cr-body > .review-row { border: 1px solid var(--border); }