/* Hallmark · component: prowl-work · genre: operate · theme: crm · pre-emit critique: P4 H4 E4 S4 R4 V4 */
/* PROWL › MY WORK, TEAM WORK, THE TASK DETAIL AND THE EDITOR
   (js/prowl-work.js, js/prowl-task.js).

   The CRM is the design system: the controls card (.crm-controls,
   .crm-view-chip, .crm-toolbar, .crm-tbtn), the group heads, the raised
   tables (.crm-tablewrap + table.crm-table), .crm-btn and the popover all
   come from css/page-crm.css, and the shell's parts (.prowl-page,
   .prowl-titlebar, .prowl-select, .prowl-bar, the dialog) from
   css/page-prowl.css. This file adds only what they lack — the inside of a
   task row, the quick-add form, the inside of the drawer, the editor — in
   --crm-* tokens (granted to .prowl-root, .prowl-scrim and .crm-pop), never a
   raw colour. Gold TEXT is --gold-ink. State is a word plus a mark: a
   diamond for late or blocked, a clock for pending, a tick for done.

   A task opens in the drawer (window.ProwlDrawer, js/prowl-task.js): the
   CRM's project card itself — its scrim, its centred card, its head, rail
   and tabs, its full-pane rule to 1000px — with only the inside drawn here.

   Motion: the quick-add form arrives once (opacity and a few pixels of
   travel, 160ms ease-out) and the card with the CRM's own entrance; nothing
   else moves, and nothing does under prefers-reduced-motion. The phone is
   ≤640px: rows become two-line list items. */

