/* =========================================================================
   Digital Samadhi — client work, by project
   Monochrome, borderless. Hierarchy comes from background value and spacing,
   never from a line. Colour is reserved for destructive intent alone.
   ========================================================================= */

:root {
  --bg:         #212121;   /* main canvas */
  --bg-side:    #181818;   /* sidebar, recedes */
  --surface:    #2f2f2f;   /* cards, inputs */
  --surface-2:  #383838;   /* hover */
  --surface-3:  #424242;   /* pressed, selected */

  --text:       #ececec;
  --text-2:     #afafaf;
  --text-3:     #8f8f8f;

  --solid:      #ffffff;   /* primary action fill */
  --on-solid:   #0d0d0d;
  --danger:     #f4776a;   /* destructive only */

  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
          system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --rail-w: 264px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

:focus-visible {
  outline: 2px solid var(--text-2);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--surface-3); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--surface-2);
  border-radius: var(--r-pill);
  background-clip: content-box;
  border: 3px solid transparent;
}
::-webkit-scrollbar-track { background: transparent; }

/* ---------- shell ---------- */

.app {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  height: 100%;
}

.rail {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4) var(--s2) var(--s2);
  background: var(--bg-side);
  overflow: hidden;
}

.stage { overflow-y: auto; }

/* ---------- brand ---------- */

.brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s1) var(--s3) 0;
}

.brand__text { display: flex; flex-direction: column; line-height: 1.2; }

.brand__text em {
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand__text span {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 1px;
}

/* ---------- buttons ---------- */

.btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  border: 0;
  border-radius: var(--r-pill);
  padding: 9px var(--s4);
  cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), opacity 150ms var(--ease);
}

.btn--solid {
  background: var(--solid);
  color: var(--on-solid);
  width: 100%;
}
.btn--solid:hover { background: #e0e0e0; }
.btn--solid:disabled { background: var(--surface-2); color: var(--text-3); cursor: default; }

.btn--quiet {
  background: transparent;
  color: var(--text-2);
}
.btn--quiet:hover { background: var(--surface-2); color: var(--text); }

/* Secondary fill. Keeps the solid white reserved for the one primary action
   on screen, so two CTAs never compete. */
.btn--soft {
  background: var(--surface-3);
  color: var(--text);
}
.btn--soft:hover { background: #4d4d4d; }

.btn:disabled { opacity: 0.4; cursor: default; }
.btn--soft:disabled:hover { background: var(--surface-3); }

.rail__add { margin-top: auto; text-align: left; border-radius: var(--r-sm); }

/* ---------- sync ---------- */

.sync {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 var(--s2);
}

.sync__status {
  margin: 0;
  font-size: 11px;
  color: var(--text-3);
  min-height: 1.2em;
  padding-left: var(--s2);
  font-variant-numeric: tabular-nums;
}
.sync__status[data-tone='wait'] { color: var(--text-2); }

/* ---------- account switcher ---------- */

.accounts { display: flex; flex-direction: column; gap: 1px; padding: 0 var(--s2); }

.arow {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  width: 100%;
  padding: 6px var(--s3);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background-color 130ms var(--ease), color 130ms var(--ease);
}
.arow:hover { background: var(--surface-2); color: var(--text-2); }
.arow[aria-current='true'] { background: var(--surface-3); color: var(--text); }

.arow__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow__sub { flex: none; font-variant-numeric: tabular-nums; }

/* ---------- project rail ---------- */

.projects {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0 var(--s2);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent 100%);
}

.projects__head {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  padding: var(--s4) var(--s3) var(--s1);
  margin: 0;
}

.crow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 7px var(--s3);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background-color 130ms var(--ease), color 130ms var(--ease);
}

.crow:hover { background: var(--surface-2); color: var(--text); }
.crow[aria-current='true'] { background: var(--surface-3); color: var(--text); }

/* Drop target. Value, not colour — the row simply comes forward. */
.crow[data-dropping] {
  background: var(--text-2);
  color: var(--bg);
}
.crow[data-dropping] .crow__count { color: var(--bg); }

.crow__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.crow__count {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  flex: none;
}

.crow__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-2);
  flex: none;
}

/* ---------- project header ---------- */

.head { padding: var(--s6) var(--s6) var(--s5); }

.head__name {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

.head__contact { margin: 6px 0 0; color: var(--text-2); font-size: 14px; }

.head__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.chip {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 3px var(--s2);
}

.head__note {
  margin: var(--s3) 0 0;
  color: var(--text-2);
  max-width: 64ch;
}

.head__tools { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s4); }

/* The full-width solid is the sidebar's shape; in a header it sizes to its label. */
.head__tools .btn--solid { width: auto; }

