:root {
  --paper: #FFFFFF;
  --sheet: #FFFFFF;
  --ink: #1c242b;
  --muted: #5c6770;
  --line: #e4e7eb;
  --navy: #002439;
  --navy-hover: #0a3a56;
  --mark: #70BD95;
  --overdue: #7f1d1d;
  --rail-open: 18rem;
  --rail-closed: 5.25rem;
  --clip: polygon(0 0, calc(100% - 1.75rem) 0, 100% 1.75rem, 100% 100%, 0 100%);
  --shadow: drop-shadow(0 10px 18px rgba(0, 36, 57, 0.18));
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M10.2 3.5a6.7 6.7 0 1 1 0 13.4 6.7 6.7 0 0 1 0-13.4zm0 2a4.7 4.7 0 1 0 .01 9.4 4.7 4.7 0 0 0-.01-9.4zM15.2 14.6l4.6 4.6-1.5 1.5-4.6-4.6z'/%3E%3C/svg%3E");
  --icon-projects: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M3 6.2A1.2 1.2 0 0 1 4.2 5h5.1l1.7 2H19.8A1.2 1.2 0 0 1 21 8.2v9.6a1.2 1.2 0 0 1-1.2 1.2H4.2A1.2 1.2 0 0 1 3 17.8z'/%3E%3C/svg%3E");
  --icon-properties: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 3.2 3.2 11h2.2V20h5.1v-5.4h2.9V20h5.2v-9h2.2z'/%3E%3C/svg%3E");
  --icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M7 2h2v2h6V2h2v2h3.2v16H3.8V4H7zm10.2 8H6.8v8h10.4z'/%3E%3C/svg%3E");
  --icon-assessments: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-rule='evenodd' d='M6 7.2H9V3.6h6V7.2h3.2V20.4H6zm2 3.2h8v1.3H8zm0 3.1h8v1.3H8zm0 3.1h4.6v1.3H8z'/%3E%3C/svg%3E");
  --icon-modelling: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 19.4h16v1.5H4zm1.4-7.2h3.6V19h-3.6zm4.8-5.6h3.6V19h-3.6zm4.8 2.6h3.6V19H15z'/%3E%3C/svg%3E");
  --icon-design: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-rule='evenodd' d='M15.5 2.2l3.3 3.3-1.4 1.4-.9-.9-7.3 7.3-2.4.6.6-2.4 7.3-7.3-.9-.9zm-13.3 15h19.4v4H2.2zm2.2 0v1.8h.9V17.2zm2.8 0v2.6h.9V17.2zm2.8 0v1.8h.9V17.2zm2.8 0v2.6h.9V17.2zm2.8 0v1.8h.9V17.2zm2.8 0v2.6h.9V17.2z'/%3E%3C/svg%3E");
  --icon-pibis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M1.8 11.2 8.4 5 15 11.2V19.6H1.8zM17.4 9.8a4.2 4.2 0 1 1 0 8.4 4.2 4.2 0 1 1 0-8.4zM17.4 11.8a2.2 2.2 0 1 0 0 4.4 2.2 2.2 0 1 0 0-4.4zM20.37 16.17 22.51 18.55 21.39 19.55 19.25 17.17z'/%3E%3C/svg%3E");
  --icon-installations: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M19.93 6.03 20.14 6.7 20.27 7.39 20.3 8.09 20.24 8.78 20.1 9.47 19.87 10.13 19.56 10.76 19.17 11.34 18.71 11.87 18.19 12.33 17.61 12.73 16.98 13.05 16.33 13.28 15.64 13.44 14.94 13.5 14.24 13.47 13.55 13.36 12.88 13.16 12.24 12.87 11.65 12.51 11.1 12.07 10.61 11.56 10.19 11 9.85 10.39 9.58 9.75 9.4 9.07 9.31 8.37 9.31 7.67 9.4 6.98 9.57 6.3 9.83 5.65 10.17 5.04 10.58 4.47 11.06 3.96 11.61 3.52 12.2 3.15 12.84 2.86 13.51 2.65 14.2 2.53 14.9 2.5 14.85 5.25 14.27 5.3 13.71 5.47 13.2 5.76 12.77 6.15 12.42 6.62 12.18 7.15 12.06 7.72 12.07 8.3 12.19 8.87 12.43 9.4 12.78 9.87 13.22 10.25 13.73 10.53 14.29 10.7 14.87 10.75 15.45 10.67 16 10.48 16.49 10.17 16.91 9.76 17.24 9.28 17.45 8.73 17.55 8.16 17.52 7.58 17.37 7.01z'/%3E%3Cpath fill='white' d='M9.12 9.48.76 15.33 3.12 18.68 11.47 12.83z'/%3E%3C/svg%3E");
  --icon-audit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M3.6 4.8h9.6v1.8H3.6zm0 4.6h9.6v1.8H3.6zm0 4.6h6.8v1.8H3.6zM12.8 14.2l2.8 3.2 5.8-7.2-1.8-1.4-4 5-1.2-1.2z'/%3E%3C/svg%3E");
  --icon-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-rule='evenodd' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 4.4a2.6 2.6 0 1 0 0 5.2 2.6 2.6 0 0 0 0-5.2z'/%3E%3C/svg%3E");
  --icon-companies: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-rule='evenodd' d='M3.6 20.8h16.8V9.4h-4V3.6H7.6v5.8H3.6zm5.2-15.6h1.6v1.6H8.8zm3.4 0h1.6v1.6h-1.6zm-3.4 3h1.6v1.6H8.8zm3.4 0h1.6v1.6h-1.6zM5.2 12.2h1.6v1.6H5.2zm0 3.4h1.6v1.6H5.2zm12 0h1.6v1.6h-1.6zm0-3.4h1.6v1.6h-1.6zM10.4 16.2h3.2V20.8h-3.2z'/%3E%3C/svg%3E");
  --icon-contacts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 4.2a3.2 3.2 0 1 1 0 6.4 3.2 3.2 0 1 1 0-6.4zM4.8 21c.8-4.6 3.6-7.8 7.2-7.8s6.4 3.2 7.2 7.8z'/%3E%3C/svg%3E");
  --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-rule='evenodd' d='M10.54 6.91 10.75 3.09 13.25 3.09 13.46 6.91 14.57 7.36 17.42 4.81 19.19 6.58 16.64 9.43 17.09 10.54 20.91 10.75 20.91 13.25 17.09 13.46 16.64 14.57 19.19 17.42 17.42 19.19 14.57 16.64 13.46 17.09 13.25 20.91 10.75 20.91 10.54 17.09 9.43 16.64 6.58 19.19 4.81 17.42 7.36 14.57 6.91 13.46 3.09 13.25 3.09 10.75 6.91 10.54 7.36 9.43 4.81 6.58 6.58 4.81 9.43 7.36zM12 8.8a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 1 0 0-6.4z'/%3E%3C/svg%3E");
  --icon-collapse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-rule='evenodd' d='M3 4h18v16H3V4zm2.2 2.2v11.6h13.6V6.2H5.2zM5.2 6.2h3.1v11.6H5.2V6.2z'/%3E%3C/svg%3E");
  --icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z'/%3E%3C/svg%3E");
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M6.4 5 12 10.6 17.6 5 19 6.4 13.4 12 19 17.6 17.6 19 12 13.4 6.4 19 5 17.6 10.6 12 5 6.4z'/%3E%3C/svg%3E");
  --icon-expand-all: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M7 9.2 12 4.2 17 9.2 15.4 9.2 12 5.8 8.6 9.2zM7 14.8 8.6 14.8 12 18.2 15.4 14.8 17 14.8 12 19.8z'/%3E%3C/svg%3E");
  --icon-collapse-all: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M7 4.2 12 9.2 17 4.2 15.4 4.2 12 7.6 8.6 4.2zM7 19.8 8.6 19.8 12 16.4 15.4 19.8 17 19.8 12 14.8z'/%3E%3C/svg%3E");
  --icon-theme-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12.3 3.2a8.8 8.8 0 1 0 8.5 11.2A7.2 7.2 0 0 1 12.3 3.2z'/%3E%3C/svg%3E");
  --icon-theme-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M11 1.8h2v3h-2zm0 17.4h2v3h-2zM1.8 11h3v2h-3zm17.4 0h3v2h-3zM4.4 5.8 5.8 4.4l2.1 2.1-1.4 1.4zm11.7 11.7 1.4-1.4 2.1 2.1-1.4 1.4zM18.2 4.4l1.4 1.4-2.1 2.1-1.4-1.4zM6.5 16.1l1.4 1.4-2.1 2.1-1.4-1.4zM12 7.2a4.8 4.8 0 1 1 0 9.6 4.8 4.8 0 0 1 0-9.6z'/%3E%3C/svg%3E");
  --table-scroll-gap: 12px;
  /* Issue #347. Omitted red for the header step boxes: #70BD95 moved to
     hue 0 with the same saturation and lightness. */
  --status-omitted: #BD7070;
}

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

html {
  overscroll-behavior-y: contain;
}

body {
  overscroll-behavior-y: contain;
  margin: 0;
  background: #FFFFFF;
  color: var(--ink);
  font-family: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

a {
  color: var(--navy);
}

a:visited {
  color: var(--navy);
}

/* Issue #312. The browser stylesheet uses a pointer on links and controls.
   Text fields are left out of this list so they keep the text cursor. */
a,
a:any-link,
button,
summary,
label,
select,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"] {
  cursor: default;
}

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

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: #FFFFFF;
  color: var(--navy);
  padding: 0.5rem 0.75rem;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 50;
}

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

.rail-collapse-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.app {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  background: #FFFFFF;
}

.rail {
  position: sticky;
  top: 0;
  z-index: 20;
  flex: 0 0 var(--rail-open);
  width: var(--rail-open);
  height: 100vh;
  background: var(--navy);
  color: #FFFFFF;
  overflow-x: hidden;
  overflow-y: auto;
  transition: flex-basis 0.16s ease, width 0.16s ease;
}

.rail :focus-visible {
  outline-color: #FFFFFF;
}

.rail-collapse-input:focus-visible ~ .app .rail-collapse {
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
}

.rail-collapse-input:checked ~ .app .rail {
  flex-basis: var(--rail-closed);
  width: var(--rail-closed);
}

.rail-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.6rem 0.9rem 1.25rem;
}

.page-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1.15rem 3rem 0;
  background: #FFFFFF;
}

.page-header .wordmark,
.page-header .wordmark:visited,
.page-header .wordmark:hover {
  display: block;
  width: 14rem;
  margin: 0;
  padding: 0;
  background: transparent;
  line-height: 0;
  color: var(--navy);
  text-decoration: none;
}

.page-logo {
  display: block;
  width: 100%;
  height: auto;
}

.rail-collapse {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 0.45rem;
  padding: 0.7rem 0.85rem;
  color: #FFFFFF;
  white-space: nowrap;
}

.rail-collapse::before,
.nav-item::before {
  content: "";
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 1.35rem;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.rail-collapse {
  --icon: var(--icon-collapse);
}

.rail-collapse-input:checked ~ .app .rail-collapse::before {
  transform: scaleX(-1);
}

.when-closed {
  display: none;
}

.rail-collapse-input:checked ~ .app .when-open {
  display: none;
}

.rail-collapse-input:checked ~ .app .when-closed {
  display: inline;
}

.rail nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  padding: 0.8rem 0.85rem;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
}

.rail-search > summary {
  list-style: none;
  width: 100%;
}

.rail-search > summary::-webkit-details-marker {
  display: none;
}

.nav-search {
  --icon: var(--icon-search);
}

.rail-search-form {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.15rem 0.85rem 0.85rem;
}

.rail-search-form label {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  line-height: 1.35;
}

.rail-search-form input {
  width: 100%;
  min-width: 0;
  color: var(--ink);
  background: #FFFFFF;
}

.nav-projects {
  --icon: var(--icon-projects);
}

.nav-properties {
  --icon: var(--icon-properties);
}

.nav-calendar {
  --icon: var(--icon-calendar);
}

.nav-assessments {
  --icon: var(--icon-assessments);
}

.nav-modelling {
  --icon: var(--icon-modelling);
}

.nav-design {
  --icon: var(--icon-design);
}

.nav-pibis {
  --icon: var(--icon-pibis);
}

.nav-installations {
  --icon: var(--icon-installations);
}

.nav-audit {
  --icon: var(--icon-audit);
}

.nav-companies {
  --icon: var(--icon-companies);
}

.nav-contacts {
  --icon: var(--icon-contacts);
}

.nav-settings {
  --icon: var(--icon-settings);
}

.nav-item:visited {
  color: #FFFFFF;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.nav-item[aria-current="page"] {
  color: #70BD95;
  box-shadow: inset 3px 0 0 #70BD95;
}

.nav-item[aria-current="page"]:visited,
.nav-item[aria-current="page"]:hover {
  color: var(--mark);
}

.rail-theme {
  margin-top: auto;
  padding: 0.45rem 0;
}

button.rail-theme-toggle,
button.rail-theme-toggle:hover,
button.rail-theme-toggle:focus,
button.rail-theme-toggle:focus-visible,
button.rail-theme-toggle:active,
.rail button.rail-theme-toggle,
.rail button.rail-theme-toggle:hover,
.rail button.rail-theme-toggle:focus,
.rail button.rail-theme-toggle:focus-visible,
.rail button.rail-theme-toggle:active {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.85rem;
  width: 100%;
  margin: 0;
  padding: 0 0.85rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  color: #FFFFFF;
  font: inherit;
  font-weight: 400;
  white-space: nowrap;
}

.rail-theme-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 1.35rem;
  background: currentColor;
  -webkit-mask: var(--icon-theme-dark) center / contain no-repeat;
  mask: var(--icon-theme-dark) center / contain no-repeat;
}

html[data-theme="dark"] .rail-theme-icon {
  -webkit-mask: var(--icon-theme-light) center / contain no-repeat;
  mask: var(--icon-theme-light) center / contain no-repeat;
}

.rail-foot {
  margin-top: 0;
  padding: 1.15rem 0.45rem 0.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.rail-role,
.rail-role-form {
  margin: 0;
}

.rail-role-form select {
  display: block;
  width: 100%;
  margin: 0.45rem 0 0.65rem;
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--navy);
  font: inherit;
}

.rail-role-form button,
.rail-role-form button:hover {
  width: 100%;
  margin: 0;
  background: #FFFFFF;
  color: var(--navy);
}

.rail-role-kicker {
  display: block;
  color: var(--mark);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rail-role-name {
  display: block;
  margin-top: 0.25rem;
  color: #FFFFFF;
  font-size: 1.05rem;
  font-weight: 500;
}

.rail-collapse-input:checked ~ .app .rail-search-form {
  display: none;
}

.rail-collapse-input:checked ~ .app .nav-label,
.rail-collapse-input:checked ~ .app .rail-theme-label,
.rail-collapse-input:checked ~ .app .rail-collapse-text,
.rail-collapse-input:checked ~ .app .rail-foot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rail-collapse-input:checked ~ .app .rail-collapse,
.rail-collapse-input:checked ~ .app .nav-item,
.rail-collapse-input:checked ~ .app button.rail-theme-toggle,
.rail-collapse-input:checked ~ .app .rail button.rail-theme-toggle {
  justify-content: center;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
}

.workspace {
  flex: 1 1 auto;
  min-width: 0;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
}

.mobile-bar,
.menu-backdrop {
  display: none;
}

main {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1.35rem 3rem 3.5rem;
}

h1,
h2,
h3 {
  color: var(--navy);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 {
  color: #70BD95;
  font-size: 3rem;
  margin: 0 0 1.75rem;
}

h2 {
  color: #70BD95;
  font-size: 1.85rem;
  margin: 0 0 1.1rem;
}

h3 {
  font-size: 1.25rem;
  margin: 1.75rem 0 0.6rem;
}

p {
  margin: 0.7rem 0;
}

.lede {
  font-size: 1.2rem;
}

.access,
.hint {
  color: var(--muted);
}

.site-footer {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 3rem 2.5rem;
  color: var(--muted);
}

.messages,
.errors {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.messages {
  border-left: 0;
}

.messages,
.messages p {
  transition:
    opacity 180ms ease,
    max-height 150ms ease 180ms,
    margin 150ms ease 180ms,
    padding 150ms ease 180ms;
}

.messages p.is-leaving,
.messages.is-leaving {
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .messages,
  .messages p {
    transition: none;
  }
}

.messages p.message-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

button.message-close {
  flex: 0 0 auto;
  margin-left: auto;
}

.errors {
  color: var(--overdue);
}

.errors ul,
.bookings {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}

.card,
.project,
.property-table-wrap,
.current-assessment,
.engagement-work > section,
main > section,
main > .table-wrap,
.letter-sheet,
.messages,
.errors {
  position: relative;
  background: transparent;
  border: 0;
  filter: var(--shadow);
}

.card::before,
.project::before,
.property-table-wrap::before,
.current-assessment::before,
.engagement-work > section::before,
main > section::before,
main > .table-wrap::before,
.letter-sheet::before,
.messages::before,
.errors::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #FFFFFF;
  clip-path: var(--clip);
  pointer-events: none;
}

.card,
.project {
  padding: 2rem 2.25rem 2.15rem;
  max-width: none;
}

.project-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.project-list > li {
  margin-top: 1.75rem;
}

.project-list > li:first-child {
  margin-top: 0;
}

.pairs {
  display: grid;
  grid-template-columns: 14rem 1fr;
  margin: 0;
}

.pairs dt,
.pairs dd {
  margin: 0;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.pairs dt {
  color: var(--muted);
  padding-right: 1rem;
}

.pairs dd {
  overflow-wrap: anywhere;
}

.preserve {
  white-space: pre-wrap;
}

.audit-chain {
  overflow-wrap: anywhere;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.82rem;
}

.filters a,
.subnav a {
  display: inline-block;
  margin: 0 1.25rem 0.5rem 0;
}

.month-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.month-nav a,
.month-nav a:visited,
.month-nav a:hover {
  display: inline-block;
  margin: 0;
  padding: 0.55rem 1.2rem;
  border: 1px solid var(--navy);
  border-radius: 999px;
  color: var(--navy);
  background: #FFFFFF;
  font-weight: 500;
  text-decoration: none;
}

.filters a {
  white-space: nowrap;
}

.filters a[aria-current="page"] {
  font-weight: 700;
}

section {
  margin-top: 2.5rem;
}

main > section {
  margin-top: 2.5rem;
  padding: 2rem 2.25rem 2.15rem;
}

/* Issue #340. A 12px band of the card surface (--sheet) follows the last
   row of every table wrapper. position: static is the base, so a wrapper
   that is not a scroll container keeps an in-flow spacer and does not pin
   the band to the viewport. position: sticky is added only beside a rule
   that sets that same wrapper's overflow to auto, in the same breakpoint,
   so the band stays on the scrollbar while that wrapper scrolls. Desktop,
   the 720px block, mobile portrait and mobile landscape all use that
   pairing. Padding-bottom is not used, so the band is not doubled at the
   scroll end. width, stretch and grid-column keep the band the full width
   of a flex or grid wrapper. Sticky thead th (z-index 2) stays above the
   rows. A column menu (.filter-popover) is position: fixed. table-filter.js
   does not place that menu inside a table, so a scroll box does not clip
   it or move it. Issues #340, #342 and #322. */
.activity-pick::after,
.property-pick::after,
.table-wrap::after,
.property-table-wrap::after,
.projects-table-pick::after,
.import-pick::after,
.import-scroll::after,
dialog.popup-import .import-map-scroll::after,
dialog.popup-import.is-map .import-map-scroll::after,
.edit-contacts-scroll::after,
.engagement-work .table-wrap::after,
main > .table-wrap::after,
.fold .table-wrap::after {
  content: "";
  display: block;
  position: static;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--table-scroll-gap);
  flex: none;
  align-self: stretch;
  justify-self: stretch;
  grid-column: 1 / -1;
  background: var(--sheet);
  z-index: 4;
  pointer-events: none;
}

.table-wrap {
  overflow-x: auto;
  margin: 0.75rem 0 1.25rem;
}

/* Issue #340. Pairs with overflow-x: auto on .table-wrap above. */
.table-wrap::after {
  position: sticky;
  left: 0;
  bottom: 0;
}

main > .table-wrap {
  overflow: visible;
}

/* Issue #340. Contacts and Calendar stay overflow: visible, so the band
   stays in flow. The 720px block sticks it only once they scroll.
   Properties tables scroll at every width (Issue #342). */
main > .table-wrap::after {
  position: static;
}

/* Issue #220. Opt-in scroll box. A box that already sets its own
   max-height keeps that rule when it is more specific. Show More
   doubles the height (Issue #417). The button is the shared
   .card-edit-row.show-more-row control. */
[data-more-box] {
  max-height: 28rem;
  overflow: auto;
}

/* Issue #220. A half-height card uses its .fold-body as that scroll box.
   Show More is the next sibling, so it sits inside the card under the
   box and is hidden with the body when the card is closed. */
.card.fold > .fold-body[data-more-box] {
  min-width: 0;
  max-width: 100%;
}

.card.fold > .fold-body[data-more-box] + .card-edit-row.show-more-row {
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Issue #342. The shared Properties table scrolls inside a 28rem box on
   desktop and on mobile. List pages are main > .table-wrap.property-table-wrap,
   which has to beat main > .table-wrap { overflow: visible }. The project
   Properties card already has .property-pick on this same element, so this
   is the one box. #projects-table-wrap is not this scrollport. A filter on
   this scroll box keeps the sticky band off the scrollbar (the table's
   stacking context paints over it), so the list page uses box-shadow and
   the same band stack as .property-pick. padding-bottom would sit under
   the band at the scroll end (Issue #340). */
main > .table-wrap.property-table-wrap,
.property-table-wrap {
  max-height: 28rem;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
}

/* Issue #342. The card colour has to be painted by the scroll box. A
   ::before is only the padding box of the first screen and it scrolls
   away with the rows, so Dark View shows --paper behind everything past
   that, and the gap above the scrollbar is page colour, then the 12px
   band, then a 1px seam. background-color fills the scrollport. The
   sheet gradient is background-attachment: local so that same colour is
   in the scrolling layer, including the gap above the horizontal
   scrollbar. The small --paper gradient stays on the scrollport's
   top-right corner (the card's cut corner, --clip). :not() keeps this
   off #projects-table-wrap, which is not the scrollport. */
main > .table-wrap.property-table-wrap:not(#projects-table-wrap),
main > .table-wrap.access-members {
  background-color: var(--sheet);
  background-image:
    linear-gradient(to bottom left, var(--paper) calc(1.75rem / sqrt(2)), transparent calc(1.75rem / sqrt(2))),
    linear-gradient(var(--sheet), var(--sheet));
  background-size: 1.75rem 1.75rem, auto;
  background-repeat: no-repeat, no-repeat;
  background-position: right top, left top;
  background-attachment: scroll, local;
}

main > .table-wrap.property-table-wrap {
  filter: none;
  box-shadow: 0 10px 18px rgba(0, 36, 57, 0.18);
  padding-bottom: 0;
}

/* A wide table must not stretch the page. Same reason as the project
   access table (Issue #341). The Projects grid card is this child too,
   and its scrollport stays the inner pick. */
main:has(> .property-table-wrap) {
  min-width: 0;
}

.property-table-wrap::before {
  z-index: 0;
}

/* main > .table-wrap::before is more specific than the rule above and
   would leave the list-page pseudo at z-index -1. The pseudo is not the
   fill (Issue #342): the scroll box paints --sheet. background: none
   stops the pseudo covering only the first screen. :not() leaves the
   Projects grid card's clipped ::before alone. */
main > .table-wrap.property-table-wrap::before {
  z-index: 0;
}

main > .table-wrap.property-table-wrap:not(#projects-table-wrap)::before,
main > .table-wrap.access-members::before {
  background: none;
}

/* Above the fill, below the band (z-index 4, the same stack as
   .property-pick). A higher value here covers the sticky band. */
.property-table-wrap > * {
  position: relative;
  z-index: 1;
}

/* Issue #340. Pairs with overflow-x and overflow-y auto on the same
   wrappers above. z-index matches the shared band on .property-pick. */
main > .table-wrap.property-table-wrap::after,
.property-table-wrap::after {
  position: sticky;
  left: 0;
  bottom: 0;
  z-index: 4;
}

.property-table-wrap,
main > .table-wrap {
  margin-top: 1.25rem;
  padding: 0.5rem 0.25rem 0.25rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #FFFFFF;
}

caption {
  caption-side: top;
  text-align: left;
  font-weight: 500;
  color: var(--navy);
  padding: 0.85rem 1rem 0.35rem;
}

th,
td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

/* Compact rows site-wide (Simon 14:35), matching the Activity card:
   0.15rem vertical padding and 1.35 line-height on body cells - about
   44px for a two-line row, tighter for single-line. Header cells keep
   their existing spacing and alignment. */
th {
  padding: 0.7rem 0.85rem;
  font-weight: 500;
  color: var(--navy);
}

td {
  padding: 0.15rem 0.85rem;
  line-height: 1.35;
}

.property-table th,
.property-table td {
  padding: 1.35rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.property-table td {
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  line-height: 1.35;
}

.property-table th {
  white-space: nowrap;
  touch-action: none;
}

/* Issue #483. A filter-table header sets touch-action: auto. The Properties
   list still drags its columns, including on a phone, so that header keeps
   touch-action: none.
   The list box also has top padding. A sticky heading with top: 0 then sits
   under that padding, and a scrolled row shows in the gap and behind the
   heading. No top padding puts the heading on the top edge of the scroll
   area. Its background is the sheet colour, so a row underneath cannot
   show through in Light or Dark View. Full-screen view still sets top
   from --thead-top. Other filter tables keep their own boxes. */
main > .table-wrap.property-table-wrap > table[data-column-page="properties"][data-filter-table].property-table th {
  touch-action: none;
}

main > .table-wrap.property-table-wrap:has(> table[data-column-page="properties"][data-filter-table]) {
  padding-top: 0;
}

/* top: -1px tucks one pixel under the scroll box clip. The sheet-coloured
   shadows sit outside the heading, above it and just under its bottom
   line, so a scrolled row cannot show in either strip. The inset line
   stays navy, or the sheet line in Dark View, and the mark when sorted.
   Full-screen view puts the heading back on --thead-top. */
main > .table-wrap.property-table-wrap > table[data-column-page="properties"][data-filter-table] thead th {
  top: -1px;
  background-color: var(--sheet);
  box-shadow:
    inset 0 -2px 0 var(--navy),
    0 5px 0 0 var(--sheet),
    0 -2px 0 0 var(--sheet);
}

html[data-theme="dark"] main > .table-wrap.property-table-wrap > table[data-column-page="properties"][data-filter-table] thead th {
  box-shadow:
    inset 0 -2px 0 var(--line),
    0 5px 0 0 var(--sheet),
    0 -2px 0 0 var(--sheet);
}

main > .table-wrap.property-table-wrap > table[data-column-page="properties"][data-filter-table] thead th.is-active,
html[data-theme="dark"] main > .table-wrap.property-table-wrap > table[data-column-page="properties"][data-filter-table] thead th.is-active {
  box-shadow:
    inset 0 -3px 0 var(--mark),
    0 5px 0 0 var(--sheet),
    0 -2px 0 0 var(--sheet);
}

main > .table-wrap.property-table-wrap.is-table-full > table[data-column-page="properties"][data-filter-table] thead th {
  top: var(--thead-top, 0);
}

.property-table a.property-address-link,
.property-table a.property-address-link:hover,
.property-table a.property-address-link:visited {
  text-decoration: none;
}

.list-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0 0 1.25rem;
}

.list-header > a.button {
  flex: 0 0 auto;
}

.list-header > #open-create-project,
.list-header > #open-add-property,
.list-header > #open-property-views {
  flex: 0 0 auto;
}

.search-pill-form {
  margin: 0;
}

/* Graduated search button, rolled out from the /search-test prototype:
   a solid green pill segment carrying a navy magnifying glass (icon
   only, no word). It sits immediately after the page's primary button;
   on pages with an expanding search the text entry is outline-only and
   grows out to the RIGHT of the segment on hover, focus or when a query
   is already present; the segment itself never moves or resizes. */
.search-pill {
  display: inline-flex;
  align-items: stretch;
  height: 2rem;
  background: #FFFFFF;
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--mark);
  box-sizing: border-box;
  overflow: hidden;
}

.search-pill:focus-within {
  box-shadow: inset 0 0 0 3px var(--mark);
}

.search-pill :focus-visible {
  outline: none;
}

.search-pill > .search-pill-button {
  height: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  border: 0;
  border-radius: 0;
}

.search-pill-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.search-pill-entry {
  width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--navy);
  font-size: 1rem;
  opacity: 0;
  box-sizing: border-box;
  transition: width 0.35s ease, opacity 0.35s ease, padding 0.35s ease;
}

.search-pill:hover .search-pill-entry,
.search-pill:focus-within .search-pill-entry,
.search-pill.is-open .search-pill-entry {
  width: min(24rem, 85vw);
  padding: 0 0.9rem 0 0.5rem;
  opacity: 1;
}

.search-pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0 0.7rem;
  background: var(--mark);
  color: var(--navy);
  border: 2px solid var(--mark);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
}

/* The browser's clear cross in a search entry: centred in its own area
   at the right end of the entry, same size as the magnifying glass. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1.13rem;
  margin-right: 0;
  background: var(--navy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2l12 12M14 2L2 14' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2l12 12M14 2L2 14' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask-size: 1rem 1.13rem;
  mask-size: 1rem 1.13rem;
}

.search-pill-entry:not(:placeholder-shown)::-webkit-search-cancel-button,
.search-pop input:not(:placeholder-shown)::-webkit-search-cancel-button {
  opacity: 1;
  pointer-events: auto;
}

.search-pill-glass {
  flex: 0 0 1.35rem;
  width: 1.35rem;
  height: 1.35rem;
  background: var(--navy);
  -webkit-mask: var(--icon-search) center / contain no-repeat;
  mask: var(--icon-search) center / contain no-repeat;
}

.rail .search-pill-button {
  background: var(--mark);
  border-color: var(--mark);
}

/* Issue #311. Properties and Activity keep the search pill in the open
   card's summary. A collapsed card hides it. */
details.card.fold:not([open]) > summary .card-search-pill {
  display: none;
}

details.card.fold[open] > summary .card-search-pill {
  margin-left: 0.5rem;
}

/* Search button test page (/search-test only, not linked in navigation).
   Collapsed it is just the menu-bar magnifying glass (same --icon-search
   mask asset as the rail) in navy on the standard button green
   (--mark #70BD95), in a small rounded box anchored to the right of the
   demo area. Hover, focus or having text expands it LEFTWARDS from the
   icon: the icon stays at the right end and the input grows out to its
   left, to 22rem wide. Outline only - no green fill, just the green
   border, glass still navy. A Clear button appears below with text. */
.search-test-demo {
  margin-top: 1.5rem;
}

.search-pop {
  position: relative;
  width: 2.75rem;
  overflow: hidden;
  height: 2rem;
  margin-left: auto;
  margin-bottom: 3rem;
  padding: 0 0.7rem;
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--mark);
  box-sizing: border-box;
  transition: width 0.35s ease;
}

.search-pop:focus-within {
  box-shadow: inset 0 0 0 3px var(--mark);
}

.search-pop:hover,
.search-pop:focus-within,
.search-pop:valid {
  width: min(22rem, 85vw);
}

.search-pop-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.search-pop input {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--navy);
  font-size: 1em;
  font-weight: 500;
  opacity: 0;
  box-sizing: border-box;
}