/* ── The frame: the list column ───────────────────────────────────────────── */
.pw-root {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.pw-scroll { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: clip; overscroll-behavior: contain; }

/* An open card has its own Ask Leo: the floating one stands down while a
   card is open, at every width, and comes back when it closes or Prowl is
   left (css/leo.css hides it the same way for Leo's task card). */
body:has(#prowlScreen:not(.hidden) .pt-host:not([hidden])) #leoSummon { visibility: hidden; }

/* The page's slots take no room until they hold something. */
.pw-page > .pw-slot:empty, .pw-groups:empty { display: none; }

/* ── Buttons this file adds, and the CRM's, settled for Prowl ─────────────── */
.pw-root .pw-btn-small, .pw-popform .pw-pf-btn, .pt-btn-small, .pt-btn-strong {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 11px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.pw-root .pw-btn-small:not(.crm-btn-primary), .pw-popform .pw-pf-btn:not(.crm-btn-primary), .pt-btn-strong { color: var(--crm-head); }
.pt-btn-small { font-weight: 500; color: var(--crm-ink-mid); }
/* The CRM's outline hover inks the words gold, under AA as text: here the
   edge turns gold and the words stay ink. */
.pw-root .crm-btn:not(.crm-btn-primary):not([aria-disabled="true"]):hover,
.pw-popform .crm-btn:not(.crm-btn-primary):not([aria-disabled="true"]):hover,
.pt-drawer .crm-btn:not(.crm-btn-primary):not([aria-disabled="true"]):hover {
  border-color: var(--crm-gold); background: var(--crm-gold-faint); color: var(--crm-head);
}
.pw-root .crm-btn[aria-disabled="true"], .pw-popform .crm-btn[aria-disabled="true"], .pt-drawer .crm-btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.pw-ghost, .pt-ghost {
  display: inline-flex; align-items: center; height: 30px; padding: 0 10px;
  border: 0; border-radius: 7px; background: transparent;
  font: inherit; font-size: 12.5px; color: var(--crm-ink-mid); white-space: nowrap; cursor: pointer;
}
.pw-ghost:hover, .pt-ghost:hover { background: var(--crm-panel-2); color: var(--crm-head); }
.pw-link, .pt-link {
  flex: none; padding: 0; border: 0; background: none;
  font: inherit; font-size: 12.5px; color: var(--gold-ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.pw-link { font-size: 12px; }
.pw-link:hover, .pt-link:hover { color: var(--crm-head); }
.pt-link[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
/* Icon-only buttons: drawn marks, quiet until pointed at. */
.pw-handle, .pw-more, .pw-gmore, .pw-chip-opt, .pt-subx {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 6px; background: transparent;
  color: var(--crm-ink-2); cursor: pointer;
}
.pw-handle:hover, .pw-more:hover, .pw-gmore:hover, .pw-chip-opt:hover, .pt-subx:hover { background: var(--crm-panel-2); color: var(--crm-head); }
.pw-handle { width: 20px; height: 28px; cursor: grab; }
.pw-handle:active { cursor: grabbing; }
.pw-more, .pw-gmore { width: 28px; height: 28px; }
.pw-chip-opt { width: 24px; height: 24px; margin: 0 4px 0 -6px; }

/* Shared fields: the shell's select has a twin for text. */
.pt-input {
  box-sizing: border-box; max-width: 100%; height: 34px; padding: 0 10px;
  border: 1px solid var(--crm-rule-firm); border-radius: 7px;
  background: var(--crm-paper); color: var(--crm-head);
  font: inherit; font-size: 13px;
}
.pt-input:hover:not([readonly]) { background: var(--crm-panel); }
.pt-input::placeholder { color: var(--crm-ink-2); }
.pt-input[aria-invalid="true"] { border-color: var(--crm-blocked); }
.pt-area { width: 100%; height: auto; min-height: 60px; padding: 8px 10px; line-height: 1.5; resize: vertical; }
.pt-input[readonly] { background: var(--crm-panel); color: var(--crm-ink-mid); }

/* ── The notice of requests waiting for an answer ─────────────────────────── */
.pw-notice {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--crm-rule); border-radius: 10px;
  background: var(--crm-paper); font-size: 13px; line-height: 1.45; color: var(--crm-ink);
}
.pw-notice > svg:first-child { flex: none; color: var(--amber-ink); }
.pw-notice-text { flex: 1 1 auto; min-width: 0; }
.pw-notice-text b { font-weight: 600; color: var(--crm-head); }

/* ── The controls card: views, then the toolbar (or the selection's bar) ─── */
.pw-page .pw-controls { margin: 0; }
.pw-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pw-chip-n { color: var(--crm-ink-2); font-weight: 400; font-variant-numeric: tabular-nums; }
.pw-chip-mine { display: inline-flex; color: var(--crm-ink-2); }
.crm-view-active .pw-chip-mine { color: var(--gold-ink); }
.pw-newview {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  height: 28px; margin-left: 4px; padding: 0 9px; border: 0; border-radius: 7px;
  background: transparent; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--crm-ink-2);
  white-space: nowrap; cursor: pointer;
}
.pw-newview:hover { background: var(--crm-panel-2); color: var(--crm-head); }
.pw-toolbar .crm-tbtn { white-space: nowrap; }
.pw-prefnote {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 4px; font-size: 12px; line-height: 1.4; color: var(--crm-ink-2);
}
.pw-prefnote:empty { display: none; }
.pw-saveteam { height: 28px; }
.pw-bulk { background: var(--crm-gold-faint); border-radius: 0 0 10px 10px; }
.pw-bulk-n { padding: 0 6px; font-size: 12.5px; font-weight: 600; color: var(--crm-head); font-variant-numeric: tabular-nums; }
.pw-bulk .crm-tbtn { padding: 0 11px; }
.pw-bulk .crm-tbtn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.pw-bulk-strong { font-weight: 600; color: var(--crm-head); }
.pw-bulk-clear { margin-left: auto; }

/* The order note under the card: your own order, or the sort's. */
.pw-order {
  margin: -6px 2px 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 12px; line-height: 1.45; color: var(--crm-ink-2);
}
.pw-order[hidden] { display: none; }
.pw-order > svg { flex: none; }

/* A live list that stopped updating, said in place. */
.pw-err {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--crm-blocked) 40%, transparent); border-radius: 10px;
  background: var(--crm-blocked-bg); font-size: 13px; line-height: 1.45; color: var(--crm-head);
}
.pw-err > svg { flex: none; color: var(--crm-blocked); }
.pw-err > span { flex: 1 1 auto; min-width: 0; }
.pw-err b { font-weight: 600; }

/* ── Quick add: the gold-edged form at the top ────────────────────────────── */
.pw-quick {
  display: flex; flex-direction: column; gap: 10px; margin: 0;
  padding: 12px 14px; border: 1.5px solid var(--crm-gold); border-radius: 10px;
  background: var(--crm-paper); box-shadow: var(--crm-shadow-card);
  animation: pw-rise 0.16s ease-out;
}
.pw-quick-top { display: flex; align-items: center; gap: 10px; }
.pw-quick-ring { flex: none; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--crm-rule-firm); }
.pw-quick-field { flex: 1 1 auto; min-width: 0; }
.pw-quick-title {
  box-sizing: border-box; width: 100%; height: 32px; padding: 0 4px; border: 0; border-radius: 6px;
  background: transparent; color: var(--crm-head); font: inherit; font-size: 14.5px; font-weight: 500;
}
.pw-quick-title::placeholder { color: var(--crm-ink-2); font-weight: 400; }
.pw-quick-title[aria-invalid="true"] { box-shadow: inset 0 -1px 0 var(--crm-blocked); }
.pw-quick-opts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-left: 28px; }
.pw-qf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--crm-ink-2); }
.pw-qsel { height: 30px; padding: 0 24px 0 8px; font-size: 12.5px; }
.pw-qwho { max-width: 210px; }
.pw-qproj { width: 180px; height: 30px; font-size: 12.5px; }
.pw-quick-acts { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.pw-qdate { height: 30px; font-size: 12.5px; }
.pw-qdate[hidden] { display: none; }
.pw-quick-hint { margin: 0; padding-left: 28px; font-size: 12px; line-height: 1.45; color: var(--crm-ink-2); }
.pw-quick-err { margin: 0; padding-left: 28px; display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.45; color: var(--crm-blocked); }
.pw-quick-err[hidden] { display: none; }
.pw-quick-err svg { flex: none; margin-top: 2px; }

/* ── Groups: a head, then a raised table ──────────────────────────────────── */
.pw-groups { display: flex; flex-direction: column; gap: 26px; }
.pw-group { display: flex; flex-direction: column; gap: 9px; }
.pw-ghead { margin: 0; padding: 0; flex-wrap: wrap; row-gap: 4px; cursor: default; user-select: auto; }
.pw-gtoggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--crm-ink-2); cursor: pointer;
}
.pw-gtoggle:hover { background: var(--crm-panel-2); color: var(--crm-head); }
.pw-caret { transition: transform 0.16s ease-out; }
[aria-expanded="false"] > .pw-caret { transform: rotate(-90deg); }
.pw-gname { margin: 0; line-height: 1.25; overflow-wrap: anywhere; }
.pw-gname-quiet { color: var(--crm-ink-mid); }
.pw-gmeta { font-variant-numeric: tabular-nums; }
.pw-diamond, .pt-diamond { flex: none; color: var(--crm-blocked); }
.pw-gone { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--amber-ink); }
.pw-outside { display: inline-flex; align-items: center; font-size: 12.5px; color: var(--crm-ink-2); }
.pw-gmore { margin-left: auto; }

