/* ------------------------------------------------------------------
   THE PROJECT GATE — what the app shows you before it shows you anything.

   Desktop only. Every rule is under `html.desktop`, so in After Effects this
   file is inert: there the panel is a panel inside a host that already has a
   project open, and asking again would be asking a question the host has
   already answered.

   The shape is Premiere's home screen, for the same reason Premiere has one:
   everything the app makes has to live somewhere, and the moment to decide
   where is before the first thing is made, not after it has landed in a
   folder nobody chose.

   `position: fixed; inset: 0` — this covers the WINDOW, not the panel column.
   The edit shell turns the body into a grid and the panel into one column of
   it; a gate that only covered the column would leave the timeline, the bin
   and the viewer live behind it, which is the wrong story about what is
   being decided.
   ------------------------------------------------------------------ */

#projgate { display: none; }

html.desktop #projgate {
  display: flex;
  position: fixed; inset: 0; z-index: var(--z-modal);
  align-items: center; justify-content: center;
  background: rgba(8, 8, 10, .88);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
html.desktop #projgate.hidden { display: none; }

.pg-card {
  width: min(780px, calc(100vw - 60px));
  max-height: calc(100vh - 60px);
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 26px 28px 20px;
  box-shadow: 0 24px 70px var(--scrim-mid);
}

.pg-brand {
  font-size: 20px; font-weight: 800; letter-spacing: 1.4px;
  display: flex; align-items: baseline; gap: 10px;
}
.pg-brand .pg-ver {
  font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--accent);
}
.pg-sub {
  color: var(--text-dim); font-size: 11.5px; line-height: 1.5;
  margin: 7px 0 16px; max-width: 60ch;
}

/* ---------- the two buttons ---------- */

/* Simon: "we can simplify the bit at the top. We should have it so it just
   has 'New Project' or a list of all the most recent projects."

   New leads and is the lit surface; Open is the quiet one beside it. They
   sit on one row rather than in two columns because there are two of them
   now — a grid of halves for one button each is a layout describing
   something that is no longer there. */
.pg-actions {
  display: flex; align-items: center; gap: 8px; margin-bottom: 18px;
}

/* ---------- where new ones go ---------- */

/* Under everything now rather than across the top. It is still where the
   save dialog starts, and still worth being able to change; it is just not a
   decision anybody makes on this screen, and it was the first thing the eye
   landed on. Quieter, and out of the way of the list. */
.pg-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--border);
  opacity: .75;
}
.pg-foot:hover { opacity: 1; }
.pg-loc-label {
  flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-faint);
}
/* The path can be long and the interesting end is the RIGHT one — the folder
   you chose, not the drive letter. `direction: rtl` clips from the left. */
.pg-loc-path {
  flex: 1; min-width: 0; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; direction: rtl; text-align: left;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px; color: var(--text);
}
.pg-btn {
  flex: none; padding: 6px 12px; border-radius: 3px; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700;
  background: var(--card-hover); border: 1px solid var(--border-dash); color: var(--text);
}
.pg-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- section headings ---------- */

/* .pg-cols/.pg-col went with the two-column layout, and #pg-name and
   .pg-note with the name field it validated. The heading stays — Recent and
   Cloud projects still use it. */
.pg-h {
  flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px;
}

/* SIZED TO ITS LABEL, not to a column. It was width:100% of a half-width
   column; on one row with Open beside it that would take the whole line and
   push the other button off the end. */
.pg-primary {
  flex: none; padding: 9px 18px; border-radius: 3px;
  background: var(--accent); border: 1px solid var(--accent); color: #fff;
  font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
}
.pg-primary:hover { filter: brightness(1.08); }
.pg-primary:disabled { opacity: .4; cursor: default; filter: none; }

.pg-list {
  flex: 1; min-height: 120px; max-height: 300px; overflow: auto;
  border: 1px solid var(--border); border-radius: 3px; padding: 6px;
  background: var(--card);
}
.pg-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 9px; border-radius: 3px; cursor: pointer;
  border: 1px solid transparent;
}
.pg-row:hover { background: var(--card-hover); border-color: var(--border-dash); }
.pg-row.last { border-color: var(--accent); }
.pg-row-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: var(--text);
}
.pg-row.last .pg-row-name { color: var(--accent); }
.pg-row-tag {
  flex: none; font-size: 9px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--accent);
}
.pg-empty { color: var(--text-faint); font-size: 10.5px; padding: 14px 10px; text-align: center; line-height: 1.5; }

/* ---------- the way out ---------- */

.pg-foot {
  flex: none; display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border);
}
.pg-foot .sp { flex: 1; }
/* Deliberately quiet, and deliberately present. A gate with no way past it is
   a gate that traps somebody who only wanted to look at what they made last
   week — but "everything at once" is not a project, so it does not get to
   look like the answer either. */
.pg-quiet {
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
  font-family: inherit; font-size: 11px; color: var(--text-faint);
  text-decoration: underline; text-underline-offset: 3px;
}
.pg-quiet:hover { color: var(--text-dim); }

/* ---------- a project is a file: opening one, and the ones you had open ----------

   The button sits above the folder list rather than beside it, because the
   list can only ever show what happens to be under the current projects
   folder and this opens a project wherever it actually lives. Order on screen
   is order of reach. */

html.desktop #projgate .pg-btn.wide {
  display: block; width: 100%; margin: 0 0 8px; text-align: center;
}

