/* ================= THE FIRST-RUN EMPTY STATE — STYLE =================

   Every class here is `ofr-` prefixed and owned by this file alone (Definition of
   Done 4d/11): nothing declared here that nothing emits.

   Two emitters, not one: JS/features/org-first-run.js, and (per the product owner
   — "the message should be like the create organization style but it should say
   'Contact the organization owner for access'") JS/alt/alt-team-board.js's
   altTBNoBoardAccessCard(), reusing the same card vocabulary rather than a second
   lookalike (core rule 4). It differs in exactly one way: it renders INSIDE the
   board's scroll container rather than replacing the page — `.ofr-stage-board`
   below is the whole of that difference. A third emitter is a conversation, not an edit.

   Built on the Suite's own tokens, not a second palette (sys_design-system.md):
   `--a-*` answers both themes already, so nothing here needs its own theme block.
   `.a-btn`, `.a-field`, `.a-input`, `.a-hint` are used as-is; only the layout this
   design needs beyond those primitives is new here.

   The modal reuses `.a-scrim` for the backdrop and nothing for the card's size —
   `.a-modal` is sized for the full settings dialog and would be mostly empty here.
   `.ofr-name-dialog` self-centres the way `.a-modal` does, independent of `.a-scrim`
   ever gaining its own centring layout, the same way two other dialogs already do
   beside the identical shared scrim. */

/* ---------- standing in front of the board, not on top of it ----------

   The one exception to "every selector targets a class this file's own JS emits":
   `#altTeamCtx`/`#altTeamGlance`/`#altTeamPeople`/`#altMain` are team_board.html's
   own ids, owned by alt-team-context.js — targeted here on purpose, since a reader
   with no Organization has no team and no board to render there.

   `body.ofr-board-hidden` is this file's own hook, toggled in the same pass as
   every other visibility decision ofrRender() makes — CSS only, never a JS-set
   `.hidden` on an element this file does not own. */
body.ofr-board-hidden #altTeamCtx,
body.ofr-board-hidden #altTeamGlance,
body.ofr-board-hidden #altTeamPeople,
body.ofr-board-hidden #altMain{
  display:none;
}

/* ---------- the empty state ---------- */

/* No fixed height: this replaces the board rather than sitting beside it, so it
   only needs to read as a proper page state, not fill an exact viewport fraction. */
.ofr-stage{
  display:grid; place-items:center;
  min-height:min(60vh, 520px);
  padding:var(--a-8) var(--a-4);
}

/* The second host — the board's own no-access card. Appended into `#altTBScroll`,
   already below the context bar and toolbar, so the 60vh floor above would push it
   off the bottom of a laptop viewport; a smaller floor still centres it in the space
   the board would have filled. No `place-items`/`display` override needed. */
.ofr-stage.ofr-stage-board{
  min-height:min(38vh, 320px);
  padding:var(--a-6) var(--a-4);
}

/* ---------- THE CARD SITS IN THE MIDDLE OF THE SCREEN, EDGE TO EDGE ----------

   Per the product owner: "adjust the create organization panel to be center of
   screen measured from edge to edge. Use the same positioning calculation as seen
   in the tasks.html page to create your first task."

   Two halves. The JS half (firstRunCardCentreInViewport(), the same function
   tasks.html uses) assumes the stage reaches the BOTTOM of the viewport — the
   `min-height:min(60vh,520px)` floor above made it a fixed box instead, so the
   card centred off-true the taller the window got.

   `min-height:0` defeats that floor, the same pair CSS/alt/alt-tasks.css carries
   for `#altFirstRun`: a floor is right for a stage in a page's flow, wrong for one
   that IS the page. `flex:1 1 auto` then hands the stage the rest of the space.

   Gated on the stage actually showing, or `flex:1 1 auto` on an empty
   `#orgFirstRun` would reserve the whole column over a real board. `:has()` reads
   the `hidden` attribute ofrRender() already sets — no second source of truth.

   Scoped to `#orgFirstRun`, which is why `.ofr-stage-board` above is untouched:
   the board's no-access card builds its own stage in `#altTBScroll`, where
   centring against the whole viewport would be wrong. */
#orgFirstRun:has(> #ofrStage:not([hidden])){
  display:flex; flex:1 1 auto; min-height:0; min-width:0;
}
#orgFirstRun:has(> #ofrStage:not([hidden])) > .ofr-stage{
  flex:1 1 auto; min-height:0; min-width:0;
}

.ofr-card{
  width:min(440px, 100%);
  padding:var(--a-6);
  border:1px solid var(--a-line);
  border-radius:var(--a-r-lg);
  background:var(--a-panel);
  box-shadow:var(--a-shadow-sm);
}