/* The table: fixed columns so every group lines up; the grid on every cell. */
.pw-table col.pw-col-handle { width: 28px; }
.pw-table col.pw-col-sel { width: 30px; }
.pw-table col.pw-col-project { width: 208px; }
.pw-table col.pw-col-due { width: 124px; }
.pw-table col.pw-col-priority { width: 100px; }
.pw-table col.pw-col-assignee { width: 160px; }
.pw-table col.pw-col-status { width: 122px; }
.pw-table col.pw-col-more { width: 44px; }
.pw-table { min-width: var(--pw-min, 0); }
.pw-table th { height: 34px; padding: 0 12px; }
.pw-table th.pw-th-icon { padding: 0; }
.pw-sorted { margin-left: 5px; vertical-align: -1px; color: var(--gold-ink); }
.pw-table td {
  height: 54px; padding: 0 12px; max-width: none;
  white-space: normal; overflow: visible; text-overflow: clip; vertical-align: middle;
}
.pw-table.pw-compact td { height: 40px; }
.pw-table tbody tr { cursor: default; }
.pw-table td.pw-c-handle, .pw-table td.pw-c-sel, .pw-table td.pw-c-more { padding: 0; text-align: center; }
.pw-table td.pw-c-task { padding: 0; }
.pw-trow.pw-sel td { background: var(--crm-gold-faint); }
.pw-trow.pw-open td, .pw-trow.pw-open:hover td { background: var(--crm-gold-pale); }
.pw-trow.pw-dragging { opacity: 0.45; }
.pw-trow.pw-drop-before td { box-shadow: inset 0 2px 0 var(--crm-gold); }
.pw-tablewrap.pw-drop-end { box-shadow: var(--crm-shadow-card), inset 0 -2px 0 var(--crm-gold); }

