/* =========================================================================
   41 Moorgate - Work Boards surface.

   Loaded after portal.css and built on its tokens, so a theme swap
   (Paper / Mist / Linen) re-tints this page along with everything else.
   The page chrome - .shell, .sidebar, .nav-item, .main, .topbar - is
   portal.css's, unchanged, because a new top-level screen that looks like
   a different product is a defect even when every test passes.

   Everything this file adds is prefixed `w-`. portal.css owns some very
   generic names (.shell, .card, .field, .screen, .switcher) and a collision
   with .shell once stretched every card in a grid row to the full viewport.
   That got past prettier, eslint, stylelint, PHPStan and 130 tests, and was
   obvious in a screenshot. Hence the prefix, and hence the screenshots.

   Mobile first below 980px, which is where portal.css folds the sidebar
   away. The caretaker's device is a phone, and the item panel and My Work
   are the two screens that get used standing up in a plant room.
   ========================================================================= */

/* ---------------------------------------------------------- access gate */

/* portal.css paints <body> in --ink, so the gate is a light card on the dark
   ground rather than dim text directly on it. It is on screen for the length
   of one auth call, but it is also the screen someone sees when their session
   has expired, and that one needs to be readable. */
.w-gate {
  max-width: 460px;
  margin: 16vh auto 0;
  padding: 30px 28px 32px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-align: center;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.6;
}

.w-gate h1 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 22px;
  color: var(--text);
}

/* ------------------------------------------------------------ view tabs */
.w-tabs {
  display: flex;
  gap: 2px;
  padding: 0 28px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}

.w-tabs::-webkit-scrollbar {
  display: none;
}

.w-tabs button {
  white-space: nowrap;
  padding: 10px 14px;
  min-height: 42px;
  border-bottom: 2px solid transparent;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 500;
}

.w-tabs button:hover {
  color: var(--text);
}

.w-tabs button.on {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* -------------------------------------------------------------- toolbar */
.w-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}

.w-bar input[type='search'],
.w-bar select {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  background: #fff;
  font-family: var(--body);
  font-size: 13px;
  color: var(--text);
  min-width: 0;
}

.w-bar input[type='search'] {
  flex: 1 1 200px;
  max-width: 320px;
}

.w-bar .btn {
  font-size: 13px;
  padding: 9px 16px;
}

.w-spacer {
  flex: 1 1 auto;
}

.w-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
}

/* ----------------------------------------------------------- board body */
.w-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 20px 28px 80px;
  background: var(--paper);
}

.w-empty {
  padding: 46px 8px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
}

.w-loading {
  padding: 32px 8px;
  color: var(--text-dim);
  font-size: 13px;
}

/* ---------------------------------------------------------- table view */
.w-group {
  margin-bottom: 24px;
}

.w-group-h {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

.w-group-h .w-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: 0 0 auto;
  background: var(--text-dim);
}

.w-group-h h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
}

.w-group-h .w-n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
}

/* Seven columns and a title genuinely do not fit a laptop, so the table
   scrolls sideways. The shadow on whichever edge still has content is the
   only thing that tells someone that, and without it a header clipped
   mid-word at the right edge reads as a broken page rather than a scrollable
   one. Pure CSS: the white panels scroll with the content, the shadows do
   not, so each fades out as its end is reached. */
.w-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background:
    linear-gradient(to right, #fff 30%, rgb(255 255 255 / 0%)) left center / 44px 100% no-repeat
      local,
    linear-gradient(to left, #fff 30%, rgb(255 255 255 / 0%)) right center / 44px 100% no-repeat
      local,
    radial-gradient(farthest-side at 0 50%, rgb(14 17 22 / 13%), rgb(14 17 22 / 0%)) left center /
      16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(14 17 22 / 13%), rgb(14 17 22 / 0%)) right
      center / 16px 100% no-repeat scroll,
    #fff;
}

table.w-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  line-height: 1.45;
}

table.w-table th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: var(--paper-2);
}

table.w-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

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

table.w-table tbody tr {
  cursor: pointer;
}

table.w-table tbody tr:hover {
  background: var(--paper);
}

.w-ref {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: nowrap;
}

.w-name {
  font-weight: 500;
}

.w-muted {
  color: var(--text-dim);
}