.linkbtn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-3);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color 130ms var(--ease);
}
.linkbtn:hover { color: var(--text); }
.linkbtn--danger:hover { color: var(--danger); }

/* ---------- columns ---------- */

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--s6);
  padding: 0 var(--s6) var(--s7);
  align-items: start;
}

@media (max-width: 1080px) {
  .cols { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.panel__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin: 0;
}

/* ---------- task composer ---------- */

.compose { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s5); }

.compose__input {
  width: 100%;
  background: var(--surface);
  border: 0;
  border-radius: var(--r-lg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: var(--s3) var(--s4);
  resize: none;
  min-height: 44px;
  line-height: 1.5;
}
.compose__input::placeholder { color: var(--text-3); }
.compose__input:focus { outline: none; background: var(--surface-2); }

.compose__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }

.compose__hint { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.compose__submit { width: auto; padding: 7px var(--s4); font-size: 13px; }

/* ---------- task groups ---------- */

.group + .group { margin-top: var(--s5); }

.group__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  margin: 0 0 6px;
  padding: 0 var(--s3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}

.tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.task {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px var(--s3);
  border-radius: var(--r);
  background: transparent;
  transition: background-color 130ms var(--ease);
  animation: rise 240ms var(--ease) both;
}
.task:hover { background: var(--surface); }
.task[data-linkable='true'] { cursor: pointer; }
.task[data-selected='true'] { background: var(--surface-2); }

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

.task__check {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid var(--text-3);
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: transparent;
  padding: 0;
  transition: border-color 130ms var(--ease), background-color 130ms var(--ease), color 130ms var(--ease);
}
.task__check:hover { border-color: var(--text); }
.task__check svg { width: 11px; height: 11px; }

.task[data-status='doing'] .task__check { border-color: var(--text); color: var(--text-3); }
.task[data-status='done']  .task__check {
  border-color: var(--solid);
  background: var(--solid);
  color: var(--on-solid);
}

.task__body { flex: 1; min-width: 0; }

.task__title { font-size: 14px; line-height: 1.45; word-wrap: break-word; }
.task[data-status='done'] .task__title { color: var(--text-3); text-decoration: line-through; }

.task__meta {
  display: flex;
  gap: 10px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.task__actions { display: flex; gap: 2px; flex: none; }

/* ---------- review queue ---------- */

/* Suggestions sit on a card, unlike tasks, because they are not on a list yet —
   the raised surface is the whole point: this is a thing awaiting a decision. */
.suggs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }

.sugg {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r);
  background: var(--surface);
  transition: background-color 130ms var(--ease);
  animation: rise 240ms var(--ease) both;
}
.sugg:hover { background: var(--surface-2); }

.sugg__body { flex: 1; min-width: 0; }
.sugg__title { font-size: 14px; line-height: 1.45; word-wrap: break-word; }
.sugg__detail { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }

.sugg__actions { display: flex; align-items: center; gap: var(--s2); flex: none; }

/* The sender and date beside a group heading — context, not a second heading. */
.sugg__from { color: var(--text-3); font-weight: 400; }

.sugg__context {
  margin: 0 0 var(--s2);
  padding: 0 var(--s4);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
}

/* Row actions stay out of the way until the row is touched — except a set
   star, which has to read as set without hovering every row to find it. */
.task__actions .iconbtn { opacity: 0; transition: opacity 130ms var(--ease), background-color 130ms var(--ease), color 130ms var(--ease); }
.task:hover .task__actions .iconbtn,
.task:focus-within .task__actions .iconbtn { opacity: 1; }
.task__actions .iconbtn[aria-pressed='true'] { opacity: 1; }

.iconbtn {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 0;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background-color 130ms var(--ease), color 130ms var(--ease);
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); }
.iconbtn--danger:hover { color: var(--danger); }
.iconbtn[aria-pressed='true'] { color: var(--text); }

.iconbtn--text { width: auto; padding: 0 var(--s2); font-size: 12px; }

/* ---------- mail ---------- */

.mails { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }

.mail {
  padding: var(--s3) var(--s4);
  border-radius: var(--r);
  background: var(--surface);
  transition: background-color 130ms var(--ease);
}
.mail:hover { background: var(--surface-2); }

/* Mail is draggable onto a project in the rail. The grab cursor is the only
   affordance it needs; the card recedes while it is in flight. */
.mail { cursor: grab; }
.mail:active { cursor: grabbing; }
.mail[data-dragging] { opacity: 0.4; cursor: grabbing; }

/* Text and controls inside a card stay selectable and clickable — dragging
   starts from the card itself, not from a field you are trying to use. */
.mail__body, .mail__snippet, .mail__tools { cursor: auto; }