/* A task's cell: the round completion button, the title, the line under it. */
.pw-tcell { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 9px 12px 8px; }
.pw-compact .pw-tcell { align-items: center; padding: 0 12px; }
.pw-check, .pw-pcheck {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.pw-check { width: 20px; height: 20px; margin-top: 1px; }
.pw-compact .pw-check { margin-top: 0; }
.pw-check::after { content: ""; position: absolute; inset: -10px; }
.pw-check-ring {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--crm-rule-firm); color: var(--crm-ink-2);
  transition: border-color 0.14s ease-out, background-color 0.14s ease-out;
}
.pw-check-ring svg { opacity: 0; }
:is(.pw-check, .pw-pcheck):not(.pw-check-ro):hover > .pw-check-ring { border-color: var(--crm-head); }
:is(.pw-check, .pw-pcheck):not(.pw-check-on):not(.pw-check-ro):hover svg { opacity: 0.55; }
.pw-check-on > .pw-check-ring { border-color: var(--crm-clear); background: var(--crm-clear); color: var(--crm-paper); }
.pw-check-on > .pw-check-ring svg { opacity: 1; }
.pw-check-ro { cursor: default; }
.pw-tmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pw-ttitle {
  display: block; width: 100%; padding: 0; border: 0; border-radius: 4px; background: transparent;
  text-align: left; font: inherit; font-size: 14px; line-height: 1.35; font-weight: 500;
  color: var(--crm-head); overflow-wrap: anywhere; cursor: pointer;
}
.pw-ttitle:hover { text-decoration: underline; text-decoration-color: var(--crm-rule-firm); text-underline-offset: 3px; }
.pw-compact .pw-ttitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-done .pw-ttitle, .pw-done .pw-ttitle:hover { color: var(--crm-ink-2); text-decoration: line-through; }
.pw-tedit {
  box-sizing: border-box; width: calc(100% + 8px); height: 28px; margin: -4px 0 -2px -8px; padding: 0 8px;
  border: 1px solid var(--gold-ink); border-radius: 6px; background: var(--crm-paper);
  color: var(--crm-head); font: inherit; font-size: 14px; font-weight: 500;
}
.pw-tsub {
  display: flex; align-items: center; flex-wrap: wrap; column-gap: 12px; row-gap: 2px;
  font-size: 12px; line-height: 1.4; color: var(--crm-ink-2);
}
.pw-m { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.pw-m > svg, .pw-m > img { flex: none; }
.pw-m-blocked { gap: 5px; color: var(--crm-blocked); font-weight: 500; }
.pw-m-origin { gap: 5px; color: var(--crm-ink-mid); }
.pw-m-pending { gap: 5px; color: var(--amber-ink); font-weight: 500; }
.pw-lion, .pt-lion { flex: none; display: block; object-fit: contain; }
/* A column folded into the line under the title, when the list is narrow
   (js/prowl-work.js decides from the list's width). */
.pw-n.pw-prio-urgent, .pw-n.pw-prio-high { font-weight: 600; }
.pw-n.pw-status-doing { color: var(--crm-head); font-weight: 500; }
.pw-n-proj { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-narrow col.pw-col-project { width: 180px; }
.pw-narrow col.pw-col-due { width: 112px; }


.pw-proj { display: flex; flex-direction: column; min-width: 0; border-radius: 4px; color: inherit; text-decoration: none; }
.pw-proj-name {
  font-size: 13px; line-height: 1.35; color: var(--crm-head);
  text-decoration: underline; text-decoration-color: var(--crm-rule-firm); text-underline-offset: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pw-proj:hover .pw-proj-name { text-decoration-color: var(--crm-head); }
.pw-proj-sub { font-size: 11.5px; line-height: 1.4; color: var(--crm-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-proj-hidden { font-size: 12.5px; line-height: 1.35; color: var(--crm-ink-2); }
.pw-none { font-size: 13px; color: var(--crm-ink-3); }

.pw-due { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--crm-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw-due-late { color: var(--crm-blocked); font-weight: 600; }
.pw-due-today { color: var(--crm-head); font-weight: 600; }
.pw-due-none, .pw-due-done { color: var(--crm-ink-2); }
.pw-due-sub { display: block; font-size: 11.5px; line-height: 1.4; color: var(--crm-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw-due-sub-late { color: var(--crm-blocked); }

.pw-prio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--crm-ink-2); white-space: nowrap; }
.pw-prio-urgent { color: var(--crm-blocked); font-weight: 600; }
.pw-prio-high { color: var(--amber-ink); font-weight: 600; }
.pw-prio-normal svg { opacity: 0.7; }
.pw-prio-low svg { opacity: 0.45; }

.pw-owner { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pw-avatar, .pt-avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%;
  border: 1px solid var(--crm-rule-firm); background: var(--crm-panel-2);
  font-size: 10.5px; font-weight: 600; color: var(--crm-ink-mid);
}
.pw-owner-text { display: flex; flex-direction: column; min-width: 0; }
.pw-owner-name { font-size: 13px; color: var(--crm-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-owner-gone { font-size: 11.5px; line-height: 1.35; color: var(--amber-ink); white-space: nowrap; }

.pw-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; }
.pw-smark { flex: none; }
.pw-status-todo { color: var(--crm-ink-2); }
.pw-status-doing { color: var(--crm-head); font-weight: 500; }
.pw-status-blocked { color: var(--crm-blocked); font-weight: 600; }
.pw-status-done { color: var(--crm-clear); font-weight: 500; }

.pw-selbox { width: 15px; height: 15px; margin: 0; accent-color: var(--crm-head); cursor: pointer; }

/* The handle, the box and the menu show on the row you point at or are in. */
.pw-reveal { opacity: 0; transition: opacity 0.14s ease-out; }
.pw-trow:hover .pw-reveal, .pw-trow:focus-within .pw-reveal, .pw-trow.pw-sel .pw-reveal, .pw-selbox:checked { opacity: 1; }
@media (hover: none) { .pw-reveal { opacity: 1; } }

.pw-addrow td, .pw-emptyrow td { height: auto; padding: 0; }
.pw-addrow:hover td, .pw-emptyrow:hover td { background: transparent; }
.pw-emptyrow td { padding: 13px 16px; font-size: 13px; line-height: 1.45; color: var(--crm-ink-2); }
.pw-add {
  width: 100%; display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 16px 0 42px; border: 0; background: transparent;
  font: inherit; font-size: 13px; text-align: left; color: var(--crm-ink-2); cursor: pointer;
}
.pw-add:hover { background: var(--crm-gold-faint); color: var(--crm-head); }
/* In your own order the drag handle's column comes first. */
.pw-table.pw-manual .pw-add { padding-left: 70px; }
.pw-addsection { margin-top: -10px; }
.pw-add-section { width: auto; padding: 0 12px 0 32px; border-radius: 8px; }

/* Rings that would be cut by a rounded, scrolling table draw inside. */
.prowl-root .pw-root .pw-table button.pw-add:focus-visible,
.prowl-root .pw-root .pw-plist button.pw-popen:focus-visible,
.prowl-root .pw-root .pw-plist button.pw-pcheck:focus-visible { outline-offset: -3px; }

.pw-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 22px 24px; border: 1px solid var(--crm-grid-strong); border-radius: 10px; background: var(--crm-paper);
}
.pw-empty-title { font-size: 15px; font-weight: 600; color: var(--crm-head); }
.pw-empty-text { max-width: 68ch; font-size: 13.5px; line-height: 1.5; color: var(--crm-ink-mid); }
.pw-empty .crm-btn { margin-top: 2px; }

/* The teams you can't see: a count, never a title. */
.pw-locked { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.pw-locked-head { display: flex; align-items: baseline; gap: 10px; padding-left: 32px; }
.pw-locked-box {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border: 1px dashed var(--crm-grid-strong); border-radius: 10px;
  background: var(--crm-panel); font-size: 13px; line-height: 1.5; color: var(--crm-ink-mid);
}
.pw-locked-box > svg { flex: none; margin-top: 2px; }
.pw-capped { margin: 0; display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.45; color: var(--crm-ink-2); }
.pw-capped > svg { flex: none; margin-top: 2px; }
.pw-slot[data-slot="locked"]:not(:empty) { display: flex; flex-direction: column; gap: 16px; }

/* ── A small form under a button: naming a view or a section ──────────────── */
.pw-popform { width: 312px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 12px; }
.pw-pf { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.pw-pf-label { font-size: 12px; font-weight: 600; color: var(--crm-ink-2); }
.pw-pf-input { width: 100%; box-sizing: border-box; height: 34px; }
.pw-pf-input[aria-invalid="true"] { border-color: var(--crm-blocked); }
.pw-popform .pw-pf-hint { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--crm-ink-mid); }
.pw-pf-err[hidden] { display: none; }
.pw-popform .crm-pop-actions { margin-top: 2px; }
.pw-popform :is(button, input):focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; box-shadow: none; }

/* ── The drawer (window.ProwlDrawer), and the task in it ────────────────────
   The card is the CRM's own (css/page-crm.css): .crm-scrim, .crm-drawer
   .crm-drawer-wide centred in the pane, its head (which leaves the bell its
   corner), the rail column and the tab strip, and its full-pane rule to
   1000px. This adds only what is inside. */
.pt-host { display: contents; }
.pt-host[hidden] { display: none; }
.pt-drawer { font-variant-numeric: tabular-nums; }
.pt-headtext { flex: 1 1 auto; }
.pt-titlebox { min-width: 0; }
.pt-dtitle { outline: none; }
/* Opening a card focuses its title — a heading, drawn with no ring. Rings
   are for the controls you reach. */
.prowl-root .pt-host .pt-drawer .pt-heading[tabindex]:is(:focus, :focus-visible) { outline: none; box-shadow: none; }
.pt-titlefield { display: block; min-width: 0; }
/* An editable title wears the CRM's title face: the words sit where the
   heading's would. */
.pt-title {
  display: block; box-sizing: border-box; width: calc(100% + 8px); margin: -3px 0 -3px -7px; padding: 2px 6px;
  border: 1px solid transparent; border-radius: 7px; background: transparent;
  font-family: var(--font-serif); font-size: 22px; font-weight: 500; line-height: 1.22;
  color: var(--crm-head); resize: none; overflow: hidden;
}
.pt-title:hover:not([readonly]) { border-color: var(--crm-rule-firm); }
.pt-title[readonly] { cursor: default; }
.pt-title-done { color: var(--crm-ink-2); text-decoration: line-through; }
.pt-sub[hidden] { display: none; }
.pt-chips, .pt-acts { display: contents; }
/* The chips: the CRM's stage chip in the head (rounded there by
   .crm-head-pills), toned by the word it carries — a mark beside the word
   where colour alone would be saying it. */
.pt-chip { gap: 6px; border: 0; font: inherit; }
.pt-chip > svg { flex: none; }
button.pt-chip { position: relative; cursor: pointer; }
button.pt-chip:hover { box-shadow: inset 0 0 0 1px var(--crm-rule-firm); }
.pt-tone-neutral { background: var(--crm-panel-2); color: var(--crm-ink); }
.pt-tone-progress { background: var(--crm-gold-pale); color: var(--crm-head); }
.pt-tone-blocked { background: var(--crm-blocked-bg); color: var(--crm-blocked); }
.pt-tone-done { background: var(--crm-clear-bg); color: var(--crm-clear); }
.pt-chev { margin-right: -3px; opacity: 0.75; }
.pt-late { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--crm-blocked); }
.pt-say { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--crm-ink-2); white-space: nowrap; }
.pt-say:empty { display: none; }
.pt-say > svg { flex: none; color: var(--crm-clear); }
.pt-hbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px; white-space: nowrap; }
.pt-hbtn > svg, .pt-hbtn > .pt-lion { flex: none; }
.pt-hicon { color: var(--crm-ink-mid); }
.pt-x { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; }
.pt-alertslot { flex: none; }
.pt-alertslot:empty { display: none; }
.pt-alert {
  margin: 0; display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 8px 9px 20px; border-bottom: 1px solid color-mix(in srgb, var(--crm-blocked) 30%, transparent);
  background: var(--crm-blocked-bg); font-size: 13px; line-height: 1.45; color: var(--crm-head);
}
.pt-alert > svg { flex: none; margin-top: 2px; color: var(--crm-blocked); }
.pt-alert > span { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.pt-alert-x { width: 28px; height: 28px; margin: -4px 0; }
/* A card with no rail is one column; with no tabs, one plain panel. */
.pt-dbody-norail { grid-template-columns: minmax(0, 1fr); }
.pt-dbody-norail > .pt-rail { display: none; }
.pt-tabs[hidden] { display: none; }
.pt-scroll { display: flex; flex-direction: column; gap: 18px; }

/* The rail: where it came from, what's in the way, then the facts. */
.pt-rail > * + * { margin-top: 12px; }
.pt-rail > .crm-rail-sec { margin-top: 18px; }
.pt-note {
  display: flex; gap: 10px; padding: 10px 13px; border: 1px solid var(--crm-rule); border-radius: 10px;
  background: var(--crm-paper); font-size: 12.5px; line-height: 1.5; color: var(--crm-ink-mid);
}
.pt-note > svg { flex: none; margin-top: 1px; }
.pt-askblock {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  border: 1px solid var(--crm-blocked); border-radius: 10px; background: var(--crm-blocked-bg);
}
.pt-askblock-label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--crm-blocked); }
.pt-askblock .pt-input { width: 100%; font-weight: 400; }
.pt-blocked {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--crm-blocked) 35%, transparent); border-radius: 10px; background: var(--crm-blocked-bg);
}
.pt-blocked > .pt-diamond { margin-top: 5px; }
.pt-blocked-text { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--crm-head); }
.pt-blocked-text b { font-weight: 600; color: var(--crm-blocked); }
.pt-origin {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  border: 1px solid var(--crm-rule); border-radius: 10px; background: var(--crm-paper);
}
.pt-origin-lead { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--crm-head); }
.pt-origin-lead > svg, .pt-origin-lead > .pt-lion { flex: none; }
.pt-origin-note { font-size: 12.5px; line-height: 1.5; color: var(--crm-ink-mid); }
.pt-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pt-stack { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--crm-ink-2); }
.pt-pending {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--amber-ink) 35%, transparent); border-radius: 10px; background: var(--amber-bg);
}
.pt-pending > svg { flex: none; margin-top: 1px; color: var(--amber-ink); }
.pt-pending-text { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--crm-head); }
/* The facts: the CRM rail's word and value, the word on the value's first
   line (the row's baseline), the values in one column. */