.w-nowrap {
  white-space: nowrap;
}

/* SLA. Not a label pill: a label is something a person chose and this is
   something the clock decided, so it reads as a quiet monospace figure
   rather than competing with the status beside it. Colour only once it
   matters, which is why `within` is deliberately unremarkable. */
.w-sla {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  border: 1px solid transparent;
}

.w-sla-ok {
  color: var(--text-soft);
}

.w-sla-hold {
  color: var(--text-dim);
  background: var(--paper-2);
  border-color: var(--line);
}

.w-sla-risk {
  color: #8a6417;
  background: #fbf3e0;
  border-color: #eeddb8;
}

.w-sla-over {
  color: #8f3423;
  background: #fbe9e5;
  border-color: #f0cfc7;
}

/* labels: the workhorse of the whole surface */
.w-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid transparent;
}

.w-c-blue {
  background: #e6eef6;
  color: #2f5b86;
  border-color: #cfe0ee;
}

.w-c-orange {
  background: #fbeee0;
  color: #8a5a20;
  border-color: #f2ddc4;
}

.w-c-purple {
  background: #efe9f6;
  color: #5c4680;
  border-color: #e0d5ee;
}

.w-c-green {
  background: #e3f0e9;
  color: #2f6349;
  border-color: #cde4d7;
}

.w-c-red {
  background: #f9e6e3;
  color: #8c3a2c;
  border-color: #f0d2cc;
}

.w-c-amber {
  background: #fbf1da;
  color: #7d6220;
  border-color: #f2e4c2;
}

.w-c-grey {
  background: #ecebe7;
  color: #5c6671;
  border-color: #e0ded7;
}

.w-c-slate {
  background: #e8ebee;
  color: #4a545e;
  border-color: #d8dde3;
}

.w-c-sage {
  background: #e9eee5;
  color: #4d5c3f;
  border-color: #dae2d2;
}

.w-people {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.w-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--text-soft);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
}

.w-due-over {
  color: #8c3a2c;
  font-weight: 600;
}

.w-due-soon {
  color: #7d6220;
  font-weight: 600;
}

.w-chat {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
}

/* --------------------------------------------------------- kanban view */

/* Same edge shadow as the table: six status lanes do not fit a laptop, and
   without a hint that "Resolved" and "Closed" are off to the right, people
   conclude the board only has four columns. */
.w-kanban {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 14px;
  background:
    linear-gradient(to right, var(--paper) 30%, rgb(255 255 255 / 0%)) left center / 40px 100%
      no-repeat local,
    linear-gradient(to left, var(--paper) 30%, rgb(255 255 255 / 0%)) right center / 40px 100%
      no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(14 17 22 / 12%), rgb(14 17 22 / 0%)) left center /
      14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(14 17 22 / 12%), rgb(14 17 22 / 0%)) right
      center / 14px 100% no-repeat scroll;
}

.w-kanban > .w-lane {
  flex-shrink: 0;
}

.w-lane {
  flex: 0 0 292px;
  width: 292px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px;
}

.w-lane-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.w-lane-h .w-n {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
}

/* Lanes scroll inside themselves rather than stretching the page to the
   height of the longest one. With 18 tickets in "In progress" and none in
   "Awaiting parts", a page-height board means scrolling past one column to
   discover the other four are empty. */
.w-lane-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 48px;
  max-height: calc(100dvh - 330px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.w-lane.w-over {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}

/* A scrolling flex column shrinks its children by default, which clips every
   card in half and overlaps the next. Cards keep their own height; the lane
   scrolls instead. */
.w-lane-body > .w-card,
.w-cards > .w-card,
.w-picker > label {
  flex: 0 0 auto;
}

.w-card {
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: inherit;
  color: inherit;
}

.w-card:hover {
  border-color: var(--accent);
}

.w-card.w-p1 {
  border-left-color: var(--coral);
}

.w-card.w-p2 {
  border-left-color: var(--amber);
}

.w-card.w-p4 {
  border-left-color: #9aa88c;
}

.w-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.w-card-title {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
}

.w-card-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-dim);
}

.w-lane-empty {
  padding: 16px 4px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
}