.ofr-icon{
  width:54px; height:54px; margin-bottom:var(--a-4);
  display:grid; place-items:center;
  border:1px solid var(--a-blue); border-radius:var(--a-r-lg);
  background:var(--a-blue-soft); color:var(--a-blue);
}
.ofr-icon svg{ width:26px; height:26px; }

.ofr-heading{
  margin:0; font-family:var(--a-display); font-weight:800; font-size:22px;
  line-height:1.2; color:var(--a-text);
}

.ofr-copy{ margin:var(--a-2) 0 0; color:var(--a-dim); font-size:14px; line-height:1.5; }

.ofr-sequence{
  margin:var(--a-5) 0; display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  color:var(--a-dim); font-size:12px;
}
.ofr-sequence strong{ color:var(--a-text); font-weight:800; }

.ofr-full{ width:100%; }

/* ---------- THE THIRD HOST: A CONTENT TYPE WITH NOTHING IN IT YET ----------
   JS/components/first-run-card.js renders "Create your first task"/"…note" with
   these same rules, reusing the card rather than a second copy; `.frc-*` marks the
   host so a future divergence has somewhere to go without touching the org flow.

   This one rule is not shared, and has to exist: `.ofr-stage` sets `display:grid`,
   which beats `hidden`'s UA `display:none` on specificity — this component shows
   and hides the stage itself on every list repaint, unlike the org flow. */
.frc-stage[hidden]{ display:none !important; }

@media (max-width:420px){
  .ofr-card{ padding:var(--a-5); }
}

/* ---------- the ready banner ---------- */

.ofr-ready{
  width:100%; max-width:980px; margin:0 auto;
  padding:var(--a-4);
  display:flex; align-items:center; gap:var(--a-4);
  border:1px solid var(--a-green); border-radius:var(--a-r);
  background:var(--a-green-soft);
}
.ofr-ready-icon{
  width:42px; height:42px; flex:0 0 auto;
  display:grid; place-items:center;
  border-radius:var(--a-r); background:var(--a-green); color:#fff;
}
.ofr-ready-icon svg{ width:20px; height:20px; }
.ofr-ready-copy{ min-width:0; flex:1 1 auto; }
.ofr-ready-copy strong{ display:block; color:var(--a-text); font-size:15px; font-weight:800; }
.ofr-ready-copy span{ display:block; margin-top:2px; color:var(--a-dim); font-size:13px; }
.ofr-ready-open{ flex:0 0 auto; margin-left:auto; }

@media (max-width:720px){
  .ofr-ready{ align-items:flex-start; flex-wrap:wrap; }
  .ofr-ready-open{ width:100%; margin-left:0; }
}

/* ---------- the name dialog ---------- */

.ofr-name-dialog{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(500px, calc(100vw - 32px));
  max-height:calc(100vh - 32px); overflow:auto;
  background:var(--a-float); border:1px solid var(--a-line-strong);
  border-radius:var(--a-r-lg); box-shadow:var(--a-shadow-lg);
  z-index:calc(var(--z-dialog, 300) + 1);
}
.ofr-modal-accent{
  height:3px; border-radius:var(--a-r-lg) var(--a-r-lg) 0 0;
  /* #28a1ff and #2fd2b0 are not invented — the same measured values
     CSS/alt/alt-settings-stride.css paints the org settings ribbon with. */
  background:linear-gradient(90deg, var(--a-blue), #28a1ff 55%, #2fd2b0);
}
.ofr-modal-body{ padding:var(--a-6); }
.ofr-eyebrow{
  margin:0 0 7px; font-size:11px; font-weight:850; letter-spacing:.13em;
  text-transform:uppercase; color:#6ed7c5;
}
.ofr-name-title{
  margin:0; font-family:var(--a-display); font-weight:800; font-size:20px;
  line-height:1.25; color:var(--a-text);
}
.ofr-name-copy{ margin:8px 0 20px; color:var(--a-dim); font-size:13px; line-height:1.5; }
.ofr-modal-body .a-hint{ margin-top:var(--a-2); }
.ofr-dialog-actions{
  margin-top:var(--a-5); display:flex; justify-content:flex-end; gap:var(--a-2);
}

@media (max-width:720px){
  /* The same bottom-sheet treatment the wireframe uses, self-contained so it does
     not depend on `.a-scrim` ever becoming a centring flex/grid parent. */
  .ofr-name-dialog{
    top:auto; bottom:0; left:0; right:0; transform:none;
    width:100%; max-width:none; max-height:85vh;
    border-radius:var(--a-r-lg) var(--a-r-lg) 0 0;
  }
  /* The accent's own radius already matches the dialog's top corners in both layouts — nothing
     to override here; a bottom sheet still has rounded top corners like the centred dialog. */
}

@media (max-width:420px){
  .ofr-dialog-actions{ display:grid; grid-template-columns:1fr 1fr; }
  .ofr-dialog-actions .a-btn{ width:100%; }
}