.pt-facts .crm-fact { justify-content: flex-start; padding: 4px 0; }
.pt-facts .crm-fact-k { flex: none; width: 72px; }
.pt-facts .crm-fact-v { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; gap: 6px 8px; }
.pt-fv-proj { flex-direction: column; align-items: flex-start; gap: 2px; }
.pt-fv-plain { overflow-wrap: anywhere; }
.pt-owner { color: var(--crm-head); }
.pt-proj { font-size: 13px; color: var(--crm-head); text-decoration: underline; text-decoration-color: var(--crm-rule-firm); text-underline-offset: 3px; overflow-wrap: anywhere; }
.pt-proj:hover { text-decoration-color: var(--crm-head); }
.pt-proj-sub { font-size: 11.5px; line-height: 1.4; color: var(--crm-ink-2); }
.pt-change { margin-top: 2px; }
.pt-projedit { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.pt-projedit .pt-input { width: 100%; }
.pt-muted { font-size: 13px; color: var(--crm-ink-2); }
.pt-field-sel { height: 32px; min-width: 0; max-width: 100%; }
.pt-sel-late { color: var(--crm-blocked); }
.pt-date { height: 32px; }
.pt-facts .pt-field-sel, .pt-facts .pt-input:not(.pt-date) { width: 100%; max-width: 420px; height: 32px; }
.pt-linkrow {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--crm-rule); border-radius: 9px; background: var(--crm-paper);
  color: var(--crm-ink-2); text-decoration: none;
}
.pt-linkrow:hover { border-color: var(--crm-rule-firm); }
.pt-linkrow:hover .pt-linktitle { text-decoration: underline; text-underline-offset: 3px; }
.pt-linkrow > svg { flex: none; margin-top: 2px; }
.pt-linktext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pt-linktitle { font-size: 13px; color: var(--crm-head); }
.pt-linksub { font-size: 12px; line-height: 1.4; color: var(--crm-ink-2); }