/* ------------------------------------------------------- calendar view */
.w-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.w-cal-dow {
  background: var(--paper-2);
  padding: 8px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.w-cal-day {
  background: #fff;
  min-height: 104px;
  padding: 6px 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.w-cal-day.w-out {
  background: var(--paper-2);
}

.w-cal-day.w-today {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.w-cal-n {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-dim);
}

/* portal.css gives every button a 44px floor for thumbs. A day cell holding
   four of them would be 200px tall, so these opt out deliberately: they are
   never the only way to reach an item, the table and kanban rows are. */
.w-cal-item {
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 6px;
  min-height: 0;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w-cal-item:hover {
  border-color: var(--accent);
}

.w-cal-more {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  padding-left: 2px;
}

/* ------------------------------------------------------- card lists */

/* The phone rendering of a table view, and of My Work. Same card as the
   kanban, stacked. */
.w-cards {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

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

/* Read-only in release 1. A bar you can drag is a statutory inspection you
   can move by accident, so the PPM window is changed in the item panel or
   not at all. */
.w-bar-track {
  display: block;
  width: 100%;
  min-width: 140px;
  height: 10px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
}

.w-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

/* ---------------------------------------------------------- item panel */
.w-panel-bg {
  position: fixed;
  inset: 0;
  background: rgb(14 17 22 / 42%);
  z-index: 60;
}

.w-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(640px, 100vw);
  z-index: 61;
  background: var(--paper);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  box-shadow: -18px 0 44px rgb(14 17 22 / 16%);
}

.w-panel-h {
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}

.w-panel-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.w-panel-h h2 {
  margin: 5px 0 3px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  flex: 1 1 auto;
}

.w-panel-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-dim);
}

.w-x {
  font-size: 20px;
  line-height: 1;
  padding: 0 8px;
  min-width: 44px;
  color: var(--text-dim);
  border-radius: var(--r-sm);
}

.w-x:hover {
  background: var(--paper);
  color: var(--text);
}

.w-panel-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 18px 22px 48px;
}

.w-fields {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 10px 14px;
  align-items: center;
  margin: 0;
}

.w-fields dt {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-dim);
}

.w-fields dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  min-width: 0;
}

.w-fields select,
.w-fields input,
.w-fields textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--text);
}

.w-sub {
  margin: 24px 0 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.w-thread {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.w-msg {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 13px;
}

.w-msg.w-internal {
  background: #fdf8ec;
  border-color: #f0e2c4;
}

.w-msg-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
}

.w-msg-h time {
  margin-left: auto;
  font-weight: 400;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
}

.w-msg p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.w-tag-int {
  background: #f0e2c4;
  color: #7d6220;
  border-radius: 5px;
  padding: 2px 7px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.w-compose {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.w-compose textarea {
  min-height: 76px;
  resize: vertical;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  background: #fff;
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--text);
}

.w-compose-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.w-compose-row select {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  background: #fff;
  font-family: var(--body);
  font-size: 13px;
  color: var(--text);
}

.w-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.w-log li {
  display: flex;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-soft);
}

.w-log time {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
}

/* --------------------------------------------------------- people picker */
.w-picker {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 190px;
  overflow-y: auto;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.w-picker label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 2px 2px;
  font-size: 13.5px;
  cursor: pointer;
}

.w-picker input[type='checkbox'] {
  width: 16px;
  height: 16px;
  min-height: 16px;
  flex: 0 0 auto;
  accent-color: var(--accent);
  margin: 0;
}

.w-picker em {
  margin-left: auto;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  color: var(--text-dim);
}

/* ---------------------------------------------------------- new item */
.w-panel-create .w-fields {
  align-items: start;
  gap: 12px 14px;
}

.w-panel-create .w-fields dt {
  padding-top: 8px;
}

.w-req {
  color: var(--coral);
  margin-left: 3px;
  font-weight: 700;
}

.w-new-msg {
  margin: 14px 0 0;
  min-height: 1em;
  font-size: 13px;
  color: #8c3a2c;
  font-weight: 500;
}

.w-new-msg:empty {
  margin: 0;
  min-height: 0;
}

/* ------------------------------------------------------------- files */

/* The upload control sits directly under the fields, above the thread,
   because somebody standing in front of the broken thing wants the camera
   and every scroll between them and it is a photograph not taken. */
.w-upload {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.w-upload-btn {
  font-size: 13px;
  padding: 9px 16px;
  cursor: pointer;
}

.w-upload-note,
.w-upload-state {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-dim);
}

.w-upload-state:not(:empty) {
  color: var(--text-soft);
}

.w-files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}