.search-pop input::placeholder {
  color: var(--navy);
  opacity: 0.75;
}

.search-pop:hover input,
.search-pop:focus-within input,
.search-pop:valid input {
  width: 100%;
  padding: 0 3.25rem 0 1rem;
  opacity: 1;
}

.search-pop-icon {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 100%;
  padding: 0;
  background: var(--mark);
  color: var(--navy);
  border: 0;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
}

.search-pop-glass {
  flex: 0 0 1.35rem;
  width: 1.35rem;
  height: 1.35rem;
  background: var(--navy);
  -webkit-mask: var(--icon-search) center / contain no-repeat;
  mask: var(--icon-search) center / contain no-repeat;
}

.search-pop-clear {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  width: 100%;
  padding: 0.35rem;
  background: #FFFFFF;
  color: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 999px;
  font-size: 1rem;
  text-align: center;
}

.search-pop:valid .search-pop-clear {
  display: block;
}

.search-test-results {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

.search-test-results li {
  margin: 0.25rem 0;
}

.table-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
  margin: 0 0 1rem;
}

.table-search .field {
  flex: 1 1 18rem;
  margin: 0;
}

.stage-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.record-address-edit {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 40rem;
  margin-bottom: 0.75rem;
}

.property-table tbody tr:last-child td {
  border-bottom: 0;
}

.stage-cell {
  white-space: nowrap;
}

/* SAP band/rating badge (Properties list): EPC band colours from
   Issue #214. Dark text on the lighter bands (B-F) for readable
   contrast, white on the darkest (A and G). */
.sap-band {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

.sap-band-a { background: #009A44; color: #FFFFFF; }
.sap-band-b { background: #19B459; color: var(--navy); }
.sap-band-c { background: #8DCE46; color: var(--navy); }
.sap-band-d { background: #FFD500; color: var(--navy); }
.sap-band-e { background: #F5A623; color: var(--navy); }
.sap-band-f { background: #E65C00; color: #FFFFFF; }
.sap-band-g { background: #D80027; color: #FFFFFF; }

.stage-label {
  display: inline;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mark);
  background: none;
}

/* Issue #412. Stage text in a properties table uses the cell's font size
   and line height, the same as Status and the other columns. The green
   colour stays on .stage-label, including Dark View. */
td .stage-label {
  font-size: inherit;
  line-height: inherit;
}

/* Kanban cards and the engagement header are not a properties table.
   They keep the small label. A cell inherits below (Issue #412). */
.kanban-stage .stage-label,
.record-stage .stage-label {
  font-size: 0.75rem;
}

.nowrap {
  white-space: nowrap;
}

.overdue {
  color: var(--overdue);
  font-weight: 600;
  background: none;
}

/* Issue #63. The Tasks card cuts by rows. It is not the 28rem Show More
   box. A wide row still scrolls sideways inside the card. Show More sits
   under the card body. Add Task and Show More share the right-aligned
   footer row. */
#tasks > .fold-body {
  padding-top: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

#tasks > .fold-body + .card-edit-row.show-more-row {
  padding-left: 2rem;
  padding-right: 2rem;
}

#tasks table.activity-log {
  table-layout: auto;
  width: 100%;
  min-width: 0;
  max-width: none;
}

#tasks table.activity-log th,
#tasks table.activity-log td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
}

#tasks table.activity-log th[data-col="task"],
#tasks table.activity-log td[data-col="task"] {
  width: 100%;
  min-width: 8rem;
  max-width: none;
}

#tasks table.activity-log td[data-col="task"] > span {
  display: block;
  width: 0;
  min-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tasks table.activity-log th[data-col="due"],
#tasks table.activity-log td[data-col="due"],
#tasks table.activity-log th[data-col="assignee"],
#tasks table.activity-log td[data-col="assignee"],
#tasks table.activity-log th[data-col="status"],
#tasks table.activity-log td[data-col="status"] {
  width: 1%;
  max-width: none;
  white-space: nowrap;
}

#tasks .popup-actions form {
  margin: 0;
}

#tasks .popup-actions form > button {
  margin-left: 0;
}

.stack-form {
  margin-top: 1rem;
}

.field {
  margin: 0 0 1.1rem;
}

.field label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.field .hint {
  margin: 0 0 0.3rem;
}

input,
select,
textarea,
button {
  font: inherit;
}

input,
select,
textarea {
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid #c5ccd3;
  padding: 0.5rem 0.65rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  max-width: 36rem;
}

textarea {
  min-height: 6.5rem;
}

button {
  background: var(--mark);
  color: var(--navy);
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 0.7rem;
  font-weight: 500;
}

button:hover {
  background: #62b086;
  color: var(--navy);
}

main form > button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-left: auto;
}

.open-task > form,
main td > form {
  margin-left: auto;
}

main td > form {
  display: flex;
  justify-content: flex-end;
}

button.compact {
  padding: 0.3rem 0.8rem;
}

a.button,
a.button:visited,
a.button:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mark);
  color: var(--navy);
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 0.7rem;
  font-weight: 500;
  text-decoration: none;
}

a.button:hover {
  background: #62b086;
}

.rail button {
  background: #FFFFFF;
  color: var(--navy);
}

.rail button:hover {
  background: #e7eef2;
  color: var(--navy);
}

/* Property address wherever it heads or subtitles a property page
   (property, engagement, activities, assessment, design, installation,
   modelling, PIBI, omission and letter pages): one shared style. */
.property-address {
  font-size: 1.15rem;
  font-weight: 500;
}

.record-head {
  margin: 0 0 1.5rem;
}

.record-head h1 {
  margin-bottom: 0.55rem;
}

.header-actions {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0.85rem 0 0;
  max-width: 100%;
  overflow-x: auto;
}

.record-address {
  color: #70BD95;
  overflow-wrap: anywhere;
}

.record-sub {
  margin: 0.15rem 0 0;
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 500;
}

.record-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}

.record-links a {
  margin: 0;
}

.record-meta {
  margin: 0;
  color: var(--navy);
  font-size: 1.05rem;
}

.record-stage {
  margin: 0.45rem 0 0;
}

.record-columns {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.record-main,
.record-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.card.fold {
  padding: 0;
  margin: 0;
}

.fold > summary {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 2.6rem 1.15rem 2rem;
  color: var(--navy);
}

.fold > summary::-webkit-details-marker {
  display: none;
}

.fold > summary::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.fold[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 0.35rem;
}

.card h2,
.card h3 {
  color: #002439;
}

.fold-title {
  color: #70BD95;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.fold-line {
  color: var(--ink);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.fold-body,
.card > .card-body {
  position: relative;
  z-index: 1;
}

.fold-body {
  padding: 0.25rem 2rem 1.5rem;
}

.current-assessment {
  padding: 1.25rem 1.5rem;
  margin: 0;
  max-width: none;
}

.fold .table-wrap,
.engagement-work .table-wrap {
  filter: none;
  clip-path: none;
  overflow-x: auto;
}

/* Issue #340. Pairs with overflow-x: auto on the same wrappers above. */
.fold .table-wrap::after,
.engagement-work .table-wrap::after {
  position: sticky;
  left: 0;
  bottom: 0;
}

.fold .property-table-wrap::before {
  display: none;
}

.fold .table-wrap table {
  min-width: 40rem;
}

.view-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 1rem;
}

.view-switch a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  margin: 0;
  background: var(--mark);
  color: var(--navy);
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 0.7rem;
  font-weight: 500;
  text-decoration: none;
}

.view-switch a:visited {
  color: var(--navy);
}

.view-switch a:hover {
  background: #62b086;
  color: var(--navy);
}

.view-switch a[aria-current="page"],
.view-switch a[aria-current="page"]:visited,
.view-switch a[aria-current="page"]:hover {
  background: var(--navy);
  color: #FFFFFF;
}

.projects-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 1rem;
  padding-right: calc(2.25rem + (2rem - 1.125rem) / 2);
}

.projects-toolbar .view-switch {
  margin: 0;
}

.projects-toolbar #open-create-project {
  margin-left: auto;
}

.projects-grid-tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.9rem 0.25rem 1rem;
}

.projects-grid-tools .projects-grid-title {
  margin-right: auto;
  font-size: 20px;
  font-weight: 700;
  color: #70BD95;
}

/* The Projects grid scrollport is .projects-table-pick, not this card.
   max-height and overflow here beat the shared Properties box (Issue #342).
   The list-page box drops filter and padding-bottom so its band can stick.
   This card keeps the clipped shadow, its own bottom inset, and the
   clipped ::before. It does not take the scroll-box fill. */
#projects-table-wrap {
  margin-top: 5rem;
  max-height: none;
  overflow: visible;
  filter: var(--shadow);
  box-shadow: none;
  padding-bottom: 0.25rem;
  background: transparent;
}

#hidden-strip:has(#projects-table-wrap) {
  margin-top: 5rem;
}

#hidden-strip #projects-table-wrap {
  margin-top: 0;
}

.projects-table-pick {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

/* Issue #340. Pairs with overflow-x: auto on .projects-table-pick above.
   #projects-table-wrap itself is not this scrollport. */
.projects-table-pick::after {
  position: sticky;
  left: 0;
  bottom: 0;
}

#projects-table-wrap.is-collapsed .projects-table-pick,
#projects-table-wrap.is-parked .projects-table-pick,
#projects-table-wrap.is-collapsed #projects-table,
#projects-table-wrap.is-parked #projects-table {
  display: none;
}

.kanban {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
  margin-top: 0.5rem;
}

.kanban-column h2 {
  margin: 0 0 0.75rem;
  color: #002439;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kanban-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 8rem;
  padding: 0.75rem;
  background: #f3f5f7;
}

.kanban-card,
a.kanban-card,
a.kanban-card:visited {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 1rem 1.05rem 0.9rem;
  background: #FFFFFF;
  box-shadow: 0 8px 16px rgba(0, 36, 57, 0.1);
  color: var(--navy);
  text-decoration: none;
}

.kanban-address,
.kanban-postcode {
  display: block;
}

.kanban-address {
  font-weight: 500;
}

.kanban-stage {
  display: block;
  width: 100%;
  margin-top: 0.55rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
}

.kanban-card.is-dragging {
  opacity: 0.55;
}

.search-result {
  margin-top: 0;
}

.calendar {
  min-width: 52rem;
  table-layout: fixed;
}

.calendar th,
.calendar td {
  border: 1px solid var(--line);
  height: 6.5rem;
}

.calendar .outside {
  background: #f7f8f9;
}

.day-num {
  display: block;
  font-weight: 500;
}

.today-label {
  font-weight: 500;
}

.booking-item {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.weekday-short {
  display: none;
}

.scroll-hint {
  display: none;
}

.letter-sheet {
  font-family: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  white-space: pre-wrap;
  padding: 2rem;
  max-width: none;
  line-height: 1.5;
  margin: 1rem 0;
}

@media (min-width: 1100px) {
  .record-columns:not(.record-fit) {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.9fr);
    gap: 1.5rem;
    align-items: start;
  }
}

.property-page .record-head {
  margin: 0 0 0.35rem;
}

.property-page .record-stage-line,
.property-page .record-head .access {
  margin: 0.12rem 0 0;
}

.record-stage-line {
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 500;
}

/* Issue #409. Map icon after the postcode on Property Details, opening the
   address in Google Maps (Street View one tap away). Approved exception to
   the no-icons rule. 44px tap target; the negative margin keeps the row
   height. Hidden in print by .no-print. */
.street-view-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: -0.75rem 0 -0.75rem 0.15rem;
  vertical-align: middle;
  border-radius: 0.4rem;
}

.street-view-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--navy);
  -webkit-mask: var(--icon-map) center / contain no-repeat;
  mask: var(--icon-map) center / contain no-repeat;
}

html[data-theme="dark"] .street-view-icon {
  background: var(--mark);
}

/* At phone width the postcode column is narrow, so the icon drops under
   the postcode; pull it left so the pin lines up with the text. */
@media (max-width: 40rem) {
  .street-view-link {
    margin-left: -0.75rem;
  }
}

.record-stage-line span + span {
  margin-left: 1.15rem;
}

.property-page .record-head .access {
  font-size: 0.95rem;
  line-height: 1.4;
}

.card-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* Issue #39: one shared row for the Edit button at the bottom of a card.
   The space above the button matches the space below it, so the button sits
   halfway between the last line of content and the bottom edge of the card.
   The card's own bottom padding is dropped when this row is that edge, so
   the two spaces stay equal. */
.card-edit-row {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* Issue #93: Show Other Contacts on the left, Edit on the right.
   The shared padding keeps the same space above and below the row. */
.card-edit-row.is-between {
  justify-content: space-between;
  align-items: center;
}

/* Issue #39: the Measure Hierarchy list keeps the browser's bottom margin,
   which stacked on the Edit row's padding. Drop it when the Edit row is
   the next sibling so the space above the button matches the space below.
   Other cards are left alone. */
[data-card="measures"] ol:has(+ .card-edit-row),
[data-card="measures"] p:has(+ .card-edit-row) {
  margin-bottom: 0;
}

.fold-body:has(> .card-edit-row:last-child),
.fold-body:has(> .stack-form > .card-edit-row:last-child),
.fold-body:has(> .card-body > .card-edit-row),
.fold-body:has(> .other-contacts-panel:last-child:not([open]) > summary.card-edit-row) {
  padding-bottom: 0;
}

/* Line the activity table's first column up with the card title above it:
   the title starts at the summary's left padding, so the first table
   column drops the global cell padding on its left. */
.activity-card .property-log th:first-child,
.activity-card .property-log td:first-child,
.fold .property-log th:first-child,
.fold .property-log td:first-child {
  padding-left: 0;
}

.property-details-groups {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* One fixed label column in the grouped cards, so every value (including
   the multi-line address) starts at the same x in every group and card. */
.record-fit .property-sheet .property-details-groups .pairs,
main .card .property-details-groups .pairs {
  grid-template-columns: 12rem minmax(0, 1fr);
}

.record-fit .property-sheet .property-details-groups .pairs dt,
main .card .property-details-groups .pairs dt {
  max-width: none;
  white-space: nowrap;
}

.property-details-groups .pairs dt,
.property-details-groups .pairs dd {
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Issue #358. A 1px line between Property Details groups only. The colour
   is var(--line), the same line the Contact Details pair rows use
   (.pairs dt, .pairs dd), so it shows in Light and Dark View. The line
   sits in the existing 1.4rem gap. Nothing above the first group or
   below the last. Long values still wrap on the value (.pairs dd). */
[data-card="property"] .property-details-groups > .pairs + .pairs {
  position: relative;
}

[data-card="property"] .property-details-groups > .pairs + .pairs::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.7rem;
  border-top: 1px solid var(--line);
  pointer-events: none;
}

/* The short Client EPC label stays in its column. A nowrap label cannot
   paint over the band badge at desktop or at 360px. */
[data-card="property"].property-sheet .property-details-groups .pairs dt {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Issue #394. The same line between characteristic groups. Labels wrap
   because several of them are longer than the fixed label column. */
[data-card="characteristics"] .property-details-groups > section {
  margin-top: 0;
}

[data-card="characteristics"] .property-details-groups > section + section {
  position: relative;
}

[data-card="characteristics"] .property-details-groups > section + section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.7rem;
  border-top: 1px solid var(--line);
  pointer-events: none;
}

.record-fit [data-card="characteristics"].property-sheet .property-details-groups .pairs dt,
main .card[data-card="characteristics"] .property-details-groups .pairs dt,
article.card[data-card="characteristics"] .property-details-groups .pairs dt {
  white-space: normal;
  overflow-wrap: anywhere;
}

[data-card="characteristics"] > .fold-body {
  padding-bottom: 0;
}

[data-card="characteristics"] > .card-edit-row {
  padding-left: 2rem;
  padding-right: 2rem;
}

[data-card="characteristics"] .property-details-groups {
  gap: 1.4rem;
}

[data-card="characteristics"] .property-details-groups h3 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
}

[data-card="characteristics"] .property-details-groups .pairs {
  margin: 0;
}

/* The pill is the same height as the other rows, and centred on the label. */
[data-card="characteristics"] .sap-band {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 1.5rem;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}

#characteristics-edit-popup {
  overflow: hidden;
}

#characteristics-edit-popup > article {
  max-height: calc(100vh - 2rem);
  overflow-y: scroll;
  scrollbar-width: none;
  padding-right: 1.4rem;
  background: #FFFFFF;
}

html[data-theme="dark"] #characteristics-edit-popup > article {
  background: var(--sheet);
}

#characteristics-edit-popup > article::-webkit-scrollbar {
  display: none;
}

#characteristics-edit-popup .characteristics-scroll-track {
  position: absolute;
  top: 0.6rem;
  right: 0.45rem;
  bottom: 0.6rem;
  width: 10px;
  border-radius: 5px;
  background: #e4e7eb;
  pointer-events: none;
}

#characteristics-edit-popup .characteristics-scroll-thumb {
  width: 10px;
  border-radius: 5px;
  background: #5c6b7a;
}

[data-card="characteristics"] .characteristics-import-name {
  margin: 0.75rem 0 0;
}

#characteristics-edit-popup .characteristics-sources {
  margin-top: 1.25rem;
}

#characteristics-edit-popup .characteristics-sources p {
  margin: 0.15rem 0;
}

.property-page .record-columns {
  margin-top: 0;
}

.record-fit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  max-width: 100%;
}

.card-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 0;
  min-height: 3rem;
}

.card-col > .card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
}

.card-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
}

/* Issue #288. A full-span card uses the whole project board. card-board.js
   keeps it in the top or the bottom full-width row, not in a side column. */
#card-board[data-page="project"] details.card[data-span="full"] {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
}

.card-row:not(:has([data-card])) {
  display: none;
}

.card-row > .card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
}

.record-fit .property-sheet,
.record-fit .property-sheet .pairs {
  width: 100%;
  max-width: 100%;
}

.record-fit .property-sheet .pairs {
  grid-template-columns: max-content minmax(0, 1fr);
}

.record-fit .property-sheet .pairs dt {
  max-width: 9rem;
  white-space: normal;
}

.record-fit .property-sheet .pairs dd {
  overflow-wrap: anywhere;
}

