/* ════════════════════════════════════════════════════════════
   NOIR OFFICE — "STUDIO LEDGER"
   Light editorial workspace for the Office sections.
   Scoped to .noir-office — safe inside the v2 dashboard shell.
   Display: Roboto Slab · Body: Public Sans · Data: IBM Plex Mono
   Canonical design: design-previews/office_design.html
   ════════════════════════════════════════════════════════════ */

.noir-office {
  --no-paper:   #f7f3ea;
  --no-paper2:  #efe9dc;
  --no-card:    #fffdf8;
  --no-ink:     #1c1712;
  --no-ink2:    #4a4138;
  --no-muted:   #8a7f72;
  --no-hair:    rgba(28, 23, 18, .12);
  --no-hair2:   rgba(28, 23, 18, .07);

  --no-orange:  #cb360f;
  --no-orange2: #e04010;
  --no-plum:    #7c3d6e;
  --no-moss:    #3d6e4a;
  --no-sky:     #2e6e8e;
  --no-butter:  #a98f1d;
  --no-rose:    #c45c6a;
  --no-lime:    #5e9326;

  --no-serif: 'Roboto Slab', Georgia, serif;
  --no-sans:  'Public Sans', system-ui, sans-serif;
  --no-mono:  'IBM Plex Mono', ui-monospace, monospace;

  --no-r-sm: 10px; --no-r-md: 16px; --no-r-lg: 22px;
  --no-shadow-1: 0 1px 2px rgba(28,23,18,.05), 0 4px 14px rgba(28,23,18,.05);
  --no-shadow-2: 0 2px 4px rgba(28,23,18,.06), 0 14px 34px rgba(28,23,18,.10);
  --no-ease: cubic-bezier(.22, 1, .36, 1);

  font-family: var(--no-sans);
  font-size: 15px;
  color: var(--no-ink);
  /* paper grain wash so the section feels like the mockup even
     inside the v2 main column */
  background:
    radial-gradient(rgba(28,23,18,.022) 1px, transparent 1px) 0 0 / 5px 5px,
    var(--no-paper);
  border-radius: var(--no-r-lg);
  padding: 26px 26px 34px;
  margin: 0 -8px;
}
.noir-office *, .noir-office *::before, .noir-office *::after { box-sizing: border-box; }
.noir-office a { color: inherit; text-decoration: none; }
.noir-office button { font-family: inherit; cursor: pointer; }

/* ── Entrance choreography ─────────────────────────
   Sections are display:none until opened, so the stagger
   plays the moment the Office tab is first revealed. */
@keyframes noRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.no-rise { animation: noRise .7s var(--no-ease) both; }
.no-d1 { animation-delay: .05s } .no-d2 { animation-delay: .12s } .no-d3 { animation-delay: .19s }
.no-d4 { animation-delay: .26s } .no-d5 { animation-delay: .33s } .no-d6 { animation-delay: .40s }
@media (prefers-reduced-motion: reduce) {
  .noir-office .no-rise { animation: none; }
  .noir-office * { transition-duration: .01ms !important; }
}