/* The tabs: Details (the description, the subtasks) and Activity. */
.pt-desc { font-size: 12px; font-weight: 600; }
.pt-desc .pt-area { font-weight: 400; color: var(--crm-ink); }
.pt-head { font-size: 12px; font-weight: 600; color: var(--crm-ink-2); }
.pt-head-n { font-weight: 400; font-variant-numeric: tabular-nums; }
.pt-subs, .pt-activity { display: flex; flex-direction: column; gap: 6px; }
.pt-sublist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.pt-sub { display: flex; align-items: center; gap: 4px; }
.pt-subcheck {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
  min-height: 30px; padding: 0; border: 0; border-radius: 4px; background: transparent;
  text-align: left; font: inherit; font-size: 13.5px; line-height: 1.4; color: var(--crm-head); cursor: pointer;
}
.pt-subcheck[disabled] { cursor: default; }
.pt-subring {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--crm-rule-firm); color: var(--crm-paper);
}
.pt-subring svg { opacity: 0; }
.pt-subcheck:not([disabled]):hover .pt-subring { border-color: var(--crm-head); }
.pt-sub-done .pt-subring { border-color: var(--crm-clear); background: var(--crm-clear); }
.pt-sub-done .pt-subring svg { opacity: 1; }
.pt-subtitle { overflow-wrap: anywhere; }
.pt-sub-done .pt-subtitle { color: var(--crm-ink-2); text-decoration: line-through; }
.pt-subx { width: 26px; height: 26px; opacity: 0; transition: opacity 0.14s ease-out; }
.pt-sub:hover .pt-subx, .pt-sub:focus-within .pt-subx { opacity: 1; }
@media (hover: none) { .pt-subx { opacity: 1; } }
.pt-subadd { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--crm-ink-2); }
.pt-subadd > svg { flex: none; }
.pt-subadd .pt-input { flex: 1 1 auto; min-width: 0; height: 32px; border-color: var(--crm-rule); }
.pt-err { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.45; color: var(--crm-blocked); }
.pt-err > svg { flex: none; margin-top: 2px; }
.pt-events { margin: 0 0 4px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.pt-event { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; font-size: 12.5px; line-height: 1.5; }
.pt-avatar-sm { width: 22px; height: 22px; font-size: 9.5px; }
.pt-event-body { min-width: 0; }
.pt-event-text { color: var(--crm-head); font-weight: 500; overflow-wrap: anywhere; }
.pt-event-comment .pt-event-text { font-weight: 400; }
.pt-event-when { display: block; font-size: 11.5px; color: var(--crm-ink-2); }
.pt-activity > .pt-area { min-height: 52px; }
.pt-state { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--crm-ink-mid); }
.pt-state p { margin: 0; }
.pt-skel { display: flex; flex-direction: column; gap: 14px; pointer-events: none; }
.pt-bar-line { width: 60%; }
.pt-bar-short { width: 35%; }
.pt-bar-box { width: 100%; height: 72px; border-radius: 10px; }