.record-fit summary {
  touch-action: none;
}

.record-fit .is-dragging {
  opacity: 0.72;
}

.card-tools {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.45rem;
  padding-right: 1.15rem;
}

.card-tools-projects {
  padding-right: 2.25rem;
}

.card-col > .card.drop-before::after,
.card-col > .card.drop-after::after,
.card-row > .card.drop-before::after,
.card-row > .card.drop-after::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--navy);
  z-index: 2;
  pointer-events: none;
}

.card-col > .card.drop-before::after,
.card-row > .card.drop-before::after {
  top: 0;
}

.card-col > .card.drop-after::after,
.card-row > .card.drop-after::after {
  bottom: 0;
}

button.card-hide,
button.card-hide:hover {
  margin-left: 0;
  margin-right: 0.35rem;
  padding: 0.35rem 0.85rem;
  background: var(--mark);
  color: var(--navy);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  touch-action: manipulation;
}

.fold > summary:has(.card-expand) {
  align-items: center;
  padding-right: 1.15rem;
}

.fold > summary:has(.card-expand) .fold-line {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fold > summary .card-expand,
.project-card-main .card-expand {
  margin-left: auto;
}

.fold > summary:has(.card-hide) .card-hide {
  margin-left: auto;
}

.fold > summary:has(.card-hide) .card-expand {
  margin-left: 0;
}

.fold > summary:has(.card-set-aside) .card-set-aside {
  margin-left: auto;
}

.fold > summary:has(.card-set-aside) .card-expand {
  margin-left: 0;
}

.fold > summary:has(.card-expand)::after {
  content: none;
  display: none;
}

button.card-expand,
button.card-expand:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  /* The left alignment comes from the card header rules (auto, or 0 beside a card-hide button) and must stay in force on hover as well as normally. */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: 0;
  touch-action: manipulation;
}

button.card-expand::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  max-height: 1.125rem;
  background:
    linear-gradient(#70BD95, #70BD95) left top / 100% 0.25rem no-repeat,
    linear-gradient(#FF9600, #FF9600) left 0.4375rem / 100% 0.25rem no-repeat,
    linear-gradient(#70BD95, #70BD95) left bottom / 100% 0.25rem no-repeat;
  -webkit-mask: none;
  mask: none;
}

button.card-expand[aria-expanded="true"]::before {
  background:
    linear-gradient(#70BD95, #70BD95) left top / 0.25rem 100% no-repeat,
    linear-gradient(#FF9600, #FF9600) 0.4375rem top / 0.25rem 100% no-repeat,
    linear-gradient(#70BD95, #70BD95) right top / 0.25rem 100% no-repeat;
}

button.card-set-aside,
button.card-set-aside:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: 0;
  touch-action: manipulation;
}

button.card-set-aside::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  max-height: 1.125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 21.5 L13.11 20.79 L10.28 17.96 L23.62 4.62 L19.38 0.38 L6.04 13.72 L3.21 10.89 Z' fill='%2370BD95'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.card.is-parked button.card-set-aside::before,
#projects-table-wrap.is-parked button.card-set-aside::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 2.5 L10.89 3.21 L13.72 6.04 L0.38 19.38 L4.62 23.62 L17.96 10.28 L20.79 13.11 Z' fill='%23FF9600'/%3E%3C/svg%3E");
}


.hidden-strip .is-parked .card-expand {
  display: none;
}

.hidden-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
  margin-top: 0.85rem;
}

.hidden-strip[hidden] {
  display: none;
}

.hidden-strip > .card {
  width: auto;
  flex: 0 1 auto;
  margin: 0;
}

.hidden-strip .is-parked .fold-body {
  display: none;
}

.hidden-strip .is-parked > summary {
  cursor: default;
  padding-right: 1.15rem;
}

.hidden-strip .is-parked > summary::after {
  display: none;
}

button.log-toggle,
button.log-toggle:hover {
  display: inline-block;
  margin-top: 0.85rem;
  padding: 0.3rem 0.8rem;
  background: var(--mark);
  color: var(--navy);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
}

.property-log {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.property-log .log-col-when {
  width: 8.75rem;
}

.property-log th,
.property-log td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
  text-indent: 0;
  padding: 0.15rem 0.6rem;
  line-height: 1.35;
}

/* Activity + audit tables fit their card exactly: fixed layout at 100%
   width, so there is never any horizontal scrolling. Columns size
   flexibly except Notes, which is fixed (20rem on desktop, scaling down
   on small screens). Notes text wraps inside its column and is clamped
   at two lines - the two-line date cell sets the row height and no cell
   may exceed it. Hovering or focusing a cell shows its full text in a
   small pop-up bubble by the cell; the row itself never changes height.
   Each truncated cell also keeps a title fallback, and touch users get
   the full table on the Show Activities page. */
.activity-log,
.audit-log {
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}

.table-wrap:has(> .audit-log),
.fold .table-wrap:has(> .audit-log) {
  overflow: visible;
}

/* Issue #340. An audit wrap does not scroll, so the band stays in flow. */
.table-wrap:has(> .audit-log)::after,
.fold .table-wrap:has(> .audit-log)::after {
  position: static;
}

.fold .table-wrap table.audit-log,
.table-wrap table.audit-log {
  min-width: 0;
}

.activity-log .log-col-date {
  width: 7rem;
  padding-right: 0.75rem;
}

/* Column order is Date, Property, User, Action, Notes (Issue #237).
   Widths for the card are set again at the end of this section so the
   five columns share the card and notes can wrap. */
.activity-log .log-col-property {
  width: 9rem;
  padding-right: 0.75rem;
}

.activity-log:not(.activity-log-full) .log-col-action {
  width: 9.88rem;
}

.activity-log .log-col-user {
  width: 7rem;
}

.activity-log .log-col-notes {
  width: 32%;
}

.activity-log td.log-col-date,
.activity-log td.log-col-user {
  white-space: nowrap;
}

.activity-log td.log-col-property {
  white-space: normal;
}

.activity-log td.log-col-property a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
}

.activity-log-card .log-col-notes {
  width: 36%;
}

.audit-log th:nth-child(1),
.audit-log td:nth-child(1) {
  width: 7.75rem;
}

.audit-log th:nth-child(6),
.audit-log td:nth-child(6),
.audit-log th:nth-child(7),
.audit-log td:nth-child(7) {
  width: 11%;
}

@media (max-width: 800px) {
  .activity-log th,
  .activity-log td {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  .activity-log .log-col-date {
    width: 26%;
    padding-right: 0.5rem;
  }

  .activity-log .log-date,
  .activity-log .log-time {
    font-size: 0.8rem;
  }

  .activity-log .log-col-property {
    width: 16%;
    padding-right: 0.5rem;
  }

  .activity-log .log-col-action {
    width: 10%;
  }

  .activity-log .log-col-notes {
    width: 20%;
    max-width: 20%;
  }

  .activity-log .log-col-user {
    width: 28%;
  }

  .activity-log-card .log-col-action {
    width: 22%;
  }

  .activity-log-card .log-col-notes {
    width: 24%;
    max-width: 24%;
  }

  .audit-log th:nth-child(1),
  .audit-log td:nth-child(1) {
    width: 22%;
  }
}

.log-date,
.log-time {
  display: block;
  white-space: nowrap;
}

.property-log td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-log td.log-flex,
.audit-log td:nth-child(5) {
  white-space: normal;
  overflow: hidden;
}

/* Two-line clamp on the inner span, not the cell: clamping the cell
   itself makes the table row grow to the unclamped height. */
.activity-log td.log-flex > span,
.audit-log td:nth-child(5) > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

.property-log td a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Activity CARD rows: compact like the Property Details card lines
   (Simon 14:20, superseding the 14:03 group-gap padding which made rows
   66-71px) - 0.15rem vertical padding and 1.35 line-height give ~48px
   for a two-line row, as tight as the two-line clamp allows. Column
   padding in cards is tighter too. Card date cells show the date only;
   the time has its own column on the full page. Full page unchanged. */
.activity-log:not(.activity-log-full) th,
.activity-log:not(.activity-log-full) td {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.activity-log:not(.activity-log-full) td {
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  line-height: 1.35;
}

.activity-log:not(.activity-log-full) .log-col-date {
  width: 5.5rem;
  padding-right: 0.35rem;
}

.activity-log:not(.activity-log-full) .log-col-property {
  padding-right: 0.35rem;
}

.activity-log-full .log-col-time {
  width: auto;
  padding-right: 0.75rem;
  white-space: nowrap;
}

.activity-log-full .log-col-property-id,
.activity-log-full .log-col-uprn {
  white-space: nowrap;
}

/* Narrower cards (mid-width viewports): card columns switch to shares so
   Action and Notes never collapse to nothing; User and Date still fit
   their full content at the smaller cell text size. */
@media (min-width: 801px) and (max-width: 1350px) {
  .activity-log:not(.activity-log-full) th,
  .activity-log:not(.activity-log-full) td {
  }

  .activity-log:not(.activity-log-full) .log-col-date {
    width: 22%;
  }

  .activity-log:not(.activity-log-full) .log-col-property {
    width: 24%;
  }

  .activity-log:not(.activity-log-full) .log-col-action {
    width: 21%;
  }

  .activity-log:not(.activity-log-full) .log-col-notes {
    width: 12%;
  }

  .activity-log:not(.activity-log-full) .log-col-user {
    width: 26%;
  }

  .activity-log-card .log-col-notes {
    width: auto;
  }
}

@media (max-width: 800px) {
  .activity-log:not(.activity-log-full) .log-col-date {
    width: 24%;
  }

  .activity-log:not(.activity-log-full) .log-col-property {
    width: 13%;
  }

  .activity-log:not(.activity-log-full) .log-col-action {
    width: 20%;
  }

  .activity-log:not(.activity-log-full) .log-col-notes {
    width: 15%;
  }

  .activity-log:not(.activity-log-full) .log-col-user {
    width: 28%;
  }

  .activity-log-card .log-col-notes {
    width: 27%;
    max-width: 27%;
  }
}

/* Full Activities page only: columns size to their content across the
   full page width so entries show on one line wherever possible; the
   compact card treatment (fixed columns, two-line clamp) does not apply
   here. Only a genuinely over-long Notes/Action still cuts, with the
   hover/focus pop-up. Card views keep the compact treatment above. */
@media (min-width: 801px) {
  .activity-log-full {
    table-layout: auto;
  }

  .activity-log-full .log-col-date,
  .activity-log-full .log-col-property,
  .activity-log-full .log-col-user,
  .activity-log-full .log-col-notes {
    width: auto;
    max-width: none;
  }

  .activity-log-full .log-col-notes {
    max-width: 36rem;
  }

  .activity-log-full .log-col-action {
    max-width: 26rem;
  }

  .activity-log-full td {
    white-space: nowrap;
  }

  .activity-log-full td.log-col-property a {
    display: inline;
    -webkit-line-clamp: none;
    white-space: nowrap;
    overflow: visible;
  }

  .activity-log-full td.log-flex > span {
    display: inline;
    -webkit-line-clamp: none;
    overflow: visible;
    white-space: nowrap;
  }

  /* Issue #466. id project-activity is on both Activity cards. The rem
     budget below is 45.5rem without Postcode, which is the whole 728px
     property table, and 52rem on the project card, which is the whole
     table at a 1200px window. The project card is wide enough for shares.
     The property card is a narrow column: those shares left a 120-character
     note on 11 to 15 lines. Its table keeps a reading width and scrolls
     inside .activity-pick. History keeps the rem budget. Mobile keeps
     the max-content rules. */
  #card-board[data-page="project"] #project-activity table.activity-log .log-col-date {
    width: 16%;
  }

  #card-board[data-page="project"] #project-activity table.activity-log .log-col-property {
    width: 18%;
  }

  #card-board[data-page="project"] #project-activity table.activity-log .log-col-postcode {
    width: 10%;
  }

  #card-board[data-page="project"] #project-activity table.activity-log .log-col-user {
    width: 14%;
  }

  #card-board[data-page="project"] #project-activity table.activity-log .log-col-action {
    width: 22%;
  }

  #card-board[data-page="project"] #project-activity table.activity-log .log-col-notes {
    width: 20%;
  }

  #card-board[data-page="property"] #project-activity .activity-pick > table.activity-log {
    table-layout: fixed;
    width: 100%;
    min-width: 61.5rem;
    max-width: none;
  }

  #card-board[data-page="property"] #project-activity table.activity-log .log-col-date {
    width: 15.45%;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    text-overflow: clip;
  }

  #card-board[data-page="property"] #project-activity table.activity-log .log-col-property {
    width: 16.26%;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    text-overflow: clip;
  }

  #card-board[data-page="property"] #project-activity table.activity-log .log-col-user {
    width: 13.01%;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    text-overflow: clip;
  }

  #card-board[data-page="property"] #project-activity table.activity-log .log-col-action {
    width: 22.76%;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    text-overflow: clip;
  }

  #card-board[data-page="property"] #project-activity table.activity-log .log-col-notes {
    width: 32.52%;
    max-width: none;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    text-overflow: clip;
  }
}

/* Issue #237. Columns are Date, Property, User, Action, Notes.
   The date is "DD/MM/YYYY at HH:MM": the date stays on the first line
   and "at HH:MM" wraps under it. User and Property wrap on spaces, not
   letter by letter. Notes keep the remaining width and wrap in full. */
.activity-log:not(.activity-log-full) .log-col-date {
  width: 24%;
}

.activity-log:not(.activity-log-full) .log-col-property {
  width: 18%;
}

.activity-log:not(.activity-log-full) .log-col-user {
  width: 16%;
}

.activity-log:not(.activity-log-full) .log-col-action {
  width: 18%;
}

.activity-log:not(.activity-log-full) .log-col-notes {
  width: 24%;
  max-width: none;
}

.activity-log th,
.activity-log td {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: top;
  text-indent: 0;
}

.activity-log th.log-col-date,
.activity-log td.log-col-date,
.activity-log th.log-col-property,
.activity-log td.log-col-property,
.activity-log th.log-col-user,
.activity-log td.log-col-user,
.activity-log th.log-col-action,
.activity-log td.log-col-action,
.activity-log th.log-col-notes,
.activity-log td.log-col-notes {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
  word-break: normal;
}

.activity-log td.log-col-notes .preserve {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.activity-log td.log-col-property a {
  display: inline;
  white-space: normal;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.letter-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

@media (max-width: 800px) {
  .activity-log:not(.activity-log-full) .log-col-date {
    width: 28%;
  }

  .activity-log:not(.activity-log-full) .log-col-property {
    width: 18%;
  }

  .activity-log:not(.activity-log-full) .log-col-user {
    width: 16%;
  }

  .activity-log:not(.activity-log-full) .log-col-action {
    width: 16%;
  }

  .activity-log:not(.activity-log-full) .log-col-notes {
    width: 22%;
    max-width: none;
  }
}

@media (min-width: 801px) and (max-width: 1350px) {
  .activity-log:not(.activity-log-full) .log-col-date {
    width: 26%;
  }

  .activity-log:not(.activity-log-full) .log-col-property {
    width: 18%;
  }

  .activity-log:not(.activity-log-full) .log-col-user {
    width: 16%;
  }

  .activity-log:not(.activity-log-full) .log-col-action {
    width: 16%;
  }

  .activity-log:not(.activity-log-full) .log-col-notes,
  .activity-log-card .log-col-notes {
    width: 24%;
    max-width: none;
  }
}

/* Issue #288 revision. The spare width that sat in Action is split across
   Property, Postcode, User and Action so a long address stays on one line.
   Project history uses the same widths. The extra .activity-log class on
   history beats the card share rules, which are
   .activity-log:not(.activity-log-full). Other activity tables keep the
   card widths. */
#project-activity .activity-log .log-col-date,
.activity-log.activity-log-history .log-col-date {
  width: 9.5rem;
  white-space: nowrap;
}

#project-activity .activity-log .log-col-property,
.activity-log.activity-log-history .log-col-property {
  width: 13rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#project-activity .activity-log .log-col-postcode,
.activity-log.activity-log-history .log-col-postcode {
  width: 6.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#project-activity .activity-log .log-col-user,
.activity-log.activity-log-history .log-col-user {
  width: 8.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#project-activity .activity-log .log-col-action,
.activity-log.activity-log-history .log-col-action {
  width: 14.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#project-activity .activity-log .log-col-notes,
.activity-log.activity-log-history .log-col-notes {
  width: auto;
  max-width: none;
}

#project-activity .activity-log td.log-col-property a,
.activity-log.activity-log-history td.log-col-property a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#project-activity .activity-log td.log-col-notes .activity-inline-note,
.activity-log.activity-log-history td.log-col-notes .activity-inline-note {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#project-activity .activity-log tbody tr:hover td,
#project-activity .activity-log tbody tr:focus-within td {
  background: #f4f7f8;
}

.activity-log-history tbody tr:hover td {
  background: #f4f7f8;
}

.activity-log-history tbody tr:focus-within td {
  background: #f4f7f8;
}

/* Full-text pop-up: a .cell-tip element (added by the script in base.html)
   floats beside the hovered/focused cell. It is purely additive - the
   original cell text stays visible and in place, and the row height
   never changes. Without script, the title attribute is the fallback. */
.activity-log td,
.audit-log td {
  position: relative;
}

.cell-tip {
  position: fixed;
  z-index: 200;
  max-width: min(24rem, 85vw);
  padding: 0.45rem 0.6rem;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
  background: var(--navy);
  color: #FFFFFF;
  border-radius: 0.45rem;
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.25);
  pointer-events: none;
}

.log-when span {
  display: block;
}

.log-note-row td {
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  padding-top: 0;
}

.plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.open-task,
.letter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.open-task-title {
  font-weight: 500;
}

.appt-when {
  margin-top: 0;
}

.appt-when span {
  display: block;
}

#card-board[data-page="project"] {
  position: relative;
  /* Visible gap from an open card's title text to the first row's text.
     Details is the reference (Issue #280 revision, 23/10/2026): the open
     summary's 0.45rem padding-bottom, the body's 0.25rem padding-top, and
     the 0.7rem padding on the Client Name row. Every card uses this one
     value. A closed card does not: its summary padding stays 1.15rem. */
  --project-card-title-gap: 1.4rem;
}

/* Issue #280. Card titles (.fold-title) are 20px, weight 700 and #70BD95
   on every page. The gap under a project-page card title stays here.

   One shared rule gives the first child of .fold-body the part of
   --project-card-title-gap that the open summary and the body padding do
   not already provide (1.4rem - 0.45rem - 0.25rem = 0.7rem). A first row
   that already has top padding takes a smaller margin:
   calc(var(--project-card-title-gap) - 0.45rem - 0.25rem - <that padding>).
   A paragraph, a plain list, the outcomes grid and an edit form have no
   top padding of their own, so they keep the shared margin. Later rows
   keep their own margins. */
#card-board[data-page="project"] .card.fold[open] > summary {
  padding-bottom: 0.45rem;
}

#card-board[data-page="project"] .card.fold > .fold-body > :first-child {
  margin-top: calc(var(--project-card-title-gap) - 0.45rem - 0.25rem);
}

/* Client Name, and the same list on Key Dates: the dt already has 0.7rem
   of top padding. */
#card-board[data-page="project"] .card.fold > .fold-body > dl.pairs:first-child {
  margin-top: calc(var(--project-card-title-gap) - 0.45rem - 0.25rem - 0.7rem);
}

/* Activity's first row is the table header. .property-log th pads the
   header by 0.15rem, so the table makes up the rest. On the project
   card the table sits in .activity-pick, which is the first child and
   carries that same smaller margin. The header padding is unchanged. */
#card-board[data-page="project"] .card.fold > .fold-body > table.property-log:first-child {
  margin-top: calc(var(--project-card-title-gap) - 0.45rem - 0.25rem - 0.15rem);
}

#card-board[data-page="project"] .card.fold > .fold-body > .activity-pick:first-child {
  margin-top: calc(var(--project-card-title-gap) - 0.45rem - 0.25rem - 0.15rem);
  padding-top: 0;
}

/* Import's first row is the table header when the card has entries.
   .property-log th pads the header by 0.15rem, so .import-pick makes up
   the rest. An empty card starts with the "No previous imports." paragraph,
   which uses the shared first-child margin. */
#card-board[data-page="project"] .card.fold > .fold-body > .import-pick:first-child {
  margin-top: calc(var(--project-card-title-gap) - 0.45rem - 0.25rem - 0.15rem);
  padding-top: 0;
}

/* Properties (Issue #294). The hint is gone, so .property-filter is the
   first child. It adds no margin. The header padding makes the gap from
   the title up to --project-card-title-gap. */
#card-board[data-page="project"] .card.fold > .fold-body > .property-filter:first-child {
  margin-top: 0;
}

#card-board[data-page="project"] .card.fold > .fold-body > .property-filter:first-child table[data-filter-table].property-table th {
  padding-top: calc(var(--project-card-title-gap) - 0.45rem - 0.25rem);
}

/* The form, as the first child, already carries the shared margin. The
   first heading, hint or field inside it must not add another gap. A
   field's label has no top padding, and .field's own top margin is 0. */
#card-board[data-page="project"] .card.fold > .fold-body > :is(form, .stack-form):first-child > :is(h3, p.hint):first-of-type,
#card-board[data-page="project"] .card.fold > .fold-body > :is(form, .stack-form):first-child > .field:first-of-type {
  margin-top: 0;
}

/* Contact Details. Each primary block is a section, and the global
   section top margin is 2.5rem. That margin would sit above Client
   Primary Contact, so it is cleared here. The h3 keeps margin-top: 0
   (.contact-primary-columns h3): in view mode the columns are the first
   child and carry the shared margin; in edit mode the form does.
   When the two blocks stack, the 2.5rem goes back on the second section
   only, so the space between Client and Equans stays as it was. Side by
   side, both sections stay flush with each other. Two tracks need
   19rem + 19rem + the 1.5rem column gap. */
#card-board[data-page="project"] .contact-primary-columns {
  container-type: inline-size;
}

#card-board[data-page="project"] .contact-primary-columns > section {
  margin-top: 0;
}

@container (max-width: 39.49rem) {
  #card-board[data-page="project"] .contact-primary-columns > section + section {
    margin-top: 2.5rem;
  }
}

#card-board.drop-full-start::before,
#card-board.drop-full-end::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--navy);
  z-index: 3;
  pointer-events: none;
}

#card-board.drop-full-start::before {
  top: 0;
}

#card-board.drop-full-end::after {
  bottom: 0;
}

@media (min-width: 1200px) {
  .record-fit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 1.25rem;
    row-gap: 0;
  }

  /* Properties and Activity each keep a full-width row and cannot move
     into a column. The top row sits above the columns and the bottom row
     sits under them. data-full="start" still lifts the bottom row above
     the columns for an older saved place. A narrow page follows the board
     order. An empty top row is not a track, so the columns stay on row 1
     until a card is actually there. */
  #card-board[data-page="project"] {
    row-gap: 0.5rem;
  }

  #card-board[data-page="project"] > .card-row,
  #card-board[data-page="project"] details.card[data-span="full"] {
    grid-column: 1 / -1;
  }

  #card-board[data-page="project"] > .card-row.card-row-start {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #card-board[data-page="project"] > [data-col="left"] {
    grid-column: 1;
    grid-row: 2;
  }

  #card-board[data-page="project"] > [data-col="right"] {
    grid-column: 2;
    grid-row: 2;
  }

  #card-board[data-page="project"] > .card-row:not(.card-row-start) {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  #card-board[data-page="project"]:not([data-full="start"]):not(:has(> .card-row.card-row-start > [data-card])) > [data-col="left"],
  #card-board[data-page="project"]:not([data-full="start"]):not(:has(> .card-row.card-row-start > [data-card])) > [data-col="right"] {
    grid-row: 1;
  }

  #card-board[data-page="project"]:not([data-full="start"]):not(:has(> .card-row.card-row-start > [data-card])) > .card-row:not(.card-row-start) {
    grid-row: 2;
  }

  #card-board[data-page="project"][data-full="start"] > [data-col="left"],
  #card-board[data-page="project"][data-full="start"] > [data-col="right"] {
    grid-row: 2;
  }

  #card-board[data-page="project"][data-full="start"] > .card-row {
    grid-row: 1;
  }
}

/* Projects list (Issue #80). Cards stay in list order. The grid fills two
   equal columns from 900px, and one column below that. A saved left/right
   placement cannot stack them into one column. */
#card-board[data-page="projects"] {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0.5rem;
}

#card-board[data-page="projects"] > .project-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  justify-self: stretch;
}

.project-card:not(.is-open) > .project-card-main {
  flex: 1 1 auto;
  grid-template-rows: 1fr auto;
}

#card-board[data-page="projects"] .project-card-main {
  cursor: inherit;
  touch-action: auto;
}

@media (min-width: 900px) {
  #card-board[data-page="projects"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 1.25rem;
    row-gap: 0.5rem;
  }
}