/* ════════ MASTHEAD (section heading) ════════ */
.no-masthead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 6px 0 18px;
  border-bottom: 2px solid var(--no-ink);
  margin-bottom: 18px;
}
.no-kicker {
  font-family: var(--no-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--no-orange);
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.no-kicker::before { content: ""; width: 26px; height: 2px; background: var(--no-orange); }
.no-masthead h2 {
  font-family: var(--no-serif) !important; font-weight: 300 !important;
  font-size: clamp(30px, 4.5vw, 44px) !important;
  line-height: .98 !important; letter-spacing: -.02em !important;
  margin: 0 !important; padding: 0 !important; border: none !important;
  color: var(--no-ink) !important;
}
.no-masthead h2 b { font-weight: 700; color: var(--no-orange); }
.no-date {
  font-family: var(--no-mono); font-size: 11.5px; color: var(--no-muted);
  text-align: right; line-height: 1.8;
}
.no-date strong { color: var(--no-ink); font-weight: 600; }

/* ════════ GLASS PILL RECIPE (iOS / Telegram) ════════ */
.no-teampill, .no-cadchip, .no-taskbadge, .no-matico {
  background-color: rgba(255, 255, 255, .38);
  backdrop-filter: blur(14px) saturate(1.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 1px rgba(28, 23, 18, .05),
    0 2px 8px rgba(28, 23, 18, .08);
}

/* ════════ SEGMENTED CONTROL (period) ════════ */
.no-seg {
  display: inline-flex; border-radius: 999px; padding: 4px; gap: 2px;
  background: rgba(255, 255, 255, .35);
  backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 1px rgba(28, 23, 18, .05),
    0 4px 14px rgba(28, 23, 18, .10);
}
.no-seg a, .no-seg button {
  border: none; background: none; padding: 7px 18px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--no-muted);
  transition: all .25s var(--no-ease); text-decoration: none;
  font-family: var(--no-sans);
}
.no-seg .on {
  background: rgba(28, 23, 18, .82); color: var(--no-paper) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 10px rgba(28,23,18,.25);
}
.no-seg a:not(.on):hover, .no-seg button:not(.on):hover { color: var(--no-ink); }

/* ════════ STAT STRIP ════════ */
.no-statstrip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--no-hair); border-radius: var(--no-r-lg);
  background: var(--no-card); overflow: hidden; box-shadow: var(--no-shadow-1);
  margin-bottom: 28px;
}
.no-stat { padding: 22px 26px 18px; }
.no-stat + .no-stat { border-left: 1px solid var(--no-hair2); }
.no-stat-label {
  font-family: var(--no-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--no-muted); margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.no-stat-label .no-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.no-stat-num {
  font-family: var(--no-serif); font-size: 38px; font-weight: 700;
  line-height: 1; letter-spacing: -.02em; color: var(--no-ink);
}
.no-stat-num small { font-size: 20px; font-weight: 400; color: var(--no-muted); }
.no-stat-sub { font-size: 12px; color: var(--no-muted); margin-top: 7px; }
.no-stat-sub b { color: var(--no-moss); }

/* ════════ SECTION RULES — numbered ════════ */
.no-sec {
  display: flex; align-items: baseline; gap: 14px;
  margin: 36px 0 16px; padding-bottom: 11px;
  border-bottom: 1px solid var(--no-hair);
}
.no-sec-no {
  font-family: var(--no-mono); font-size: 12px; font-weight: 600;
  color: var(--no-orange); letter-spacing: .08em;
}
.no-sec h3 {
  font-family: var(--no-serif) !important; font-weight: 600 !important;
  font-size: 21px !important; letter-spacing: -.01em !important;
  margin: 0 !important; padding: 0 !important; border: none !important;
  color: var(--no-ink) !important;
}
.no-sec h3 em { font-style: normal; color: var(--no-muted); font-weight: 300; }
.no-sec .no-spacer { flex: 1; }
.no-sec-action {
  font-size: 12.5px; font-weight: 700; color: var(--no-orange);
  background: none; border: none; display: inline-flex; align-items: center; gap: 6px;
  transition: gap .2s var(--no-ease); white-space: nowrap;
}
.no-sec-action:hover { gap: 10px; }

/* ════════ TEAMS RAIL ════════ */
.no-teams { display: flex; gap: 12px; flex-wrap: wrap; }
.no-teamcard {
  display: flex; align-items: center; gap: 12px;
  background: var(--no-card); border: 1px solid var(--no-hair);
  border-radius: var(--no-r-md); padding: 11px 16px 11px 13px;
  box-shadow: var(--no-shadow-1); cursor: pointer;
  transition: transform .25s var(--no-ease), box-shadow .25s var(--no-ease), border-color .25s;
  color: inherit; text-decoration: none;
}
.no-teamcard:hover { transform: translateY(-2px); box-shadow: var(--no-shadow-2); }
.no-teamcard.on { border-color: var(--no-ink); }
.no-swatch {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--no-mono); font-size: 11px; font-weight: 600; color: #fff;
}
.no-tname { font-weight: 700; font-size: 13px; line-height: 1.25; color: var(--no-ink); }
.no-tmeta { font-family: var(--no-mono); font-size: 10px; color: var(--no-muted); }
.no-teamcard--all .no-swatch { background: var(--no-ink); }
.no-teamcard--new { border-style: dashed; box-shadow: none; background: transparent; color: var(--no-muted); }
.no-teamcard--new:hover { color: var(--no-orange); border-color: var(--no-orange); }
.no-teamcard--new .no-swatch {
  background: transparent; border: 1.5px dashed var(--no-hair);
  color: var(--no-muted); font-size: 15px;
}
/* tiny inline action buttons inside team cards */
.no-mini-btn {
  font-size: 10px; padding: 2px 7px; background: none;
  border: 1px solid var(--no-hair); border-radius: 6px;
  color: var(--no-muted); transition: all .2s;
}
.no-mini-btn:hover { color: var(--no-ink); border-color: var(--no-ink); }
.no-mini-btn--danger { border-color: rgba(196,92,106,.5); color: var(--no-rose); }
.no-mini-btn--danger:hover { background: rgba(196,92,106,.08); color: var(--no-rose); border-color: var(--no-rose); }