/* The email a selected task came from. Called out by elevation and a single
   flash rather than a rule, since nothing here uses borders. */
.mail[data-linked='true'] {
  background: var(--surface-3);
  animation: flash 700ms var(--ease);
}
.mail[data-linked='true'] .mail__snippet,
.mail[data-linked='true'] .mail__body { color: var(--text); }

@keyframes flash {
  0%   { background: var(--surface-3); }
  30%  { background: #5c5c5c; }
  100% { background: var(--surface-3); }
}

.mail__top {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.mail__from {
  font-family: var(--font-mono);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Unread reads as a dot, not an edge rule — no borders anywhere. */
.mail[data-unread='true'] .mail__from::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text);
  flex: none;
}

.mail__date { flex: none; }

.mail__subject { font-size: 14px; font-weight: 500; margin-top: 3px; line-height: 1.4; }

.mail__snippet {
  font-size: 13px;
  color: var(--text-2);
  margin: 3px 0 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Full message text. Preserves the sender's line breaks, and caps its own
   height so one long thread cannot push everything else off screen. */
.mail__body {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 6px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 340px;
  overflow-y: auto;
  padding-right: var(--s2);
}

.mail__tools { display: flex; gap: var(--s4); margin-top: 10px; align-items: center; flex-wrap: wrap; }

.mail__assign {
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-family: inherit;
  font-size: 12px;
  padding: 3px 2px;
  cursor: pointer;
  margin-left: auto;
}
.mail__assign:hover { color: var(--text); }
.mail__assign option { background: var(--surface); color: var(--text); }

/* ---------- empty states ---------- */

.empty {
  padding: var(--s5);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
  line-height: 1.6;
}

.empty strong { color: var(--text-2); font-weight: 500; display: block; margin-bottom: 2px; }

.blank {
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s3);
  text-align: center;
  padding: var(--s7);
}

.blank__title { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -0.02em; }
.blank__text { color: var(--text-3); margin: 0; max-width: 44ch; }

/* ---------- modal ---------- */

.modal {
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  padding: 0;
  width: min(500px, calc(100vw - 32px));
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.55);
}

.modal--wide { width: min(620px, calc(100vw - 32px)); }

.modal__note { margin: -8px 0 0; font-size: 13px; color: var(--text-3); }

.modal::backdrop { background: rgba(0, 0, 0, 0.6); }

.modal__form { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }

.modal__title { font-size: 18px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }

.modal__actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s1); }
.modal__actions .btn { width: auto; }

.field { display: flex; flex-direction: column; gap: 5px; }

.field__label { font-size: 12px; color: var(--text-2); font-weight: 500; }

.field__input {
  background: var(--bg);
  border: 0;
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 10px var(--s3);
  width: 100%;
}
.field__input::placeholder { color: var(--text-3); }
.field__input:focus { outline: none; background: #1a1a1a; }
.field__input--mono { font-family: var(--font-mono); font-size: 12px; }
.field__input--area { resize: vertical; line-height: 1.6; }

.field__hint { font-size: 12px; color: var(--text-3); }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  bottom: var(--s5);
  left: 50%;
  transform: translate(-50%, 14px);
  background: var(--surface-3);
  border-radius: var(--r-pill);
  padding: 9px var(--s5);
  font-size: 13px;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  z-index: 50;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}
.toast[data-show='true'] { opacity: 1; transform: translate(-50%, 0); }

/* ---------- motion preference ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- sign in ---------- */

/* The rail is meaningless before there is an account, so it goes. */
body[data-signed-out] .rail { display: none; }
body[data-signed-out] .app { grid-template-columns: 1fr; }

.signin {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s6);
}

.signin__card { width: 100%; max-width: 360px; text-align: center; }

.signin__title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.signin__sub { margin: 6px 0 var(--s6); color: var(--text-2); }

/* The one place colour is allowed outside destructive intent: a failure the
   reader has to notice before trying again. */
.signin__error {
  margin: 0 0 var(--s4);
  padding: 10px var(--s3);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--danger);
  font-size: 13px;
  text-align: left;
}

.signin__go { width: 100%; }

.signin__legal {
  margin: var(--s4) 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-3);
}

/* Email and password are the fallback, folded away so Google reads as the way
   in rather than one of two equal choices. */
.signin__alt { margin-top: var(--s6); text-align: left; }

.signin__alt summary {
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
  list-style: none;
  text-align: center;
}
.signin__alt summary::-webkit-details-marker { display: none; }
.signin__alt summary:hover { color: var(--text-2); }

.signin__form {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s4);
}

.signin__row { display: flex; gap: var(--s2); }
.signin__row .btn { flex: 1; }