@media (max-width: 800px) {
  .app,
  .rail-collapse-input:checked ~ .app {
    flex-direction: column;
  }

  .mobile-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: 3.5rem;
    padding: 0.7rem 1.1rem;
    background: var(--navy);
    color: #FFFFFF;
  }

  .page-header {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }

  .menu-toggle,
  .menu-toggle:hover {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: transparent;
    color: #FFFFFF;
    border-radius: 999px;
  }

  .menu-toggle-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background: currentColor;
    -webkit-mask: var(--icon-menu) center / contain no-repeat;
    mask: var(--icon-menu) center / contain no-repeat;
  }

  .app.menu-open .menu-toggle-icon {
    -webkit-mask-image: var(--icon-close);
    mask-image: var(--icon-close);
  }

  .menu-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .rail,
  .rail-collapse-input:checked ~ .app .rail {
    position: fixed;
    top: 3.5rem;
    left: 0;
    bottom: 0;
    width: min(18rem, 88vw);
    height: auto;
    flex-basis: auto;
    transform: translateX(-110%);
    z-index: 40;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.16s ease;
  }

  .app.menu-open .rail,
  .rail-collapse-input:checked ~ .app.menu-open .rail {
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }

  .app.menu-open .menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(0, 36, 57, 0.45);
  }

  .rail-collapse,
  .rail-collapse-input:checked ~ .app .rail-collapse {
    display: none;
  }

  .rail nav,
  .rail-collapse-input:checked ~ .app .rail nav {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .rail-collapse-input:checked ~ .app .nav-label,
  .rail-collapse-input:checked ~ .app .rail-search-form {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
  }

  .rail-collapse-input:checked ~ .app .rail-foot {
    position: static;
    width: auto;
    height: auto;
    margin-top: auto;
    padding: 1.15rem 0.45rem 0.2rem;
    overflow: visible;
    clip: auto;
  }

  .rail-collapse-input:checked ~ .app .rail-search-form {
    display: flex;
    padding: 0.15rem 0.85rem 0.85rem;
  }

  .rail-collapse-input:checked ~ .app .nav-item {
    justify-content: flex-start;
    gap: 0.85rem;
    padding: 0.8rem 0.85rem;
  }

  .rail-inner {
    min-height: 100%;
  }

  .kanban,
  .kanban-projects {
    grid-template-columns: 1fr;
  }

  .rail-foot {
    margin-top: 1rem;
  }

  main,
  .site-footer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  h1 {
    font-size: 2.15rem;
  }
}

@media (max-width: 800px) {
  /* Card header pair: same top/right inset and centre line as on desktop. */
  .fold > summary:has(.card-expand) {
    align-items: center;
    padding-right: 1.15rem;
  }

  .fold > summary .card-set-aside,
  .fold > summary .card-expand,
  .project-card-main .card-set-aside,
  .project-card-main .card-expand {
    align-self: center;
    flex: 0 0 auto;
  }

  button.card-expand::before,
  button.card-set-aside::before {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    max-height: 1.125rem;
  }
}

@media (max-width: 720px) {
  .property-table-wrap,
  main > .table-wrap {
    overflow-x: auto;
    box-sizing: border-box;
  }

  /* Issue #340. Pairs with overflow-x: auto on the same wrappers above.
     Properties tables already stick at every width (Issue #342).
     #projects-table-wrap stays static: its scrollport is .projects-table-pick. */
  .property-table-wrap::after,
  main > .table-wrap::after {
    position: sticky;
    left: 0;
    bottom: 0;
  }

  .calendar {
    min-width: 0;
  }

  .calendar th,
  .calendar td {
    padding: 0.25rem;
    height: auto;
    min-height: 3.25rem;
  }

  .weekday-long {
    display: none;
  }

  .weekday-short {
    display: inline;
  }

  .booking-detail {
    display: none;
  }

  .scroll-hint {
    display: block;
  }
}

@media (max-width: 640px) {
  .pairs {
    grid-template-columns: 1fr;
  }

  .pairs dt {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .pairs dd {
    padding-top: 0.15rem;
  }
}

html:has(dialog[open]:modal) {
  overflow: hidden;
}

dialog.popup {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  max-width: 44rem;
  width: calc(100% - 2rem);
  max-height: calc(100vh - 2rem);
  overflow: auto;
}

dialog#rdsap-review[open]:not(:modal) {
  position: static;
  margin: 1rem 0 0;
}

dialog.popup::backdrop {
  background: rgba(0, 36, 57, 0.45);
}

.page-action,
.popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.page-action {
  margin: 0 0 1.25rem;
}

.popup-actions {
  margin-top: 1rem;
}

.popup-actions[hidden],
.activity-entry-edit[hidden],
.history-entry-edit[hidden] {
  display: none;
}

.create-columns {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1.5rem;
  align-items: start;
}

dialog.popup-create .card {
  padding: 1.35rem 1.5rem 1.2rem;
}

dialog.popup-create h2 {
  margin-bottom: 0.7rem;
}

dialog.popup .card > h2 {
  color: #70BD95;
}

/* Issue #349. Column buttons in the Properties Views pop-up. Pressed
   means the column is shown. A hidden column is the outline button.
   The hidden attribute on the table cells is display:none as well, so a
   table rule cannot leave a hidden column on screen. */
.property-views-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

.property-views-columns button,
.property-views-columns button:hover {
  margin: 0;
}

.property-views-columns button[aria-pressed="false"],
.property-views-columns button[aria-pressed="false"]:hover {
  background: #FFFFFF;
  color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--navy);
}

.property-table th[hidden],
.property-table td[hidden] {
  display: none;
}

dialog.popup-create .field {
  margin-bottom: 0.7rem;
}

dialog.popup-create .status-fixed {
  margin: 0;
}

@media (min-width: 801px) {
  html {
    scrollbar-gutter: stable;
  }

  dialog.popup-create {
    max-width: 72rem;
  }

  .create-columns {
    grid-template-columns: 1fr 1fr;
  }
}

/* Issue #417. Show More and Show Less change only the height. Every
   table scroll box keeps the room for its vertical scroll bar, so the
   table and the card keep their width when the bar comes or goes. */
main > .table-wrap.property-table-wrap,
.property-table-wrap,
.property-pick,
.activity-pick,
[data-more-box]:not(.fold-body) {
  scrollbar-gutter: stable;
}

dialog.popup-import {
  max-width: 76rem;
}

dialog.popup-import.is-map {
  overflow: hidden;
}

dialog.popup-import.is-map .card {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
  overflow: hidden;
}

dialog.popup-import.is-map .import-map-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

dialog.popup-import.is-map .import-map-scroll {
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
}

/* Issue #340. Pairs with overflow: auto on the map step above. The dialog
   is not a scroll container until it has .is-map. */
dialog.popup-import.is-map .import-map-scroll::after {
  position: sticky;
  left: 0;
  bottom: 0;
}

dialog.popup-import.is-map .popup-actions {
  flex: 0 0 auto;
}

.import-scroll {
  max-height: 60vh;
  overflow: auto;
}

/* Issue #318. The import page keeps wide tables inside the card. */
.import-page,
.import-page .import-flow,
.import-page .import-flow > .card,
main:has(.import-page) {
  min-width: 0;
  max-width: 100%;
}

/* Issue #340. Pairs with overflow: auto on .import-scroll above. */
.import-scroll::after {
  position: sticky;
  left: 0;
  bottom: 0;
}

.import-table input,
.import-table select {
  width: 100%;
  max-width: 14rem;
}

.import-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}

.import-filters button,
.import-filters button:hover {
  margin: 0;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--navy);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--navy);
}

.import-filters button[aria-pressed="true"],
.import-filters button[aria-pressed="true"]:hover {
  background: var(--navy);
  color: #FFFFFF;
}

.import-table tr[hidden] {
  display: none;
}

/* The import dialog and the upload page still list previous imports. */
.previous-imports,
.staged-imports {
  margin: 0 0 0.5rem;
  padding-left: 1.2rem;
}

/* Issue #293. The Import card lists every entry in one table. The scroll
   window matches the Activity card. A row opens its pop-up. */
.import-pick {
  margin: 0;
  padding: 0;
  max-height: 28rem;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
}

/* Issue #340. Pairs with overflow-x and overflow-y auto on .import-pick above. */
.import-pick::after {
  position: sticky;
  left: 0;
  bottom: 0;
}

.import-card-table tbody tr.import-entry-row:hover td,
.import-card-table tbody tr.import-entry-row:focus-within td {
  background: #f4f7f8;
}

.import-card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0 0;
}

.import-card-actions form,
.import-entry-dialog .popup-actions form {
  margin: 0;
}

.import-table .import-address {
  white-space: nowrap;
  min-width: 16rem;
}

.import-table .import-address input {
  width: 16rem;
  min-width: 16rem;
  max-width: none;
}

.import-optional > summary {
  padding: 0.2rem 0;
  gap: 0.5rem;
}

.import-optional .fold-title {
  font-size: 1rem;
}

.import-table input.missing {
  outline: 2px solid var(--overdue);
}

.import-choice {
  margin: 0.35rem 0 0;
  border: 0;
  padding: 0;
}

.import-success {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: #e7f5ee;
  border: 1px solid var(--mark);
}

.import-success p {
  margin: 0 0 0.5rem;
}

.import-clash-compare {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 0.75rem;
}

.import-clash-compare th,
.import-clash-compare td {
  text-align: left;
  vertical-align: top;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--line);
}

.import-clash-compare .import-existing {
  background: #e5f4ec;
}

.import-clash-compare .import-new {
  background: #e7eef6;
}

.project-record > .card + .card {
  margin-top: 1.25rem;
}

.kanban-projects {
  grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
  align-items: stretch;
}

.project-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.project-card-main {
  --status-steps-size: calc(3 * 1.6rem + 2 * 0.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "client steps steps steps"
    "heading heading aside expand";
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.35rem;
}

.project-card-client,
.project-card-name,
.project-card-status {
  min-width: 0;
}

.project-card-client,
.project-card-name,
.project-card-status {
  margin: 0;
}

/* Issue #279. Same size as the detail rows. Not the step-box label. */
.project-card-name {
  font-size: inherit;
  font-weight: 700;
}

.project-card-name {
  color: var(--navy);
}

/* Issue #279 revision (23 Oct 2026, 4:05pm). Company name only.
   :root does not set a font-size (body is 16px), so this is 20px. */
.project-card-client {
  grid-area: client;
  align-self: start;
  max-width: 14rem;
  padding-right: 1.5rem;
  font-size: 20px;
  font-weight: 700;
  color: #70BD95;
}

.project-card-heading {
  display: contents;
}

.project-card-heading .project-card-name {
  grid-area: heading;
  min-width: 0;
  overflow-wrap: anywhere;
}

.project-card-main > .card-set-aside {
  grid-area: aside;
}

.project-card-main > .card-expand {
  grid-area: expand;
}

/* Issue #278 revision. The right inset is the gap from the 2rem expand
   button's edge to its 1.125rem icon, so the boxes line up with that icon. */
.project-card-main .status-steps {
  grid-area: steps;
  align-self: start;
  justify-self: end;
  margin-right: calc((2rem - 1.125rem) / 2);
}

/* Project card status steps (Issue #278). Display only. */
.status-steps {
  display: grid;
  grid-template-columns: repeat(3, 1.6rem);
  column-gap: 0.25rem;
  row-gap: 0.2rem;
  flex: none;
  margin-left: auto;
  width: var(--status-steps-size);
}

.status-step {
  height: 0.7rem;
  border: 1px solid var(--muted);
  border-radius: 0.2rem;
  background: var(--line);
}

.status-step-filled {
  background: var(--mark);
  border-color: var(--navy);
}

/* On Hold keeps the filled count and colours every box (Issue #302). */
.status-step.status-step-on-hold {
  border-color: var(--navy);
}

.status-step-filled.status-step-on-hold {
  background: #FF0080;
  border-color: var(--navy);
}

/* Omitted follows the On Hold pattern in red (Issue #347). */
.status-step.status-step-omitted {
  border-color: var(--navy);
}

.status-step-filled.status-step-omitted {
  background: var(--status-omitted);
  border-color: var(--navy);
}

.status-steps .project-card-status {
  grid-column: 1 / -1;
  min-width: 0;
  color: var(--navy);
  font-size: 0.7rem;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Project page title row (Issue #284). Larger than the card boxes above.
   Same fill and outline: the card .status-step rules are not overridden.
   margin-top matches the row-gap plus status label so the boxes sit in
   line with the h1. margin-right matches the card expand/collapse icon.
   Display only. */
.record-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: 0.75rem;
}

.record-title-row h1 {
  margin: 0;
  min-width: 0;
  flex: 1 1 12rem;
  overflow-wrap: anywhere;
}

.record-head .status-steps {
  --status-steps-size: calc(3 * 2.6rem + 2 * 0.4rem);
  grid-template-columns: repeat(3, 2.6rem);
  column-gap: 0.4rem;
  row-gap: 0.35rem;
  margin-top: calc(0.35rem + 0.95rem * 1.2);
  margin-left: auto;
  margin-right: calc(1.15rem + (2rem - 1.125rem) / 2);
  max-width: 100%;
}

.record-head .status-step {
  height: 1.15rem;
}

.record-head .status-steps .project-card-status {
  font-size: 0.95rem;
}

@media (max-width: 40rem) {
  .record-title-row h1 {
    flex-basis: 100%;
  }

  .record-head .status-steps {
    margin-top: 0;
    margin-left: auto;
    margin-right: calc(1.15rem + (2rem - 1.125rem) / 2);
    max-width: 100%;
  }
}

.project-card-more {
  display: none;
  margin-top: 0.85rem;
}

.project-card.is-open .project-card-more {
  display: block;
}

.project-card-main .card-expand {
  margin-left: auto;
}

.project-card-main:has(.card-hide) .card-hide {
  margin-left: auto;
}

.project-card-main:has(.card-hide) .card-expand {
  margin-left: 0;
}

.project-card-main:has(.card-set-aside) .card-set-aside {
  margin-left: auto;
}

.project-card-main:has(.card-set-aside) .card-expand {
  margin-left: 0;
}

.record-fit .project-card-main {
  touch-action: none;
}

.hidden-strip .is-parked .project-card-more {
  display: none;
}

.kanban-projects .kanban-list {
  align-items: stretch;
}

.test-data-banner {
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  background: #fff4d6;
  color: var(--ink);
  border: 1px solid #e4d7a8;
}

.assessments-panel,
.settings-block {
  margin: 0 0 1.25rem;
  padding: 1.15rem 1.25rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
}

.assessments-panel h2,
.settings-block h2 {
  margin-top: 0;
}

.company-block {
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.assessment-age {
  display: inline-block;
  margin: 0.15rem 0;
  padding: 0.1rem 0.45rem;
}

.assessment-age-green {
  background: #d9ead3;
}

.assessment-age-amber {
  background: #fff2cc;
}

.assessment-age-red {
  background: #f4cccc;
}

.assessment-age-none {
  background: #eeeeee;
}

.warning {
  margin: 0.5rem 0;
  padding: 0.55rem 0.75rem;
  background: #fff2cc;
}

.checklist {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
}

.outcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
  row-gap: 0.75rem;
}

/* A fieldset's default min-inline-size is min-content, which overflows a grid column. */
fieldset.outcome-choice {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

fieldset.outcome-choice legend {
  font-weight: 500;
  margin: 0;
  padding: 0;
}

fieldset.outcome-choice .check-line {
  margin: 0;
  padding: 0;
}

/* Draw the circle and the inner dot. accent-color alone leaves a disabled
   radio on the browser colour in Chromium and Safari (Issue #292). */
fieldset.outcome-choice input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
  border: 2px solid var(--muted);
  border-radius: 50%;
  background: #FFFFFF;
  accent-color: #70BD95;
  display: inline-grid;
  place-content: center;
  flex: 0 0 1rem;
}

fieldset.outcome-choice input[type="radio"]:disabled {
  cursor: default;
  opacity: 1;
}

fieldset.outcome-choice input[type="radio"]::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: transparent;
}

fieldset.outcome-choice input[type="radio"]:checked,
fieldset.outcome-choice input[type="radio"]:disabled:checked {
  border-color: #70BD95;
  background: #FFFFFF;
}

fieldset.outcome-choice input[type="radio"]:checked::before,
fieldset.outcome-choice input[type="radio"]:disabled:checked::before {
  background: #70BD95;
}

[data-card="outcomes"] .card-edit-row button:disabled,
[data-card="outcomes"] .card-edit-row button:disabled:hover {
  opacity: 0.45;
  cursor: default;
  background: var(--mark);
  color: var(--navy);
}

@media (max-width: 800px) {
  .outcome-grid {
    grid-template-columns: 1fr;
  }
}

.check-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0;
}

.inline-form {
  display: inline-block;
  margin: 0.5rem 0 1rem;
}

.pibi-record,
.installation-record {
  margin: 1.5rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.pibi-record .trace,
.installation-record .trace {
  color: var(--muted);
}

.kanban-projects .project-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.kanban-projects .project-card-main {
  align-items: center;
}

.kanban-projects .project-card-client {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kanban-projects .project-card-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-projects .project-card-main .card-set-aside,
.kanban-projects .project-card-main .card-expand {
  margin-left: 0;
}

.project-card .pairs {
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 1.25rem;
}

.project-card .pairs dd {
  overflow-wrap: break-word;
}

@media (max-width: 800px) {
  .kanban-projects {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail {
    transition: none;
  }
}

@media print {
  .rail,
  .rail-collapse-input,
  .mobile-bar,
  .menu-backdrop,
  .site-footer,
  form,
  dialog,
  .no-print {
    display: none;
  }

  .app {
    display: block;
  }

  body,
  .workspace {
    background: #FFFFFF;
  }

  .letter-sheet,
  .card,
  .project,
  .fold {
    filter: none;
    clip-path: none;
  }
}

/* Tap-to-call and tap-to-email links: keep numbers on one line and give a comfortable tap target. */
.contact-link {
  white-space: nowrap;
  display: inline-block;
  padding: 0.15rem 0;
}

/* Modelling record. Compact cards, no taller than their content. */
.modelling-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas: "results revision" "measures .";
  gap: 0.75rem;
  align-items: start;
}

.modelling-results { grid-area: results; }
.modelling-revision { grid-area: revision; }
.modelling-measures { grid-area: measures; }

.card.modelling-card {
  padding: 0.75rem 0.9rem 0.85rem;
  font-size: 0.875rem;
  height: auto;
  min-height: 0;
  align-self: start;
}

.card.modelling-card h2 {
  font-size: 1.05rem;
  margin: 0 0 0.45rem;
}

.card.modelling-card h3 {
  font-size: 0.95rem;
  margin: 0.7rem 0 0.35rem;
}

.card.modelling-card .field {
  margin: 0 0 0.45rem;
}

.card.modelling-card textarea {
  min-height: 3.5rem;
}

.card.modelling-card form > button[type="submit"] {
  display: inline-block;
  margin-left: 0;
}

.results-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: start;
}

.measure-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.measure-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 0.45rem 0;
}

.measure-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.measure-actions form > button[type="submit"] {
  display: inline-block;
  margin-left: 0;
}

@media (max-width: 800px) {
  .modelling-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "results"
      "revision"
      "measures";
  }
}

.design-phase {
  margin: 0 0 1.25rem;
}

.design-revision {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
}

.design-revision h3,
.design-phase h2 {
  margin: 0 0 0.45rem;
}

.design-measures,
.design-notes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.design-measures li,
.design-notes li {
  border-top: 1px solid var(--line);
  padding: 0.45rem 0;
}

.design-revision form > button[type="submit"] {
  display: inline-block;
  margin-left: 0;
}

.booking-label {
  font-weight: 700;
}

dialog.popup .omit-form {
  margin: 0;
}

.omit-bookings form,
#omit-reasons form {
  margin: 0 0 0.75rem;
}

.property-pick {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 28rem;
  overflow-x: auto;
  overflow-y: auto;
}

/* Issue #340. Pairs with overflow-x and overflow-y auto on .property-pick above.
   The project Properties card carries .property-table-wrap on this same
   element (Issue #342). Both bands are sticky. This is not a second box. */
.property-pick::after {
  position: sticky;
  left: 0;
  bottom: 0;
}

/* Issue #288. The project Activity log scrolls inside the card, the same
   28rem window as the Properties list. No extra padding, so the title gap
   stays the header's own 0.15rem plus the shared first-child margin.
   Issue #342. These boxes sit inside a card. Their own --sheet fill,
   attached locally, keeps Dark View card colour behind every row and
   behind the 12px band. The card's ::before is not that fill. */
.activity-pick,
.property-pick,
.import-pick {
  background-color: var(--sheet);
  background-image: linear-gradient(var(--sheet), var(--sheet));
  background-repeat: no-repeat;
  background-attachment: local;
}

/* Issue #318. Same 28rem window on the import page. Its own rule, so the
   project card's .import-pick fill stays a separate selector. */
.import-page .import-scroll {
  max-height: 28rem;
  max-width: 100%;
  min-width: 0;
  overflow: auto;
  background-color: var(--sheet);
  background-image: linear-gradient(var(--sheet), var(--sheet));
  background-repeat: no-repeat;
  background-attachment: local;
}

.activity-pick {
  margin: 0;
  padding: 0;
  max-height: 28rem;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
}

/* Show More doubles the project Properties, Activity and History scroll
   boxes to about 40 rows. The Issue #322 landscape cap still applies
   on phones in landscape. */
.activity-pick.table-box-doubled,
.property-pick.table-box-doubled {
  max-height: 56rem;
}

/* Issue #220. Show More doubles a data-more-box. The list page uses the
   :has() rule, which is more specific than this one. The phone
   landscape cap further down still wins (Issue #417). */
[data-more-box].table-box-doubled {
  max-height: 56rem;
}

/* Issue #340. Pairs with overflow-x and overflow-y auto on .activity-pick above. */
.activity-pick::after {
  position: sticky;
  left: 0;
  bottom: 0;
}

.key-date-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.key-date-line .field {
  margin: 0;
  flex: 1 1 10rem;
  min-width: 0;
}

.key-date-line .field input,
.key-date-line .field select {
  width: 100%;
  max-width: none;
}

.key-date-line .page-action {
  margin: 0;
  flex: 0 0 auto;
}

/* Issue #281. Client Primary Contact and Equans Primary Contact share one
   row once this grid is about 40rem wide (19rem + 19rem + the 1.5rem gap).
   auto-fit drops the empty track, so two sections never become three.
   Below that width, and on a narrow screen, min(100%, 19rem) is one column
   and the Client block stays above Equans. The label column is max-content
   so the default 14rem pairs column cannot force a horizontal scroll. */
.contact-primary-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  column-gap: 1.5rem;
  row-gap: 1.75rem;
  align-items: start;
  min-width: 0;
}

.contact-primary-columns > :is(section, .contact-edit-column) {
  min-width: 0;
}

.contact-primary-columns h3 {
  margin-top: 0;
}

.contact-primary-columns .pairs,
.other-contact-list .pairs {
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 0.75rem;
}

.contact-primary-columns .pairs dd,
.other-contact-list .pairs dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* .contact-link is nowrap, which would force a long email out of a narrow
   column. Wrapping stays inside these columns only. */
