/* ==========================================================================
   THE CLIENT'S EXERCISE SCREEN
   ==========================================================================
   BE CLEAR ABOUT WHAT THIS IS. Unlike twitcher, email, facespace and newsroom, this one is
   not lifted from a screen that exists. The client-side generation screen has not been
   built: clientDashboardController.js:41 is an explicit placeholder that pops "Creating an
   exercise from here is coming next", and the only generation UI in the codebase today is
   the admin modal at app/features/admin/simulations/generate/simGenerate.html. That modal
   is the wrong thing to put on a landing page: it is an operator tool, and the client panel
   is going to look different.

   So this one is designed rather than extracted, and it is built on the three real things
   that do exist, so it will not stay a fiction for long:

     1. The app shell. .cl-mcont is the platform's own root (Views/Home/Index.cshtml), and
        the reset, grid and type rules it carries are already extracted in workstation.css.
        This file adds to that root rather than inventing a second one.
     2. The dashboard around it. The organisation name, the credit count as a large number
        and the green "Create an exercise" button are all
        app/features/client/dashboard/clientDashboard.html, which IS built.
     3. The result. Every field on the draft panel is MyExerciseDraftViewModel, which the
        server already returns from api/my/exercises/generate: Name, Description,
        CharacterCount, InjectCount, RuntimeMinutes, Channels, CreditsRemaining. The channel
        wording is ClientPortalController.ChannelName, which deliberately says "Twitcher
        posts" rather than a type code so a customer never meets the platform's vocabulary.

   Colours are the platform's: @alert-green #00AD5D for the primary action, @Color1 #2EB6D1
   for the spinner, and the #F0F0F0 body from theme/less/general.less with white panels.

   The type scale is deliberately larger than the app's 12px base. This is a photograph of a
   screen shown at about seven tenths and turned away from the viewer, so the app's own base
   would land near 8px on the page and read as texture rather than as software.

   Everything is scoped under .cl-mcont, so none of it reaches the page around it, and every
   class is gn-* so none of it collides with the workstation's extraction sharing that root.
   ========================================================================== */

.cl-mcont.gn-app {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #F0F0F0;                     /* theme/less/general.less body */
  font-family: 'Open Sans', sans-serif;
}

.cl-mcont .gn-page {
  height: 100%;
  /* Tighter than it was: this sits in a window now rather than filling the glass, and the
     draft is the tallest thing it ever has to show. */
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #555;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

/* ---- the dashboard header, from clientDashboard.html ---------------------- */
.cl-mcont .gn-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #DEDEDE;
}
.cl-mcont .gn-head h2 { margin: 0; font-size: 23px; font-weight: 400; color: #333; }
.cl-mcont .gn-bal { margin: 0; font-size: 15px; color: #777; }
.cl-mcont .gn-bal strong { color: #333; font-weight: 600; }

/* ---- panels --------------------------------------------------------------- */
.cl-mcont .gn-panel {
  background: #fff;
  border: 1px solid #E2E2E2;
  border-radius: 3px;
  padding: 16px 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.cl-mcont .gn-panel h4 { margin: 0 0 5px; font-size: 17px; font-weight: 600; color: #333; }
.cl-mcont .gn-panel p { margin: 0 0 11px; }

/* ---- the prompt box -------------------------------------------------------
   Standing in for a textarea, because the text has to be typed a character at a time with
   a caret that can be seen, and a real textarea gives no way to draw its caret. A blinking
   bar is most of what makes typing read as typing. */
.cl-mcont .gn-ta {
  min-height: 84px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #CFCFCF;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
  font-size: 14px;
  line-height: 1.55;
  color: #444;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin-bottom: 16px;
}
.cl-mcont .gn-ph { color: #A6A6A6; }
.cl-mcont .gn-car {
  display: inline-block;
  width: 2px; height: 17px;
  margin-bottom: -3px;
  background: #333;
  opacity: 0;
}
.cl-mcont.is-typing .gn-car { animation: gn-blink 1.06s step-end infinite; }
@keyframes gn-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ---- buttons, from the dashboard's own .btn.btn-success ------------------- */
.cl-mcont .gn-page .btn {
  display: inline-block;
  padding: 8px 16px;
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid transparent;
  border-radius: 3px;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}
.cl-mcont .gn-page .btn-success { color: #fff; background: #00AD5D; border-color: #00AD5D; }
.cl-mcont .gn-page .btn-default { color: #555; background: #fff; border-color: #C9C9C9; }
.cl-mcont .gn-page .btn.is-disabled { opacity: .5; }
.cl-mcont .gn-actions { display: flex; gap: 10px; align-items: center; margin: 0; }

.cl-mcont .gn-status { margin: 14px 0 0; color: #777; font-size: 15px; }
.cl-mcont .gn-status .fa { color: #2EB6D1; }
.cl-mcont .fa-spin { animation: gn-spin 2s infinite linear; }
@keyframes gn-spin { to { transform: rotate(360deg); } }

/* Reserves its line while empty, so the panel never changes height and nothing below it
   moves under the cursor. */
.cl-mcont .gn-inv { visibility: hidden; }

/* ---- the draft, i.e. MyExerciseDraftViewModel ----------------------------- */
.cl-mcont .gn-eyebrow {
  margin: 0 0 8px;
  font-size: 13px; letter-spacing: .10em; text-transform: uppercase;
  color: #00AD5D; font-weight: 600;
}
.cl-mcont .gn-panel h3 { margin: 0 0 5px; font-size: 20px; font-weight: 600; color: #333; }
/* No measure cap of its own. The window is 736px wide and the panel narrows it to about
   650, which is already a comfortable measure at 13px; a second constraint on top of that
   was wrapping one short sentence onto three lines and spending 40px the draft panel does
   not have. */
.cl-mcont .gn-desc { color: #666; font-size: 13px; }

/* Large numbers, exactly as the dashboard already reports credits and people. They are
   also the only thing here guaranteed to stay legible once the screen is photographed at
   seven tenths and turned away from the viewer. */
.cl-mcont .gn-facts {
  display: flex; gap: 46px;
  margin: 6px 0 6px;
  padding: 8px 0;
  border-top: 1px solid #EDEDED;
  border-bottom: 1px solid #EDEDED;
}
.cl-mcont .gn-n { display: block; font-size: 26px; line-height: 1; font-weight: 300; color: #333; }
.cl-mcont .gn-l { display: block; margin-top: 4px; font-size: 14px; color: #888; }

.cl-mcont .gn-ch-l { margin: 0 0 6px; font-size: 14px; color: #888; }
.cl-mcont .gn-ch { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 6px; padding: 0; list-style: none; }
.cl-mcont .gn-ch li {
  padding: 6px 12px;
  background: #F4F4F4;
  border: 1px solid #E4E4E4;
  border-radius: 20px;
  font-size: 14px; color: #555;
}

/* ---- the two states this sequence moves between --------------------------- */
.cl-mcont .gn-step { display: none; }
.cl-mcont .gn-step.is-on { display: block; }

/* The draft panel is the tallest thing this screen ever shows, and the bezel is a hard
   crop. The spacing above is set so it fits with room to spare; this is the guard for the
   day someone adds a line to it and does not re-measure. */
.cl-mcont .gn-page { overflow: hidden; }