/* ── The editor ───────────────────────────────────────────────────────────── */
.pt-ed { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 6px; }
.pt-ed-src {
  display: flex; gap: 10px; padding: 11px 13px;
  border: 1.5px solid transparent; border-radius: 10px;
  background: linear-gradient(var(--crm-panel), var(--crm-panel)) padding-box, var(--leo-stroke) border-box;
}
.pt-ed-src > .pt-lion { margin-top: 1px; }
.pt-ed-srctext { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12.5px; line-height: 1.5; }
.pt-ed-srclead { font-weight: 600; color: var(--crm-head); }
.pt-ed-srcbody { color: var(--crm-ink-mid); }
.pt-ed-srcnote { color: var(--crm-ink-2); }
.pt-ed-summary { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--crm-rule); border-radius: 10px; }
.pt-ed-sumtitle { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--crm-head); }
.pt-ed-sumsub { font-size: 12.5px; color: var(--crm-ink-2); }
.pt-ed-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--crm-ink-2); }
.pt-ed-field[hidden] { display: none; }
.pt-ed-lab { font-size: 12.5px; font-weight: 600; color: var(--crm-ink-2); }
.pt-ed .pt-input, .pt-ed .prowl-select { width: 100%; height: 36px; border-radius: 8px; font-size: 13.5px; font-weight: 400; }
.pt-ed .pt-area { height: auto; }
.pt-ed .pt-ed-title { font-size: 15px; font-weight: 500; }
.pt-ed-date[hidden] { display: none; }
.pt-ed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pt-ed-more {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  height: 30px; margin-left: -8px; padding: 0 8px; border: 0; border-radius: 7px;
  background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--crm-ink-mid); cursor: pointer;
}
.pt-ed-more:hover { background: var(--crm-panel-2); color: var(--crm-head); }
.pt-ed-more > svg { transition: transform 0.16s ease-out; }
.pt-ed-more[aria-expanded="true"] > svg { transform: rotate(90deg); }
.pt-ed-morebox { display: flex; flex-direction: column; gap: 14px; }
.pt-ed-morebox[hidden] { display: none; }
.pt-ed-outcome {
  display: flex; gap: 10px; padding: 11px 13px; border-radius: 10px;
  background: var(--crm-panel-2); font-size: 13px; line-height: 1.5; color: var(--crm-head);
}
.pt-ed-outcome > svg { flex: none; margin-top: 1px; color: var(--crm-ink-mid); }
.pt-ed-outcome b { font-weight: 600; }