.contact-primary-columns .pairs dd .contact-link,
.other-contact-list .pairs dd .contact-link {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Other contacts sit inside Contact Details. The toggle is the same size as
   the other action buttons, and shares the Edit row. Issue #296: that
   summary is right-aligned, matching the action buttons on the other cards.
   A saved layout may still name the old card; that id is not on the page,
   so the board leaves it alone. */
.other-contacts-panel {
  margin: 0;
  min-width: 0;
}

.other-contacts-panel > summary.card-edit-row {
  width: 100%;
  justify-content: flex-end;
  padding-left: 0;
  padding-right: 0;
  list-style: none;
  touch-action: manipulation;
  font: inherit;
}

.other-contacts-panel > summary.card-edit-row::-webkit-details-marker,
.other-contacts-panel > summary.card-edit-row::marker {
  display: none;
  content: "";
}

.other-contacts-panel > summary .other-contacts-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  height: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  margin: 0;
  padding: 0 0.7rem;
  background: var(--mark);
  color: var(--navy);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.other-contacts-panel > summary .other-contacts-toggle:hover {
  background: #62b086;
  color: var(--navy);
}

.other-contacts-panel .when-open,
.other-contacts-panel[open] .when-closed {
  display: none;
}

.other-contacts-panel[open] .when-open {
  display: inline;
}

/* The global .when-closed rule would hide this label and leave an empty pill.
   The .app rules also beat the collapsed-rail .when-open / .when-closed rules,
   so the open panel still reads "Hide other contacts". */
.other-contacts-panel:not([open]) > summary .when-closed {
  display: inline;
}

.app .other-contacts-panel:not([open]) > summary .when-closed,
.app .other-contacts-panel[open] > summary .when-open {
  display: inline;
}

.app .other-contacts-panel[open] > summary .when-closed,
.app .other-contacts-panel:not([open]) > summary .when-open {
  display: none;
}

.other-contacts-body {
  min-width: 0;
  margin-top: 0;
}

/* Issue #236: the top margin matches the card's 1.5rem bottom padding, so
   the open row has the same space above it as below it.
   Issue #297: Add Contact and Edit are both right-aligned on that row.
   A very narrow window stacks the two buttons, Edit still last. */
.other-contacts-body > .page-action {
  justify-content: flex-end;
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.other-contacts-body > .page-action.other-contacts-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  align-items: center;
}

.other-contacts-body > .page-action.other-contacts-actions > :last-child {
  margin-left: 0;
}

@media (max-width: 30rem) {
  .other-contacts-body > .page-action.other-contacts-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .other-contacts-body > .page-action.other-contacts-actions > :last-child {
    margin-left: 0;
  }
}

/* The read-only rows use .pairs, so the label, value and line match the
   primary contacts. Issue #281: people in one group share the row. The
   row gap (0.75rem) separates them. auto-fit collapses an empty track, so
   a group with one person stays one full-width block, with no side rule. */
.other-contact-list > .pairs {
  min-width: 0;
}

.other-contact-edit + .other-contact-edit {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

dialog.other-contact-dialog .other-contact-edit h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

/* Issue #282: Edit contacts opens on a table. The edit blocks stay in the
   dialog. JS adds js-contacts-table and shows one block at a time. Without
   that class the table and every edit block stay available.
   Issue #282 revision: this dialog is wider than the shared 44rem popup so
   each title and entry stays on one line. The list scrolls inside
   .edit-contacts-scroll when the window is narrower. The page does not. */
dialog.popup.other-contact-dialog {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Issue #283: the Primary RC contact pop-up uses this same width. */
dialog.popup#primary-rc-contact,
dialog.popup#edit-other-contacts {
  width: min(96vw, 64rem);
  max-width: min(96vw, 64rem);
}

/* Issue #292: wide enough for the two-column intended-outcomes grid. */
dialog.popup.outcomes-dialog {
  width: min(96vw, 52rem);
  max-width: min(96vw, 52rem);
}

/* Issue #290: wide enough for Type, Phase, Date, Confirm and Cancel. */
dialog.popup.key-dates-dialog {
  width: min(96vw, 48rem);
  max-width: min(96vw, 48rem);
}

/* Issue #291: wide enough for Measure N., the name, and Remove. */
dialog.popup.measures-dialog {
  width: min(96vw, 48rem);
  max-width: min(96vw, 48rem);
}

/* Issue #295: Show More sits at the bottom right of the History card.
   The project history entry pop-up uses the Activity Entry width. */
.history-more-row {
  justify-content: flex-end;
}

dialog.popup.history-entry-dialog {
  width: min(96vw, 48rem);
  max-width: min(96vw, 48rem);
}

/* Issue #288: the project Activity entry pop-up. Letters and long notes
   scroll inside the notes box. */
dialog.popup.activity-entry-dialog {
  width: min(96vw, 48rem);
  max-width: min(96vw, 48rem);
}

.activity-entry-notes-scroll {
  max-height: 18rem;
  overflow-y: auto;
}

dialog.popup.other-contact-dialog .card {
  min-width: 0;
  max-width: 100%;
  padding: 1.25rem 1.5rem 1.2rem;
}

dialog.other-contact-dialog .card > h2 {
  margin-bottom: 0.5rem;
}

.edit-contacts-scroll {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  overscroll-behavior-x: contain;
}

/* Issue #340. Pairs with overflow-x: auto on .edit-contacts-scroll above. */
.edit-contacts-scroll::after {
  position: sticky;
  left: 0;
  bottom: 0;
}

.primary-rc-table,
.edit-contacts-table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
}

.primary-rc-table th,
.primary-rc-table td,
.edit-contacts-table th,
.edit-contacts-table td {
  border: 1px solid var(--line);
  padding: 0.3rem 0.55rem;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.primary-rc-table th,
.edit-contacts-table th {
  color: var(--navy);
  font-weight: 700;
  background: var(--paper);
}

.edit-contacts-table .primary-marker {
  font-size: 0.85em;
}

.edit-contacts-table tbody tr:hover td,
.edit-contacts-table tbody tr:focus-within td {
  background: #f4f7f8;
}

button.link-button,
button.link-button:hover,
button.link-button:focus,
button.link-button:focus-visible,
body:has(#card-board[data-page="project"]) main button.link-button,
body:has(#card-board[data-page="project"]) main button.link-button:hover,
body:has(#card-board[data-page="project"]) main button.link-button:focus,
body:has(#card-board[data-page="project"]) main button.link-button:focus-visible,
button.primary-rc-trigger,
button.primary-rc-trigger:hover,
button.primary-rc-trigger:focus,
button.primary-rc-trigger:focus-visible {
  height: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  width: auto;
  justify-content: flex-start;
  padding: 0;
  background: transparent;
  color: inherit;
  border-radius: 0;
  font-weight: inherit;
  text-align: left;
  text-decoration: none;
}

.edit-contacts-table button.link-button:focus,
.edit-contacts-table button.link-button:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

button.primary-rc-trigger:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

.other-contact-edit > .contacts-back {
  margin: 0 0 0.4rem;
}

dialog.other-contact-dialog.js-contacts-table .other-contact-edit {
  display: none;
}

dialog.other-contact-dialog.js-contacts-table.is-editing .edit-contacts-scroll {
  display: none;
}

dialog.other-contact-dialog.js-contacts-table.is-editing .other-contact-edit.is-current {
  display: block;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Issue #281: the list Cancel sits under the table. Hide it while one
   contact is open, so Save and Cancel on that form are the only actions. */
dialog.other-contact-dialog.js-contacts-table.is-editing > .card > .popup-actions {
  display: none;
}

/* Issue #281: less vertical space between the contact edit fields. */
dialog.other-contact-dialog .stack-form {
  margin-top: 0.35rem;
}

dialog.other-contact-dialog .field {
  margin: 0 0 0.55rem;
}

dialog.other-contact-dialog .field label {
  margin-bottom: 0.2rem;
}

dialog.other-contact-dialog .hint {
  margin: 0.35rem 0 0;
}

dialog.other-contact-dialog .popup-actions {
  margin-top: 0.6rem;
}

.other-contact-group {
  min-width: 0;
}

.other-contact-group > summary.other-contact-group-summary {
  width: fit-content;
  max-width: 100%;
  margin: 0.15rem 0;
  padding: 0.2rem 0;
  color: var(--navy);
  font-weight: 500;
  touch-action: manipulation;
}

.other-contact-group-label {
  color: var(--navy);
}

.other-contact-group .other-contact-list {
  margin-left: 1.15rem;
}

/* Up to 3 columns. 16rem minimum: 1 column below about 33rem (16+16+1.25),
   2 from about 33rem, and 3 from about 51rem (16*3 + 1.25*2 = 50.5rem).
   Above that, the minimum is one third of the list after the two column
   gaps, so a wide card does not open a fourth column. */
.other-contact-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(16rem, calc((100% - 2.5rem) / 3))), 1fr));
  gap: 0.75rem 1.25rem;
  align-items: start;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.other-contact-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  min-width: 0;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.other-contact-lines {
  flex: 1 1 12rem;
  min-width: 0;
}

.other-contact-entry p {
  margin: 0;
}

.other-contact-name {
  color: var(--navy);
  font-weight: 500;
}

.other-contact-reach {
  margin-top: 0.15rem;
}

.other-contact-reach {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.9rem;
}

.other-contact-entry .contact-link {
  white-space: normal;
  overflow-wrap: anywhere;
}

.other-contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0;
  margin-left: auto;
}

.other-contact-actions form {
  display: inline-flex;
  margin: 0;
}

.other-contact-actions form > button[type="submit"] {
  width: auto;
  margin-left: 0;
}

.key-dates {
  list-style: none;
  margin: 0;
  padding: 0;
}

.key-dates li {
  display: flex;
  gap: 0.75rem;
  border-top: 1px solid var(--line);
  padding: 0.45rem 0;
}

.day-slots {
  width: 100%;
  border-collapse: collapse;
}

.day-slots th,
.day-slots td {
  border: 1px solid var(--line);
  padding: 0.4rem 0.65rem;
  text-align: left;
  vertical-align: top;
}

.day-slots th[scope="row"] {
  width: 6rem;
  font-weight: 500;
}

@media (max-width: 640px) {
  .key-date-line {
    flex-wrap: wrap;
  }
}

/* Project key dates: the phase number sits on the same line, and only for a phase type. */
.project-key-dates .field.key-date-phase {
  display: none;
  flex: 0 0 4.75rem;
  max-width: 4.75rem;
}

.project-key-dates.is-phase .field.key-date-phase,
.project-key-dates:has(.key-date-type option[value="Phase Start Date"]:checked) .field.key-date-phase,
.project-key-dates:has(.key-date-type option[value="Phase End Date"]:checked) .field.key-date-phase {
  display: block;
}

/* Issue #290. Confirm and Cancel in the Key Dates pop-up line up with the
   centre of the Type and Date boxes. The label is 1.5rem with 0.35rem under
   it, so a centred 2rem button needs 1.85rem of top margin. */
.project-key-dates {
  align-items: center;
}

.project-key-dates > .page-action {
  align-self: center;
  margin-top: 1.85rem;
}

/* One height for action buttons. Equans mark and navy stay on the button rule above. */
button,
a.button {
  box-sizing: border-box;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Project and Property pages: every button uses that same 2rem height,
   including Save, Edit and the card header controls. Vertical padding is
   cleared so the label fits inside the height. The role switcher is
   outside main, so Change Role is unchanged. */
body:has(#card-board[data-page="project"]) main :is(button, a.button),
body:has(#card-board[data-page="property"]) main :is(button, a.button),
body:has(#card-board[data-page="project"]) main :is(button, a.button):hover,
body:has(#card-board[data-page="property"]) main :is(button, a.button):hover {
  height: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
}

body:has(#card-board[data-page="project"]) main :is(button.card-expand, button.card-set-aside, button.table-full-title),
body:has(#card-board[data-page="property"]) main :is(button.card-expand, button.card-set-aside, button.table-full-title),
body:has(#card-board[data-page="project"]) main :is(button.card-expand, button.card-set-aside, button.table-full-title):hover,
body:has(#card-board[data-page="property"]) main :is(button.card-expand, button.card-set-aside, button.table-full-title):hover {
  width: 2rem;
}

/* Properties card (Issue #38): scrolling table, sticky header, Excel-style
   column pop-over. Buttons stay 2rem, Equans mark and navy. */
table[data-filter-table] {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

table[data-filter-table] th,
table[data-filter-table] td {
  text-align: left;
  vertical-align: middle;
  padding: 0.45rem 0.75rem 0.45rem 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

table[data-filter-table].property-table th,
table[data-filter-table].property-table td {
  padding: 1.35rem 1rem;
  vertical-align: middle;
}

table[data-filter-table].property-table td {
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  line-height: 1.35;
}

table[data-filter-table].property-table th {
  cursor: default;
  touch-action: auto;
}

/* Activity keeps the 0.15rem header padding that the project title gap
   measures. The general filter-table padding would open that gap. */
table[data-filter-table].property-log th,
table[data-filter-table].property-log td {
  padding: 0.15rem 0.35rem;
}

table[data-filter-table].property-log th:first-child,
table[data-filter-table].property-log td:first-child {
  padding-left: 0;
}

table[data-filter-table] thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #FFFFFF;
  color: var(--navy);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--navy);
}

table[data-filter-table] thead th.is-active {
  box-shadow: inset 0 -3px 0 var(--mark);
}

table[data-filter-table] tbody tr[hidden] {
  display: none !important;
}

table[data-filter-table] tbody tr.filter-open-row:hover td,
table[data-row-open] tbody tr.filter-open-row:hover td {
  background: #f4f7f8;
}

table[data-row-keys] tbody tr.filter-open-row:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: -3px;
}

table[data-row-keys] tbody tr.filter-open-row:focus-visible td,
table[data-row-keys] tbody tr.filter-open-row:focus-within td {
  background: #f4f7f8;
}

.filter-th {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.filter-col-label {
  color: var(--navy);
  font-weight: 700;
}

button.filter-col-button,
button.filter-col-button:hover,
button.filter-col-button.is-on,
button.filter-col-button.is-on:hover,
body:has(#card-board[data-page="project"]) main button.filter-col-button,
body:has(#card-board[data-page="project"]) main button.filter-col-button:hover,
body:has(#card-board[data-page="property"]) main button.filter-col-button,
body:has(#card-board[data-page="property"]) main button.filter-col-button:hover {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0.15rem;
  flex: 0 0 auto;
  margin-left: auto;
  background: transparent;
  color: var(--mark);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

button.filter-col-button:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

button.filter-col-button::before {
  content: "";
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -0.15rem;
}

button.filter-col-button.is-asc::before {
  transform: rotate(-135deg);
  margin-top: 0.15rem;
}

.filter-count {
  margin: 0.75rem 0 0;
  color: var(--muted);
}

.filter-count[hidden],
.filter-count a[hidden] {
  display: none;
}

.filter-popover {
  position: fixed;
  z-index: 30;
  box-sizing: border-box;
  width: 16.5rem;
  max-width: calc(100vw - 1rem);
  max-height: calc(100vh - 1rem);
  overflow: auto;
  padding: 0.75rem;
  background: #FFFFFF;
  color: var(--ink);
  border: 1px solid var(--navy);
  box-shadow: 0 10px 18px rgba(0, 36, 57, 0.18);
}

.filter-popover-sort {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

/* Sort A to Z and Sort Z to A are ordinary buttons: the shared 2rem
   height and padding on .filter-popover button, and only as wide as
   the label. They do not stretch across the pop-over. */
.filter-popover-sort button,
.filter-popover-sort button:hover {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  align-self: flex-start;
}

.filter-popover button,
.filter-popover button:hover {
  box-sizing: border-box;
  height: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  padding: 0 0.7rem;
  white-space: nowrap;
}

.filter-popover button[aria-pressed="true"],
.filter-popover button[aria-pressed="true"]:hover {
  background: var(--navy);
  color: #FFFFFF;
}

/* Activity correction request on an entry (Issue #152). */
.activity-correction {
  margin-top: 0.35rem;
  white-space: normal;
}

.activity-correction p,
.correction-back {
  margin: 0.25rem 0;
}

.activity-correction .stack-form {
  margin-top: 0.35rem;
}

.activity-correction textarea {
  min-height: 4.5rem;
  max-width: 100%;
}

.activity-correction .correction-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

/* Project history filters (Issue #240). The list uses the activity table. */
.history-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.75rem 1rem;
  align-items: end;
  margin: 0 0 0.5rem;
}

.history-filters .field {
  margin: 0;
}

.history-filters .page-action {
  grid-column: 1 / -1;
  margin: 0;
}

/* Issue #416. Full-screen view for tables that opt in (table-fullscreen.js).
   On a fold card the button sits in the title row, between the put-aside
   control and the open/close control, at the same size as that control.
   It is green (var(--mark), the same green as the put-aside arrow) with
   four arrows pointing out. Full screen, the card fills the viewport, the
   title row stays pinned, and the same button turns orange (#FF9600, the
   same orange as the card open arrow) with four arrows pointing in.
   The open/close control is hidden while that view is open. A table with
   no card title row keeps the button on the count line, or in a slim row
   above the table, and a separate close button at the top right.
   Open, the view fills the screen with the card colours, inside the safe
   areas. While a table is open, its ancestors drop filter, transform,
   clip and containment, which would otherwise trap a fixed child, and
   are raised above the side menu. */
.table-full-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
}

/* The head takes the count line's own 0.7rem margins, so they still
   collapse with the rows around it and the card keeps its height. */
.table-full-head:not(.table-full-head-plain) {
  margin-block: 0.7rem;
}

.table-full-head > .table-count-strip {
  flex: 1 1 auto;
  min-width: 0;
  margin-block: 0;
}

.table-full-head-plain {
  justify-content: flex-end;
}
.table-full-head-plain:empty {
  display: none;
}

/* Beside a count line the button keeps its 2rem box but does not make
   the line taller. */
.table-full-head:not(.table-full-head-plain) > button.table-full-open {
  margin-block: -0.375rem !important;
}

main button.table-full-open,
main button.table-full-open:hover,
main button.table-full-close,
main button.table-full-close:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: inherit;
  touch-action: manipulation;
}

/* The count-line button and the separate close button stay 2rem.
   The title-row button matches the card open/close control instead,
   including the larger phone target further down. */
.table-full-head > button.table-full-open,
.table-full-head > button.table-full-open:hover,
.is-table-full > button.table-full-close,
.is-table-full > button.table-full-close:hover {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  margin: 0 !important;
}

.fold > summary > .table-full-title,
.fold > summary > .table-full-title:hover {
  align-self: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  max-height: 2rem;
}

/* Room to tap the title-row controls on a phone, without a wide gap. */
.fold > summary:has(.table-full-title) {
  column-gap: 0.5rem;
  max-width: 100%;
  min-width: 0;
}

.fold > summary:has(.table-full-title) .fold-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fold > summary:has(.table-full-title) > .card-set-aside {
  margin-right: 0;
}

.fold > summary:has(.table-full-title):not(:has(.card-set-aside)) > .table-full-title {
  margin-left: auto;
}

.fold > summary:has(.table-full-title):not(:has(.card-set-aside)) > .card-expand {
  margin-left: 0;
}

/* Collapsed cards hide the button. It comes back when the card is opened. */
details.card:not([open]) > summary .table-full-title {
  display: none !important;
}

/* The card itself is the full-screen view, so the title row stays put
   and the body scrolls under it. The open/close control is hidden.
   Author display rules would otherwise ignore the hidden attribute. */
details.card.is-table-full {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  max-width: 100% !important;
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px) !important;
  filter: none !important;
}

details.card.is-table-full::before {
  clip-path: none;
  background: var(--sheet);
}

details.card.is-table-full > summary {
  position: sticky;
  top: 0;
  z-index: 3;
  flex: 0 0 auto;
  max-width: 100%;
  background: var(--sheet);
}

details.card.is-table-full > .fold-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  overflow: auto !important;
  overscroll-behavior: contain;
}

details.card.is-table-full > summary > .card-expand {
  display: none !important;
}

main button.table-full-open::before,
main button.table-full-close::before {
  content: "";
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Open: green, four arrows pointing out to the corners. */
main button.table-full-open:not(.is-full)::before {
  background-color: var(--mark);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2%202L9%202L6.6%204.4L10.6%208.4L8.4%2010.6L4.4%206.6L2%209Z%20M22%202L15%202L17.4%204.4L13.4%208.4L15.6%2010.6L19.6%206.6L22%209Z%20M2%2022L9%2022L6.6%2019.6L10.6%2015.6L8.4%2013.4L4.4%2017.4L2%2015Z%20M22%2022L15%2022L17.4%2019.6L13.4%2015.6L15.6%2013.4L19.6%2017.4L22%2015Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2%202L9%202L6.6%204.4L10.6%208.4L8.4%2010.6L4.4%206.6L2%209Z%20M22%202L15%202L17.4%204.4L13.4%208.4L15.6%2010.6L19.6%206.6L22%209Z%20M2%2022L9%2022L6.6%2019.6L10.6%2015.6L8.4%2013.4L4.4%2017.4L2%2015Z%20M22%2022L15%2022L17.4%2019.6L13.4%2015.6L15.6%2013.4L19.6%2017.4L22%2015Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Close: orange, four arrows pointing in. The same button, once full screen. */
main button.table-full-close::before,
main button.table-full-open.is-full::before {
  background-color: #FF9600;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5%2010.5L3.5%2010.5L5.9%208.1L1.9%204.1L4.1%201.9L8.1%205.9L10.5%203.5Z%20M13.5%2010.5L20.5%2010.5L18.1%208.1L22.1%204.1L19.9%201.9L15.9%205.9L13.5%203.5Z%20M10.5%2013.5L3.5%2013.5L5.9%2015.9L1.9%2019.9L4.1%2022.1L8.1%2018.1L10.5%2020.5Z%20M13.5%2013.5L20.5%2013.5L18.1%2015.9L22.1%2019.9L19.9%2022.1L15.9%2018.1L13.5%2020.5Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5%2010.5L3.5%2010.5L5.9%208.1L1.9%204.1L4.1%201.9L8.1%205.9L10.5%203.5Z%20M13.5%2010.5L20.5%2010.5L18.1%208.1L22.1%204.1L19.9%201.9L15.9%205.9L13.5%203.5Z%20M10.5%2013.5L3.5%2013.5L5.9%2015.9L1.9%2019.9L4.1%2022.1L8.1%2018.1L10.5%2020.5Z%20M13.5%2013.5L20.5%2013.5L18.1%2015.9L22.1%2019.9L19.9%2022.1L15.9%2018.1L13.5%2020.5Z' fill='%23000'/%3E%3C/svg%3E");
}

main button.table-full-close[hidden] {
  display: none !important;
}

main button.table-full-open:focus-visible,
main button.table-full-close:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 2px;
}

.has-table-full {
  filter: none !important;
  transform: none !important;
  clip-path: none !important;
  contain: none !important;
  container-type: normal !important;
  content-visibility: visible !important;
  z-index: 250 !important;
}

html:has(.is-table-full) {
  scrollbar-gutter: auto;
  overflow-x: hidden;
}

.is-table-full {
  position: fixed !important;
  inset: 0 !important;
  z-index: 250 !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  padding:
    calc(env(safe-area-inset-top, 0px) + 2.75rem)
    calc(env(safe-area-inset-right, 0px) + 1rem)
    calc(env(safe-area-inset-bottom, 0px) + 1rem)
    calc(env(safe-area-inset-left, 0px) + 1rem) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  background: var(--sheet) !important;
  color: var(--ink);
}

.is-table-full > button.table-full-close {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 0.625rem) !important;
  right: calc(env(safe-area-inset-right, 0px) + 1rem) !important;
  z-index: 251;
}

@media print {
  .table-full-open,
  .table-full-close {
    display: none !important;
  }
}

/* At 360px the title row wraps inside the card. The page itself does not
   scroll sideways. */
@media (max-width: 360px) {
  .fold > summary:has(.table-full-title) {
    flex-wrap: wrap;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }

  details.card.is-table-full,
  details.card.is-table-full > summary,
  details.card.is-table-full > .fold-body {
    max-width: 100% !important;
  }
}

/* Property photos (Issue #426). Tiles use the theme tokens only.
   This block stays above the measure-hierarchy and project Properties
   sections: those checks read every rule after their own comment. */
.photo-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, 256px);
  gap: 0.75rem;
}

.photo-grid-item {
  min-width: 0;
  max-width: 256px;
}

.photo-meta,
.photo-caption,
.photo-guidance,
.photo-status {
  color: var(--muted);
}

.photo-caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0.2rem 0 0;
}

.photo-meta,
.photo-guidance,
.photo-status {
  margin: 0.35rem 0 0;
}

.photo-progress {
  color: var(--ink);
  margin: 0.75rem 0 0;
}

.photo-progress progress {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  accent-color: var(--mark);
}


/* Upload Photos sits above the grid, right aligned, so the collapsed
   Show More box does not cover it. The shared .card-actions alignment
   matches the Property record's card button. */
[data-card="photos"] > .fold-body > .card-actions {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.photo-name {
  margin: 0.35rem 0 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

body:has(#card-board[data-page="property"]) main button.photo-tile,
body:has(#card-board[data-page="property"]) main button.photo-tile:hover,
.photo-tile-restricted {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 256px;
  height: 256px;
  min-height: 256px;
  max-height: 256px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--sheet);
  color: var(--ink);
  font-weight: 400;
  white-space: normal;
  text-align: center;
}

body:has(#card-board[data-page="property"]) main button.photo-tile:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.photo-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--sheet);
}

dialog#photo-upload .card > h2,
dialog#photo-delete .card > h2 {
  color: var(--ink);
}

/* Shared full-screen view. Issue #416 (tables: full-screen view) can
   reuse .fullscreen-view and the classes below. The photo viewer is
   the first caller. The picture scales to fit. The button row and the
   white edge arrows sit on top of it. */
.fullscreen-view {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
  background: #111;
  color: #fff;
  overflow: hidden;
  touch-action: none;
}

.fullscreen-view[hidden],
.fullscreen-view [hidden] {
  display: none;
}

html:has(.fullscreen-view:not([hidden])),
html:has(.fullscreen-view:not([hidden])) body {
  overflow: hidden;
}

html:has(.fullscreen-view:not([hidden])) {
  scrollbar-gutter: auto;
}

.fullscreen-view-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.fullscreen-view-bar {
  position: absolute;
  z-index: 2;
  top: env(safe-area-inset-top, 0px);
  right: env(safe-area-inset-right, 0px);
  left: env(safe-area-inset-left, 0px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
}

body:has(#card-board[data-page="property"]) .fullscreen-view-bar :is(button, a.button),
body:has(#card-board[data-page="property"]) .fullscreen-view-bar :is(button, a.button):hover {
  height: 44px;
  min-height: 44px;
  max-height: none;
  padding-top: 0;
  padding-bottom: 0;
  white-space: normal;
}

.fullscreen-view-edge {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
}

.fullscreen-view-edge::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;
  filter: drop-shadow(0 0 2px #000) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
}

.fullscreen-view-edge-prev::before {
  transform: rotate(-135deg);
}

.fullscreen-view-edge-next::before {
  transform: rotate(45deg);
}

.fullscreen-view-edge-prev {
  left: max(0.5rem, env(safe-area-inset-left, 0px));
}

.fullscreen-view-edge-next {
  right: max(0.5rem, env(safe-area-inset-right, 0px));
}

body:has(#card-board[data-page="property"]) .fullscreen-view button.fullscreen-view-edge,
body:has(#card-board[data-page="property"]) .fullscreen-view button.fullscreen-view-edge:hover {
  width: 44px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 0;
  background: transparent;
  color: #fff;
}

.fullscreen-view-edge:focus-visible,
.fullscreen-view-bar :is(button, a.button):focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 2px;
}

@media (max-width: 360px) {
  .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .photo-grid-item {
    max-width: none;
  }

  body:has(#card-board[data-page="property"]) main button.photo-tile,
  body:has(#card-board[data-page="property"]) main button.photo-tile:hover,
  .photo-tile-restricted {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 1;
  }

  .fullscreen-view-bar {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.5rem;
    max-width: 100%;
  }
}

/* Issue #416. Full-screen view for tables that opt in (table-fullscreen.js).
   On a fold card the button sits in the title row, between the put-aside
   control and the open/close control, at the same size as that control.
   It is green (var(--mark), the same green as the put-aside arrow) with
   four arrows pointing out. Full screen, the card fills the viewport, the
   title row stays pinned, and the same button turns orange (#FF9600, the
   same orange as the card open arrow) with four arrows pointing in.
   The open/close control is hidden while that view is open. A table with
   no card title row keeps the button on the count line, or in a slim row
   above the table, and a separate close button at the top right.
   Open, the view fills the screen with the card colours, inside the safe
   areas. While a table is open, its ancestors drop filter, transform,
   clip and containment, which would otherwise trap a fixed child, and
   are raised above the side menu. */
.table-full-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
}

/* The head takes the count line's own 0.7rem margins, so they still
   collapse with the rows around it and the card keeps its height. */
.table-full-head:not(.table-full-head-plain) {
  margin-block: 0.7rem;
}

.table-full-head > .table-count-strip {
  flex: 1 1 auto;
  min-width: 0;
  margin-block: 0;
}

.table-full-head-plain {
  justify-content: flex-end;
}

/* Beside a count line the button keeps its 2rem box but does not make
   the line taller. */
.table-full-head:not(.table-full-head-plain) > button.table-full-open {
  margin-block: -0.375rem !important;
}

main button.table-full-open,
main button.table-full-open:hover,
main button.table-full-close,
main button.table-full-close:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: inherit;
  touch-action: manipulation;
}

/* The count-line button and the separate close button stay 2rem.
   The title-row button matches the card open/close control instead,
   including the larger phone target further down. */
.table-full-head > button.table-full-open,
.table-full-head > button.table-full-open:hover,
.is-table-full > button.table-full-close,
.is-table-full > button.table-full-close:hover {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  margin: 0 !important;
}

.fold > summary > .table-full-title,
.fold > summary > .table-full-title:hover {
  align-self: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  max-height: 2rem;
}

/* Room to tap the title-row controls on a phone, without a wide gap. */
.fold > summary:has(.table-full-title) {
  column-gap: 0.5rem;
  max-width: 100%;
  min-width: 0;
}

.fold > summary:has(.table-full-title) .fold-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fold > summary:has(.table-full-title) > .card-set-aside {
  margin-right: 0;
}

.fold > summary:has(.table-full-title):not(:has(.card-set-aside)) > .table-full-title {
  margin-left: auto;
}

.fold > summary:has(.table-full-title):not(:has(.card-set-aside)) > .card-expand {
  margin-left: 0;
}

/* Collapsed cards hide the button. It comes back when the card is opened. */
details.card:not([open]) > summary .table-full-title {
  display: none !important;
}

/* The card itself is the full-screen view, so the title row stays put
   and the body scrolls under it. The open/close control is hidden.
   Author display rules would otherwise ignore the hidden attribute. */
details.card.is-table-full {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  max-width: 100% !important;
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px) !important;
  filter: none !important;
}

details.card.is-table-full::before {
  clip-path: none;
  background: var(--sheet);
}

details.card.is-table-full > summary {
  position: sticky;
  top: 0;
  z-index: 3;
  flex: 0 0 auto;
  max-width: 100%;
  background: var(--sheet);
}

details.card.is-table-full > .fold-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  overflow: auto !important;
  overscroll-behavior: contain;
}

details.card.is-table-full > summary > .card-expand {
  display: none !important;
}

main button.table-full-open::before,
main button.table-full-close::before {
  content: "";
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Open: green, four arrows pointing out to the corners. */
main button.table-full-open:not(.is-full)::before {
  background-color: var(--mark);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2%202L9%202L6.6%204.4L10.6%208.4L8.4%2010.6L4.4%206.6L2%209Z%20M22%202L15%202L17.4%204.4L13.4%208.4L15.6%2010.6L19.6%206.6L22%209Z%20M2%2022L9%2022L6.6%2019.6L10.6%2015.6L8.4%2013.4L4.4%2017.4L2%2015Z%20M22%2022L15%2022L17.4%2019.6L13.4%2015.6L15.6%2013.4L19.6%2017.4L22%2015Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2%202L9%202L6.6%204.4L10.6%208.4L8.4%2010.6L4.4%206.6L2%209Z%20M22%202L15%202L17.4%204.4L13.4%208.4L15.6%2010.6L19.6%206.6L22%209Z%20M2%2022L9%2022L6.6%2019.6L10.6%2015.6L8.4%2013.4L4.4%2017.4L2%2015Z%20M22%2022L15%2022L17.4%2019.6L13.4%2015.6L15.6%2013.4L19.6%2017.4L22%2015Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Close: orange, four arrows pointing in. The same button, once full screen. */
main button.table-full-close::before,
main button.table-full-open.is-full::before {
  background-color: #FF9600;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5%2010.5L3.5%2010.5L5.9%208.1L1.9%204.1L4.1%201.9L8.1%205.9L10.5%203.5Z%20M13.5%2010.5L20.5%2010.5L18.1%208.1L22.1%204.1L19.9%201.9L15.9%205.9L13.5%203.5Z%20M10.5%2013.5L3.5%2013.5L5.9%2015.9L1.9%2019.9L4.1%2022.1L8.1%2018.1L10.5%2020.5Z%20M13.5%2013.5L20.5%2013.5L18.1%2015.9L22.1%2019.9L19.9%2022.1L15.9%2018.1L13.5%2020.5Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5%2010.5L3.5%2010.5L5.9%208.1L1.9%204.1L4.1%201.9L8.1%205.9L10.5%203.5Z%20M13.5%2010.5L20.5%2010.5L18.1%208.1L22.1%204.1L19.9%201.9L15.9%205.9L13.5%203.5Z%20M10.5%2013.5L3.5%2013.5L5.9%2015.9L1.9%2019.9L4.1%2022.1L8.1%2018.1L10.5%2020.5Z%20M13.5%2013.5L20.5%2013.5L18.1%2015.9L22.1%2019.9L19.9%2022.1L15.9%2018.1L13.5%2020.5Z' fill='%23000'/%3E%3C/svg%3E");
}

main button.table-full-close[hidden] {
  display: none !important;
}

main button.table-full-open:focus-visible,
main button.table-full-close:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 2px;
}

.has-table-full {
  filter: none !important;
  transform: none !important;
  clip-path: none !important;
  contain: none !important;
  container-type: normal !important;
  content-visibility: visible !important;
  z-index: 250 !important;
}

html:has(.is-table-full) {
  scrollbar-gutter: auto;
  overflow-x: hidden;
}

.is-table-full {
  position: fixed !important;
  inset: 0 !important;
  z-index: 250 !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  padding:
    calc(env(safe-area-inset-top, 0px) + 2.75rem)
    calc(env(safe-area-inset-right, 0px) + 1rem)
    calc(env(safe-area-inset-bottom, 0px) + 1rem)
    calc(env(safe-area-inset-left, 0px) + 1rem) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  background: var(--sheet) !important;
  color: var(--ink);
}

.is-table-full > button.table-full-close {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 0.625rem) !important;
  right: calc(env(safe-area-inset-right, 0px) + 1rem) !important;
  z-index: 251;
}

@media print {
  .table-full-open,
  .table-full-close {
    display: none !important;
  }
}

/* At 360px the title row wraps inside the card. The page itself does not
   scroll sideways. */
@media (max-width: 360px) {
  .fold > summary:has(.table-full-title) {
    flex-wrap: wrap;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }

  details.card.is-table-full,
  details.card.is-table-full > summary,
  details.card.is-table-full > .fold-body {
    max-width: 100% !important;
  }
}

/* Issue #445. Project History only. Show More doubles the 28rem box once
   and the existing .activity-pick.table-box-doubled rule supplies 56rem.
   Full screen fills the leftover viewport, loads every row, hides Show
   More, and keeps the page heading (History, project name, Back to
   project). The table, not the card body, is the scroll box so sticky
   column headings stay opaque over the rows. */
details[data-card="history"] #history-filter-count {
  margin: 0 0 0.75rem;
}

/* HTML hidden loses to .card-edit-row { display: flex }. After the one-shot
   Show More, writeMore sets hidden on this History row only. Other cards
   keep their Show More / .card-edit-row. Full screen still hides the row
   whether or not hidden is set. */
details[data-card="history"] .history-more-row[hidden] {
  display: none !important;
}

/* History fullscreen: summary hidden; controls are moved into
   .history-full-bar (pre-built div in .record-head) by JS. */
details.card.is-table-full[data-card="history"] > summary {
  display: none !important;
}

/* Controls bar: always present in .record-head, hidden outside fullscreen.
   JS moves barCount + toggle + pill here and removes aria-hidden on open. */
.history-full-bar {
  display: none;
}

details.card.is-table-full[data-card="history"] .record-head .history-full-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 100%;
  padding-right: 0.25rem;
  margin-top: 0;
}

details.card.is-table-full[data-card="history"] .record-head {
  padding-left: 2rem;
  padding-top: 2rem;
}

details.card.is-table-full[data-card="history"] > .fold-body {
  padding-left: 2rem;
}

.history-full-bar > .table-full-title {
  align-self: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  max-height: 2rem;
}

details.card.is-table-full[data-card="history"] .record-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.75rem;
}

details.card.is-table-full[data-card="history"] .record-head h1 {
  flex: 0 0 100%;
}

details.card.is-table-full[data-card="history"] .record-head > p {
  flex: 0 0 100%;
  margin: 0 0 0.5rem; /* flex items do not collapse margins, so no top margin */
}

/* Chrome wraps details content in ::details-content. That pseudo is the
   card's flex item, so fold-body's flex:1 never received a definite
   height. Pick then sized to the full table (max-height: none) and the
   card's overflow:hidden clipped lower rows. Bound the pseudo and the
   body to the viewport; pick is the scroll box under heading+count. */
details.card.is-table-full[data-card="history"]::details-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

details.card.is-table-full[data-card="history"] > .fold-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden !important;
  padding-top: 0.25rem;
}

/* record-head is now a sibling of fold-body (not inside it),
   so it sits above the scrollable fold-body in ::details-content. */
details.card.is-table-full[data-card="history"] > .record-head {
  flex: 0 0 auto;
  padding: 2rem 2rem 0;
  margin-bottom: 0.75rem;
}

details.card.is-table-full[data-card="history"] .record-head,
details.card.is-table-full[data-card="history"] #history-filter-count {
  flex: 0 0 auto;
}

details.card.is-table-full[data-card="history"] .record-head h1 {
  font-size: 3rem;
  margin: 0 0 0.3rem;
}

/* Issue #466. Property Activity full screen keeps the green summary title.
   Its size is the History heading above. Normal card titles stay 20px. */
#card-board[data-page="property"] details.card.is-table-full[data-card="activity"] > summary .fold-title {
  font-size: 3rem;
}

/* Issue #473. Every full-screen table title matches that heading:
   3rem and #70BD95. Normal card titles stay 20px. History keeps the
   clipped summary title and its page heading. A full-screen table with
   no card title shows .table-fullscreen-heading instead. Table text
   and column headings are unchanged. */
details.card.is-table-full > summary .fold-title {
  font-size: 3rem;
  color: #70BD95;
}

.table-fullscreen-heading {
  display: none;
}
.table-fullscreen-subheading {
  display: none;
}

.is-table-full .table-fullscreen-heading {
  display: block;
  flex: 0 0 auto;
  margin: 0 0 0.3rem;
  color: #70BD95;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.is-table-full .table-fullscreen-subheading {
  display: block;
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 400;
}

.is-table-full > .table-fullscreen-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sheet);
}

details.card.is-table-full[data-card="history"] .activity-pick {
  max-height: none !important;
  flex: 1 1 0%;
  min-height: 0;
  overflow: auto;
}

details.card.is-table-full[data-card="history"] .history-more-row {
  display: none !important;
}

/* Issue #474 item 1. Fullscreen toolbar for plain (non-card) tables.
   .table-full-sticky: sticky block at top:0 holding the h1 + bar.
   Hidden outside fullscreen; shown when .is-table-full is set. */
.table-full-sticky {
  display: none;
}

.is-table-full .table-full-sticky {
  display: block;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--sheet);
  padding-bottom: 0.25rem;
}

