/* Projects (js/projects): Linear-style project rows and board, a project page with a property row, updates, and
   larger tasks with progress bars. Built on the Tasks page's shell (tasks.css: .tk, .tk-side, .tk-list, .tk-board).
   No uppercase anywhere: the brand stays lowercase. */

:root {
  --pj-on: #1F9257; --pj-risk: #B07A00; --pj-off: #D9452A; --pj-track: #DCDFF5;
  --pj-on-bg: #DCF2E5; --pj-risk-bg: #FFF3C9; --pj-off-bg: #FFE5DF;
}
:root[data-theme="dark"] {
  --pj-on: #45C27F; --pj-risk: #FCCE21; --pj-off: #FF7A61; --pj-track: #1E2570;
  --pj-on-bg: #0F3D2A; --pj-risk-bg: #3B3108; --pj-off-bg: #4D1B19;
}

svg.pj-si, svg.pj-hi, svg.pj-ring { display: block; flex: none; }

/* ---------- icons */

.pj-si-idea { color: var(--faint); } .pj-si-active { color: var(--doing-dot); } .pj-si-quiet { color: var(--todo-dot); }
.pj-si-paused { color: var(--warn-ink); } .pj-si-done { color: var(--done-dot); }
.pj-si .pj-cut { stroke: var(--surface); }
.pj-hi-on_track { color: var(--pj-on); } .pj-hi-at_risk { color: var(--pj-risk); } .pj-hi-off_track { color: var(--pj-off); } .pj-hi-none { color: var(--line-strong); }
.pj-ring-back { stroke: var(--pj-track); }
.pj-ring-fill { stroke: var(--accent); }
.pj-ring.is-full .pj-ring-fill { stroke: var(--done-dot); }