.w-file {
  position: relative;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.w-file a {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--paper);
}

.w-file img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.w-file-doc {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}

.w-file figcaption {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 9px 8px;
  min-width: 0;
}

.w-file-name {
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w-file-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
}

.w-file-x {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border-radius: 50%;
  background: rgb(14 17 22 / 62%);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.w-file:hover .w-file-x,
.w-file-x:focus-visible {
  opacity: 1;
}

/* No hover on a touch screen, so the control is simply always there. */
@media (hover: none) {
  .w-file-x {
    opacity: 1;
  }
}

/* --------------------------------------------------------- mentions */

/* A class carrying `display` beats the user-agent sheet's
   `[hidden] { display: none }`, so without this the closed picker renders as
   an empty bordered strip under the composer. Every toggled element in this
   file that sets display needs the same line. */
.w-mention-list[hidden] {
  display: none;
}

.w-mention-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: -4px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 20px rgb(14 17 22 / 10%);
}

.w-mention {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 5px 8px;
  border-radius: 7px;
  text-align: left;
  font-size: 13.5px;
  color: var(--text);
}

.w-mention:hover,
.w-mention.on {
  background: var(--paper);
}

.w-mention em {
  margin-left: auto;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  color: var(--text-dim);
}

/* ---------------------------------------------------- audience chip */

/* The one mistake this surface must make hard to walk into is an internal
   note reaching an occupier, and a grey dropdown among other grey
   dropdowns is not a warning. It carries its own colour and says in words
   who will read it. */
.w-aud {
  border-width: 1px;
  border-style: solid;
  font-weight: 600;
}

select.w-aud-internal {
  background: #fdf8ec;
  border-color: #e6d3a8;
  color: #7d6220;
}

select.w-aud-tenant {
  background: #e6eef6;
  border-color: #bcd3e8;
  color: #2f5b86;
}

select.w-aud-contractor {
  background: #efe9f6;
  border-color: #d5c6ea;
  color: #5c4680;
}

select.w-aud-all {
  background: #f9e6e3;
  border-color: #eec3ba;
  color: #8c3a2c;
}

.w-aud-note {
  font-size: 11.5px;
  color: #7d6220;
}

.w-aud-note-tenant {
  color: #2f5b86;
}

.w-aud-note-contractor {
  color: #5c4680;
}

.w-aud-note-all {
  color: #8c3a2c;
  font-weight: 600;
}

/* ----------------------------------------------------------- follow */
.w-follow {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
}

.w-follow:hover {
  border-color: var(--accent);
  color: var(--text);
}

.w-follow.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.w-follow.muted {
  color: var(--text-dim);
  border-style: dashed;
}

.w-follow .w-n {
  font-family: var(--mono);
  font-size: 10.5px;
  opacity: 0.75;
}

/* -------------------------------------------------------------- my work */
.w-bucket {
  margin-bottom: 22px;
}

.w-bucket h2 {
  margin: 0 0 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
}

.w-bucket.w-over h2 {
  color: #8c3a2c;
}

/* ---------------------------------------------------------------- toast */
.w-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 70;
  max-width: min(420px, calc(100vw - 32px));
  background: var(--ink);
  color: #f4efe3;
  padding: 11px 18px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 10px 28px rgb(14 17 22 / 24%);
}

/* --------------------------------------------------------------- phone */
@media (width <= 980px) {
  .w-tabs,
  .w-bar {
    padding-left: 16px;
    padding-right: 16px;
  }

  .w-body {
    padding: 16px 16px 96px;
  }

  .w-panel {
    width: 100vw;
  }

  .w-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px 0;
  }

  .w-fields dt {
    margin-top: 10px;
  }

  .w-lane {
    flex-basis: 84vw;
    width: 84vw;
  }

  .w-cal-day {
    min-height: 68px;
  }

  .w-lane-body {
    max-height: 62vh;
  }

  .w-bar input[type='search'] {
    max-width: none;
  }

  .w-files {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .w-follow {
    margin-left: 0;
  }
}