.table-full-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0 0.5rem;
  border-bottom: 1px solid var(--rule, rgba(128,128,128,0.2));
  min-width: 0;
}

.table-full-bar-count {
  flex: 1 1 auto;
  font-size: 0.875rem;
  color: var(--muted);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-full-bar-pill {
  flex: 0 0 auto;
}

/* Count span injected into card summary title rows.
   Hidden outside fullscreen. Non-history cards: flex:1 pushes controls right.
   History: moved into .history-full-bar by JS. */
span.table-full-bar-count {
  display: none;
}

details.card.is-table-full summary span.table-full-bar-count {
  display: inline;
  flex: 1 1 auto;
}

/* History moves the span into .history-full-bar; hide it in the hidden summary. */
details.card.is-table-full[data-card="history"] summary span.table-full-bar-count {
  display: none;
}

.history-full-bar span.table-full-bar-count {
  display: inline;
  flex: 1 1 auto;
  font-size: 0.875rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Injected search pill for card tables that have no existing pill
   (e.g. History). Hidden outside fullscreen; shown inline when fullscreen.
   Opens LEFT: flex-direction reversed so button stays right, input grows left. */
.table-full-card-pill {
  display: none;
}

details.card.is-table-full summary .table-full-card-pill,
.history-full-bar .table-full-card-pill {
  display: inline-flex;
  flex-direction: row-reverse;
}

.history-full-bar .table-full-card-pill {
  margin-left: auto;
}

details.card.is-table-full summary .table-full-card-pill .search-pill-entry,
.history-full-bar .table-full-card-pill .search-pill-entry {
  padding: 0;
}

details.card.is-table-full summary .table-full-card-pill:hover .search-pill-entry,
details.card.is-table-full summary .table-full-card-pill:focus-within .search-pill-entry,
.history-full-bar .table-full-card-pill:hover .search-pill-entry,
.history-full-bar .table-full-card-pill:focus-within .search-pill-entry {
  width: min(20rem, 70vw);
  padding: 0 0.5rem 0 0.9rem;
  opacity: 1;
}

/* Issue #474. .card-full-head: pre-built fullscreen header for project page
   Properties and Activity fold cards. Mirrors the History record-head pattern.
   Sits as a direct child of the details element; JS moves it above fold-body
   on open and moves barCount + pill + toggle into .card-full-bar. */
.card-full-head {
  display: none;
}

details.card.is-table-full[data-card="properties"] > .card-full-head,
details.card.is-table-full[data-card="activity"] > .card-full-head {
  display: block;
  padding: 2rem 2rem 0;
  flex: 0 0 auto;
}

details.card.is-table-full[data-card="properties"] .property-table-wrap,
details.card.is-table-full[data-card="activity"] .activity-pick {
  max-height: calc(100vh - 12rem);
}

details.card.is-table-full[data-card="activity"] > .fold-body {
  padding-left: 2rem;
}

details.card.is-table-full[data-card="activity"] .activity-log th:first-child,
details.card.is-table-full[data-card="activity"] .activity-log td:first-child {
  padding-left: 0;
  text-indent: 0;
}

.activity-log td.log-col-property {
  color: #70BD95;
}

details.card.is-table-full[data-card="properties"] > summary,
details.card.is-table-full[data-card="activity"] > summary {
  display: none !important;
}

.card .card-full-head-title,
html[data-theme="dark"] .card .card-full-head-title {
  font-size: 3rem;
  font-weight: 500;
  color: #70BD95;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.3rem;
  padding: 0;
}

.card-full-head-sub {
  margin: 0.15rem 0 0.5rem;
  font-size: 1rem;
}

.card-full-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
}

.card-full-bar > .table-full-title {
  align-self: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  max-height: 2rem;
}

.card-full-bar span.table-full-bar-count {
  display: inline;
  flex: 1 1 auto;
  font-size: 0.875rem;
  color: var(--muted);
  white-space: nowrap;
}

.card-full-bar .card-search-pill,
.card-full-bar .table-full-card-pill {
  display: inline-flex;
  flex-direction: row-reverse;
  flex: 0 0 auto;
}

.card-full-bar .card-search-pill .search-pill-entry,
.card-full-bar .table-full-card-pill .search-pill-entry {
  padding: 0;
}

.card-full-bar .card-search-pill:hover .search-pill-entry,
.card-full-bar .card-search-pill:focus-within .search-pill-entry,
.card-full-bar .table-full-card-pill:hover .search-pill-entry,
.card-full-bar .table-full-card-pill:focus-within .search-pill-entry {
  width: min(20rem, 70vw);
  padding: 0 0.5rem 0 0.9rem;
  opacity: 1;
}

/* Suppress count in summary (now in card-full-bar) */
details.card.is-table-full[data-card="properties"] summary span.table-full-bar-count,
details.card.is-table-full[data-card="activity"] summary span.table-full-bar-count {
  display: none;
}

/* Issue #474. .card-full-subhead: fullscreen header block for fold card
   tables (Properties, Activity on project page). Pre-built in template,
   hidden normally, shown as a flex block when the card is fullscreen.
   JS (placeSubhead) moves barCount, cardPill and the toggle button into it.
   Layout: title (3rem green) + project name each take a full row via
   flex:0 0 100%; count + pill + toggle sit together on the last row. */
.card-full-subhead {
  display: none;
}

details.card.is-table-full .fold-body > .card-full-subhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 0 0 auto;
  padding: 2rem 2rem 0.75rem;
  gap: 0.5rem;
}

/* Title: "Properties" / "Activity" — 3rem green heading, own line.
   h2 element to guarantee block rendering; reset default h2 styles. */
.card-full-subhead > .card-full-title {
  display: block;
  flex: 0 0 100%;
  font-size: 3rem;
  font-weight: 500;
  color: #70BD95;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.3rem;
  padding: 0;
}

/* Project name — own line */
.card-full-subhead > p {
  flex: 0 0 100%;
  margin: 0;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Count span inside subhead */
.card-full-subhead span.table-full-bar-count {
  display: inline;
  flex: 1 1 auto;
  font-size: 0.875rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Toggle button inside subhead — same size as in history-full-bar */
.card-full-subhead > .table-full-title {
  flex: 0 0 auto;
  align-self: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  max-height: 2rem;
}

/* Pill inside subhead */
.card-full-subhead .table-full-card-pill,
.card-full-subhead .card-search-pill {
  display: inline-flex;
  flex-direction: row-reverse;
  flex: 0 0 auto;
}

.card-full-subhead .table-full-card-pill .search-pill-entry,
.card-full-subhead .card-search-pill .search-pill-entry {
  padding: 0;
}

.card-full-subhead .table-full-card-pill:hover .search-pill-entry,
.card-full-subhead .table-full-card-pill:focus-within .search-pill-entry,
.card-full-subhead .card-search-pill:hover .search-pill-entry,
.card-full-subhead .card-search-pill:focus-within .search-pill-entry {
  width: min(20rem, 70vw);
  padding: 0 0.5rem 0 0.9rem;
  opacity: 1;
}


/* Summary alignment: use center (not baseline) so pill sits flush. */
details.card.is-table-full > summary {
  align-items: center;
}

/* Hide "Back to project" button when History card is fullscreen.
   placeHistoryHead() moves .record-head to sibling of .fold-body. */
details.card.is-table-full[data-card="history"] > .record-head .header-actions {
  display: none !important;
}

/* Hide the existing count strip (injected count in .history-full-bar replaces it). */
details.card.is-table-full ~ #history-filter-count,
details.card.is-table-full .fold-body #history-filter-count {
  display: none !important;
}

/* Top breathing room now on > .record-head directly (see above). */

/* Sticky thead when fullscreen. JS sets --thead-top on the table equal to
   the sticky wrap's rendered height so the thead clears it exactly.
   Card tables scroll their fold-body; thead sticks from 0 there. */
.is-table-full table thead th {
  position: sticky;
  top: var(--thead-top, 0);
  z-index: 5;
  background: var(--sheet);
}

details.card.is-table-full table thead th {
  top: 0;
}

/* Measure hierarchy picker (Issues #45, #51, #291 and #305).
   The chosen rows sit first, in the same pairs layout as the card.
   Select Measure follows them. Drag a row, or focus a row and press
   Up or Down, to reorder it. Up and Down buttons are not shown. */
.measure-picker {
  display: flex;
  flex-direction: column;
}

.measure-picker > script,
.measure-picker > template {
  display: none;
}

.measure-picker-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: block;
}

.measure-picker-list:empty {
  display: none;
}

.measure-picker-item {
  position: relative;
  margin: 0;
  touch-action: none;
}

.measure-picker-item:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

.measure-picker-item.is-dragging {
  opacity: 0.72;
}

.measure-picker-item.drop-before::after,
.measure-picker-item.drop-after::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--navy);
  z-index: 2;
  pointer-events: none;
}

.measure-picker-item.drop-before::after {
  top: 0;
}

.measure-picker-item.drop-after::after {
  bottom: 0;
}

.measure-picker-row {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.measure-picker-number {
  color: var(--muted);
  padding-right: 1rem;
}

.measure-picker-name {
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}

.measure-picker-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  align-items: center;
}


/* Issue #313: Light and Dark views (system default + clickable theme icon). */
html[data-theme="dark"] {
  --paper: #0C1F2B;
  --sheet: #142836;
  --ink: #EAECEF;
  --muted: #A8B2BC;
  --line: #1F3444;
  --shadow: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
  color-scheme: dark;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .workspace,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] main {
  background: var(--paper);
  color: var(--ink);
}

html[data-theme="dark"] main > .table-wrap.property-table-wrap {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] #projects-table-wrap {
  box-shadow: none;
}

html[data-theme="dark"] .card::before,
html[data-theme="dark"] .project::before,
html[data-theme="dark"] .property-table-wrap::before,
html[data-theme="dark"] .current-assessment::before,
html[data-theme="dark"] .engagement-work > section::before,
html[data-theme="dark"] main > section::before,
html[data-theme="dark"] main > .table-wrap::before,
html[data-theme="dark"] .letter-sheet::before,
html[data-theme="dark"] .messages::before,
html[data-theme="dark"] .errors::before {
  background: var(--sheet);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] details.card.fold,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] dialog.popup > .card,