@keyframes pw-rise { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── Touch screens and tablets ──────────────────────────────────────────────
   css/mobile.css makes every button at least 40px tall below 821px. A row's
   own buttons keep their size; their reach grows instead. */
@media (pointer: coarse) {
  button.pt-chip::after { content: ""; position: absolute; inset: -9px -4px; }
  .pw-selbox { width: 20px; height: 20px; }
  .pw-handle::after, .pw-more::after, .pw-gtoggle::after { content: ""; position: absolute; inset: -8px; }
  .pw-handle, .pw-more, .pw-gtoggle { position: relative; }
}
@media (min-width: 641px) and (max-width: 820px) {
  .pw-root :is(.pw-ttitle, .pw-check, .pw-handle, .pw-more, .pw-gtoggle, .pw-gmore, .pw-chip-opt, .pw-add, .pw-link),
  .pt-drawer :is(.pt-subcheck, .pt-subx, .pt-link, .pt-chip) { min-height: 0; }
  .pw-root .pw-check { min-height: 20px; }
}

/* ── On a phone ─────────────────────────────────────────────────────────────
   No table: each task is a two-line list item (the title; when it's due ·
   the project · a word if it's urgent, high or blocked). The controls card
   folds to the views and a Sort control; the detail fills the screen under
   the shell's top bar; every target is at least 44px, every field 16px. */
@media (max-width: 640px) {
  .pw-groups { gap: 18px; }
  .pw-notice { padding: 10px 12px; }
  .pw-notice-btn { width: 100%; min-height: 48px; text-align: left; font: inherit; font-size: 14px; color: var(--crm-head); cursor: pointer; }
  .pw-notice-btn:active { background: var(--crm-gold-faint); }
  .pw-notice-chev { flex: none; color: var(--crm-ink-2); }
  .pw-err { flex-wrap: wrap; }
  .pw-err .crm-btn { height: 44px; }
  .pw-empty { padding: 18px; }
  .pw-empty .crm-btn { height: 44px; }

  .pw-pcontrols { display: flex; align-items: center; gap: 6px; }
  .pw-pviews {
    flex: 1 1 auto; min-width: 0; display: flex; gap: 6px;
    margin: -3px 0 -3px -3px; padding: 3px; overflow-x: auto; scrollbar-width: none;
    scroll-padding-inline: 3px 32px;
  }
  .pw-pviews::-webkit-scrollbar { display: none; }
  /* More views past the edge: the row fades out short of Sort. */
  .pw-pviews.pw-pviews-more { mask-image: linear-gradient(to right, var(--crm-ink) calc(100% - 28px), transparent); }
  .pw-pview {
    flex: none; height: 44px; padding: 0 12px; border-radius: 8px;
    border: 1px solid var(--crm-rule-firm); background: var(--crm-paper);
    font: inherit; font-size: 14px; font-weight: 500; color: var(--crm-ink-2); white-space: nowrap; cursor: pointer;
  }
  .pw-pview-on { border-color: var(--crm-gold); background: var(--crm-gold-faint); color: var(--crm-head); font-weight: 600; }
  .pw-psort {
    position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px;
    height: 44px; padding: 0 12px; box-sizing: border-box; border-radius: 8px;
    border: 1px solid var(--crm-rule-firm); background: var(--crm-paper);
    font-size: 14px; font-weight: 500; color: var(--crm-ink-mid);
  }
  .pw-psort-sel { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 16px; }
  .pw-psort:focus-within { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
  .pw-psort-word { white-space: nowrap; }

  .pw-pgroup { display: flex; flex-direction: column; gap: 8px; }
  .pw-pghead { margin: 0; font-family: var(--font-serif); font-size: 17px; font-weight: 500; color: var(--crm-head); }
  .pw-pgtoggle {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: -6px; padding: 0 6px;
    border: 0; border-radius: 8px; background: transparent; font: inherit; color: inherit; cursor: pointer;
  }
  .pw-pgname { overflow-wrap: anywhere; }
  .pw-pgcount { font-family: var(--font-sans); font-size: 13px; font-weight: 400; color: var(--crm-ink-2); font-variant-numeric: tabular-nums; }
  .pw-pgtoggle .pw-caret { color: var(--crm-ink-2); }
  .pw-gone-phone { margin: -4px 2px 0; }
  .pw-plist {
    margin: 0; padding: 0; list-style: none;
    border: 1px solid var(--crm-grid-strong); border-radius: 12px; background: var(--crm-paper);
    box-shadow: var(--crm-shadow-card); overflow: hidden;
  }
  .pw-pitem {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; align-items: start;
    min-height: 64px; padding: 10px 6px 10px 0; border-bottom: 1px solid var(--crm-grid);
  }
  .pw-pitem:last-child { border-bottom: 0; }
  .pw-pcheck { justify-self: center; width: 44px; height: 44px; margin-top: -10px; border-radius: 10px; }
  .pw-pcheck .pw-check-ring { width: 22px; height: 22px; }
  .pw-popen {
    min-width: 0; min-height: 44px; display: flex; flex-direction: column; gap: 4px;
    padding: 0; border: 0; border-radius: 6px; background: transparent;
    text-align: left; font: inherit; color: inherit; cursor: pointer;
  }
  .pw-popen:active { background: var(--crm-gold-faint); }
  .pw-ptitle { font-size: 15.5px; line-height: 1.35; font-weight: 500; color: var(--crm-head); overflow-wrap: anywhere; }
  .pw-done .pw-ptitle { color: var(--crm-ink-2); text-decoration: line-through; }
  .pw-pmeta {
    display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 2px;
    font-size: 13px; line-height: 1.4; color: var(--crm-ink-2);
  }
  .pw-pmeta > span { min-width: 0; }
  .pw-pdue { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
  .pw-pdue.pw-due-late { font-weight: 600; }
  .pw-pproj { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pw-pword { font-weight: 600; }
  .pw-pblocked { font-weight: 500; color: var(--crm-blocked); }
  .pw-porigin { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; line-height: 1.4; color: var(--crm-ink-mid); }
  .pw-porigin.pw-m-pending { color: var(--amber-ink); }
  .pw-pchev { align-self: center; justify-self: center; color: var(--crm-ink-3); }

  /* The card is the CRM's on a phone — the whole screen under the top bar,
     its actions under the title — and the rail stays above the tabs, as it
     is to 1000px. */
  .pt-drawer .crm-rail-col { order: 1; border-top: 0; border-bottom: 1px solid var(--crm-rule); }
  .pt-drawer .crm-pane { order: 2; }
  .pt-title { font-size: 18px; }
  .pt-hbtn { height: 44px; }
  .pt-hicon { width: 44px; height: 44px; }
  .pt-alert { padding-left: 14px; }
  .pt-alert-x { width: 44px; height: 44px; margin: -10px 0; }
  .pt-btn-small, .pt-btn-strong, .pt-ghost { height: 44px; }
  .pt-link { min-height: 44px; display: inline-flex; align-items: center; }
  .pt-subcheck { min-height: 44px; }
  .pt-subx { width: 44px; height: 44px; opacity: 1; }
  .pt-facts .pt-field-sel, .pt-facts .pt-input:not(.pt-date), .pt-date, .pt-subadd .pt-input, .pt-askblock .pt-input { height: 44px; }
  .pt-input, .pt-field-sel, .pt-ed .pt-input, .pt-ed .prowl-select, .pw-pf-input { font-size: 16px; }

  .pt-ed-grid { grid-template-columns: minmax(0, 1fr); }
  .pt-ed .pt-input, .pt-ed .prowl-select { height: 44px; }
  .pt-ed .pt-area { height: auto; }
  .pt-ed-more { height: 44px; }
}

/* The narrowest phones: Sort is its icon alone (the select still says
   "Sort"), and the views close up, so all three of My Work's fit. */
@media (max-width: 379px) {
  .pw-pcontrols { gap: 4px; }
  .pw-pviews { gap: 4px; }
  .pw-pview { padding: 0 9px; }
  .pw-psort { width: 44px; padding: 0; justify-content: center; }
  .pw-psort-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .pw-quick { animation: none; }
  .pw-caret, .pw-check-ring, .pw-reveal, .pt-subx, .pt-ed-more > svg { transition: none; }
}