/* ════════ ROSTER LEDGER ════════ */
.no-roster {
  background: var(--no-card); border: 1px solid var(--no-hair);
  border-radius: var(--no-r-lg); overflow: hidden; box-shadow: var(--no-shadow-1);
}
.no-roster-head {
  display: grid; grid-template-columns: minmax(200px, 1.4fr) 1fr 150px 70px 30px;
  gap: 14px; align-items: center;
  padding: 11px 24px; background: var(--no-paper2);
  font-family: var(--no-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--no-muted);
  border-bottom: 1px solid var(--no-hair);
}
.no-rrow {
  display: grid; grid-template-columns: minmax(200px, 1.4fr) 1fr 150px 70px 30px;
  gap: 14px; align-items: center;
  padding: 15px 24px; border-bottom: 1px solid var(--no-hair2);
  transition: background .2s; cursor: pointer; color: inherit; text-decoration: none;
}
.no-rrow:last-of-type { border-bottom: none; }
.no-rrow:hover { background: rgba(203, 54, 15, .035); }
.no-rrow:hover .no-rgo { opacity: 1; transform: none; }
.no-rwho { display: flex; align-items: center; gap: 13px; min-width: 0; }
.no-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  font-weight: 800; font-size: 13px; letter-spacing: .02em;
}
.no-rname { font-weight: 700; font-size: 14px; color: var(--no-ink); }
.no-rrole { font-size: 11.5px; color: var(--no-muted); margin-top: 1px; }
.no-teampill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.no-teampill i { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.no-rload { display: flex; align-items: center; gap: 9px; }
.no-track { flex: 1; height: 5px; border-radius: 99px; background: var(--no-paper2); overflow: hidden; }
.no-fill { height: 100%; border-radius: 99px; width: 0; transition: width 1.1s var(--no-ease) .35s; }
.no-rhours { font-family: var(--no-mono); font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--no-ink); }
.no-rpct { font-family: var(--no-mono); font-size: 10.5px; font-weight: 600; }
.no-taskbadge {
  font-family: var(--no-mono); font-size: 11px; font-weight: 600;
  background-color: rgba(28, 23, 18, .78); color: var(--no-paper);
  border-color: rgba(255, 255, 255, .25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 2px 8px rgba(28,23,18,.22);
  min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.no-taskbadge--zero {
  background-color: rgba(255, 255, 255, .38); color: var(--no-muted);
  border-color: rgba(255, 255, 255, .65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 2px 8px rgba(28,23,18,.06);
}
.no-rgo {
  font-size: 17px; color: var(--no-orange); opacity: 0; transform: translateX(-6px);
  transition: all .25s var(--no-ease); text-align: right;
}
.no-roster-foot {
  padding: 13px 24px; border-top: 1px solid var(--no-hair);
  background: linear-gradient(rgba(203,54,15,.02), transparent);
}

/* ════════ GOALS — cadence columns ════════ */
.no-goals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.no-goalcol {
  background: var(--no-card); border: 1px solid var(--no-hair);
  border-radius: var(--no-r-lg); padding: 18px 18px 14px;
  box-shadow: var(--no-shadow-1); border-top: 3px solid var(--no-col, var(--no-orange));
}
.no-goalcol-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.no-goalcol-title {
  font-family: var(--no-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--no-col, var(--no-ink));
}
.no-goalcol-count { font-family: var(--no-mono); font-size: 10px; color: var(--no-muted); }
.no-goal { display: flex; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--no-hair2); }
.no-goal:last-child { border-bottom: none; }
.no-goal > div { flex: 1; min-width: 0; }
.no-goal-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; color: var(--no-ink); }
.no-goal-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.no-goal-who { font-size: 11px; color: var(--no-muted); }
.no-goal-desc { font-size: 12px; color: var(--no-muted); margin-top: 3px; }
.no-goal-x {
  background: none; border: none; color: var(--no-muted);
  font-size: 13px; opacity: 0; transition: opacity .2s, color .2s; padding: 0 0 0 8px;
}
.no-goal:hover .no-goal-x { opacity: .85; }
.no-goal-x:hover { color: var(--no-rose); }
.no-goalcol-empty { font-size: 12px; color: var(--no-muted); padding: 14px 0; text-align: center; font-style: italic; }

/* ════════ PANELS / DUO ════════ */
.no-duo { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; align-items: start; }
.no-panel {
  background: var(--no-card); border: 1px solid var(--no-hair);
  border-radius: var(--no-r-lg); box-shadow: var(--no-shadow-1); overflow: hidden;
}
.no-panel-pad { padding: 20px 22px; }
.no-panel-title { font-family: var(--no-serif); font-size: 16.5px; font-weight: 600; margin-bottom: 2px; color: var(--no-ink); }
.no-panel-sub { font-size: 12px; color: var(--no-muted); margin-bottom: 14px; }
.no-mat {
  display: flex; align-items: center; gap: 13px; padding: 11px 0;
  border-bottom: 1px solid var(--no-hair2); transition: padding-left .2s var(--no-ease);
  color: inherit; text-decoration: none;
}
.no-mat:hover { padding-left: 6px; }
.no-mat:last-of-type { border-bottom: none; }
.no-matico {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 15px;
}
.no-matname { font-weight: 600; font-size: 13px; flex: 1; color: var(--no-ink); }
.no-mattype { font-family: var(--no-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--no-muted); text-transform: uppercase; }

/* ════════ FORMS ════════ */
.noir-office .no-label {
  display: block; font-family: var(--no-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--no-muted);
  margin: 0 0 6px; font-weight: 500;
}
.noir-office .no-input,
.noir-office select.no-input,
.noir-office textarea.no-input {
  width: 100%; border: 1px solid var(--no-hair) !important; border-radius: var(--no-r-sm) !important;
  background: var(--no-paper) !important; padding: 10px 13px !important; font-size: 13.5px !important;
  font-family: var(--no-sans) !important; color: var(--no-ink) !important; outline: none !important;
  transition: border-color .2s, box-shadow .2s; box-sizing: border-box;
  box-shadow: none;
}
.noir-office .no-input:focus {
  border-color: var(--no-orange) !important;
  box-shadow: 0 0 0 3px rgba(203,54,15,.10) !important;
}
.noir-office textarea.no-input { min-height: 64px; resize: vertical; }
.no-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.no-frow3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.no-fgap { display: grid; gap: 10px; }

.noir-office .no-btn {
  display: inline-flex; align-items: center; gap: 8px; border: none;
  border-radius: 999px; padding: 11px 22px; font-size: 13px; font-weight: 700;
  font-family: var(--no-sans);
  transition: transform .2s var(--no-ease), box-shadow .2s var(--no-ease), background .2s;
  text-decoration: none;
}
.noir-office .no-btn:active { transform: scale(.97); }
.noir-office .no-btn--primary {
  background: var(--no-orange); color: #fff;
  box-shadow: 0 6px 18px rgba(203,54,15,.28);
}
.noir-office .no-btn--primary:hover {
  background: var(--no-orange2); color: #fff;
  transform: translateY(-1px); box-shadow: 0 10px 24px rgba(203,54,15,.32);
}
.noir-office .no-btn--ghost { background: transparent; color: var(--no-ink); border: 1.5px solid var(--no-hair); }
.noir-office .no-btn--ghost:hover { border-color: var(--no-ink); color: var(--no-ink); }
.noir-office .no-btn--sm { padding: 8px 16px; font-size: 12px; }
.noir-office .no-btn--block { width: 100%; justify-content: center; }

/* details/summary disclosure */
.noir-office details.no-disclose > summary {
  cursor: pointer; color: var(--no-orange); font-size: 12.5px; font-weight: 700;
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
  transition: gap .2s var(--no-ease);
}
.noir-office details.no-disclose > summary::-webkit-details-marker { display: none; }
.noir-office details.no-disclose > summary:hover { gap: 10px; }
.noir-office details.no-disclose[open] > summary { margin-bottom: 12px; }
@keyframes noDisclose { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.noir-office details.no-disclose[open] > *:not(summary) { animation: noDisclose .35s var(--no-ease) both; }

/* ════════ ALERTS ════════ */
.no-alert {
  border-radius: var(--no-r-md); padding: 12px 18px; font-size: 13px; font-weight: 600;
  margin-bottom: 14px; display: flex; align-items: center; gap: 9px;
  animation: noRise .5s var(--no-ease) both;
}
.no-alert--success { background: rgba(94,147,38,.10); border: 1px solid rgba(94,147,38,.30); color: var(--no-moss); }

/* ════════ MEMBER VIEW ════════ */
.no-member-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; align-items: start; }
.no-member-col { display: grid; gap: 14px; }

/* punch-card clock */
.no-clockcard {
  background: var(--no-ink); color: var(--no-paper);
  border-radius: var(--no-r-lg); padding: 26px; position: relative; overflow: hidden;
  box-shadow: var(--no-shadow-2);
}
.no-clockcard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 14px;
  background-image: radial-gradient(circle at 10px 7px, var(--no-paper) 3.5px, transparent 4px);
  background-size: 26px 14px; opacity: .25;
}
.no-clock-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--no-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(244,240,232,.6); margin: 8px 0 16px;
}
.no-lamp { width: 9px; height: 9px; border-radius: 50%; background: #5a5248; transition: background .3s, box-shadow .3s; }
.no-clockcard.in .no-lamp { background: var(--no-lime); box-shadow: 0 0 12px rgba(110,168,50,.8); animation: noLamp 2.2s ease-in-out infinite; }
@keyframes noLamp {
  0%, 100% { box-shadow: 0 0 12px rgba(110,168,50,.8); }
  50%      { box-shadow: 0 0 4px rgba(110,168,50,.4); }
}
.no-clock-time {
  font-family: var(--no-mono); font-size: clamp(34px, 4.5vw, 46px); font-weight: 500;
  letter-spacing: -.01em; line-height: 1; margin-bottom: 4px;
  font-variant-numeric: tabular-nums; color: var(--no-paper);
}
.no-clock-sub { font-family: var(--no-mono); font-size: 11px; color: rgba(244,240,232,.55); margin-bottom: 22px; }
.no-clock-sub b { color: var(--no-orange2); font-weight: 600; }
.noir-office .no-btn--clock {
  width: 100%; justify-content: center; background: var(--no-orange); color: #fff;
  font-size: 14.5px; padding: 14px; box-shadow: 0 6px 18px rgba(203,54,15,.35);
}
.noir-office .no-btn--clock:hover { background: var(--no-orange2); color: #fff; }
.no-clockcard.in .no-btn--clock {
  background: transparent; border: 1.5px solid rgba(244,240,232,.35);
  color: var(--no-paper); box-shadow: none;
}
.no-clockcard.in .no-btn--clock:hover { border-color: var(--no-rose); color: var(--no-rose); background: transparent; }

/* hours ledger */
.no-ledger-row {
  display: flex; align-items: baseline; gap: 13px; padding: 10px 0;
  border-bottom: 1px dashed var(--no-hair); font-size: 12.5px;
}
.no-ledger-row:last-child { border-bottom: none; }
.no-ledger-day { font-weight: 700; width: 84px; color: var(--no-ink); }
.no-ledger-span { font-family: var(--no-mono); font-size: 11.5px; color: var(--no-muted); flex: 1; }
.no-ledger-dur { font-family: var(--no-mono); font-size: 12.5px; font-weight: 600; color: var(--no-orange); }

/* tasks checklist */
.no-task {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--no-hair2);
}
.no-task:last-child { border-bottom: none; }
.noir-office .no-tick {
  width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--no-hair);
  background: var(--no-paper); flex-shrink: 0; margin-top: 1px; padding: 0;
  display: grid; place-items: center; transition: all .25s var(--no-ease);
  color: transparent; font-size: 12px; line-height: 1;
}
.no-task:hover .no-tick { border-color: var(--no-orange); }
.no-task.done .no-tick { background: var(--no-moss); border-color: var(--no-moss); color: #fff; }
@keyframes noPop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.no-task.done .no-tick { animation: noPop .3s var(--no-ease); }
.no-task-body { flex: 1; min-width: 0; }
.no-task-title { font-weight: 600; font-size: 13.5px; transition: color .25s; color: var(--no-ink); }
.no-task.done .no-task-title { color: var(--no-muted); text-decoration: line-through; }
.no-task-from { font-size: 11px; color: var(--no-moss); margin-top: 2px; font-weight: 600; }
.no-task-due { font-family: var(--no-mono); font-size: 10px; margin-top: 3px; color: var(--no-muted); }
.no-task-due--overdue { color: var(--no-rose); font-weight: 600; }
.no-prio { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 8px; }
.no-cadchip {
  font-family: var(--no-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: 2px 9px; border-radius: 999px;
}

/* composer */
.no-composer {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px dashed var(--no-hair); border-radius: var(--no-r-sm);
  padding: 3px 6px 3px 15px; margin-bottom: 6px; background: var(--no-paper);
  transition: border-color .2s;
}
.no-composer:focus-within { border-color: var(--no-orange); border-style: solid; }
.no-composer .no-plus { color: var(--no-orange); font-weight: 800; font-size: 16px; }
.noir-office .no-composer input {
  flex: 1; border: none !important; background: none !important; outline: none !important;
  font-size: 13.5px !important; font-family: var(--no-sans) !important;
  padding: 9px 0 !important; color: var(--no-ink) !important; box-shadow: none !important;
}
.no-composer .no-btn { padding: 7px 16px; font-size: 12px; }
/* options row that slides open while composing */
.no-composer-opts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px 2px 4px; margin-bottom: 6px;
  animation: noDisclose .3s var(--no-ease) both;
}
@media (max-width: 520px) { .no-composer-opts { grid-template-columns: 1fr; } }

/* team banner (member) */
.no-teambanner {
  border-radius: var(--no-r-lg); padding: 18px 22px;
  border: 1px solid; box-shadow: var(--no-shadow-1);
  display: flex; flex-direction: column; gap: 13px;
  background: var(--no-card);
}
.no-tb-head { display: flex; align-items: center; gap: 12px; }
.no-tb-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.no-tb-name { font-family: var(--no-serif); font-weight: 700; font-size: 16px; color: var(--no-ink); }
.no-tb-meta { font-size: 12px; color: var(--no-muted); }
.no-mates { display: flex; align-items: center; }
.no-mate {
  width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid var(--no-card);
  display: grid; place-items: center; color: #fff; font-size: 10.5px; font-weight: 800;
  margin-left: -8px; transition: transform .2s var(--no-ease); cursor: default;
  position: relative;
}
.no-mate:first-child { margin-left: 0; }
.no-mate:hover { transform: translateY(-3px) scale(1.08); z-index: 2; }
.no-mates-label {
  font-family: var(--no-mono); font-size: 10px; color: var(--no-muted);
  margin-left: 12px; letter-spacing: .08em; text-transform: uppercase;
}

/* staff detail header */
.no-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.no-subcard {
  background: var(--no-paper); border: 1px solid var(--no-hair2);
  border-radius: var(--no-r-md); padding: 14px 16px; margin-bottom: 14px;
}
.no-eyebrow {
  display: block; font-family: var(--no-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--no-muted);
  margin-bottom: 8px; font-weight: 500;
}
.no-big {
  font-family: var(--no-serif); font-size: 26px; font-weight: 800; color: var(--no-ink);
}
.no-big small { font-size: 15px; color: var(--no-muted); font-weight: 400; }

/* task card rows (employer staff detail) */
.no-taskrow {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 5px;
  background: var(--no-paper); border-radius: var(--no-r-sm); border: 1px solid var(--no-hair2);
  transition: border-color .2s, transform .2s var(--no-ease);
}
.no-taskrow:hover { border-color: var(--no-hair); transform: translateX(2px); }

/* ════════ TASK COMMENT THREADS ════════ */
.no-comment-btn {
  background: none; border: none; font-family: var(--no-mono); font-size: 10.5px;
  color: var(--no-muted); display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 0; transition: color .2s;
}
.no-comment-btn:hover { color: var(--no-orange); }
.no-comment-btn .n { font-weight: 600; }
.no-comments {
  margin: 8px 0 4px; padding: 10px 12px;
  background: var(--no-paper2); border-radius: var(--no-r-sm);
  animation: noDisclose .3s var(--no-ease) both;
}
.no-comment { display: flex; gap: 8px; padding: 6px 0; font-size: 12.5px; }
.no-comment + .no-comment { border-top: 1px dashed var(--no-hair2); }
.no-comment-author { font-weight: 700; color: var(--no-ink); white-space: nowrap; }
.no-comment-author.mine { color: var(--no-orange); }
.no-comment-body { flex: 1; color: var(--no-ink2); min-width: 0; overflow-wrap: anywhere; }
.no-comment-time { font-family: var(--no-mono); font-size: 9.5px; color: var(--no-muted); white-space: nowrap; }
.no-comment-compose { display: flex; gap: 8px; margin-top: 8px; }
.noir-office .no-comment-compose input {
  flex: 1; border: 1px solid var(--no-hair) !important; border-radius: 8px !important;
  background: var(--no-card) !important; padding: 7px 11px !important;
  font-size: 12.5px !important; color: var(--no-ink) !important; outline: none !important;
  font-family: var(--no-sans) !important; box-shadow: none !important;
}
.no-comment-compose .no-btn { padding: 6px 14px; font-size: 11.5px; }
.no-streak {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--no-mono); font-size: 10.5px; font-weight: 600;
  color: var(--no-butter); letter-spacing: .06em;
}

/* ── Responsive ───────────────────────── */
@media (max-width: 900px) {
  .noir-office { padding: 18px 14px 26px; margin: 0; }
  .no-goals-grid { grid-template-columns: 1fr; }
  .no-duo { grid-template-columns: 1fr; }
  .no-member-grid { grid-template-columns: 1fr; }
  .no-statstrip { grid-template-columns: 1fr; }
  .no-stat + .no-stat { border-left: none; border-top: 1px solid var(--no-hair2); }
  .no-roster-head { display: none; }
  .no-rrow { grid-template-columns: 1fr auto; row-gap: 10px; padding: 14px 16px; }
  .no-rload { grid-column: 1 / -1; }
  .no-rgo { display: none; }
  .no-frow3 { grid-template-columns: 1fr; }
}