html[data-theme="dark"] .search-pill {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

/* Issue #342. The shorthand above clears background on .table-wrap. These
   scroll boxes paint --sheet themselves, in Dark View as well as Light.
   The pseudo stays empty so it cannot scroll the fill away. The Projects
   grid card is excluded: its clipped ::before is the card, and
   .projects-table-pick is not this rule. */
html[data-theme="dark"] main > .table-wrap.property-table-wrap:not(#projects-table-wrap),
html[data-theme="dark"] main > .table-wrap.access-members {
  background-color: var(--sheet);
  background-image:
    linear-gradient(to bottom left, var(--paper) calc(1.75rem / sqrt(2)), transparent calc(1.75rem / sqrt(2))),
    linear-gradient(var(--sheet), var(--sheet));
  background-size: 1.75rem 1.75rem, auto;
  background-repeat: no-repeat, no-repeat;
  background-position: right top, left top;
  background-attachment: scroll, local;
}

html[data-theme="dark"] .activity-pick,
html[data-theme="dark"] .table-wrap.property-pick,
html[data-theme="dark"] .import-pick {
  background-color: var(--sheet);
  background-image: linear-gradient(var(--sheet), var(--sheet));
  background-repeat: no-repeat;
  background-attachment: local;
}

html[data-theme="dark"] .import-page .import-scroll {
  background-color: var(--sheet);
  background-image: linear-gradient(var(--sheet), var(--sheet));
  background-repeat: no-repeat;
  background-attachment: local;
}

html[data-theme="dark"] main > .table-wrap.property-table-wrap:not(#projects-table-wrap)::before,
html[data-theme="dark"] main > .table-wrap.access-members::before {
  background: none;
}

html[data-theme="dark"] .search-pill,
html[data-theme="dark"] .search-pill.is-open,
html[data-theme="dark"] .search-pill:focus-within {
  background: #243E52;
  border-color: #70BD95;
  box-shadow: inset 0 0 0 1px #70BD95;
}

html[data-theme="dark"] .search-pill .search-pill-entry {
  background: transparent;
  color: #EEF4F8;
}

html[data-theme="dark"] .search-pill .search-pill-entry::placeholder {
  color: #9CC2D9;
}

html[data-theme="dark"] table {
  background: transparent;
  color: var(--ink);
}

html[data-theme="dark"] table[data-filter-table] thead th,
html[data-theme="dark"] .primary-rc-table th,
html[data-theme="dark"] .edit-contacts-table th {
  background: var(--sheet);
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--line);
}

html[data-theme="dark"] table[data-filter-table] thead th.is-active {
  box-shadow: inset 0 -3px 0 var(--mark);
}

html[data-theme="dark"] .kanban-list {
  background: #102331;
}

html[data-theme="dark"] .kanban-card,
html[data-theme="dark"] a.kanban-card,
html[data-theme="dark"] a.kanban-card:visited {
  background: #192E3D;
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .filter-popover {
  background: var(--sheet);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .calendar .outside {
  background: #102331;
}

html[data-theme="dark"] #project-activity .activity-log tbody tr:hover td,
html[data-theme="dark"] #project-activity .activity-log tbody tr:focus-within td,
html[data-theme="dark"] .activity-log-history tbody tr:hover td,
html[data-theme="dark"] .activity-log-history tbody tr:focus-within td,
html[data-theme="dark"] .import-card-table tbody tr.import-entry-row:hover td,
html[data-theme="dark"] .import-card-table tbody tr.import-entry-row:focus-within td,
html[data-theme="dark"] .edit-contacts-table tbody tr:hover td,
html[data-theme="dark"] .edit-contacts-table tbody tr:focus-within td,
html[data-theme="dark"] table[data-filter-table] tbody tr.filter-open-row:hover td,
html[data-theme="dark"] table[data-row-open] tbody tr.filter-open-row:hover td {
  background: #192E3D;
}

html[data-theme="dark"] table[data-row-keys] tbody tr.filter-open-row:focus-visible {
  outline: 3px solid #EAECEF;
}

html[data-theme="dark"] table[data-row-keys] tbody tr.filter-open-row:focus-visible td,
html[data-theme="dark"] table[data-row-keys] tbody tr.filter-open-row:focus-within td {
  background: #192E3D;
}

html[data-theme="dark"] .test-data-banner,
html[data-theme="dark"] .warning,
html[data-theme="dark"] .assessment-age-amber {
  background: #2C2618;
  color: #F5E6C4;
  border-color: #5C4B24;
}

html[data-theme="dark"] .assessment-age-green,
html[data-theme="dark"] .import-success,
html[data-theme="dark"] .import-clash-compare .import-existing {
  background: #1B3328;
  color: var(--ink);
}

html[data-theme="dark"] .assessment-age-red {
  background: #3B1D1D;
  color: #F7D4D4;
}

html[data-theme="dark"] .assessment-age-none,
html[data-theme="dark"] .import-clash-compare .import-new {
  background: #202A34;
  color: var(--ink);
}

html[data-theme="dark"] fieldset.outcome-choice input[type="radio"] {
  background: #0C1F2B;
  border-color: var(--muted);
}

html[data-theme="dark"] fieldset.outcome-choice input[type="radio"]:checked,
html[data-theme="dark"] fieldset.outcome-choice input[type="radio"]:disabled:checked {
  background: #0C1F2B;
  border-color: #70BD95;
}

html[data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #0C1F2B;
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .search-pill input.search-pill-entry:not([type="radio"]):not([type="checkbox"]) {
  background: transparent;
  color: #EEF4F8;
}

html[data-theme="dark"] .rail-role-form select {
  background: #FFFFFF;
  color: var(--navy);
}

html[data-theme="dark"] table th,
html[data-theme="dark"] table td,
html[data-theme="dark"] caption,
html[data-theme="dark"] .filter-col-label,
html[data-theme="dark"] dl.pairs dt,
html[data-theme="dark"] dl.pairs dd {
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] dl.pairs dt {
  color: var(--muted);
}

html[data-theme="dark"] h3,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .fold > summary,
html[data-theme="dark"] .project-card-name,
html[data-theme="dark"] .status-steps .project-card-status,
html[data-theme="dark"] .kanban-column h2,
html[data-theme="dark"] .record-sub,
html[data-theme="dark"] .record-meta,
html[data-theme="dark"] .record-stage-line,
html[data-theme="dark"] .other-contact-group > summary.other-contact-group-summary,
html[data-theme="dark"] .other-contact-group-label,
html[data-theme="dark"] .other-contact-name,
html[data-theme="dark"] .search-pill-entry,
html[data-theme="dark"] .search-pop input {
  color: var(--ink);
}

html[data-theme="dark"] .search-pop input::placeholder,
html[data-theme="dark"] .search-pill-entry::placeholder {
  color: var(--muted);
}

html[data-theme="dark"] input[type="search"]::-webkit-search-cancel-button {
  background: var(--ink);
}

html[data-theme="dark"] .status-step {
  background: #0C1F2B;
  border-color: var(--muted);
}

html[data-theme="dark"] .status-step-filled {
  background: var(--mark);
  border-color: var(--ink);
}

html[data-theme="dark"] .status-step.status-step-on-hold {
  border-color: var(--ink);
}

html[data-theme="dark"] .status-step-filled.status-step-on-hold {
  background: #FF0080;
  border-color: var(--ink);
}

html[data-theme="dark"] .status-step.status-step-omitted {
  border-color: var(--ink);
}

html[data-theme="dark"] .status-step-filled.status-step-omitted {
  background: var(--status-omitted);
  border-color: var(--ink);
}

html[data-theme="dark"] .view-switch a,
html[data-theme="dark"] .view-switch a:visited {
  background: var(--mark);
  color: var(--navy);
}

html[data-theme="dark"] .view-switch a:hover {
  background: #62b086;
  color: var(--navy);
}

html[data-theme="dark"] .view-switch a[aria-current="page"],
html[data-theme="dark"] .view-switch a[aria-current="page"]:visited,
html[data-theme="dark"] .view-switch a[aria-current="page"]:hover {
  background: #182E3D;
  color: #F5F5F5;
  box-shadow: inset 0 0 0 2px var(--mark);
}

html[data-theme="dark"] .month-nav a,
html[data-theme="dark"] .month-nav a:visited,
html[data-theme="dark"] .month-nav a:hover,
html[data-theme="dark"] .import-filters button,
html[data-theme="dark"] .import-filters button:hover {
  background: var(--sheet);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .import-filters button[aria-pressed="true"],
html[data-theme="dark"] .import-filters button[aria-pressed="true"]:hover {
  background: #182E3D;
  color: #F5F5F5;
  border-color: var(--mark);
}

html[data-theme="dark"] .property-views-columns button[aria-pressed="false"],
html[data-theme="dark"] .property-views-columns button[aria-pressed="false"]:hover {
  background: var(--sheet);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--line);
}

html[data-theme="dark"] main a:not(.button):not(.kanban-card):not(.wordmark):not(.view-switch a):not(.month-nav a) {
  color: var(--mark);
}

html[data-theme="dark"] main .view-switch a,
html[data-theme="dark"] main .view-switch a:visited {
  background: var(--mark);
  color: var(--navy);
}

html[data-theme="dark"] main .view-switch a:hover {
  background: #62b086;
  color: var(--navy);
}

html[data-theme="dark"] main .view-switch a[aria-current="page"],
html[data-theme="dark"] main .view-switch a[aria-current="page"]:visited,
html[data-theme="dark"] main .view-switch a[aria-current="page"]:hover {
  background: #182E3D;
  color: #F5F5F5;
  box-shadow: inset 0 0 0 2px var(--mark);
}

html[data-theme="dark"] main .month-nav a,
html[data-theme="dark"] main .month-nav a:visited,
html[data-theme="dark"] main .month-nav a:hover {
  background: var(--sheet);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] dialog.popup::backdrop,
html[data-theme="dark"] .app.menu-open .menu-backdrop {
  background: rgba(0, 8, 15, 0.62);
}

/* Issues #322-#334: Mobile portrait and landscape enhancements. */
table.property-log.import-card-table,
.import-pick > .import-card-table {
  table-layout: auto;
  width: 100%;
  min-width: max-content;
  max-width: none;
}

table.property-log.import-card-table th,
table.property-log.import-card-table td {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

table[data-filter-table].property-table,
.property-table {
  table-layout: auto;
  min-width: max-content;
}

table[data-filter-table].property-table th,
table[data-filter-table].property-table td,
.property-table th,
.property-table td {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

@media (pointer: coarse), (max-width: 800px) {
  .record-fit summary,
  .record-fit summary *:not(input):not(textarea):not(select),
  .record-fit .project-card-main,
  .record-fit .project-card-main *:not(input):not(textarea):not(select),
  .measure-picker-list,
  .measure-picker-item,
  .measure-picker-item *:not(input):not(textarea):not(select),
  .measure-picker-row,
  .measure-picker-row *:not(input):not(textarea):not(select) {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .record-fit summary,
  .record-fit .project-card-main,
  .measure-picker-item {
    touch-action: pan-y;
  }

  .record-fit .is-dragging summary,
  .record-fit .is-dragging .project-card-main,
  .measure-picker-item.is-dragging {
    touch-action: none;
  }
}

/* Issue #220. The Properties list opens at the doubled scroll height
   (about 40 rows). The class is on the table so the wrapper class stays
   exactly table-wrap property-table-wrap. This rule is before the phone
   media queries so those caps win on a small screen. Desktop and tablet
   stay at 56rem. */
main > .table-wrap.property-table-wrap:has(> table.table-box-doubled) {
  max-height: 56rem;
}

@media (max-width: 800px) {
  /* #325 & #329: Mobile top bar, theme toggle, and compact header/toolbar spacing */
  .mobile-bar {
    justify-content: space-between;
    min-height: 2.75rem;
    padding: 0.35rem 1rem;
  }

  .mobile-theme-toggle,
  .mobile-theme-toggle:hover,
  .mobile-theme-toggle:focus,
  .mobile-theme-toggle:focus-visible,
  .mobile-theme-toggle:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: auto;
    margin: 0;
    padding: 0.25rem;
    background: transparent;
    box-shadow: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    color: #FFFFFF;
    border: 0;
    border-radius: 0;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 400;
    white-space: nowrap;
  }

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

  .page-header {
    padding: 0.5rem 1rem 0;
  }

  .page-header .wordmark,
  .page-header .wordmark:visited,
  .page-header .wordmark:hover {
    width: 9.5rem;
  }

  main,
  .site-footer {
    padding: 0.65rem 1rem 2.5rem;
  }

  .test-data-banner {
    margin: 0 0 0.55rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.85rem;
  }

  main > h1:has(+ .view-switch),
  main > h1:has(+ input + .view-switch) {
    margin: 0 0 0.65rem;
  }

  .view-switch {
    margin: 0.5rem 0 0.65rem;
  }

  .list-header {
    margin: 0 0 0.65rem;
    gap: 0.5rem 0.65rem;
  }

  .record-columns {
    margin-top: 0.75rem;
  }

  /* #328: Mobile navigation Menu drawer compact spacing so all links + Role Switcher fit */
  .rail,
  .rail-collapse-input:checked ~ .app .rail {
    top: 2.75rem;
    overflow-y: auto;
  }

  .rail-inner {
    padding: 0.4rem 0.65rem 0.65rem;
    gap: 0.05rem;
    min-height: 100%;
    overflow-y: auto;
  }

  .rail nav,
  .rail-collapse-input:checked ~ .app .rail nav {
    gap: 0.05rem;
  }

  .nav-item,
  .rail-collapse-input:checked ~ .app .nav-item {
    padding: 0.36rem 0.65rem;
    font-size: 0.92rem;
  }

  .rail-theme {
    margin-top: 0.15rem;
    padding: 0.15rem 0;
  }

  .rail-collapse-input:checked ~ .app .rail-theme-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
  }

  .rail button.rail-theme-toggle,
  .rail button.rail-theme-toggle:hover,
  .rail-collapse-input:checked ~ .app .rail button.rail-theme-toggle {
    justify-content: flex-start;
    gap: 0.85rem;
    padding: 0 0.65rem;
  }

  .rail-foot,
  .rail-collapse-input:checked ~ .app .rail-foot {
    margin-top: 0.2rem;
    padding: 0.45rem 0.45rem 0.2rem;
  }

  .rail-role-form select {
    margin: 0.25rem 0 0.35rem;
    padding: 0.3rem 0.6rem;
  }

  /* #327 & #335: Expanding search bar capped to 100% of container on mobile and tappable clear (X) cross */
  .list-header .search-pill-form,
  .search-pill {
    max-width: min(100%, calc(100vw - 2rem));
  }

  .search-pill:hover .search-pill-entry,
  .search-pill:focus-within .search-pill-entry,
  .search-pill.is-open .search-pill-entry {
    width: min(15.5rem, calc(100vw - 5.25rem));
    max-width: calc(100vw - 5.25rem);
    min-width: 0;
    flex: 1 1 auto;
    padding: 0 0.65rem 0 0.5rem;
  }

  input[type="search"].search-pill-entry::-webkit-search-cancel-button {
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: auto;
  }

  details.card.fold[open] > summary {
    flex-wrap: wrap;
    row-gap: 0.45rem;
  }

  /* A long title wraps inside the header. The icons stay on the first
     line, in the same place as a one-line title. A search pill still
     uses the wrap above and keeps its own title. */
  .fold > summary:not(:has(.card-search-pill)):has(.card-expand) {
    align-items: flex-start;
  }

  .fold > summary:not(:has(.card-search-pill)) .card-set-aside,
  .fold > summary:not(:has(.card-search-pill)) .card-expand {
    align-self: flex-start;
  }

  details.card.fold[open] > summary:not(:has(.card-search-pill)) {
    flex-wrap: nowrap;
  }

  .fold > summary:not(:has(.card-search-pill)) .fold-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
  }

  details.card.fold[open] > summary .card-search-pill {
    max-width: 100%;
  }

  /* #326 & #329: Projects Kanban/List cards padding, unclipped client names, 44x44px touch targets, and expand-all alignment */
  .card,
  .project {
    padding: 1.15rem 1rem 1.25rem;
  }

  .card-tools,
  .card-tools-projects {
    padding-right: 1rem;
    margin: 0 0 0.35rem;
  }

  .project-card-client {
    max-width: none;
    padding-right: 0.75rem;
  }

  #kanban.kanban-projects .project-card-client {
    max-width: none;
    padding-right: 0.75rem;
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    white-space: normal;
  }

  #kanban.kanban-projects .project-card-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .kanban-list {
    min-height: 2.5rem;
    padding: 0.5rem;
  }

  .kanban-list:empty {
    min-height: 1.75rem;
    padding: 0.35rem;
  }

  .fold > summary .card-set-aside,
  .fold > summary .card-expand,
  .fold > summary .table-full-title,
  .project-card-main .card-set-aside,
  .project-card-main .card-expand,
  .projects-grid-tools .card-set-aside,
  .projects-grid-tools .card-expand,
  .card-tools .card-expand {
    position: relative;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    max-height: 2.75rem;
  }

  .fold > summary .card-set-aside,
  .project-card-main .card-set-aside,
  .projects-grid-tools .card-set-aside {
    margin-right: 0.35rem;
  }

  button.card-set-aside::after,
  button.card-expand::after,
  button.table-full-title::after {
    content: "";
    position: absolute;
    inset: 0;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .project-card-more .record-links {
    gap: 0.5rem 1rem;
  }

  .project-card-more .record-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.25rem 0.5rem;
  }

  /* #330: Projects page Grid view reduced top gap and natural column wrapping on mobile */
  #projects-table-wrap,
  #hidden-strip:has(#projects-table-wrap) {
    margin-top: 1.25rem;
  }

  #projects-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  #projects-table {
    table-layout: auto;
    min-width: max-content;
  }

  #projects-table th,
  #projects-table td {
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
  }

  /* #331: Measure Hierarchy Edit pop-up compact first column on mobile */
  .measure-picker-row {
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    column-gap: 0.5rem;
  }

  .measure-picker-number {
    padding-right: 0.25rem;
    white-space: nowrap;
  }

  .measure-picker-name {
    overflow-wrap: normal;
    word-break: normal;
  }

  /* #333 & #339: Project Activity card and Project/Property History card natural horizontal scrolling inside card on mobile */
  details.card.fold[data-card="history"],
  details.card.fold[data-card="history"] > .fold-body,
  .activity-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .activity-pick {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    box-sizing: border-box;
  }

  /* Issue #340. Pairs with overflow-x: auto on .activity-pick above. */
  .activity-pick::after {
    position: sticky;
    left: 0;
    bottom: 0;
  }

  #project-activity .activity-pick > .activity-log,
  .activity-pick > table[data-filter-table].activity-log,
  .activity-pick > .activity-log,
  .activity-log.activity-log-history {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
    max-width: none;
  }

  #project-activity .activity-log th,
  #project-activity .activity-log td,
  .activity-pick > .activity-log th,
  .activity-pick > .activity-log td,
  .activity-log.activity-log-history th,
  .activity-log.activity-log-history td {
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
  }

  #project-activity .activity-log .log-col-date,
  #project-activity .activity-log .log-col-property,
  #project-activity .activity-log .log-col-postcode,
  #project-activity .activity-log .log-col-user,
  #project-activity .activity-log .log-col-action,
  #project-activity .activity-log .log-col-notes,
  .activity-pick > .activity-log .log-col-date,
  .activity-pick > .activity-log .log-col-property,
  .activity-pick > .activity-log .log-col-postcode,
  .activity-pick > .activity-log .log-col-user,
  .activity-pick > .activity-log .log-col-action,
  .activity-pick > .activity-log .log-col-notes {
    width: auto;
    min-width: max-content;
  }

  /* #334: Properties table tighter mobile header padding and filter-popover bounds */
  .property-table th,
  main > .table-wrap.property-table-wrap > table[data-column-page="properties"][data-filter-table].property-table th,
  #card-board[data-page="project"] .card.fold > .fold-body > .property-filter:first-child table[data-filter-table].property-table th {
    padding: 0.55rem 0.75rem;
  }

  .filter-popover {
    max-width: calc(100vw - 2rem);
    max-height: 70dvh;
    overflow-y: auto;
  }

  /* Issue #220. Phone portrait keeps the doubled list box inside the viewport. */
  main > .table-wrap.property-table-wrap:has(> table.table-box-doubled) {
    max-height: min(56rem, 75dvh);
  }

}

/* #324, #331, #333, #334: Mobile landscape pop-up size caps, pinned Close/Cancel, and table scroll height caps */
@media (max-width: 960px) and (orientation: landscape), (max-height: 540px) {
  dialog.popup,
  dialog.popup#primary-rc-contact,
  dialog.popup#edit-other-contacts,
  dialog.popup.outcomes-dialog,
  dialog.popup.key-dates-dialog,
  dialog.popup.measures-dialog,
  dialog.popup.history-entry-dialog,
  dialog.popup.activity-entry-dialog {
    width: min(85vw, 64rem);
    max-width: 85vw;
    max-height: 82dvh;
    overflow-y: auto;
  }

  dialog.popup#edit-other-contacts:not(.is-editing) > .card > .popup-actions {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    margin: 0;
    z-index: 5;
  }

  dialog.popup#edit-other-contacts.is-editing .other-contact-edit.is-current > .popup-actions,
  dialog.popup.measures-dialog > .card > .popup-actions,
  dialog.popup.activity-entry-dialog .popup-actions:not([hidden]),
  dialog.popup.history-entry-dialog .popup-actions:not([hidden]),
  dialog.popup.outcomes-dialog .popup-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--sheet);
    padding: 0.45rem 0 0.15rem;
  }

  details.card.fold[data-card="history"],
  details.card.fold[data-card="history"] > .fold-body,
  .activity-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .activity-pick,
  .property-pick,
  .import-pick,
  main > .table-wrap.property-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: 60dvh;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    box-sizing: border-box;
  }

  .import-page .import-scroll {
    max-height: 60dvh;
  }

  /* The doubled box is 2x the desktop window and still respects the
     landscape cap. min() keeps this off the 60dvh-only selector list
     used by Issue #342. Issue #417 hides Show More when this cap means
     doubling would not change the height. */
  .activity-pick.table-box-doubled,
  .property-pick.table-box-doubled,
  [data-more-box].table-box-doubled {
    max-height: min(56rem, 60dvh);
  }

  /* Issue #220 and #342. The doubled list box still stops at 60dvh. */
  main > .table-wrap.property-table-wrap:has(> table.table-box-doubled) {
    max-height: min(56rem, 60dvh);
  }

  /* Issue #340. Pairs with overflow-x and overflow-y auto on the same wrappers above. */
  .activity-pick::after,
  .property-pick::after,
  .import-pick::after {
    position: sticky;
    left: 0;
    bottom: 0;
  }

  .activity-pick > .activity-log,
  .activity-log.activity-log-history {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
    max-width: none;
  }

  .activity-pick > .activity-log th,
  .activity-pick > .activity-log td,
  .activity-log.activity-log-history th,
  .activity-log.activity-log-history td {
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
  }

  .activity-pick > .activity-log .log-col-date,
  .activity-pick > .activity-log .log-col-property,
  .activity-pick > .activity-log .log-col-postcode,
  .activity-pick > .activity-log .log-col-user,
  .activity-pick > .activity-log .log-col-action,
  .activity-pick > .activity-log .log-col-notes {
    width: auto;
    min-width: max-content;
  }

  .activity-entry-notes-scroll {
    max-height: 32dvh;
  }

  .filter-popover {
    max-width: min(16.5rem, calc(100vw - 2rem));
    max-height: 70dvh;
    overflow-y: auto;
  }
}

/* The Projects grid card is overflow: visible, except overflow: hidden
   inside the 800px block. Its scrollport is the inner .projects-table-pick,
   which carries the sticky band. A sticky ::after here would pin to the
   page while the card is overflow: visible, and would stack a second band
   on the inner scrollport. The id beats the 720px sticky rule on
   .property-table-wrap and main > .table-wrap. Issues #340 and #322. */
#projects-table-wrap::after {
  position: static;
}

/* Issue #341. The project access table scrolls inside its card at every
   width, including 390px portrait and 844px landscape. The #340 band is
   sticky only beside this overflow. Contacts and Calendar stay on plain
   main > .table-wrap. */
main:has(.access-members) {
  min-width: 0;
}

main > .table-wrap.access-members {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
}

main > .table-wrap.access-members::after {
  position: sticky;
  left: 0;
  bottom: 0;
}

.access-members table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}

.access-members th,
.access-members td {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.project-access-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  max-width: 100%;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
}

.project-access-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Issue #341. Links and the access-page submit controls are 44px on touch
   and on narrow screens. Button height stays 2rem; min-height lifts the
   hit area. Issue #322. */
@media (pointer: coarse), (max-width: 960px) {
  .access-nav a,
  #project-access .project-access-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.25rem 0.5rem;
  }

  main:has(.access-members) [type="submit"] {
    box-sizing: border-box;
    min-height: 2.75rem;
    min-width: 2.75rem;
  }
}

/* Issue #419. Contacts uses the same one-line clip as the other tables.
   Every column, including the company link, phone and email, keeps the
   table font. The cap is the address width from the Properties list.
   Companies and Users do not sort, so this table does not use
   data-filter-table. These rules sit ahead of the Users directory rules. */
table.contacts-directory {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
  max-width: none;
}

table.contacts-directory th,
table.contacts-directory td {
  max-width: 22rem;
  font-size: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
}

table.contacts-directory td > a,
table.contacts-directory td > a:hover,
table.contacts-directory td > a:visited {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-size: inherit;
  color: inherit;
  text-decoration: none;
}