html.desktop #projgate .pg-recent {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
html.desktop #projgate .pg-recent.hidden { display: none; }
/* A LIST, NOT A WALL OF CARDS.

   Simon: "When first opening the app, make it so the recent projects are
   just in a list."

   These were wrapping chips — each one a bordered card, name stacked above
   its timestamp, laid out left to right and wrapping onto however many rows
   it took. Six projects read as a grid you have to scan rather than a list
   you read down, and because each card was only as wide as its own name,
   nothing lined up: the eye had no column to follow, and the one thing this
   list is for — finding the project you were in yesterday — meant reading
   every tile.

   One column, full width, name left and "2 min ago" right. The per-card
   border and background go with it: a border around every row of a list is
   a rule drawn twelve times where one column of aligned text does the same
   work, and the hover wash is enough to say which row the pointer is on. */
html.desktop #projgate .pg-recent-list {
  display: flex; flex-direction: column; gap: 1px; margin-top: 6px;
  max-height: 216px; overflow-y: auto;
}
html.desktop #projgate .pg-rec {
  display: flex; flex-direction: row; align-items: baseline; gap: 10px;
  width: 100%; max-width: none; padding: 6px 8px; border-radius: 3px;
  background: none; border: 1px solid transparent;
  font-family: inherit; cursor: pointer; text-align: left;
}
html.desktop #projgate .pg-rec:hover {
  background: var(--card); border-color: var(--border);
}
/* The name takes the room and the timestamp keeps its own, so a long
   project name ellipsises rather than pushing "yesterday" off the end. */
html.desktop #projgate .pg-rec-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 11.5px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.desktop #projgate .pg-rec-sub {
  flex: 0 0 auto;
  font-size: 9.5px; color: var(--text-faint); white-space: nowrap;
}
/* A project on a drive that is not plugged in is not a project that has been
   lost, and hiding it would read as exactly that. It stays, greyed, and says
   so — clicking it offers to take it off the list. */
html.desktop #projgate .pg-rec.gone { opacity: .5; border-style: dashed; }
html.desktop #projgate .pg-rec.gone .pg-rec-sub { color: var(--red, var(--danger)); }

/* ------------------------------------------------------------------
   TEAM PROJECTS (js/teamproj.js). A team .covert opens this overview in
   the same card: everybody's sub-projects, sorted per person, and what
   has been spent. The ordinary gate content steps aside while it shows.
   ------------------------------------------------------------------ */
.pg-card.team-mode { width: min(1040px, calc(100vw - 60px)); }
.pg-card.team-mode > .pg-sub,
.pg-card.team-mode > .pg-actions,
.pg-card.team-mode > #pg-recent-wrap,
.pg-card.team-mode > #pg-cloud-wrap,
.pg-card.team-mode > .pg-foot { display: none !important; }
.pg-team.hidden { display: none; }
.pg-team { display: flex; flex-direction: column; min-height: 0; flex: 1; margin-top: 10px; }
.pt-top { margin: -4px 0 4px -2px; }
.pt-title { display: flex; align-items: baseline; gap: 10px; font-size: 18px; font-weight: 800; margin-bottom: 12px; }
.pt-tag, .pt-pn i, .pt-sn i {
  font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--accent);
}
.pt-stats { display: flex; align-items: center; gap: 22px; padding: 10px 12px; margin-bottom: 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: 3px; }
.pt-stat { display: flex; flex-direction: column; }
.pt-stat b { font-size: 17px; font-weight: 800; color: var(--text); }
.pt-stat span { font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-dim); }
.pt-range { margin-left: auto; display: flex; gap: 4px; }
.pt-range button { padding: 5px 9px; border-radius: 3px; cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 700;
  background: none; border: 1px solid var(--border-dash); color: var(--text-dim); }
.pt-range button.on { border-color: var(--accent); color: var(--accent); }
.pt-body { display: flex; gap: 14px; min-height: 0; flex: 1; overflow: hidden; }
.pt-people { flex: 1; min-width: 0; overflow: auto; max-height: calc(100vh - 330px); display: flex; flex-direction: column; gap: 12px; padding-right: 4px; }
.pt-feed { flex: 0 0 290px; overflow: auto; max-height: calc(100vh - 330px); }
.pt-ph { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.pt-pn { font-size: 12.5px; font-weight: 800; color: var(--text); }
.pt-pm { font-size: 10.5px; color: var(--text-dim); }
.pt-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.pt-sub { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 9px 10px; border-radius: 3px; cursor: pointer;
  font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--border); }
.pt-sub:hover { border-color: var(--accent); }
.pt-sub.open { border-color: var(--accent); }
.pt-sn { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-ths { display: flex; gap: 4px; min-height: 38px; }
.pt-th { width: 56px; height: 38px; object-fit: cover; border-radius: 2px; background: var(--card-hover); }
.pt-th.vid { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-faint); }
.pt-sm { font-size: 10px; color: var(--text-dim); }
.pt-add { display: flex; align-items: center; justify-content: center; min-height: 82px; border-radius: 3px; cursor: pointer;
  border: 1px dashed var(--border-dash); color: var(--text-faint); font-size: 11.5px; font-weight: 700; }
.pt-add:hover { border-color: var(--accent); color: var(--accent); }
.pt-add.editing { cursor: default; padding: 0 10px; }
.pt-add input { width: 100%; padding: 7px 8px; font: inherit; font-size: 12px; color: var(--text);
  background: var(--bg); border: 1px solid var(--accent); border-radius: 3px; outline: none; }
.pt-none { font-size: 10.5px; color: var(--text-faint); padding: 6px 0; }
.pt-line { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 10.5px; }
.pt-lw { font-weight: 800; color: var(--text); }
.pt-lm { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; grid-column: 1 / 3; grid-row: 2; }
.pt-lc { font-weight: 700; color: var(--text); text-align: right; }
.pt-la { color: var(--text-faint); text-align: right; grid-row: 2; grid-column: 3; }
.pt-path { margin-top: 12px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; color: var(--text-faint);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; direction: rtl; text-align: left; }