.pj-health { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pj-health-none { color: var(--muted); }
.pj-quiet { color: var(--warn-ink); font-size: 11.5px; font-weight: 700; }

.pj-bar { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
/* A chunky slot that fills with blue plastic and turns green when full, like the watch bar on Learn. */
.pj-bar-track { position: relative; flex: 1; min-width: 40px; height: 10px; border: 1.5px solid var(--keyline); border-radius: 999px; background: var(--sunk); box-shadow: inset 0 2px 0 rgba(5, 8, 60, .1); overflow: hidden; }
.pj-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--face-blue); box-shadow: inset 0 -2px 0 #1D77B2, inset 0 2px 0 rgba(255, 255, 255, .45); }
.pj-bar-fill.is-full { background: var(--face-green); box-shadow: inset 0 -2px 0 #1DB267, inset 0 2px 0 rgba(255, 255, 255, .45); }
.pj-bar-text { flex: none; min-width: 34px; color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- side menu extras */

.pj-side-count { margin-left: auto; color: var(--faint); font-size: 12px; font-weight: 600; }
.pj-filter-note { font-size: 12.5px; }

/* ---------- project rows */

.pj-row {
  position: relative; display: grid; align-items: center; gap: 12px; min-height: 42px; padding: 0 14px 0 10px;
  grid-template-columns: 24px minmax(0, 1fr) 138px 150px 92px 66px 96px;
  border-bottom: 1px solid var(--line);
}
.tk-rows .pj-row:last-child { border-bottom: 0; }
.pj-row:hover { background: var(--tk-hover); }
.pj-row.is-focus { background: var(--tk-hover); box-shadow: inset 2px 0 0 var(--accent); }
.pj-row:focus { outline: none; }
.pj-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pj-row-head { min-height: 32px; color: var(--faint); font-size: 11.5px; font-weight: 700; background: var(--surface); }
.pj-row-head:hover { background: var(--surface); }

.pj-cell { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; color: var(--ink); font-size: 12.5px; font-weight: 600; }
button.pj-cell { width: auto; height: 28px; margin-left: -6px; padding: 0 6px; border: 0; border-radius: 5px; background: none; cursor: pointer; justify-content: flex-start; }
button.pj-cell:hover { background: var(--line); }
.pj-row > .pj-state { margin-left: 0; width: 24px; padding: 0; justify-content: center; }
.pj-lead-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--ink); text-decoration: none; }
.pj-name:hover .pj-name-text { color: var(--accent); }
.pj-name-text { overflow: hidden; font-size: 13.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pj-prefix { flex: none; }
.st-done .pj-name-text { color: var(--muted); }
.pj-health-cell { display: inline-flex; align-items: center; gap: 6px; min-width: 0; text-decoration: none; }
.pj-health-cell:hover .pj-health { color: var(--accent); }
.pj-target { color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pj-target-overdue { color: var(--blocked-ink); }
.pj-target-soon { color: var(--warn-ink); }
.pj-target-none { color: var(--faint); font-weight: 500; }
.pj-progress { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pj-open { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-align: right; white-space: nowrap; }
.pj-blocked { padding: 1px 7px; border-radius: 999px; background: var(--blocked-bg); color: var(--blocked-ink); font-size: 11.5px; }
.pj-group-label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 6px 6px 6px 10px; font-size: 13px; font-weight: 700; }
.pj-group-label .pj-health { gap: 0; }

/* ---------- project board cards */

.pj-card { cursor: default; }
.pj-card[draggable="true"] { cursor: grab; }
.pj-card-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.pj-card .tk-card-meta { gap: 6px 10px; }

/* ---------- larger tasks */

.pj-lt-row { grid-template-columns: 28px 18px 74px minmax(0, 1fr) 170px minmax(0, 140px) 70px 22px; gap: 10px; padding-left: 4px; cursor: default; }
.pj-lt + .pj-lt { border-top: 1px solid var(--line); }
.pj-lt .pj-lt-row { border-bottom: 0; }
.pj-lt-toggle { width: 26px; height: 26px; }
.pj-lt-toggle[aria-expanded="true"] .tk-caret { transform: rotate(90deg); }
.pj-lt-status, .pj-sub-status { display: inline-flex; }
.s-done .pj-lt-title, .s-dropped .pj-lt-title { color: var(--muted); }
.pj-lt-subs { padding: 2px 14px 10px 54px; background: var(--sunk); border-top: 1px dashed var(--line); }
.pj-lt-subs > .muted { padding: 8px 0; }

.pj-sub-list { display: grid; }
.pj-sub {
  display: grid; align-items: center; gap: 10px; min-height: 34px;
  grid-template-columns: 16px 70px minmax(0, 1fr) auto 64px 20px; border-bottom: 1px solid var(--line);
}
.pj-sub:last-child { border-bottom: 0; }
.pj-sub-title { min-width: 0; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.pj-sub-title:hover { color: var(--accent); }
.pj-sub.s-done .pj-sub-title, .pj-sub.s-dropped .pj-sub-title { color: var(--muted); }
.pj-sub.s-dropped .pj-sub-title { text-decoration: line-through; }
.pj-sub-count { color: var(--faint); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pj-sub-due { color: var(--muted); font-size: 12px; font-weight: 600; text-align: right; white-space: nowrap; }
.pj-sub-owner { display: inline-flex; }

.pj-subs { display: grid; gap: 10px; }
.pj-subs > .pj-bar { max-width: 360px; }
.pj-sub-add { position: relative; display: flex; align-items: center; gap: 8px; }
.pj-sub-add > .tk-ti { position: absolute; left: 10px; color: var(--faint); pointer-events: none; }
input.pj-sub-input { flex: 1; min-height: 32px; padding: 4px 10px 4px 31px; font-size: 13px; }
.pj-parent-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; min-width: 0; font-size: 13px; }
.pj-parent-line a { min-width: 0; overflow: hidden; color: var(--ink); font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.pj-parent-line a:hover { color: var(--accent); }
/* On the dark task header the key takes the header's light text, and the link keeps the header's gold. */
.task-head .pj-parent-line .key { color: #C9CCF4; }
.task-head .pj-parent-line a:hover { color: #FFFFFF; }
.pj-parent-field { margin: 0 0 6px; font-size: 13.5px; overflow-wrap: anywhere; }
.pj-parent-field a { color: var(--ink); font-weight: 600; text-decoration: none; }
.pj-parent-field a:hover { color: var(--accent); }
.form-actions.form-actions-start { justify-content: flex-start; }

/* ---------- the project page */

.pj-main { max-width: 1240px; }
.pj-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.pj-head { display: grid; gap: 8px; margin-bottom: 14px; }
.pj-head-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pj-head-title h1 { min-width: 0; font-size: 24px; overflow-wrap: anywhere; }
.pj-head-icon { display: inline-flex; }
.pj-desc { max-width: 760px; color: var(--muted); font-size: 14px; }
.pj-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-head-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.pj-remove { margin-left: auto; }
.pj-rm-list { margin: 4px 0 10px 18px; display: grid; gap: 2px; }

.pj-props {
  display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 16px; padding: 10px 16px 12px;
  border: 2px solid var(--keyline); border-radius: var(--radius); background: var(--surface); box-shadow: var(--slab);
}
.pj-prop { display: grid; gap: 2px; min-width: 0; }
.pj-prop-label { color: var(--faint); font-size: 11.5px; font-weight: 700; }
.pj-prop .tk-prop-btn { margin-left: -8px; white-space: nowrap; }
.pj-prop-value { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; font-size: 13px; font-weight: 600; white-space: nowrap; }
a.pj-prop-link { color: var(--ink); text-decoration: none; }
a.pj-prop-link:hover .pj-health { color: var(--accent); }

/* The open tab is the same lavender plastic chip as the side menu's current link. */
.pj-tabs { display: flex; gap: 4px; margin-bottom: 14px; padding: 2px 2px 4px; overflow-x: auto; overflow-y: hidden; }
.pj-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid transparent; border-radius: var(--radius-s);
  color: var(--muted); font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.pj-tab:hover { background: var(--sunk); color: var(--ink); }
.pj-tab[aria-current="page"] { border-color: var(--keyline); background: var(--face-lav); color: var(--face-ink); font-weight: 800; box-shadow: inset 0 -2px 0 rgba(5, 8, 60, .14), 0 2px 0 var(--keyline); }

.pj-split { align-items: start; }
.pj-stack-bar { display: flex; height: 14px; border: 1.5px solid var(--keyline); border-radius: 999px; overflow: hidden; background: var(--pj-track); }
.pj-seg { min-width: 4px; box-shadow: inset 0 -3px 0 rgba(5, 8, 60, .22), inset 0 2px 0 rgba(255, 255, 255, .35); }
.pj-seg + .pj-seg { border-left: 1.5px solid var(--keyline); }
.pj-seg-done { background: var(--done-dot); } .pj-seg-doing { background: var(--doing-dot); }
.pj-seg-blocked { background: var(--blocked-dot); } .pj-seg-todo { background: var(--todo-dot); opacity: .55; }
.pj-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.pj-legend li { display: inline-flex; align-items: center; gap: 6px; }
.pj-legend strong { color: var(--ink); }
.pj-look { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.pj-look h3 { font-size: 13px; }
.pj-look-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-look-list a {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1.5px solid var(--keyline); border-radius: 999px; background: var(--face-lav);
  color: var(--face-ink); font-size: 12.5px; font-weight: 700; text-decoration: none; box-shadow: inset 0 -2px 0 rgba(5, 8, 60, .14), 0 2px 0 var(--keyline); transition: transform 80ms;
}
.pj-look-list a:hover { transform: translateY(-1px); }
.pj-look-list .tk-group-count { color: var(--face-ink); opacity: .6; font-weight: 800; }
.pj-all-clear { margin-top: 10px; }

.pj-larger { display: grid; }
.pj-larger-row { display: grid; grid-template-columns: 16px 70px minmax(0, 1fr) 150px 20px; align-items: center; gap: 10px; min-height: 36px; border-bottom: 1px solid var(--line); }
.pj-larger-row:last-child { border-bottom: 0; }

.pj-no-update { display: grid; gap: 10px; justify-items: start; }
.pj-update { display: grid; gap: 8px; }
.pj-update-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pj-update-head .pj-health { margin-right: 6px; padding: 2px 9px; border-radius: 999px; }
.pj-update-head .pj-health-on_track { background: var(--pj-on-bg); }
.pj-update-head .pj-health-at_risk { background: var(--pj-risk-bg); }
.pj-update-head .pj-health-off_track { background: var(--pj-off-bg); }
.pj-update-body { white-space: pre-wrap; overflow-wrap: anywhere; }

.pj-updates { display: grid; gap: 16px; max-width: 820px; }
.pj-composer { display: grid; gap: 12px; padding: 16px; }
.pj-composer h2 { font-size: 15px; }
.pj-composer-health { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pj-health-btn { gap: 7px; }
.pj-health-btn[aria-pressed="true"].pj-health-on_track { background: var(--pj-on-bg); color: var(--done-ink); }
.pj-health-btn[aria-pressed="true"].pj-health-at_risk { background: var(--pj-risk-bg); color: var(--warn-ink); }
.pj-health-btn[aria-pressed="true"].pj-health-off_track { background: var(--pj-off-bg); color: var(--blocked-ink); }
.pj-composer textarea { min-height: 110px; }
.pj-composer .form-actions { align-items: center; }
.pj-composer-note { margin-right: auto; }
.pj-feed { display: grid; gap: 12px; }
.pj-feed > li { padding: 14px 16px 16px; border: 2px solid var(--keyline); border-radius: var(--radius); background: var(--surface); box-shadow: var(--slab); }

/* ---------- on the Tasks page (js/tasks): a sub-task's larger task, and a larger task's count */

.tk-parent { flex: none; color: var(--faint); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tk-parent:hover { color: var(--accent); }
.tk-title-cell { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.tk-flag-sub { flex: none; gap: 4px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tk-peek-part .pj-sub { grid-template-columns: 16px 64px minmax(0, 1fr) auto 20px; }
.tk-peek-part .pj-sub-due { display: none; }

/* ---------- narrower screens */

@media (max-width: 1100px) {
  .pj-row { grid-template-columns: 24px minmax(0, 1fr) 128px 34px 84px 64px; }
  .pj-row .pj-open, .pj-row-head .pj-open { display: none; }
  .pj-lead-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pj-lt-row { grid-template-columns: 28px 18px 74px minmax(0, 1fr) 140px 70px 22px; }
  .pj-lt-row .tk-proj { display: none; }
}
@media (max-width: 720px) {
  .pj-row { grid-template-columns: 24px minmax(0, 1fr) auto 54px; min-height: 48px; padding: 0 10px; }
  .pj-row .pj-lead, .pj-row .pj-target, .pj-row-head { display: none; }
  .pj-health-cell .pj-health { font-size: 0; gap: 0; }
  .pj-health-cell .pj-quiet { display: none; }
  .pj-lt-row { grid-template-columns: 26px minmax(0, 1fr) 96px 22px; gap: 8px; }
  .pj-lt-row .pj-lt-status, .pj-lt-row .pj-lt-key, .pj-lt-row .tk-due { display: none; }
  .pj-lt-subs { padding-left: 12px; }
  .pj-sub { grid-template-columns: 16px minmax(0, 1fr) auto 20px; }
  .pj-sub .pj-sub-key, .pj-sub .pj-sub-due { display: none; }
  .pj-larger-row { grid-template-columns: 16px minmax(0, 1fr) 96px 20px; }
  .pj-larger-row .key { display: none; }
  .pj-props { gap: 6px 16px; }
  .pj-head-title h1 { font-size: 21px; }
}