/* Issue #420. Users uses the same one-line clip as Contacts. Name,
   Company, Role, Phone, Email, Status and Projects end in an ellipsis
   at the address width from the Properties list. Edit, Active and
   Project access stay as wide as their controls, so Deactivate and the
   Project access link are not shortened. This table does not sort. */
table.users-directory {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
  max-width: none;
}

table.users-directory th:nth-child(-n+7),
table.users-directory td:nth-child(-n+7) {
  max-width: 22rem;
  font-size: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
}

/* Issue #474. Activity and History cells use the same side padding as the
   Properties table (.property-table th/td: 1rem each side; 0.75rem on
   header cells at 800px and below). Earlier rules give these tables
   0 / 0.35rem side padding in several places, so this block is final. */
table.activity-log:not(#tasks table) > thead > tr > th,
table.activity-log:not(#tasks table) > tbody > tr > td {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Header cells match Properties (.property-table th on the project page):
   0.7rem top, 1.35rem bottom, 1.5 line height, no clipping. */
table.activity-log:not(#tasks table) > thead > tr > th {
  padding-top: 0.7rem !important;
  padding-bottom: 1.35rem !important;
  line-height: 1.5;
  overflow: visible !important;
  text-overflow: clip !important;
  cursor: default;
  z-index: 5;
}

@media (max-width: 800px) {
  table.activity-log:not(#tasks table) > thead > tr > th {
    padding: 0.55rem 0.75rem !important;
  }
}

/* Issue #474. Activity and History columns size to their content like the
   Properties table, so nothing wraps. The table scrolls sideways when it
   is wider than the card. Notes is capped at 40rem with an ellipsis; the
   row popup shows the full note. */
table.activity-log:not(#tasks table) {
  table-layout: auto !important;
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
}

table.activity-log:not(#tasks table) > thead > tr > th,
table.activity-log:not(#tasks table) > tbody > tr > td {
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
}

table.activity-log:not(#tasks table) > thead > tr > th .filter-th {
  flex-wrap: nowrap;
}

table.activity-log:not(#tasks table) > tbody > tr > td.log-col-notes > span {
  display: block;
  max-width: 40rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

/* Issue #474. Activity full screen: the table starts the same distance
   under the count as Properties (no extra margin on .activity-pick). */
details.card.is-table-full[data-card="activity"] .activity-pick {
  margin-top: 0 !important;
}

/* Issue #480. One icon shape for every assessment document code. */
.document-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.document-tile {
  display: flex;
  flex: 1 1 4.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 4.5rem;
  min-height: 4.5rem;
  padding: 0.45rem;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: var(--navy);
  font: inherit;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.document-tile-icon {
  flex: 0 0 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  box-sizing: border-box;
  border-radius: 0.2rem;
}
.document-tile.is-present .document-tile-icon {
  background: var(--ink);
  border-width: 2px;
  border-style: solid;
  border-color: var(--ink);
}
.document-tile.is-missing {
  color: var(--muted);
}
.document-tile.is-missing .document-tile-icon {
  background: transparent;
  border-width: 2px;
  border-style: solid;
  border-color: var(--muted);
}
.document-tile:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
.document-tile-note {
  margin: 0.2rem 0 0;
}
@media (max-width: 40rem) {
  .document-tile {
    flex-basis: 30%;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

/* Issue #482. Assessment card shell, buttons and pills.
   Green in the light theme and the dark theme.
   Hover adds a 40% overlay. Pills keep the compact padding. */
.assessment-preview-stage,
.assessment-preview-shared {
  margin: 0 0 1.5rem;
}

.assessment-preview-label {
  margin: 0 0 0.4rem;
  color: var(--ink);
  font-weight: 500;
}

.assessment-preview-frame {
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 1.75rem;
}

.assessment-preview-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.assessment-preview-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1rem;
  width: max-content;
  min-width: 100%;
  margin: 0;
}

.assessment-preview-stage {
  flex: 0 0 100cqi;
  width: 100cqi;
  max-width: none;
  margin: 0;
}

/* Property record #card-board.record-fit is one column, then two equal
   columns from 1200px with column-gap 1.25rem. The preview card uses that
   track. 100cqi is this page's main column, the same box as the board. */
@media (min-width: 1200px) {
  .assessment-preview-stage {
    flex-basis: calc((100cqi - 1.25rem) / 2);
    width: calc((100cqi - 1.25rem) / 2);
  }
}

.assessment-preview-stage .assessment-flow-card {
  width: 100%;
  max-width: none;
}

.assessment-popup-stage {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1rem;
  width: max-content;
  max-width: none;
  padding: 1rem;
  background: rgba(0, 36, 57, 0.45);
}

.assessment-popup-stage form {
  display: contents;
}

.assessment-popup-pair {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1rem;
  width: auto;
}

.assessment-flow-card {
  max-width: 44rem;
}

/* dialog.popup opens at width calc(100% - 2rem), capped at 44rem.
   A modal dialog's 100% is the viewport. */
.assessment-popup-stage .assessment-flow-card {
  flex: 0 0 auto;
  width: calc(100vw - 2rem);
  max-width: 44rem;
}

.assessment-flow-card > h2.fold-title,
html[data-theme="dark"] .card.assessment-flow-card > h2.fold-title {
  color: #70BD95;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 0;
}

.assessment-flag {
  margin: 0 0 0.75rem;
  padding: 0.45rem 0.75rem;
  background: color-mix(in srgb, var(--mark) 40%, transparent);
  color: #1c242b;
  border-radius: 0.35rem;
  border-width: 1.5px;
  border-style: solid;
  border-color: #6cc196;
  font-weight: 500;
}

.assessment-strip {
  display: flex;
  gap: 0.35rem;
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
}

.assessment-strip li {
  flex: 1 1 0;
  text-align: center;
  background: #d4e2ec;
  color: #1c242b;
  font-weight: 500;
  padding: 0.45rem 0.4rem 0.45rem 0.9rem;
}

.assessment-strip li.is-point {
  clip-path: polygon(0 0, calc(100% - 0.65rem) 0, 100% 50%, calc(100% - 0.65rem) 100%, 0 100%, 0.65rem 50%);
}

.assessment-strip li.is-point:first-child {
  clip-path: polygon(0 0, calc(100% - 0.65rem) 0, 100% 50%, calc(100% - 0.65rem) 100%, 0 100%);
  padding-left: 0.4rem;
}

.assessment-strip li.is-end {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0.65rem 50%);
}

.assessment-strip li.is-filled {
  background: var(--mark);
  color: #002439;
  font-weight: 500;
}

.assessment-emphasis {
  color: var(--mark);
  font-weight: 500;
}

.assessment-state {
  color: #1c242b;
  font-weight: 400;
}

.assessment-attempts-label {
  margin: 0.6rem 0 0.3rem;
  font-weight: 500;
}

.assessment-attempts {
  list-style: none;
  margin: 0;
  padding: 0.6rem 0.8rem;
  background: #d4e2ec;
  color: #1c242b;
  font-weight: 400;
}

html[data-theme="dark"] .assessment-strip li:not(.is-filled) {
  background: #22384a;
  color: #a9bccb;
}

html[data-theme="dark"] .assessment-attempts {
  background: #22384a;
  color: #a9bccb;
  font-weight: 400;
}

html[data-theme="dark"] .assessment-state,
html[data-theme="dark"] .assessment-flag {
  color: var(--ink);
  font-weight: 400;
}

html[data-theme="dark"] .assessment-flag {
  font-weight: 500;
}

.assessment-attempts li {
  margin: 0.15rem 0;
}

.assessment-flow-actions,
.assessment-popup-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

button.flow-button {
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-weight: 500;
  color: #002439;
  border-width: 1px;
  border-style: solid;
  border-color: var(--mark);
}

button.flow-button-main {
  background: var(--mark);
  color: #002439;
}

button.flow-button-main:hover,
button.flow-button-support:hover,
a.flow-button-support:hover {
  background: #62b086;
  color: #002439;
}

button.flow-button-support,
a.flow-button-support,
a.flow-button-support:visited {
  background: #fff;
  color: #002439;
  border-color: var(--mark);
}

button.flow-button-muted,
button.flow-button-muted:hover {
  background: transparent;
  color: var(--muted);
  border-color: var(--muted);
}

button.flow-button-muted:hover {
  background: transparent;
  color: #3a444c;
  border-color: #3a444c;
}

button.flow-button-unavailable,
button.flow-button-unavailable:hover {
  background: color-mix(in srgb, var(--muted) 25%, var(--sheet));
  color: var(--muted);
  border-color: transparent;
}

.flow-pill {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 0.3rem 0.8rem;
  border-width: 1px;
  border-style: solid;
  border-color: var(--mark);
  border-radius: 999px;
  background: transparent;
  color: #002439;
  font-weight: 500;
  font-family: inherit;
  margin: 0 0.35rem 0.35rem 0;
}

.flow-pill.is-selected,
.flow-pill:has(input:checked) {
  background: var(--mark);
  color: #002439;
}

.flow-pill:hover,
.flow-pill.is-selected:hover,
.flow-pill:has(input:checked):hover {
  background: #62b086;
  color: #002439;
}

.flow-pill input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.assessment-button-states {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-bottom: 1rem;
}

.assessment-button-states p {
  margin: 0 0 0.35rem;
}

.assessment-preview-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}

.assessment-preview-pair > .card {
  flex: 1 1 20rem;
}

.assessment-confirm-facts {
  width: 100%;
  border-collapse: collapse;
}

.assessment-confirm-facts th {
  text-align: left;
  font-weight: 400;
  color: #5c6770;
  padding: 0.2rem 0.8rem 0.2rem 0;
  width: 7rem;
}

.assessment-confirm-facts th,
.assessment-confirm-facts td,
.assessment-report-facts th,
.assessment-report-facts td {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--line);
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.assessment-confirm-facts td {
  font-weight: 400;
  color: #1c242b;
}

.assessment-report-facts {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.assessment-report-facts th {
  width: 15rem;
  text-align: left;
  font-weight: 400;
  color: #5c6770;
  vertical-align: top;
  padding-right: 0.8rem;
}

.assessment-report-facts td {
  font-weight: 400;
  color: var(--ink);
  vertical-align: top;
}

html[data-theme="dark"] .assessment-confirm-facts th {
  color: #a8b2bc;
  font-weight: 400;
}

html[data-theme="dark"] .assessment-confirm-facts td {
  color: var(--ink);
  font-weight: 400;
}

.field-label,
.assessment-recipients legend {
  display: block;
  font-weight: 500;
  margin: 0.6rem 0 0.3rem;
}

.assessment-recipients {
  border: 0;
  margin: 0;
  padding: 0;
}

.assessment-editor-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.assessment-editor-body,
.assessment-email-preview {
  min-height: 12rem;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  padding: 0.6rem 0.75rem;
  background: var(--sheet);
  color: var(--ink);
}

.assessment-editor-source {
  width: 100%;
  min-height: 12rem;
}

.assessment-editor-source.is-synced {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  min-height: 0;
}

.assessment-editor-body ul,
.assessment-email-preview ul,
.assessment-hanging {
  list-style-position: outside;
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 2.8rem;
}

.assessment-editor-body ul ul,
.assessment-email-preview ul ul,
.assessment-hanging ul {
  padding-left: 1.4rem;
}

.assessment-editor-body li,
.assessment-email-preview li,
.assessment-hanging li {
  padding-left: 0;
}

.assessment-history {
  margin: 0;
  padding-left: 1.2rem;
}

.assessment-history-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.35rem 0 0.5rem;
}

.assessment-issue {
  margin: 0.6rem 0;
  padding: 0.6rem 0.75rem;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: 0.35rem;
}

.assessment-issue-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.assessment-issue-head .field-label {
  margin: 0;
}

html[data-theme="dark"] .assessment-popup-stage {
  background: rgba(0, 8, 15, 0.62);
}

html[data-theme="dark"] .assessment-strip li.is-filled {
  color: #002439;
  font-weight: 500;
}

.assessment-strip.is-age-green li,
html[data-theme="dark"] .assessment-strip.is-age-green li {
  background: var(--mark);
  color: #002439;
}

.assessment-strip.is-age-amber li,
html[data-theme="dark"] .assessment-strip.is-age-amber li {
  background: #F2B84B;
  color: #002439;
}

.assessment-strip.is-age-red li,
html[data-theme="dark"] .assessment-strip.is-age-red li {
  background: #FF6B6B;
  color: #002439;
}

html[data-theme="dark"] button.flow-button-main,
html[data-theme="dark"] button.flow-button-main:hover {
  color: #002439;
  font-weight: 500;
}

html[data-theme="dark"] button.flow-button-support,
html[data-theme="dark"] button.flow-button-support:hover,
html[data-theme="dark"] a.flow-button-support,
html[data-theme="dark"] a.flow-button-support:visited,
html[data-theme="dark"] a.flow-button-support:hover {
  background: var(--sheet);
  color: var(--mark);
  border-color: var(--mark);
  font-weight: 500;
}

html[data-theme="dark"] button.flow-button-main:hover,
html[data-theme="dark"] button.flow-button-support:hover,
html[data-theme="dark"] a.flow-button-support:hover {
  background: #62b086;
  color: #002439;
}

html[data-theme="dark"] button.flow-button-muted,
html[data-theme="dark"] button.flow-button-muted:hover {
  background: transparent;
  color: var(--muted);
  border-color: var(--muted);
  font-weight: 500;
}

html[data-theme="dark"] button.flow-button-muted:hover {
  background: transparent;
  color: #e8eef2;
  border-color: #e8eef2;
}

html[data-theme="dark"] .flow-pill {
  background: transparent;
  color: var(--mark);
  border-color: var(--mark);
  font-weight: 500;
}

html[data-theme="dark"] .flow-pill.is-selected,
html[data-theme="dark"] .flow-pill[aria-pressed="true"],
html[data-theme="dark"] .flow-pill:has(input:checked) {
  background: var(--mark);
  color: #002439;
}

html[data-theme="dark"] .flow-pill:hover,
html[data-theme="dark"] button.flow-pill:hover,
html[data-theme="dark"] .flow-pill.is-selected:hover,
html[data-theme="dark"] .flow-pill[aria-pressed="true"]:hover,
html[data-theme="dark"] .flow-pill:has(input:checked):hover {
  background: #62b086;
  color: #002439;
}

.card.assessment-preview-shared > h2,
html[data-theme="dark"] .card.assessment-preview-shared > h2 {
  color: #70BD95;
  font-weight: 500;
}

input.assessment-wide-input,
textarea.assessment-note {
  display: block;
  width: 100%;
  max-width: none;
}

textarea.assessment-note {
  min-height: 3.2rem;
  line-height: 1.4;
  resize: vertical;
}

.assessment-book-when {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.assessment-arrival-pills {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.assessment-arrival-pills .flow-pill {
  margin: 0 0 0.45rem;
}

.assessment-calendar {
  width: 16.3rem;
  max-width: 100%;
  margin: 0.2rem 0 0.8rem;
}

.assessment-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
}

.assessment-calendar-month {
  flex: 1;
  margin: 0;
  text-align: center;
  font-weight: 500;
}

button.flow-button.assessment-calendar-nav-button,
html[data-theme="dark"] button.flow-button.assessment-calendar-nav-button {
  background: transparent;
  color: var(--ink);
  border-width: 0;
  border-color: transparent;
  box-shadow: none;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  padding: 0 0.2rem;
}

button.flow-button.assessment-calendar-nav-button:hover,
html[data-theme="dark"] button.flow-button.assessment-calendar-nav-button:hover {
  background: #62b086;
  color: #002439;
}

.assessment-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 2.2rem);
  gap: 0.15rem;
  justify-content: start;
}

.assessment-calendar-weekday {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
}

button.assessment-calendar-day {
  background: transparent;
  color: var(--ink);
  border-width: 0;
  border-radius: 999px;
  padding: 0.25rem 0;
}

button.assessment-calendar-day:hover {
  background: color-mix(in srgb, var(--mark) 40%, transparent);
  color: var(--ink);
}

button.assessment-calendar-day.is-past,
button.assessment-calendar-day.is-past:hover,
button.assessment-calendar-day:disabled,
button.assessment-calendar-day:disabled:hover {
  background: transparent;
  color: var(--muted);
}

button.assessment-calendar-day.is-selected,
button.assessment-calendar-day.is-selected:hover {
  background: var(--mark);
  color: var(--navy);
}

a.flow-button,
a.flow-button:hover,
a.flow-button:visited {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-weight: 500;
  border-width: 1px;
  border-style: solid;
}

a.flow-button,
a.flow-button:hover,
a.flow-button:visited {
  color: #002439;
}

a.flow-button-support,
a.flow-button-support:hover,
a.flow-button-support:visited {
  background: #fff;
  color: #002439;
  border-color: var(--mark);
}

a.flow-button-support:hover,
html[data-theme="dark"] main a.flow-button.flow-button-support:not(.button):not(.kanban-card):not(.wordmark):not(.view-switch a):not(.month-nav a):hover {
  background: #62b086;
  color: #002439;
}

.assessment-popup-actions .flow-button-muted {
  margin-right: auto;
}

.assessment-drop {
  margin: 0.6rem 0;
  padding: 1rem;
  text-align: center;
  border-width: 1px;
  border-style: dashed;
  border-color: var(--mark);
}

.assessment-drop p {
  margin: 0.2rem 0 0.5rem;
}

.assessment-tiles {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0.4rem 0 0.8rem;
  padding: 0;
}

.assessment-tiles > li {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}

.assessment-tile {
  display: inline-flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 4.5rem;
  box-sizing: border-box;
  padding: 0.35rem 0.4rem;
  text-align: center;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.2;
  background: color-mix(in srgb, var(--muted) 18%, var(--sheet));
  color: var(--muted);
  border-width: 0;
  border-radius: 0;
}

button.assessment-tile.is-matched:hover,
button.assessment-tile.is-confirmed:hover {
  background: #62b086;
  color: #002439;
}

.assessment-tile span {
  display: block;
}

.assessment-tile.is-matched {
  background: color-mix(in srgb, var(--mark) 40%, transparent);
  color: #1c242b;
}

html[data-theme="dark"] .assessment-tile.is-matched {
  color: #d3f2e2;
}

html[data-theme="dark"] .assessment-tile.is-matched:hover,
html[data-theme="dark"] button.assessment-tile.is-matched:hover,
html[data-theme="dark"] button.assessment-tile.is-confirmed:hover {
  background: #62b086;
  color: #002439;
}

.assessment-tile.is-confirmed {
  background: var(--mark);
  color: #002439;
}

@media (max-width: 40rem) {
  .assessment-tiles {
    flex-wrap: wrap;
  }

  .assessment-tiles > li {
    flex-basis: 7.25rem;
    flex-grow: 1;
    min-width: 7.25rem;
  }

  .assessment-tile span {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
  }
}

.assessment-flow-card > p {
  color: #1c242b;
  font-weight: 400;
}

.assessment-flow-card > p.assessment-flag,
.assessment-flow-card > p.assessment-attempts-label,
.assessment-flow-card > p.field-label {
  font-weight: 500;
}

html[data-theme="dark"] .assessment-flow-card > p {
  color: var(--ink);
  font-weight: 400;
}

html[data-theme="dark"] .assessment-flow-card > p.assessment-flag,
html[data-theme="dark"] .assessment-flow-card > p.assessment-attempts-label,
html[data-theme="dark"] .assessment-flow-card > p.field-label {
  font-weight: 500;
}

html[data-theme="dark"] .assessment-flow-card > p.assessment-flag {
  border-width: 1.5px;
  border-style: solid;
  border-color: #6cc196;
}

.assessment-report-sheet {
  background: var(--sheet);
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
  margin: 0.6rem 0;
  padding: 1.75rem 1.6rem;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  box-shadow: 0 8px 18px rgba(0, 36, 57, 0.18);
}

.assessment-report-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.25rem;
}

.assessment-report-status {
  margin: 0 0 0.9rem;
  font-weight: 400;
}

.assessment-report-sheet h3,
.assessment-report-sheet p,
.assessment-report-sheet th,
.assessment-report-sheet td {
  color: var(--ink);
}

html[data-theme="dark"] .assessment-report-sheet {
  background: var(--sheet);
  color: var(--ink);
  border-color: #3a5164;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .assessment-report-facts th {
  color: #a8b2bc;
}

.assessment-report-sheet h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0.8rem 0 0.3rem;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #70BD95;
  padding-bottom: 0.15rem;
}

.assessment-report-sheet h3:first-child {
  margin-top: 0;
}

.assessment-report-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.4rem 0 0.2rem;
}

.assessment-report-table th,
.assessment-report-table td {
  text-align: left;
  font-weight: 400;
  padding: 0.2rem 0.6rem 0.2rem 0;
  vertical-align: top;
}

.assessment-report-table th {
  font-weight: 500;
}

/* Issue #503. Assessor Companies on the project page, matched to the
   dark-view mock-up. Light View uses the same tokens as the rest of the site. */
.assessor-company-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.assessor-company-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

.assessor-company-name {
  color: var(--ink);
  font-weight: 400;
  min-width: 0;
  overflow-wrap: anywhere;
}

.assessor-company-empty {
  margin-bottom: 0;
}

.assessor-company-dialog .card > h2,
html[data-theme="dark"] .assessor-company-dialog .card > h2 {
  color: #70BD95;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 0.15rem;
}

.popup-subtitle {
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.95rem;
}

.assessor-company-dialog .field-label {
  font-weight: 500;
}

.assessor-company-dialog .assessment-confirm-facts th {
  width: 11rem;
  white-space: nowrap;
}

.assessor-company-dialog .assessment-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.assessor-company-dialog .flow-pill {
  margin: 0;
}

.assessor-company-note {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-weight: 400;
}

/* Muted Remove. Light grey is #5c6770; dark grey is #a8b2bc.
   The hover stays in that grey. It does not turn white or green. */
body:has(#card-board[data-page="project"]) main button.assessor-company-remove,
body:has(#card-board[data-page="project"]) main button.assessor-company-remove:hover {
  padding-left: 0.7rem;
  padding-right: 0.7rem;
  font-size: 0.85rem;
  background: transparent;
  color: #5c6770;
  border-width: 1px;
  border-style: solid;
  border-color: #5c6770;
}

body:has(#card-board[data-page="project"]) main button.assessor-company-remove:hover {
  background: transparent;
  color: #3a444c;
  border-color: #3a444c;
}

html[data-theme="dark"] body:has(#card-board[data-page="project"]) main button.assessor-company-remove,
html[data-theme="dark"] body:has(#card-board[data-page="project"]) main button.assessor-company-remove:hover {
  background: transparent;
  color: #a8b2bc;
  border-color: #a8b2bc;
}

html[data-theme="dark"] body:has(#card-board[data-page="project"]) main button.assessor-company-remove:hover {
  background: transparent;
  color: #c5ced6;
  border-color: #c5ced6;
}

@media (max-width: 30rem) {
  .assessor-company-row {
    align-items: flex-start;
  }
}

/* Issue #498. The live Assessment card uses the preview's strip, pills and buttons. */
#assessments {
  margin-top: 0;
}

a.assessment-attempts-toggle,
a.assessment-attempts-toggle:hover,
a.assessment-attempts-toggle:visited {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

/* Beats the Dark View link colour, which is more specific than a class on its own. */
html[data-theme="dark"] main a.assessment-attempts-toggle:not(.button):not(.kanban-card):not(.wordmark):not(.view-switch a):not(.month-nav a),
html[data-theme="dark"] main a.assessment-attempts-toggle:not(.button):not(.kanban-card):not(.wordmark):not(.view-switch a):not(.month-nav a):hover,
html[data-theme="dark"] main a.assessment-attempts-toggle:not(.button):not(.kanban-card):not(.wordmark):not(.view-switch a):not(.month-nav a):visited {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.assessment-live .assessment-flow-actions {
  margin-top: 1rem;
}

dialog.assessment-card-dialog {
  max-width: 44rem;
}

.assessment-email-preview {
  margin: 0.6rem 0 1rem;
  font-weight: 400;
}

.assessment-email-preview p,
.assessment-email-preview li {
  font-weight: 400;
}

.form-error {
  color: #9b2c2c;
  font-weight: 500;
}

html[data-theme="dark"] .form-error {
  color: #f0b4b4;
}

label.assessment-calendar-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  box-sizing: border-box;
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 0;
  font-weight: 500;
}

label.assessment-calendar-day input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

label.assessment-calendar-day:hover {
  background: color-mix(in srgb, var(--mark) 40%, transparent);
}

label.assessment-calendar-day.is-past,
label.assessment-calendar-day:has(input:disabled) {
  color: var(--muted);
}

label.assessment-calendar-day.is-selected,
label.assessment-calendar-day:has(input:checked) {
  background: var(--mark);
  color: var(--navy);
}

@media (max-width: 700px) {
  .assessment-book-when {
    flex-direction: column;
  }

  .assessment-flow-actions,
  .assessment-popup-actions {
    justify-content: flex-end;
  }
}