/* =====================================================================
   FortiSign UI — modern component layer
   ---------------------------------------------------------------------
   Builds on fortisign-tokens.css. Load AFTER it and after the page's own
   stylesheet, so this layer refines what is already there.

   DESIGN DIRECTION

   The brand asset worth keeping is the orange. Everything else earns its
   place. The direction is: calm neutral ground, white surfaces, ONE
   confident accent, depth from soft shadow rather than hard borders,
   generous spacing on an 8px rhythm, and a type scale that actually has
   contrast between levels.

   The orange stops being a large flat fill and becomes an accent. The
   login gradient stays -- it is the single most recognisable thing in the
   product -- but interactive orange is the AA-compliant #b25a00, so
   buttons and links are readable.

   HOW THIS AVOIDS BREAKING ANYTHING

   It restyles the EXISTING legacy class names (.form_Area, .control,
   .btn, .link, .fullset ...) rather than requiring new markup. Every
   element id the JavaScript depends on -- txtUserName, txtPassword,
   chkRemember, btnLogin, wsURI -- is untouched, because ids are not
   selectors here. No JSP structure has to change for the visual refresh
   to apply.

   Where a rule must beat a legacy !important, it says so and explains why.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Foundation
   --------------------------------------------------------------------- */

body {
  font-family: var(--fs-font);
  color: var(--fs-ink-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Digits that line up. The document lists, audit trails and file sizes
   currently jitter column to column because Roboto's default figures are
   proportional. One declaration fixes every table in the product. */
table, .fs-nums, [class*="list"] td, [class*="grid"] td {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   2. The split-screen shell (login, register, reset, verify)

   The legacy markup centres its panel with display:table / table-row /
   table-cell -- a pre-flexbox technique that cannot vertically centre and
   scroll at the same time, which is why long forms clip on short screens.
   Re-declaring the same class names as flex fixes that without touching a
   single line of JSP.
   --------------------------------------------------------------------- */

.fullset {
  min-height: 100vh;
  display: flex;
}

.setright {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fs-space-6) var(--fs-space-5);
  overflow-y: auto;
}

/* Neutralise the table layout, keep the class names. */
.fullset .setright .table,
.fullset .setright .tr,
.fullset .setright .td {
  display: block;
  width: 100%;
}

.fullset .setright .td {
  max-width: 420px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------
   3. Forms

   The biggest single upgrade available: the legacy form used <strong> as
   a field label and a 34px control height. Labels here get real weight and
   spacing, and controls get a 44px minimum so they are thumb-sized.
   --------------------------------------------------------------------- */

.form_Area {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-1);
}

/* Legacy field labels are <strong> elements, not <label>. Styled to look
   like labels here; the JSP change to real <label for> is a separate,
   accessibility-motivated edit. */
.form_Area > strong,
.form_Area .fs-label {
  display: block;
  margin: var(--fs-space-4) 0 var(--fs-space-2);
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-semibold);
  color: var(--fs-ink-800);
  letter-spacing: .005em;
}

.form_Area .control {
  position: relative;
  margin-bottom: var(--fs-space-1);
}

/* Selectors carry `.control` deliberately.

   master.css styles these as
     .form_Area .control input[type="text"], .form_Area .control input[type="password"]
   which is specificity (0,3,1). A shorter `.form_Area input[type=...]` is
   (0,2,1) and silently loses, leaving 4px radius and 14px text. Matching
   the specificity is enough to win because this file loads last -- no
   !important required, so page-level overrides still work. */
.form_Area .control input[type="text"],
.form_Area .control input[type="password"],
.form_Area .control input[type="email"],
.form_Area .control input[type="tel"],
.form_Area .control input[type="number"],
.form_Area .control select,
.form_Area .control textarea {
  width: 100%;
  min-height: var(--fs-control-height);
  padding: 0 var(--fs-space-4);
  border: 1px solid var(--fs-ink-300);
  border-radius: var(--fs-radius-md);
  background: var(--fs-ink-100);
  /* 16px is not a style choice: any smaller and iOS Safari zooms the whole
     page when the field is focused, which on the signer flow reads as the
     layout breaking. */
  font-size: var(--fs-text-base);
  font-family: var(--fs-font);
  color: var(--fs-ink-900);
  transition: border-color var(--fs-duration-fast) var(--fs-ease),
              background-color var(--fs-duration-fast) var(--fs-ease),
              box-shadow var(--fs-duration-fast) var(--fs-ease);
}

.form_Area .control textarea {
  padding: var(--fs-space-3) var(--fs-space-4);
  min-height: 96px;
  line-height: var(--fs-leading-normal);
}

.form_Area .control input::placeholder,
.form_Area .control textarea::placeholder {
  color: var(--fs-ink-400);
}

.form_Area .control input:hover,
.form_Area .control select:hover,
.form_Area .control textarea:hover {
  border-color: var(--fs-ink-500);
}

.form_Area .control input:focus,
.form_Area .control select:focus,
.form_Area .control textarea:focus {
  outline: none;
  background: var(--fs-ink-000);
  border-color: var(--fs-brand-action);
  box-shadow: 0 0 0 3px var(--fs-brand-action-quiet);
}

/* Checkbox and its label sit on one line, vertically centred, with a
   target big enough to hit on a phone. */
.form_Area .control input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0 var(--fs-space-2) 0 0;
  accent-color: var(--fs-brand-action);
  vertical-align: middle;
  cursor: pointer;
}

.form_Area .control input[type="checkbox"] + label {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: var(--fs-text-sm);
  color: var(--fs-ink-700);
  cursor: pointer;
  user-select: none;
}

/* Show/password toggle is an <a> in the legacy markup. Positioned inside
   the field and given a real hit area. */
.form_Area .showpassword {
  position: absolute;
  right: var(--fs-space-3);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--fs-radius-sm);
  cursor: pointer;
  opacity: .55;
  transition: opacity var(--fs-duration-fast) var(--fs-ease),
              background-color var(--fs-duration-fast) var(--fs-ease);
}
.form_Area .showpassword:hover { opacity: 1; background: var(--fs-ink-200); }
.form_Area .showpassword img { margin: 0 !important; display: block; }

.form_Area .capslock {
  display: inline-block;
  margin-top: var(--fs-space-2);
  padding: var(--fs-space-1) var(--fs-space-3);
  border-radius: var(--fs-radius-pill);
  background: var(--fs-warn-bg);
  color: var(--fs-warn-fg);
  font-size: var(--fs-text-xs);
  font-weight: var(--fs-weight-semibold);
  letter-spacing: .04em;
}

/* ---------------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------------- */

.form_Area .btn,
.fs-btn-primary,
input[type="submit"].btn {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: var(--fs-space-5);
  padding: 0 var(--fs-space-5);
  border: 0;
  border-radius: var(--fs-radius-md);
  background: var(--fs-brand-action);
  color: var(--fs-ink-000);
  font-family: var(--fs-font);
  font-size: var(--fs-text-base);
  font-weight: var(--fs-weight-semibold);
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color var(--fs-duration-fast) var(--fs-ease),
              transform var(--fs-duration-fast) var(--fs-ease),
              box-shadow var(--fs-duration-fast) var(--fs-ease);
}

.form_Area .btn:hover,
.fs-btn-primary:hover {
  background: var(--fs-brand-action-hover);
  box-shadow: var(--fs-shadow-md);
}

/* A 1px press is enough to feel responsive. Anything larger reads as a
   toy on a product people sign contracts in. */
.form_Area .btn:active,
.fs-btn-primary:active { transform: translateY(1px); box-shadow: none; }

.form_Area .btn:disabled,
.fs-btn-primary:disabled {
  background: var(--fs-ink-200);
  color: var(--fs-ink-500);
  cursor: not-allowed;
  box-shadow: none;
}

/* ---------------------------------------------------------------------
   5. Links

   Legacy .link is used both as a primary action ("Forgot Password") and
   inline in a sentence ("Register New Account"). Both get the accessible
   accent; only the standalone ones get block spacing.
   --------------------------------------------------------------------- */

.form_Area .link,
a.link {
  color: var(--fs-brand-action);
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-medium);
  text-decoration: none;
  border-radius: var(--fs-radius-sm);
  transition: color var(--fs-duration-fast) var(--fs-ease);
}
.form_Area .link:hover,
a.link:hover { color: var(--fs-brand-action-hover); text-decoration: underline; }

#btnFogotPass {
  display: block;
  margin: var(--fs-space-4) 0;
  text-align: center;
}

.form_Area .sublink {
  display: block;
  margin-top: var(--fs-space-2);
  text-align: center;
  font-size: var(--fs-text-sm);
  color: var(--fs-ink-600);
  line-height: var(--fs-leading-loose);
}

/* ---------------------------------------------------------------------
   6. Headings and chrome
   --------------------------------------------------------------------- */

.setright h2 {
  margin: 0 0 var(--fs-space-2);
  font-size: var(--fs-text-xl);
  font-weight: var(--fs-weight-bold);
  color: var(--fs-ink-900);
  letter-spacing: -.01em;
  text-align: center;
}

/* Language picker: was an unstyled <ul>. */
.form_Area .nlang {
  margin-top: var(--fs-space-5);
  padding-top: var(--fs-space-4);
  border-top: 1px solid var(--fs-ink-200);
  text-align: center;
}
.form_Area .nlang label {
  display: block;
  font-size: var(--fs-text-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fs-ink-500);
  margin-bottom: var(--fs-space-2);
}
.form_Area .nlang ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: var(--fs-space-2);
}
.form_Area .nlang li {
  padding: var(--fs-space-1) var(--fs-space-3);
  border: 1px solid var(--fs-ink-300);
  border-radius: var(--fs-radius-pill);
  font-size: var(--fs-text-sm);
  color: var(--fs-ink-700);
  cursor: pointer;
  transition: border-color var(--fs-duration-fast) var(--fs-ease),
              background-color var(--fs-duration-fast) var(--fs-ease);
}
.form_Area .nlang li:hover {
  border-color: var(--fs-brand-action);
  background: var(--fs-brand-action-quiet);
  color: var(--fs-brand-action);
}

/* Version stamp. The legacy inline style pinned it with margin-left:10%,
   which drifts with viewport width; this centres it properly. */
.form_Area > label:last-of-type {
  display: block;
  margin: var(--fs-space-5) 0 0 !important;
  text-align: center;
  font-size: var(--fs-text-xs);
  color: var(--fs-ink-400);
}

/* ---------------------------------------------------------------------
   7. Data surfaces — document lists, workspaces, audit trails
   --------------------------------------------------------------------- */

.fs-card {
  background: var(--fs-ink-000);
  border: 1px solid var(--fs-ink-200);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-sm);
  padding: var(--fs-space-5);
}

.fs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-text-sm);
}
.fs-table thead th {
  position: sticky;
  top: 0;
  background: var(--fs-ink-100);
  padding: var(--fs-space-3) var(--fs-space-4);
  text-align: left;
  font-size: var(--fs-text-xs);
  font-weight: var(--fs-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fs-ink-600);
  border-bottom: 1px solid var(--fs-ink-200);
  white-space: nowrap;
}
.fs-table td {
  padding: var(--fs-space-3) var(--fs-space-4);
  border-bottom: 1px solid var(--fs-ink-200);
  color: var(--fs-ink-800);
}
.fs-table tbody tr {
  transition: background-color var(--fs-duration-fast) var(--fs-ease);
}
.fs-table tbody tr:hover { background: var(--fs-brand-action-quiet); }
.fs-table tbody tr:last-child td { border-bottom: 0; }

/* Any wide surface must scroll inside itself, never push the page sideways. */
.fs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------------
   8. Toast

   Restyles toastr rather than replacing it -- 72 pages already call it, so
   changing the library would mean touching all of them. The remaining 44
   native alert()/confirm() dialogs still need a real component; this is
   the visual target for it.
   --------------------------------------------------------------------- */

#toast-container > div {
  border-radius: var(--fs-radius-md) !important;
  box-shadow: var(--fs-shadow-lg) !important;
  font-family: var(--fs-font) !important;
  font-size: var(--fs-text-sm) !important;
  line-height: var(--fs-leading-normal) !important;
  opacity: 1 !important;
  padding: var(--fs-space-3) var(--fs-space-4) !important;
  background-image: none !important;   /* drop the sprite icons */

  /* Size to the message, not to a slab.

     toastr ships `width: 300px` and then re-declares it as 11em / 18em /
     25em in three media queries, so every toast is the same width whatever
     it says. The field palette in sign.jsp answers a click made before the
     form has loaded with `promptMsg("...")` -- three characters, rendered
     as a ~350px navy block in the corner of the wizard. Shrink-to-fit keeps
     that small and still lets a real sentence run to a readable measure.

     `min-width: 0` is load-bearing: without it the 300px from toastr wins
     as a minimum and `width: auto` changes nothing. The plain `max-width`
     below the `min()` one is the fallback for browsers without min(). */
  width: auto !important;
  min-width: 0 !important;
  max-width: 360px !important;
  max-width: min(360px, calc(100vw - 2 * var(--fs-space-3))) !important;
}
#toast-container > .toast-success { background: var(--fs-ok-fg) !important; }
#toast-container > .toast-error   { background: var(--fs-danger-fg) !important; }
#toast-container > .toast-warning { background: var(--fs-warn-fg) !important; }
#toast-container > .toast-info    { background: var(--fs-info-fg) !important; }

/* ---------------------------------------------------------------------
   9. Responsive

   Below 860px the brand panel is dropped rather than stacked. On a phone
   a full-bleed gradient above the form pushes the fields below the fold,
   which is the single worst thing you can do to an external signer who
   opened the link to sign one document.
   --------------------------------------------------------------------- */

@media (max-width: 860px) {
  .fullset { flex-direction: column; }
  .setright { padding: var(--fs-space-5) var(--fs-space-4); }
  .setright .td { max-width: 100%; }
}

@media (max-width: 480px) {
  .setright h2 { font-size: var(--fs-text-lg); }
  .form_Area .btn { min-height: 50px; }
}

/* ---------------------------------------------------------------------
   10. Accessibility and motion
   --------------------------------------------------------------------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--fs-focus-ring);
  outline-offset: 2px;
}

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

@media (prefers-contrast: more) {
  .form_Area input,
  .form_Area select,
  .form_Area textarea { border-color: var(--fs-ink-700); }
}

/* =====================================================================
   11. Accent unification

   The flow currently shows THREE competing accents: the brand orange on
   buttons, a blue on the wizard step indicators, and a teal on panel edge
   bars. Six distinct blues exist across the stylesheets:
   #0d6efd #000df2 #005d9f #1976d2 #2196f3 #007bff.

   #0d6efd is Bootstrap 5's --bs-primary. core/css/bootstrap.min.css is
   Bootstrap 5 while the other two copies are 3.3.4, so the product ships
   two major versions of the same framework and inherits a blue from one of
   them. Because BS5 exposes its palette as custom properties, retargeting
   is a variable override rather than a fork of the framework.

   Semantic blue is deliberately NOT touched: --fs-info-fg stays blue,
   because "information" reading as brand-orange would collapse the
   distinction between a notice and a call to action.
   ===================================================================== */

:root {
  --bs-primary:            var(--fs-brand-action);
  --bs-primary-rgb:        178, 90, 0;
  --bs-link-color:         var(--fs-brand-action);
  --bs-link-hover-color:   var(--fs-brand-action-hover);
  --bs-link-color-rgb:     178, 90, 0;
  --bs-btn-bg:             var(--fs-brand-action);
  --bs-btn-border-color:   var(--fs-brand-action);
  --bs-focus-ring-color:   rgba(26, 115, 232, .35);
}

.btn-primary {
  --bs-btn-bg:             var(--fs-brand-action);
  --bs-btn-border-color:   var(--fs-brand-action);
  --bs-btn-hover-bg:       var(--fs-brand-action-hover);
  --bs-btn-hover-border-color: var(--fs-brand-action-hover);
  --bs-btn-active-bg:      var(--fs-brand-action-hover);
}

/* ---------------------------------------------------------------------
   12. Wizard step indicator — REMOVED, superseded by section 17.

   What used to be here:

     [class*="step"] .active, [class*="step"].active, ...
       { background-color: var(--fs-brand-action) !important; ... }

   `[class*="step"]` matches `.stepByLine`, so `[class*="step"] .active`
   selected the whole <li> of the current wizard step and filled it solid
   orange with white text -- a long orange bar running out of the step
   number, on all four wizard screens. Verified by rendering
   /ssa2/v2/prepdoc and looking at it; this is the same failure mode that
   3cdb93d reverted, surviving in a selector nobody re-read.

   The lesson is the one that commit already wrote down: style the class
   the stylesheet actually owns. Section 17 does that, rooted on the
   #signMultiPer / #signOnlyPer ids the four pages really use, with no
   !important and no attribute globbing.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   13. The upload interstitial

   "Uploading… 100% …" renders with no stylesheet applied: a bare serif
   heading on white. It appears between "Set up fields" and the signing
   screen, which is precisely the moment a user is deciding whether the
   product is trustworthy with their document. An unstyled page there is
   worse than a slow one.
   --------------------------------------------------------------------- */

body > h1:only-of-type,
.uploading-title,
h1.uploading {
  font-family: var(--fs-font);
  font-size: var(--fs-text-xl);
  font-weight: var(--fs-weight-semibold);
  color: var(--fs-ink-800);
  text-align: center;
  margin-top: var(--fs-space-8);
}

/* ---------------------------------------------------------------------
   14. App shell — sidebar and top bar

   The left navigation and the top bar are the frame every internal screen
   sits in, so they set the tone before any content loads.
   --------------------------------------------------------------------- */

[class*="sidebar"] a.active,
[class*="side-menu"] li.active,
[class*="leftmenu"] li.active {
  background: var(--fs-brand-action-quiet);
  color: var(--fs-brand-action);
  border-left: 3px solid var(--fs-brand-action);
}

/* Status text in document tables reads as state, not as prose. */
td [class*="status"],
span[class*="status"] {
  font-weight: var(--fs-weight-semibold);
  font-size: var(--fs-text-sm);
}

/* =====================================================================
   15. APP SHELL — navigation rail and top bar
   ---------------------------------------------------------------------
   Owned by masterCss.css (.menuline, .headline, .contline, .contentArea).
   Those class names are used ONLY by the authenticated shell, which is why
   it is safe to restyle them globally: every page that has a .menuline is
   a page that should get the new navigation.

   This file is linked from layout_top.jsp, which is included INSIDE <body>
   and therefore after masterCss.css in document order. Equal-specificity
   rules here win without !important. The two places that do need it are
   marked, and both exist because masterCss.css itself used !important.

   Reference: SigningHub's narrow dark rail. Not a copy — the ground is the
   FortiSign navy ramp from the mark, and the active signal is our orange.
   --------------------------------------------------------------------- */

.menuline {
  background: var(--fs-navy-gradient);
  box-shadow: 1px 0 0 rgba(255, 255, 255, .06), var(--fs-shadow-md);
}

/* The reversed lockup on navy; the mark alone once the rail collapses.
   Both assets already ship in resources/design/brand. */
.menuline .logo {
  background: url(brand/fortisign-logo-reversed.svg) 16px center no-repeat;
  background-size: 150px auto;
  height: 72px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.menuline.less .logo {
  background: url(brand/fortisign-mark.svg) center no-repeat;
  background-size: 28px auto;
}

/* Top-level items. 44px minimum height comes from 16px padding + 20px line. */
.menuline > ul > li > a,
.menuline > ul > li .focus b {
  color: var(--fs-on-navy-muted);
  border-left: 3px solid transparent;
  padding-left: 13px;                 /* 16 - 3px rail, so labels stay aligned */
  transition: background-color var(--fs-duration-fast) var(--fs-ease),
              color var(--fs-duration-fast) var(--fs-ease);
}
.menuline > ul > li:hover > a,
.menuline > ul > li:hover > .focus b {
  color: var(--fs-on-navy);
  background: rgba(255, 255, 255, .07);
}

/* Current section: rail + colour + weight. Three signals, so the state
   survives greyscale and colour-vision deficiency.
   !important is required: masterCss.css sets
   `.menuline > ul > li.active > a { background: rgba(30,116,232,.10) !important }`
   -- a stray blue tint that has to be beaten to keep one accent. */
.menuline > ul > li.active > a,
.menuline > ul > li.active .focus b {
  color: var(--fs-on-navy);
  background: rgba(255, 255, 255, .12) !important;
  border-left-color: var(--fs-on-navy-accent);
  font-weight: var(--fs-weight-semibold);
}
.menuline > ul > li .focus.block b { background: rgba(255, 255, 255, .07); }

/* Legacy nav icons are dark SVGs meant for a white rail. Inverting the
   pseudo-element (which contains nothing but the icon) turns them white
   without shipping a second icon set. The `.active` items keep their
   icon_a_*.svg originals: that orange is #f57c00, which scores 4.67:1 on
   navy and passes AA -- the same orange would fail on white. */
.menuline > ul > li:not(.active) > a:before,
.menuline > ul > li:not(.active) .focus b:before,
.menuline.less > ul > li:not(.active):not(:first-child):before {
  filter: brightness(0) invert(1);
  opacity: .70;
}
.menuline > ul > li:hover > a:before,
.menuline > ul > li:hover .focus b:before { opacity: 1; }

/* Disclosure chevrons, same treatment. */
.menuline > ul > li b:after,
.menuline > ul > li.active:after,
.menuline > ul > li .focus.block b:after {
  filter: brightness(0) invert(1);
  opacity: .55;
}

/* Sub-items. */
.menuline > ul > li > .focus > ul > li,
.menuline > ul > li > .focus > ul > li > a { color: var(--fs-on-navy-muted); }
.menuline > ul > li > .focus > ul > li > a {
  border-radius: var(--fs-radius-sm);
  padding: 8px 12px;
  min-height: 36px;
}
.menuline > ul > li > .focus > ul > li:hover a {
  color: var(--fs-on-navy);
  background: rgba(255, 255, 255, .08);
}
.menuline > ul > li > .focus > ul > li.active > a,
.menuline > ul > li > .focus > ul > li.active::marker {
  color: var(--fs-on-navy-accent);
  font-weight: var(--fs-weight-semibold);
}
.menuline > ul > li > .focus > ul > li.active > a { background: rgba(245, 124, 0, .12); }

/* The flyout shown when the rail is collapsed was white, which put white
   legacy text on a white panel once the rail went navy. Keeping it navy
   keeps one surface language and avoids a contrast trap. */
.menuline.less > ul > li > .focus {
  background: var(--fs-navy-800);
  box-shadow: var(--fs-shadow-lg);
  border: 1px solid rgba(255, 255, 255, .10);
  padding-bottom: var(--fs-space-2);
}
.menuline.less > ul > li .focus.block > b {
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: var(--fs-on-navy);
}

/* Collapsed rail: keep a 44px target and show the active rail on the tile. */
.menuline.less > ul > li.active { background: rgba(255, 255, 255, .10); }
.menuline.less > ul > li:hover  { background: rgba(255, 255, 255, .06); }

/* --- top bar --------------------------------------------------------- */

.headline {
  background: var(--fs-ink-000);
  border-bottom: 1px solid var(--fs-ink-200);
  box-shadow: none;
}
.headline .account span { color: var(--fs-navy-700); font-weight: var(--fs-weight-semibold); }
.headline .account ul {
  border: 1px solid var(--fs-ink-200);
  border-radius: var(--fs-radius-md);
  box-shadow: var(--fs-shadow-lg);
}
.headline .account ul li { min-height: 28px; }
.headline .account ul li:hover { color: var(--fs-brand-action); }
.headline .hambuger { border-radius: var(--fs-radius-sm); }

/* The language picker is a fixed 111px box; a longer label ("Vietnamese")
   overflowed it and ran under the avatar. */
.headline .nlang { margin-right: var(--fs-space-3); }
.headline .nlang > label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: var(--fs-space-3);
}

/* The application canvas: warm, not the cold #EFF3F6 SaaS default. */
.menuline + .contline { background: var(--fs-canvas); }

/* --- shell responsive ------------------------------------------------
   masterCss.css has no phone handling for the rail: .menuline stays 236px
   and .contline stays calc(100% - 236px), so at 390px the content had 154px
   and everything below it was unusable. Measured, not assumed.

   layout_top.jsp already adds `.less` below 1024px and the hamburger toggles
   it, so the collapse mechanism exists -- what was missing is what happens
   when a phone user OPENS it. Expanded now overlays the page instead of
   squeezing it, which needs no new JavaScript: it keys off the same class
   the existing handler toggles. */
@media (max-width: 768px) {
  .menuline:not(.less) {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: 240px;
    box-shadow: var(--fs-shadow-lg);
  }
  .menuline:not(.less) + .contline { width: 100%; }
  .menuline.less + .contline { width: calc(100% - 64px); }
  .headline .nlang { width: 40px; margin-right: var(--fs-space-2); }
}

/* =====================================================================
   16. DOCUMENT MANAGER  (body.fs-docs — dashboard.jsp only)
   ---------------------------------------------------------------------
   Scoped to a body class deliberately. filesmanager.css is linked by 28
   JSPs, so an unscoped `.TopArea` or `.grid table td` rule would land on
   account pages, billing pages and workspace pages that were never looked
   at. `count_area` appears on exactly one page; these rules follow it.

   Column order is fixed by loadList() and cannot change:
     1 file name   2 petitioner   3 update time   4 status   5 function
   Every rule below addresses cells positionally for that reason.
   --------------------------------------------------------------------- */

body.fs-docs .contentArea { padding: var(--fs-space-4) var(--fs-space-5) 0; }

/* --- 16.1 page header ------------------------------------------------ */

/* Title left, primary action right, on one 44px row. */
body.fs-docs .TopArea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--fs-space-3);
  min-height: 44px;
}
body.fs-docs .TopArea h2 {
  margin: 0;
  font-size: var(--fs-text-xl);
  font-weight: var(--fs-weight-bold);
  line-height: 32px;
  color: var(--fs-navy-700);
  letter-spacing: -.01em;
}
/* The primary action. filesmanager.css only dresses `.TopArea .btn`, and the
   button now lives in the start panel, so the icon + accessible orange are
   restated here rather than left to a selector that no longer matches. */
body.fs-docs .TopArea .btn,
body.fs-docs .fs-start .btn {
  width: auto;
  min-width: 200px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--fs-space-4) 0 44px;
  color: var(--fs-ink-000);
  font-size: var(--fs-text-base);
  font-weight: var(--fs-weight-semibold);
  line-height: 20px;
  border-radius: var(--fs-radius-md);
  background: url(../core/theme-mb/content/images/FilesManager/addnew.svg) 16px center no-repeat, var(--fs-brand-action);
  background-size: 20px;
  box-shadow: var(--fs-shadow-sm);
  transition: background-color var(--fs-duration-fast) var(--fs-ease),
              box-shadow var(--fs-duration-fast) var(--fs-ease);
}
body.fs-docs .TopArea .btn:hover,
body.fs-docs .fs-start .btn:hover {
  background-color: var(--fs-brand-action-hover);
  box-shadow: var(--fs-shadow-md);
  color: var(--fs-ink-000);
}
body.fs-docs .TopArea .btn:active,
body.fs-docs .fs-start .btn:active { transform: translateY(1px); box-shadow: none; }

/* --- 16.2 start-a-new-request panel ----------------------------------
   SigningHub puts a dedicated "sign a new document" panel above the list.
   This is the FortiSign version, built only from strings that already
   exist in the language files (dash_signnew, dashv2_display2) and the
   illustration filesmanager.css already ships. No new copy is invented and
   no second route is introduced -- the action is the existing #btnAddNew
   anchor, moved here, with its href and onclick untouched. */

body.fs-docs .fs-start {
  display: flex;
  align-items: center;
  gap: var(--fs-space-5);
  padding: var(--fs-space-5);
  margin-bottom: var(--fs-space-4);
  background: var(--fs-ink-000);
  border: 1px solid var(--fs-ink-200);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-sm);
  position: relative;
  overflow: hidden;
}
/* A restrained brand edge rather than a large orange fill. */
body.fs-docs .fs-start::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--fs-brand-display);
}
/* addnew.svg is a WHITE glyph -- it was drawn for the orange button. It
   therefore needs a dark ground, not a tint, or it disappears. --fs-brand-action
   rather than the display orange keeps the mark at 4.82:1. */
body.fs-docs .fs-start__art {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--fs-radius-md);
  background: var(--fs-brand-action);
}
body.fs-docs .fs-start__art img { width: 26px; height: 26px; display: block; }
body.fs-docs .fs-start__body { flex: 1 1 auto; min-width: 0; }
body.fs-docs .fs-start__title {
  display: block;
  font-size: var(--fs-text-lg);
  font-weight: var(--fs-weight-bold);
  color: var(--fs-navy-700);
  line-height: var(--fs-leading-tight);
}
body.fs-docs .fs-start__meta {
  display: block;
  margin-top: var(--fs-space-1);
  font-size: var(--fs-text-sm);
  color: var(--fs-ink-600);
}
body.fs-docs .fs-start .btn { float: none; margin-left: auto; }
/* The header action: no float, it is a flex item of .TopArea now. */
body.fs-docs .TopArea .btn { float: none; flex: none; }

/* --- 16.3 toolbar: search, filters, refresh --------------------------
   Visually secondary to the title and the primary action, per the brief:
   lighter surface, thinner border, no shadow. */

body.fs-docs .ToolArea {
  min-height: 0;
  padding: var(--fs-space-2) var(--fs-space-3);
  margin-bottom: var(--fs-space-3);
  border: 1px solid var(--fs-ink-200);
  border-radius: var(--fs-radius-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-space-3);
  float: none;
  width: auto;
}
body.fs-docs .ToolArea .seach,
body.fs-docs .ToolArea .dropw {
  float: none;
  margin-right: 0;
  border-radius: var(--fs-radius-md);
  border-color: var(--fs-ink-200);
  background: var(--fs-ink-100);
  transition: border-color var(--fs-duration-fast) var(--fs-ease),
              background-color var(--fs-duration-fast) var(--fs-ease);
}
/* The wrapper was the 44px target and the input inside it only 22px high.
   Making the input fill the wrapper gives the real control a 44px hit area
   without changing the wrapper's size. */
body.fs-docs .ToolArea .seach {
  flex: 1 1 320px;
  max-width: 460px;
  padding: 0 var(--fs-space-3);
  display: flex;
  align-items: center;
  height: 44px;
}
body.fs-docs .ToolArea .seach:focus-within {
  background: var(--fs-ink-000);
  border-color: var(--fs-brand-action);
  box-shadow: 0 0 0 3px var(--fs-brand-action-quiet);
}
body.fs-docs .ToolArea .seach input[type=text] {
  width: 100%;
  height: 42px;
  padding-left: 32px;      /* clears the search glyph pinned at left:12px */
  background: transparent;
  font-size: var(--fs-text-sm);
  color: var(--fs-ink-900);
}
body.fs-docs .ToolArea .seach input[type=text]::placeholder { color: var(--fs-ink-500); }
body.fs-docs .ToolArea .dropw:hover { border-color: var(--fs-brand-action); background: var(--fs-ink-000); }
body.fs-docs .ToolArea .dropw > label {
  color: var(--fs-ink-600);
  font-weight: var(--fs-weight-regular);
}
body.fs-docs .ToolArea .ggSelect label,
body.fs-docs .ToolArea .ggCalendar label { color: var(--fs-ink-900); font-weight: var(--fs-weight-medium); }
body.fs-docs .ToolArea .refresh {
  float: none;
  margin-top: 0;
  margin-left: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--fs-space-3) 0 28px;
  border-radius: var(--fs-radius-md);
  font-weight: var(--fs-weight-medium);
  background-position: 8px center;
}
body.fs-docs .ToolArea .refresh:hover { background-color: var(--fs-brand-action-quiet); color: var(--fs-brand-action-hover); }

/* Filter popovers */
body.fs-docs .ggCalendar .ggOver,
body.fs-docs .ggSelect .ggOver {
  border: 1px solid var(--fs-ink-200);
  border-radius: var(--fs-radius-md);
  box-shadow: var(--fs-shadow-lg);
  padding: var(--fs-space-2);
}
body.fs-docs .ggCalendar .ggOver ul li,
body.fs-docs .ggSelect .ggOver li {
  min-height: 40px;
  display: flex;
  align-items: center;
  border-radius: var(--fs-radius-sm);
  margin-bottom: var(--fs-space-1);
  font-size: var(--fs-text-sm);
}
body.fs-docs .ggCalendar .ggOver .setup input[type=text] {
  min-height: 44px;
  border-radius: var(--fs-radius-md);
  border-color: var(--fs-ink-300);
  font-size: var(--fs-text-sm);
}

/* --- 16.4 status summary tiles ---------------------------------------
   The counts were "Label (n)" inline text. A signing product's first
   question is "how many need me", so the number leads and the label
   supports it. The tab logic is untouched: these are still the same six
   anchors carrying the same data-id values and the same onclick handlers. */

body.fs-docs .count_area {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--fs-space-2);
  background: transparent;
  overflow: visible;
  margin-bottom: var(--fs-space-2);
}
body.fs-docs .count_area a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  float: none;
  width: auto;
  max-width: none;
  min-height: 66px;
  padding: var(--fs-space-2) var(--fs-space-3);
  text-align: left;
  background: var(--fs-ink-000);
  border: 1px solid var(--fs-ink-200);
  border-bottom: 3px solid var(--fs-ink-200);
  border-radius: var(--fs-radius-md);
  color: var(--fs-ink-600);
  transition: border-color var(--fs-duration-fast) var(--fs-ease),
              box-shadow var(--fs-duration-fast) var(--fs-ease);
}
body.fs-docs .count_area a:hover {
  border-color: var(--fs-ink-300);
  border-bottom-color: var(--fs-brand-border);
  box-shadow: var(--fs-shadow-sm);
  color: var(--fs-ink-800);
}
/* Selected tile: orange rail + orange text + bold count + aria-selected in
   the markup. Colour is never the only signal. */
body.fs-docs .count_area a.active {
  border-color: var(--fs-brand-border);
  border-bottom-color: var(--fs-brand-display);
  background: var(--fs-brand-action-quiet);
  color: var(--fs-brand-action);
  box-shadow: var(--fs-shadow-sm);
}
body.fs-docs .fs-tile__count {
  font-size: var(--fs-text-lg);
  font-weight: var(--fs-weight-bold);
  line-height: 1.2;
  color: var(--fs-navy-700);
  font-variant-numeric: tabular-nums;
}
body.fs-docs .count_area a.active .fs-tile__count { color: var(--fs-brand-action); }
body.fs-docs .fs-tile__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-text-xs);
  font-weight: var(--fs-weight-semibold);
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
body.fs-docs .fs-tile__icon { flex: none; width: 14px; height: 14px; }

/* --- 16.5 the document list ------------------------------------------ */

body.fs-docs .GridArea { margin-bottom: var(--fs-space-3); }
body.fs-docs .grid {
  padding: 0;
  border: 1px solid var(--fs-ink-200);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-sm);
  overflow: hidden;
}
/* The tbody was its own scroll container at `height: calc(100vh - 478px)` --
   a magic constant tuned to the old header stack. Two problems: the page
   ALREADY scrolls (.contentArea is overflow:auto), so this was a scrollbar
   inside a scrollbar; and any change to the header stack silently pushed the
   last rows behind the position:fixed pager. Measured at 1024x768 with the
   new stack, only one row was reachable.

   Letting the list grow and the page scroll removes the constant entirely
   and behaves the same at every viewport. There is no fixed pager to clear any
   more -- the list footer is an ordinary row in the flow directly under this
   table (fspagination.css) -- so nothing has to be reserved below it.
   display:block stays: it is what pairs with
   `tbody tr { display:table; table-layout:fixed }` to give the columns their
   tracks. */
body.fs-docs .grid.scroll1 table tbody {
  height: auto;
  max-height: none;
  overflow: visible;
}
/* filesmanager.css narrowed the head by 1em to clear the tbody scrollbar.
   There is no tbody scrollbar any more, so the head is full width and the
   header cells line up with the body cells. */
body.fs-docs .grid.scroll1 table thead { width: 100%; }

body.fs-docs .grid table thead {
  background: var(--fs-ink-100);
  border-bottom: 1px solid var(--fs-ink-200);
}
body.fs-docs .grid table thead td,
body.fs-docs .grid table thead th {
  padding: var(--fs-space-3) var(--fs-space-2);
  font-size: var(--fs-text-xs);
  font-weight: var(--fs-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fs-ink-600);
  text-align: left;
  white-space: nowrap;
}
/* thead uses <th scope="col"> now; filesmanager.css only gave padding to
   td, so it is restated here for both. First and last cells align with the
   body cells' gutters. */
body.fs-docs .grid table thead th:first-child,
body.fs-docs .grid table thead td:first-child { padding-left: 50px; }
body.fs-docs .grid table thead th:last-child,
body.fs-docs .grid table thead td:last-child { padding-right: var(--fs-space-4); text-align: right; }

body.fs-docs .grid table tbody tr:first-child td { border-top: none; }
body.fs-docs .grid table td {
  padding: var(--fs-space-4) var(--fs-space-2);
  vertical-align: middle;                 /* was `top`: chips and buttons sat high */
  border-bottom: 1px solid var(--fs-ink-200);
  color: var(--fs-ink-700);
  font-size: var(--fs-text-sm);
  font-variant-numeric: tabular-nums;
}
body.fs-docs .grid table td:not(:first-child, :last-child) { padding: var(--fs-space-4) var(--fs-space-2); }
/* masterCss.css declares `* { transition-property: width,padding,margin,...,
   background; transition-duration: .35s }`. Every hover therefore fades over
   a third of a second, which on a dense list reads as lag. Narrowed here to
   the one property that should animate, for this page only. */
body.fs-docs .grid table tbody tr,
body.fs-docs .grid table tbody tr td {
  transition-property: background-color, box-shadow;
  transition-duration: var(--fs-duration-fast);
  transition-timing-function: var(--fs-ease);
}

/* Column widths.

   thead and tbody are SEPARATE display:table boxes (filesmanager.css sets
   `.grid.scroll1 table thead, .grid.scroll1 table tbody tr { display:table;
   table-layout:fixed }`), so each sizes its own columns and the two drift
   apart -- the header's Function column sat 24px right of the body's.
   Pinning both to the same track widths is what makes the columns line up.

   !important is required on columns 1-3 only: loadList() writes
   `style="width:20%"` inline on those three cells, and an inline style beats
   any stylesheet without it. Columns 4 and 5 need no override.

   The split also gives the document name the room it earns as the primary
   column (30% rather than a flat 20%). */
/* 26/18/14/16/26. The Function track was 22%, which is narrower than the
   four hover icons plus the action button on any viewport under ~1400px --
   the content simply spilled past the card's right edge and the button of a
   row that HAS icons ended further right than one that does not, which is the
   ragged column the review reported. The 4 points come from File name, which
   ellipsises a long name either way. */
body.fs-docs .grid table thead th:nth-child(1),
body.fs-docs .grid table tbody td:nth-child(1) { width: 26% !important; }
body.fs-docs .grid table thead th:nth-child(2),
body.fs-docs .grid table tbody td:nth-child(2) { width: 18% !important; }
body.fs-docs .grid table thead th:nth-child(3),
body.fs-docs .grid table tbody td:nth-child(3) { width: 14% !important; }
body.fs-docs .grid table thead th:nth-child(4),
body.fs-docs .grid table tbody td:nth-child(4) { width: 16%; }
body.fs-docs .grid table thead th:nth-child(5),
body.fs-docs .grid table tbody td:nth-child(5) { width: 26%; }

/* Below ~1100px the Function column can no longer hold three hover icons
   plus the contextual button, and the button was being clipped at the card
   edge. Petitioner is the column that carries least here -- the recipients
   list is still one row-click away -- so it is dropped from BOTH the head
   and the body at the same index, which is what keeps the remaining tracks
   aligned across the two separate display:table boxes. */
@media (max-width: 1100px) {
  body.fs-docs .grid table thead th:nth-child(2),
  body.fs-docs .grid table tbody td:nth-child(2) { display: none; }
  body.fs-docs .grid table thead th:nth-child(1),
  body.fs-docs .grid table tbody td:nth-child(1) { width: 36% !important; }
  body.fs-docs .grid table thead th:nth-child(3),
  body.fs-docs .grid table tbody td:nth-child(3) { width: 18% !important; }
  body.fs-docs .grid table thead th:nth-child(4),
  body.fs-docs .grid table tbody td:nth-child(4) { width: 20%; }
  body.fs-docs .grid table thead th:nth-child(5),
  body.fs-docs .grid table tbody td:nth-child(5) { width: 26%; }
}
/* Hover is a hint, not a highlight -- a strong hover on a list this dense
   reads as a selection that was never made. */
body.fs-docs .grid table tbody tr:hover td { background: var(--fs-navy-100); }
body.fs-docs .grid table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--fs-brand-display); }

/* Document name is the strongest thing in the row. */
body.fs-docs .grid table tbody td:first-child {
  position: relative;
  padding-left: 50px;
  padding-right: var(--fs-space-3);
}
body.fs-docs .grid table tbody td:first-child::before {
  content: "";
  position: absolute;
  left: var(--fs-space-4);
  top: 50%;
  margin-top: -11px;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003365' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E") center / 22px no-repeat;
  opacity: .55;
}
body.fs-docs .grid table tbody td:first-child .b {
  color: var(--fs-navy-700);
  font-size: 15px;
  font-weight: var(--fs-weight-semibold);
  line-height: 20px;
  overflow-wrap: anywhere;
}

/* Petitioner cell. The `...` span is the recipients affordance; make it
   look like one instead of like stray punctuation. */
body.fs-docs .grid table tbody td:nth-child(2) { color: var(--fs-ink-700); }
body.fs-docs .grid table tbody td:nth-child(2) > span {
  color: var(--fs-brand-action);
  font-weight: var(--fs-weight-semibold);
  cursor: pointer;
  letter-spacing: .12em;
}
body.fs-docs .grid table tbody td:nth-child(3) { color: var(--fs-ink-600); white-space: nowrap; }

/* --- 16.6 status chips -----------------------------------------------
   REPLACES the legacy progress-bar image; it does not sit next to it.
   Showing both is exactly what broke in 5add0fc and was reverted in
   3cdb93d, so [class*='sta_']:after is switched off here rather than
   competing with it.

   Mapping comes straight from loadList():
     .sta_0            Draft
     .sta_2x           Need to handle / In Progress
     .sta_2            Signed by me / waiting for others
     .sta_1Completed   Completed
     (no class at all) Declined  -- loadList never sets className on that
                                    branch, hence :not([class]).
   Each chip carries an icon baked into the background image, so state is
   readable without colour. */

body.fs-docs .grid table tbody td:nth-child(4)::after { display: none; }
body.fs-docs .grid table tbody td:nth-child(4) > span {
  display: inline-flex;
  align-items: center;
  float: none;
  margin: 0;
  min-height: 24px;
  padding: 3px 10px 3px 26px;
  border-radius: var(--fs-radius-pill);
  font-size: var(--fs-text-xs);
  font-weight: var(--fs-weight-semibold);
  letter-spacing: .01em;
  white-space: nowrap;
  background-position: 8px center;
  background-repeat: no-repeat;
  background-size: 13px;
  color: var(--fs-path-draft-fg);
  background-color: var(--fs-path-draft-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234a5158'%3E%3Cpath d='M4 1.5h5L12.5 5v9.5a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-12a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
}
body.fs-docs .grid table tbody td:nth-child(4) > span:empty { display: none; }
body.fs-docs .grid table tbody td:nth-child(4) u { display: none; }  /* legacy "1/2" fraction, never populated */

body.fs-docs .grid table tbody td.sta_2x > span {
  color: var(--fs-path-awaiting-fg);
  background-color: var(--fs-path-awaiting-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238a5a00'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm.75 3.5v3.9l2.6 1.55-.75 1.25-3.35-2V4.5Z'/%3E%3C/svg%3E");
}
body.fs-docs .grid table tbody td.sta_2 > span {
  color: var(--fs-path-signed-fg);
  background-color: var(--fs-path-signed-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231b6b3a'%3E%3Cpath d='M6.5 11.4 3.1 8l1.2-1.2 2.2 2.2 5-5L12.7 5Z'/%3E%3C/svg%3E");
}
body.fs-docs .grid table tbody td.sta_1Completed > span {
  color: var(--fs-path-verified-fg);
  background-color: var(--fs-path-verified-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f5c4a'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm-1 10.4L3.6 8l1.2-1.2L7 9l4.2-4.2 1.2 1.2Z'/%3E%3C/svg%3E");
}
body.fs-docs .grid table tbody td:nth-child(4):not([class]) > span {
  color: var(--fs-path-declined-fg);
  background-color: var(--fs-path-declined-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a32116'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm3 9.2-.8.8L8 8.8 5.8 11l-.8-.8L7.2 8 5 5.8l.8-.8L8 7.2 10.2 5l.8.8L8.8 8Z'/%3E%3C/svg%3E");
}

/* The status column carries `none`, which filesmanager.css hides below
   1024px -- but the Completed and Declined branches of loadList() never add
   that class, so half the rows kept a cell the header had dropped and the
   fixed table layout skewed. Status is the column this page exists for;
   it stays. */
@media (max-width: 1024px) {
  body.fs-docs .grid table .none { display: table-cell; }
}

/* --- 16.7 row actions ------------------------------------------------
   One contextual primary action (.gsee view / .gdown download) plus the
   hover icon set. Destructive delete stays an icon, never a filled button. */

body.fs-docs .grid table tbody td:last-child {
  padding-right: var(--fs-space-4);
  white-space: nowrap;
  /* Matches the header cell, which has been right-aligned since 16.5. The
     body cell was not, so the action sat wherever its own label's width left
     it and the column read as ragged. */
  text-align: right;
}

/* --- the Function cell: an icon zone that may shrink, and a fixed slot -----

   Right-aligning the cell made the actions END flush only while every row
   held the same content. It does not: rename appears only for an owner,
   cancel only while the envelope is still cancellable, resend only on
   Pending / In Progress. Icons and button shared one inline flow, so a row
   with five icons and a row with none put their button in different places,
   and on a row whose icons overran the cell the button was pushed out of the
   column entirely. No button width or margin can fix that -- the position was
   never a property of the button.

   Two columns. The second is exactly 160px on every row, so the primary
   action's left and right edges are decided by the GRID and cannot be moved
   by whatever the first column holds. The first column is minmax(0, 1fr):
   the 0 minimum is what lets it absorb a crowded icon set instead of
   widening the row.

   Placed after the :last-child rule above deliberately -- the two selectors
   have equal specificity, so source order is what makes this one win. */
body.fs-docs .grid table tbody td.fs-doc-actions {
  box-sizing: border-box;
  /*
     display STAYS table-cell. A grid or flex container here is NOT a table
     cell any more, so `td:nth-child(5) { width: 26% }` stops applying and the
     column collapses to its minimum -- measured at 97px against the 374px it
     should have -- with the 160px button hanging outside its own cell. The
     buttons do line up with each other in that state, which is exactly why it
     has to be measured rather than eyeballed.

     The two zones are laid out as inline-level boxes inside the cell instead.
     Both are created by appendChild with no text node between them, and the
     cell is nowrap, so they sit on one line.
  */
  padding-right: var(--fs-space-4);
  white-space: nowrap;
  text-align: right;
}

/*
   THE PRIMARY SLOT IS LAST IN THE DOM AND THE CELL IS RIGHT-ALIGNED, so its
   right edge is the cell's content edge and its left edge is that minus 160px
   -- on every row, whatever precedes it. That is the whole alignment rule, and
   it needs no measurement of the icons.

   It held before this change too, with one exception, and the exception was
   the entire defect: when the icons plus the button were wider than the cell,
   the line overflowed and a right-aligned overflowing line starts at the
   container's LEFT edge, pushing the button out past the right. Rows with few
   icons fitted and sat flush; rows with five did not, and no width or margin
   on the button could have corrected it.

   So the icons are given a zone that CANNOT grow past what is left over.
   max-width caps it and overflow clips it, which means the line can no longer
   overflow and the rule above holds unconditionally.
*/
body.fs-docs .fs-doc-actions__icons {
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  /* The cap is what makes the button's position independent of the icons: the
     BOX can never grow past what the slot leaves, so the line can never
     overflow the cell and the right-aligned slot can never be pushed out.
     168px = the 160px slot + the 8px gap below. */
  max-width: calc(100% - 168px);
  /*
     visible, NOT hidden. Clipping the box would keep the alignment and take
     the icons with it -- on a narrower desktop, or simply on the real page,
     which gives a left nav some of the width this harness gave the table,
     only two or three of the five fit. Rename, cancel and resend would be
     unreachable, which is a worse defect than the one being fixed.

     Overflow goes to the LEFT, because the icons are packed to the flex-end:
     the ones that do not fit sit over the empty right-hand part of the Status
     cell, which is exactly where there is room, and they stay clickable. They
     are only rendered on row hover in any case.
  */
  overflow: visible;
  margin-right: var(--fs-space-2);
}
body.fs-docs .fs-doc-actions__icons:empty { margin-right: 0; }

/* The slot. Fixed on all three axes so an empty one and a full one are the
   same box. */
body.fs-docs .fs-doc-actions__primary {
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  width: 160px;
  min-width: 160px;
  max-width: 160px;
}

/* --- the one button box ----------------------------------------------------

   Sign, Review & Sign, Open, Download and Continue editing are the same
   rectangle. Two of them are <a> and one is <button>, which do not agree on
   default font, line-height, padding or box-sizing, so every one of those is
   stated here rather than inherited from the user agent.

   !important throughout: filesmanager.css sets a competing fixed size on the
   same element (.grid table td .btn { width:128px; height:36px }) and is
   loaded per page, while this sheet arrives through layout_top.jsp. Where
   both are present in the expected order specificity already wins, but a page
   that pulled the legacy sheet in later would silently get 128px back. */
body.fs-docs .grid table td .fs-doc-primary-action {
  box-sizing: border-box !important;
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  line-height: normal;
  font-family: inherit;
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-semibold);
  text-decoration: none;
  cursor: pointer;
}

/* The legacy sheet paints an eye on .gsee and a download arrow on .gdown and
   reserves a 36px left inset for them, which is asymmetric padding -- the
   label then reads as off-centre however the box is sized. The glyph is
   dropped here rather than in filesmanager.css so the two sheets cannot
   disagree. This is the BACKGROUND of the button only; the row's own action
   icons are untouched. */
body.fs-docs .grid table td .fs-doc-primary-action.gsee,
body.fs-docs .grid table td .fs-doc-primary-action.gdown {
  background-image: none !important;
}
/*
   BASE LOOK ONLY -- the GEOMETRY of a row action belongs to
   .fs-doc-primary-action above, which is the single owner of its width,
   height, padding, box-sizing and centring.

   This rule used to carry a 160px width too. That was the earlier attempt at
   the same problem and it could not succeed on its own: the button was the
   right size while its POSITION still depended on how many hover icons shared
   the cell with it. Keeping both would leave two geometry systems on one
   element, which is how the column drifted back out of line each time
   something else in the row changed. The glyph suppression stays here because
   it applies to any .btn the legacy sheet paints inside this grid.
*/
body.fs-docs .grid table td .btn {
  background-image: none !important;
  border-radius: var(--fs-radius-md);
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-semibold);
  transition: box-shadow var(--fs-duration-fast) var(--fs-ease),
              background-color var(--fs-duration-fast) var(--fs-ease);
}
body.fs-docs .grid table td .btn.gsee:hover { box-shadow: var(--fs-shadow-md); color: var(--fs-ink-000); }
body.fs-docs .grid table td .btn.gdown {
  border-color: var(--fs-ink-300);
  color: var(--fs-navy-700);
}
body.fs-docs .grid table td .btn.gdown:hover { background-color: var(--fs-navy-100); border-color: var(--fs-navy-500); }
/* Icon buttons get a real target without moving the 20px glyph that the
   row-hover handler toggles. margin-right needs !important because
   loadList() writes `margin-right:10px` inline on each icon, and 3 x 10px of
   dead gutter is what pushed the contextual button past the card edge. */
body.fs-docs .grid table td .action-icons {
  box-sizing: content-box;
  padding: 5px;
  margin-right: 2px !important;
  border-radius: var(--fs-radius-sm);
  vertical-align: middle;
}
body.fs-docs .grid table td .action-icons:hover { background: var(--fs-ink-200); }

/* --- 16.8 pagination -------------------------------------------------- */

/*
   NOT DEFINED HERE ANY MORE.

   This section re-declared the record-list footer -- `body.fs-docs .FootArea`
   as a static flex row, `.footerFix { display:none }`, an unscoped
   `.FootArea .pagenumber { float: right }`, `.FootArea #pageDisplay`, and a
   full set of `.pagenumber a.left / a.right / a.num / a.act` control styles.

   It was the SECOND of two competing layout models for one component. The first
   was filesmanager.css's position-fixed 68px float bar; this one was scoped to
   `body.fs-docs`, which dashboard.jsp is the only page in the product to set. So
   the footer laid itself out one way on the dashboard and another way on
   crendential, filesHistory, activity, apikey, sic and workspace -- and on those
   pages the strip was clipped by the 68px bar, which is why the page numbers
   were hidden product-wide for a release.

   The footer is now an ordinary flex row in normal flow with a single owner:

       web/resources/core/css/fspagination.css

   The list pages carry `.fs-list-footer` and no longer carry `.FootArea`,
   `.Area`, `.select`, `.pagenumber` or a `.footerFix` spacer, so every rule that
   was here had no consumer left. `.footerStep` and the `.footerFix` that serves
   it (section 17) are a different, genuinely fixed wizard bar and are untouched.
*/

/* --- 16.9 dialogs ----------------------------------------------------- */

body.fs-docs .popup .popup_area {
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-lg);
  padding: var(--fs-space-5);
  height: auto;
  max-height: calc(100vh - 48px);
  overflow: auto;
}
body.fs-docs .popup .popup_area .close {
  width: 32px;
  height: 32px;
  top: 12px;
  right: 12px;
  border-radius: var(--fs-radius-sm);
  /* masterCss.css points this at /Content/images/Master/Close.svg, which
     404s -- the context path is missing. Drawn inline so the dialog always
     has a visible close control. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234a5158' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center / 15px no-repeat;
}
body.fs-docs .popup .popup_area .close:hover { background-color: var(--fs-ink-200); }
body.fs-docs .fs-popup__art { display: block; width: 60px; margin: var(--fs-space-2) auto var(--fs-space-4); }
body.fs-docs .popup_content .title { font-size: var(--fs-text-lg); color: var(--fs-navy-700); }
body.fs-docs .popup_content .desc { color: var(--fs-ink-600); }
body.fs-docs .popup_content .reason {
  height: 128px;
  border-radius: var(--fs-radius-md);
  border-color: var(--fs-ink-300);
  font-family: var(--fs-font);
  font-size: var(--fs-text-sm);
}
body.fs-docs .popup_content .reason:focus {
  outline: none;
  border-color: var(--fs-brand-action);
  box-shadow: 0 0 0 3px var(--fs-brand-action-quiet);
}
body.fs-docs .popup_content .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fs-radius-md);
  cursor: pointer;
}
/* Destructive confirmation reads as destructive; cancel stays quiet.
   Cancel is an outlined secondary button, not a ghost one: an ink-300 hairline
   on white reads as a disabled control at this size, so the border is ink-400
   and the label ink-800. Both dialog buttons are <a role="button">, which the
   browser gives no focus ring of its own -- hence the explicit :focus-visible. */
body.fs-docs .popup_content .btn.red  { background: var(--fs-path-declined-fg); }
body.fs-docs .popup_content .btn.gray {
  background: var(--fs-ink-000);
  color: var(--fs-ink-800);
  border: 1px solid var(--fs-ink-400);
}
body.fs-docs .popup_content .btn.gray:hover {
  background: var(--fs-ink-100);
  border-color: var(--fs-ink-700);
}
body.fs-docs .popup_content .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--fs-brand-action-quiet), 0 0 0 4px var(--fs-brand-action);
}

/* Recipients / email-history <dialog> elements. Their inner boxes carried
   pure-visual inline styles, which have been lifted into these classes;
   the `display` inline style stays on the <dialog> itself because the page
   JS reads and writes it. */
/* The <dialog> itself keeps document.css's full-viewport scrim and its
   display:none default -- both are behaviour the page JS drives. Only the
   panel inside it is restyled. .content-center already centres vertically
   with flex, which is why the old translateY(-50%) hack is gone rather
   than reproduced. */
.fs-modal__wrap { display: flex; width: 100%; justify-content: center; }
.fs-modal__panel {
  width: min(760px, calc(100vw - 32px));
  margin: 0 auto;
  background: var(--fs-ink-000);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-lg);
  max-height: min(560px, calc(100vh - 64px));
  overflow: auto;
  text-align: left;
}
.fs-modal__body { padding: var(--fs-space-5); }
.fs-modal__title {
  margin: 0 0 var(--fs-space-3);
  font-size: var(--fs-text-lg);
  font-weight: var(--fs-weight-bold);
  color: var(--fs-navy-700);
  text-align: left;
  float: none;
  width: auto;
}
.fs-modal__meta {
  display: block;
  float: none;
  margin-bottom: var(--fs-space-2);
  font-size: var(--fs-text-sm);
  color: var(--fs-ink-600);
  text-align: left;
}
.fs-modal__scroll {
  border: 1px solid var(--fs-ink-200);
  border-radius: var(--fs-radius-md);
  overflow: auto;
  max-height: 340px;
}
.fs-modal__scroll table,
.fs-modal__scroll > thead,
.fs-modal__scroll > tr { width: 100%; }
.fs-modal__scroll th {
  position: sticky;
  top: 0;
  background: var(--fs-ink-100);
  border-bottom: 1px solid var(--fs-ink-200);
  padding: var(--fs-space-3) var(--fs-space-3) !important;   /* beats the inline
      width/text-align written by addRecipients()/addEmailHistory(), which
      are JS files this release does not touch */
  color: var(--fs-ink-600);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: var(--fs-text-xs) !important;
  text-align: left;
}
.fs-modal__scroll td {
  padding: var(--fs-space-3) !important;                     /* same reason */
  border-bottom: 1px solid var(--fs-ink-200);
  color: var(--fs-ink-700);
}
.fs-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--fs-space-3);
  margin-top: var(--fs-space-4);
}
.fs-modal__actions .btn {
  min-height: 44px;
  min-width: 104px;
  padding: 0 var(--fs-space-5);
  border-radius: var(--fs-radius-md);
  background: var(--fs-ink-000);
  border: 1px solid var(--fs-ink-300);
  color: var(--fs-navy-700);
  font-weight: var(--fs-weight-semibold);
}
.fs-modal__actions .btn:hover { background: var(--fs-navy-100); }

/* --- 16.10 responsive ------------------------------------------------- */

@media (max-width: 1200px) {
  body.fs-docs .count_area { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  body.fs-docs .contentArea { padding: var(--fs-space-4) var(--fs-space-4) 0; }
  body.fs-docs .ToolArea .refresh { margin-left: 0; }
}
@media (max-width: 768px) {
  body.fs-docs .TopArea { display: flex; flex-direction: column; align-items: stretch; gap: var(--fs-space-3); }
  body.fs-docs .TopArea .btn { float: none; width: 100%; justify-content: center; }
  body.fs-docs .fs-start { flex-direction: column; align-items: flex-start; }
  body.fs-docs .fs-start .btn { margin-left: 0; width: 100%; justify-content: center; }
  /* filesmanager.css forces `width:100%` on both at this breakpoint, which
     stacked search + two filters + refresh into four full-width rows and
     pushed the list off the first screen. Search keeps the full row; the two
     filters share the next one. */
  body.fs-docs .ToolArea { padding: var(--fs-space-2); gap: var(--fs-space-2); }
  body.fs-docs .ToolArea .seach { flex: 1 1 100%; max-width: none; width: auto; }
  body.fs-docs .ToolArea .dropw { flex: 1 1 calc(50% - 20px); width: auto; margin-bottom: 0; }
  body.fs-docs .ToolArea .dropw .ggSelect,
  body.fs-docs .ToolArea .dropw .ggCalendar { width: calc(100% - 32px); }
  body.fs-docs .ToolArea .refresh { flex: none; margin-left: auto; }
  body.fs-docs .ggCalendar .ggOver { width: min(571px, calc(100vw - 96px)); }
  body.fs-docs .count_area {
    display: grid;                              /* overrides the legacy
        `overflow:auto; white-space:nowrap` row, which turned the tiles into
        a sideways-scrolling strip on a phone */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    white-space: normal;
    padding: 0;
  }
  body.fs-docs .count_area a { display: flex; float: none; width: auto; max-width: none; min-height: 68px; }

  /* Stacked rows. The table keeps every cell -- nothing is removed, because
     insertRowSortedByCreatedOn indexes cells[2] and the row-click delegation
     depends on :first-child / :last-child. Only the box type changes.
     Paging still works: showRows() writes display:none / "" inline, and ""
     falls back to the `block` set here. */
  body.fs-docs .grid.scroll1 table thead { display: none; }
  body.fs-docs .grid.scroll1 table tbody { display: block; height: auto; max-height: none; }
  body.fs-docs .grid.scroll1 table tbody tr {
    display: block;
    width: auto;
    padding: var(--fs-space-3) var(--fs-space-4);
    border-bottom: 1px solid var(--fs-ink-200);
  }

  /* Every selector below is anchored on `.grid.scroll1 ... tr > td` so the
     stacked rules all sit at the same specificity floor and beat the desktop
     column tracks deterministically.

     The first draft wrote `tr td, tr:first-child td` as one list and lost:
     in a selector list each selector keeps its OWN specificity, so
     `tr:first-child td` (0,3,5) outranked `td:first-child` (0,3,4) and row
     one silently kept a 0 left padding while every other row got 32px.
     Measured at 768px, not assumed.

     width:auto undoes the fixed column tracks: as blocks the cells are full
     width, and a 30%/18%/14% track would shrink each line of the card. */
  body.fs-docs .grid.scroll1 table tbody tr > td { display: block; border: 0; padding: 2px 0; width: auto !important; }
  body.fs-docs .grid.scroll1 table tbody tr:first-child > td { border-top: 0; }
  body.fs-docs .grid.scroll1 table tbody tr > td:first-child { padding: 0 0 var(--fs-space-2) 32px; }
  body.fs-docs .grid.scroll1 table tbody tr > td:first-child::before { left: 0; top: 2px; margin-top: 0; width: 20px; height: 20px; background-size: 20px; }
  body.fs-docs .grid.scroll1 table tbody tr:hover > td:first-child { box-shadow: none; }
  body.fs-docs .grid.scroll1 table tbody tr > td:nth-child(2) { display: block; }  /* petitioner returns: there is room in a stacked card */
  /* The action cell becomes a flex row: the hover icons and the contextual
     button size to their content and wrap if they must. A percentage width
     on the button overflowed the cell here -- the ancestor chain is
     display:table > block tbody > block tr, and a percentage against that
     chain does not resolve to the cell's rendered width. Natural sizing
     cannot overflow, so it is used instead. */
  body.fs-docs .grid.scroll1 table tbody tr > td:last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fs-space-2);
    text-align: left;
    padding-top: var(--fs-space-3);
  }
  /* The stacked card has no column to line up with, so the fixed desktop
     width is released here. !important mirrors the desktop rule, which now
     carries it -- without that the 160px would survive into a 375px card. */
  /* The two-zone grid is a DESKTOP arrangement: it lines a button up with the
     row above it, and a stacked card has no row above it to line up with. The
     cell goes back to the wrapping flex row the card already used, and both
     zones stop being boxes of their own. */
  body.fs-docs .grid.scroll1 table tbody tr > td.fs-doc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fs-space-2);
    text-align: left;
    white-space: normal;
  }
  body.fs-docs .fs-doc-actions__icons {
    flex: 0 1 auto;
    max-width: 100%;        /* no fixed slot to leave room for in a card */
    overflow: visible;      /* nothing to clip against in a card that wraps */
    justify-content: flex-start;
    margin-right: 0;
  }
  body.fs-docs .fs-doc-actions__primary {
    width: auto;
    min-width: 0;
    max-width: 100%;
    flex: 0 0 auto;
    justify-content: flex-start;
  }
  /* 160px inside a 375px card would overflow it; the label sizes the button
     here. !important mirrors the desktop rule, which carries it. */
  body.fs-docs .grid table td .fs-doc-primary-action {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body.fs-docs .grid.scroll1 table tbody tr > td .btn { width: auto !important; max-width: 100%; min-width: 0 !important; flex: 0 0 auto; justify-content: center; }
  body.fs-docs .grid.scroll1 table tbody tr > td .action-icons { flex: 0 0 auto; margin-right: 0 !important; }
  /* The list footer's narrow-viewport behaviour lives in fspagination.css. */
}

/* =====================================================================
   17. WORKFLOW STEPPER  (upload -> recipients -> fields -> review)
   ---------------------------------------------------------------------
   Shared by uploadfile.jsp, recipients.jsp, sign.jsp, sharesummary.jsp and
   the layout_sign_step.jsp fragment. Every one of them uses the same two
   lists, #signMultiPer (4 steps) and #signOnlyPer (sign-it-myself, 2), so
   the ids are the selector root here.

   WHY IDS AND NOT `.stepByLine`

   uploadfile.jsp carries a 1412-line inline <style> in its <head> that
   arrives AFTER the design stylesheets and re-declares .stepByLine. A
   class-based rule would silently lose there and win on the other three,
   which is exactly the kind of half-applied styling that produced the
   3cdb93d revert. An id root wins everywhere without !important and without
   moving anyone's <link> tags.

   WHAT WAS ACTUALLY WRONG, BEYOND COLOUR

   Only the current step carries `.active`, so completed and upcoming steps
   rendered identically -- the bar showed position but never progress. CSS
   has no previous-sibling combinator, so the logic is inverted: every step
   is styled DONE by default, then `.active` and `.active ~ li` are restyled
   as current and upcoming. That yields a real progress bar from markup that
   never said which steps were finished.

   The box model is deliberately untouched. 5add0fc added padding, radius
   and a pill background to these list items, which combined with the
   existing connector rules into a long orange bar; only colour, weight and
   the connector fill are set here.
   --------------------------------------------------------------------- */

#signMultiPer li i,
#signOnlyPer li i {
  background: var(--fs-path-signed-fg);
  color: var(--fs-ink-000);
}
#signMultiPer li b,
#signOnlyPer li b {
  color: var(--fs-path-signed-fg);
  font-weight: var(--fs-weight-medium);
}
#signMultiPer li:after,
#signOnlyPer li:after { background: var(--fs-path-signed-fg); }

/* current */
#signMultiPer li.active i,
#signOnlyPer li.active i {
  background: var(--fs-brand-action);
  color: var(--fs-ink-000);
  box-shadow: 0 0 0 4px var(--fs-brand-action-quiet);
}
#signMultiPer li.active b,
#signOnlyPer li.active b {
  color: var(--fs-brand-action);
  font-weight: var(--fs-weight-bold);
}

/* upcoming — everything after the current step */
#signMultiPer li.active ~ li i,
#signOnlyPer li.active ~ li i {
  background: var(--fs-ink-200);
  color: var(--fs-ink-600);
  box-shadow: none;
}
#signMultiPer li.active ~ li b,
#signOnlyPer li.active ~ li b {
  color: var(--fs-ink-600);
  font-weight: var(--fs-weight-medium);
}
#signMultiPer li.active:after,
#signMultiPer li.active ~ li:after,
#signOnlyPer li.active:after,
#signOnlyPer li.active ~ li:after { background: var(--fs-ink-300); }

/* The bar itself: a quiet header rather than a floating shadowed slab. */
.stepByLine {
  background: var(--fs-ink-000);
  border-bottom: 1px solid var(--fs-ink-200);
  box-shadow: none;
}
.stepByLine .backpage { min-height: 44px; display: inline-flex; align-items: center; }

/* Wizard footer: Back is quiet, Continue is the single primary action. */
.footerStep {
  background: var(--fs-ink-000);
  border-top: 1px solid var(--fs-ink-200);
  box-shadow: 0 -2px 8px rgba(24, 39, 75, .06);
  /* 72px minus 2x16px padding leaves 40px, which cannot hold a 44px target.
     The bar is position:fixed, so growing it costs nothing in the flow and
     .footerFix still reserves space below the content. */
  height: auto;
  min-height: 76px;
}
.footerStep .btn {
  height: 44px;
  border-radius: var(--fs-radius-md);
  font-weight: var(--fs-weight-semibold);
  transition: background-color var(--fs-duration-fast) var(--fs-ease),
              box-shadow var(--fs-duration-fast) var(--fs-ease);
}
.footerStep .btnBack { background: var(--fs-ink-000); border: 1px solid var(--fs-ink-300); color: var(--fs-navy-700); }
.footerStep .btnBack:hover { background: var(--fs-navy-100); border-color: var(--fs-navy-500); }
.footerStep .btnNext:hover { background: var(--fs-brand-action-hover); box-shadow: var(--fs-shadow-md); color: var(--fs-ink-000); }
.footerStep .btnDraf { border: 1px solid var(--fs-ink-300); color: var(--fs-navy-700); }
/* uploadfile.jsp's inline style paints Continue #F57C00, which is 2.70:1
   under white text. Same hue, AA-compliant lightness. */
.footerStep .btnNext { background: var(--fs-brand-action); color: var(--fs-ink-000); }
/* btnNext.disabled is toggled by the page script while a file uploads; the
   disabled state had no visual, so the button looked live but did nothing. */
.footerStep .btn:disabled,
.footerStep .btn[disabled] {
  background: var(--fs-ink-200);
  border-color: var(--fs-ink-200);
  color: var(--fs-ink-500);
  cursor: not-allowed;
  box-shadow: none;
}

/* Stepper width follows its labels.
   The legacy sheets pin the lists to 855/955px (four steps) and 366/466px
   (sign-it-myself, two steps). Those widths were sized for the English
   captions; the Malay ones ("Sediakan dan tandatangan") are longer, so the
   floated <li>s no longer fit and step 2 dropped under step 1. Sizing the list
   to its content keeps the steps on one line in every language. The selector
   out-ranks uploadfile.jsp's inline `.stepByLine ul#signOnlyPer` (1,1,1). */
@media (min-width: 641px) {
  body .stepByLine ul#signMultiPer,
  body .stepByLine ul#signOnlyPer {
    width: max-content;
    max-width: none;
  }
  #signMultiPer li,
  #signOnlyPer li { white-space: nowrap; }
}

/* Four labels do not fit at 390px; keep the numbers and the current label. */
@media (max-width: 640px) {
  #signMultiPer li b,
  #signOnlyPer li b { display: none; }
  #signMultiPer li.active b,
  #signOnlyPer li.active b { display: block; }
  .stepByLine ul { width: auto; display: flex; justify-content: center; }
  .stepByLine ul li { padding-right: 44px; }
  .footerStep .btn { width: calc(50% - 8px); }
}

/* =====================================================================
   17b. HOME  (body.fs-home — selectdoc.jsp)
   ---------------------------------------------------------------------
   The page had three problems, all measured against the live screen:

     1. `.boxfile { height: calc(100vh - 324px) }` gave the dropzone more
        than half the viewport for a secondary action.
     2. The four status tiles sat in a 2x2 block of oversized cards.
     3. `.hei2x { height: 200px; overflow: hidden }` capped Recent Documents
        at roughly two rows in a one-third-width column, while
        listDocumentLastest() had already rendered every row into it. The
        list was not short -- it was clipped.

   New order: a compact start band, one row of four status tiles, then
   Recent Documents full width and uncapped.

   SCOPING NOTE. showPageUpfile() turns this same page into the upload step
   by REMOVING `.contentArea` from #panel-selectdoc-body and hiding
   #panel-selectdoc-status. Every rule below is therefore anchored on
   `#panel-selectdoc-body.contentArea`, so it switches itself off the moment
   the page becomes the wizard. Recent Documents also stays inside
   #panel-selectdoc-status for that reason -- moved out, it would remain on
   screen during signing.
   --------------------------------------------------------------------- */

body.fs-home #panel-selectdoc-body.contentArea { padding: var(--fs-space-5) var(--fs-space-5) 0; }

/* --- the start band ---------------------------------------------------- */
body.fs-home #panel-selectdoc-body.contentArea #dropfile.boxfile {
  height: auto;
  min-height: 172px;
  padding: var(--fs-space-4);
  margin-bottom: var(--fs-space-4);
  border-radius: var(--fs-radius-lg);
  border: 1px solid var(--fs-ink-200);
  box-shadow: var(--fs-shadow-sm);
}
body.fs-home #panel-selectdoc-body.contentArea #dropfile.boxfile > .nenupload {
  padding: var(--fs-space-5) var(--fs-space-4);
  border-radius: var(--fs-radius-md);
}
/* The 60px folder illustration was the tallest thing in the band. */
body.fs-home #panel-selectdoc-body.contentArea #dropfile.boxfile > div img { width: 44px; height: 44px; margin-bottom: var(--fs-space-3); }
body.fs-home #panel-selectdoc-body.contentArea #dropfile.boxfile > div strong { font-size: var(--fs-text-lg); margin-bottom: var(--fs-space-1); }

/* --- status tiles + recent documents ----------------------------------
   Source order inside the section is [tiles A][tiles B][recent]. The two
   tile wrappers are display:contents so their four .box children become
   grid items directly -- that is what turns a 2x2 block into one row of
   four without touching the markup those wrappers exist for. */
body.fs-home #panel-selectdoc-body.contentArea #panel-selectdoc-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fs-space-3);
  align-items: start;
}
body.fs-home #panel-selectdoc-body.contentArea #panel-selectdoc-status > div:nth-child(1),
body.fs-home #panel-selectdoc-body.contentArea #panel-selectdoc-status > div:nth-child(2) { display: contents; }
body.fs-home #panel-selectdoc-body.contentArea #panel-selectdoc-status > div:nth-child(3) { grid-column: 1 / -1; float: none; width: auto; margin: 0; }

body.fs-home #panel-selectdoc-body.contentArea #panel-selectdoc-status .box {
  margin-bottom: 0;
  min-height: 0;
  border: 1px solid var(--fs-ink-200);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-sm);
  transition: box-shadow var(--fs-duration-fast) var(--fs-ease),
              border-color var(--fs-duration-fast) var(--fs-ease);
}
body.fs-home #panel-selectdoc-body.contentArea #panel-selectdoc-status .box:has(.icon):hover {
  border-color: var(--fs-brand-border);
  box-shadow: var(--fs-shadow-md);
}

/* Compact tile: 20px/32px padding and a 52px medallion made each one 92px
   tall for a single number. */
body.fs-home #panel-selectdoc-body.contentArea .icon { padding: var(--fs-space-4); }
body.fs-home #panel-selectdoc-body.contentArea .icon img {
  width: 40px;
  height: 40px;
  padding: 10px;
  margin-right: var(--fs-space-3);
}
body.fs-home #panel-selectdoc-body.contentArea .icon:after { display: none; }   /* the coloured hairline edge */
body.fs-home #panel-selectdoc-body.contentArea .icon .span { width: calc(100% - 56px); }
body.fs-home #panel-selectdoc-body.contentArea .icon .span b {
  font-size: var(--fs-text-xl);
  line-height: 28px;
  padding-bottom: var(--fs-space-1);
  margin-bottom: var(--fs-space-1);
  border-bottom: 0;
  color: var(--fs-navy-700);
  font-variant-numeric: tabular-nums;
}
body.fs-home #panel-selectdoc-body.contentArea .icon .span i {
  font-size: var(--fs-text-xs);
  font-weight: var(--fs-weight-semibold);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--fs-ink-600);
  line-height: var(--fs-leading-tight);
}

/* Medallion tints. `.icon.sign img` was a 10% blue -- the accent this design
   reserves for information, competing with the brand. These now match the
   status chips on the document list, so "waiting" means the same colour on
   both screens. */
/* The legacy hover (indexv5.css) is a 0.4s animation set: the ::after fill
   sweeps in a solid colour, the icon inverts, and the number and label
   animate to WHITE (@keyframes chcolor). This layer keeps the card white and
   lifts it by border only, so of that set only the white text was still
   running -- the tile went blank on hover. All three are switched off here;
   the hover is the border change above. */
body.fs-home #panel-selectdoc-body.contentArea .icon:hover::after,
body.fs-home #panel-selectdoc-body.contentArea .icon:hover img,
body.fs-home #panel-selectdoc-body.contentArea .icon:hover .span b,
body.fs-home #panel-selectdoc-body.contentArea .icon:hover .span i {
  animation: none;
}
body.fs-home #panel-selectdoc-body.contentArea .icon:hover .span b { color: var(--fs-navy-700); }
body.fs-home #panel-selectdoc-body.contentArea .icon:hover .span i { color: var(--fs-ink-600); }
body.fs-home #panel-selectdoc-body.contentArea .icon.sign img  { background: var(--fs-brand-action-quiet); }
body.fs-home #panel-selectdoc-body.contentArea .icon.succ img  { background: var(--fs-path-signed-bg); }
body.fs-home #panel-selectdoc-body.contentArea .icon.anoth img { background: var(--fs-path-awaiting-bg); }
body.fs-home #panel-selectdoc-body.contentArea .icon.draf img  { background: var(--fs-path-draft-bg); }

/* --- Recent Documents, uncapped ---------------------------------------- */
body.fs-home #panel-selectdoc-body.contentArea .box.hei2x {
  height: auto;
  min-height: 0;
  /* flow-root, not `overflow: visible`. `.hei2x .group` is float:left, so
     with overflow visible the card collapsed to the height of its heading
     and every row rendered outside the white surface, on the canvas.
     flow-root establishes a block formatting context -- it contains the
     float the way `overflow:hidden` would, without clipping anything. */
  display: flow-root;
  padding: var(--fs-space-2) 0 0;
}
body.fs-home #panel-selectdoc-body.contentArea .box.hei2x .group {
  height: auto;
  overflow: visible;
  padding: 0 var(--fs-space-5) var(--fs-space-2);
}
body.fs-home #panel-selectdoc-body.contentArea .box .subject {
  padding: var(--fs-space-2) var(--fs-space-5) var(--fs-space-3);
  font-size: var(--fs-text-lg);
  color: var(--fs-navy-700);
}
body.fs-home #panel-selectdoc-body.contentArea .hei2x .file {
  padding: var(--fs-space-3) 0 var(--fs-space-3) 30px;
  min-height: 56px;
  background-position: left 18px;
  border-bottom: 1px solid var(--fs-ink-200);
  cursor: pointer;
  transition: background-color var(--fs-duration-fast) var(--fs-ease);
}
body.fs-home #panel-selectdoc-body.contentArea .hei2x .file:last-child { border-bottom: 0; }
body.fs-home #panel-selectdoc-body.contentArea .hei2x .file:hover { background-color: var(--fs-navy-100); }
body.fs-home #panel-selectdoc-body.contentArea .hei2x .file span { width: calc(100% - 150px); }
body.fs-home #panel-selectdoc-body.contentArea .hei2x .file span b {
  font-size: 15px;
  font-weight: var(--fs-weight-semibold);
  color: var(--fs-navy-700);
  margin-bottom: 2px;
}
body.fs-home #panel-selectdoc-body.contentArea .hei2x .file span i {
  font-size: var(--fs-text-xs);
  color: var(--fs-ink-600);
  font-variant-numeric: tabular-nums;
}
/* The status word is an <a> the page positions on the right. It is state,
   so it is drawn as a chip -- matching the document list one screen over. */
body.fs-home #panel-selectdoc-body.contentArea .hei2x .file > a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 12px;
  border-radius: var(--fs-radius-pill);
  font-size: var(--fs-text-xs);
  font-weight: var(--fs-weight-semibold);
  background: var(--fs-path-draft-bg);
  color: var(--fs-path-draft-fg);
  white-space: nowrap;
}
body.fs-home #panel-selectdoc-body.contentArea .no-records {
  padding: var(--fs-space-7) var(--fs-space-5);
  text-align: center;
  color: var(--fs-ink-600);
}
body.fs-home #panel-selectdoc-body.contentArea .no-records span { font-size: var(--fs-text-sm) !important; }  /* beats the inline font-size:10px */

@media (max-width: 1100px) {
  body.fs-home #panel-selectdoc-body.contentArea #panel-selectdoc-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body.fs-home #panel-selectdoc-body.contentArea #panel-selectdoc-status { grid-template-columns: minmax(0, 1fr); }
  body.fs-home #panel-selectdoc-body.contentArea .hei2x .file span { width: 100%; }
  body.fs-home #panel-selectdoc-body.contentArea .hei2x .file > a { position: static; transform: none; margin-top: var(--fs-space-2); }
}

/* =====================================================================
   18. UPLOAD STEP  (uploadfile.jsp, and the dropzone on selectdoc.jsp)
   ---------------------------------------------------------------------
   SigningHub's upload screen is spacious and has one obvious next action.
   The existing markup already has the right pieces -- a #dropfile section,
   a #panel-sign-body-lstfile list and a two-option radio group -- so this
   is presentation only. Every id and every radio name/value is untouched.

   3cdb93d reverted an attribute-selector rule that turned "Drop more
   documents here" bright orange on white (2.70:1). The dropzone heading
   below is deliberately ink, not brand.
   --------------------------------------------------------------------- */

/* The warm canvas, scoped to the wizard bodies. uploadfile.jsp sets
   `body { background:#EFF3F6 }` in its own <style>; the class selector
   here beats a bare element selector without !important. */
body.fs-wizard { background: var(--fs-canvas); }

.ContentUploadPage .TopArea h2 {
  font-size: var(--fs-text-xl);
  line-height: 32px;
  color: var(--fs-navy-700);
}

/* An empty uploaded-files list rendered as a blank card with a border and a
   shadow -- an empty state that looked like a mistake. It appears when the
   page script puts a file in it. */
#panel-sign-body-lstfile:empty { display: none; }

.boxfile {
  height: auto;
  min-height: 232px;
  padding: var(--fs-space-4);
  border-radius: var(--fs-radius-lg);
  border: 1px solid var(--fs-ink-200);
  box-shadow: var(--fs-shadow-sm);
}
.boxfile > .nenupload {
  border: 2px dashed var(--fs-ink-300);
  border-radius: var(--fs-radius-lg);
  background: var(--fs-canvas);
  padding: var(--fs-space-6) var(--fs-space-5);
  transition: border-color var(--fs-duration-fast) var(--fs-ease),
              background-color var(--fs-duration-fast) var(--fs-ease);
}
.boxfile:hover > .nenupload {
  border-color: var(--fs-brand-display);
  background: var(--fs-brand-action-quiet);
}
/* Heading stays ink at 12.6:1. Only the supporting line picks up the accent
   on hover, and it is 14px secondary text on a tinted ground, not a link. */
.boxfile > div strong { color: var(--fs-ink-900); font-size: var(--fs-text-lg); }
.boxfile:hover > .nenupload strong { color: var(--fs-ink-900); }
.boxfile > div strong i { color: var(--fs-brand-action); font-weight: var(--fs-weight-semibold); }
.boxfile > .tailen {
  border: 2px dashed var(--fs-brand-display);
  border-radius: var(--fs-radius-lg);
  background: var(--fs-brand-action-quiet);
}
.boxfile > .tailen strong { color: var(--fs-brand-action); }

/* Uploaded-file rows */
.FileArea {
  border-radius: var(--fs-radius-lg);
  border: 1px solid var(--fs-ink-200);
  box-shadow: var(--fs-shadow-sm);
}
.FileArea .position .item {
  padding: var(--fs-space-3);
  border: 1px solid var(--fs-ink-200);
  border-radius: var(--fs-radius-md);
  min-height: 64px;
}
.FileArea .position .item:hover {
  border: 1px solid var(--fs-brand-display);
  box-shadow: var(--fs-shadow-md);
}
.FileArea .item b { color: var(--fs-navy-700); font-size: 15px; }
.FileArea .position .bgPos {
  border-radius: var(--fs-radius-md);
  background: var(--fs-brand-action-quiet);
  border: 2px dashed var(--fs-brand-display);
  color: var(--fs-brand-action);
}

/* The two journeys presented as selectable cards rather than bare radios --
   SignNow's pattern. The inputs keep display:none and their existing
   name/value; only the <label> is drawn as the card, so the radio group
   still works exactly as before (and the label's `for` still toggles it). */
.boxcheck {
  padding: var(--fs-space-5);
  border-radius: var(--fs-radius-lg);
  border: 1px solid var(--fs-ink-200);
  box-shadow: var(--fs-shadow-sm);
}
.boxcheck .subject { color: var(--fs-navy-700); font-size: var(--fs-text-lg); }
.radioList { display: flex; flex-wrap: wrap; gap: var(--fs-space-3); }
.radioList input[type=radio] + label {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  min-height: 64px;
  margin-bottom: 0;
  padding: var(--fs-space-4) var(--fs-space-4) var(--fs-space-4) 48px;
  border: 1px solid var(--fs-ink-300);
  border-radius: var(--fs-radius-md);
  background-position: 16px center;
  background-color: var(--fs-ink-000);
  font-size: var(--fs-text-base);
  cursor: pointer;
  transition: border-color var(--fs-duration-fast) var(--fs-ease),
              background-color var(--fs-duration-fast) var(--fs-ease);
}
.radioList input[type=radio] + label:hover { border-color: var(--fs-navy-500); background-color: var(--fs-navy-100); }
.radioList input[type=radio]:checked + label {
  border-color: var(--fs-brand-display);
  background-color: var(--fs-brand-action-quiet);
  color: var(--fs-brand-action);
  font-weight: var(--fs-weight-semibold);
  background-position: 16px center;
}
.aNote { font-size: var(--fs-text-sm); color: var(--fs-ink-600); line-height: var(--fs-leading-normal); }

@media (max-width: 640px) {
  .radioList input[type=radio] + label { flex: 1 1 100%; }
}

/* =====================================================================
   19. RECIPIENTS STEP  (recipients.jsp)
   ---------------------------------------------------------------------
   SignNow's recipient clarity: ordered cards, name and email in a readable
   grid, role, a drag handle, a remove control and two obvious add actions.

   The rows are appended by the page's own script, so this is CSS only. The
   dynamic ids -- txtName_N, txtEmail_N, error_txtName_N, delete_N,
   canmove_N, drlRole_N, pos_N, item_N -- are untouched.

   DELIBERATELY NOT TOUCHED: `.item.color_1..color_8`. Those eight border
   colours are the recipient colour key, and sign.jsp paints the PDF field
   for each recipient in the matching colour. Restyling them here would
   break the association between a signer and their fields on the next
   screen -- a correctness issue, not a visual one.
   --------------------------------------------------------------------- */

.ReceiverArea .item {
  border-radius: var(--fs-radius-md);
  border-top: 1px solid var(--fs-ink-200);
  border-bottom: 1px solid var(--fs-ink-200);
  border-left: 1px solid var(--fs-ink-200);
  box-shadow: var(--fs-shadow-sm);
  padding: var(--fs-space-4) var(--fs-space-5);
}
.ReceiverArea .item:hover { box-shadow: var(--fs-shadow-md); }
.ReceiverArea .item label {
  font-size: var(--fs-text-xs);
  font-weight: var(--fs-weight-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fs-ink-600);
}
.ReceiverArea .item input[type=text] {
  min-height: 44px;
  border-radius: var(--fs-radius-md);
  border: 1px solid var(--fs-ink-300);
  background: var(--fs-ink-100);
  font-size: var(--fs-text-base);
  color: var(--fs-ink-900);
}
.ReceiverArea .item input[type=text]:focus {
  outline: none;
  background: var(--fs-ink-000);
  border-color: var(--fs-brand-action);
  box-shadow: 0 0 0 3px var(--fs-brand-action-quiet);
}
/* Validation copy was 10px red inline. 10px is below the readable floor and
   the colour alone carried the meaning; 12px at 4.5:1 with a leading glyph
   fixes both. The inline font-size/colour are written by the page script,
   hence !important on exactly those two properties. */
.ReceiverArea .item .error,
.ReceiverArea .item .error2 {
  font-size: var(--fs-text-xs) !important;
  color: var(--fs-path-declined-fg) !important;
  font-weight: var(--fs-weight-medium);
  margin-top: var(--fs-space-1);
  min-height: 16px;
}
.ReceiverArea .item .error:not(:empty)::before,
.ReceiverArea .item .error2:not(:empty)::before { content: "! "; font-weight: var(--fs-weight-bold); }

.ReceiverArea .item .delete,
.ReceiverArea .item .canmove { border-radius: var(--fs-radius-sm); }
.ReceiverArea .item .delete:hover { background: var(--fs-path-declined-bg); }

/* clear:both matters: .ReceiverArea .position is float:left, so without it
   the two add-actions sat beside the last recipient card and ran off the
   right edge of the page. */
.CTA_Area { display: flex; flex-wrap: wrap; gap: var(--fs-space-3); clear: both; padding-top: var(--fs-space-2); }
.CTA_Area .btn {
  float: none;
  margin-right: 0;
  height: 44px;
  width: auto;
  min-width: 220px;
  border-radius: var(--fs-radius-md);
  border: 1px dashed var(--fs-brand-border);
  color: var(--fs-brand-action);
  font-size: var(--fs-text-sm);
  background-color: var(--fs-ink-000);
  transition: background-color var(--fs-duration-fast) var(--fs-ease),
              border-color var(--fs-duration-fast) var(--fs-ease);
}
.CTA_Area .btn:hover { background-color: var(--fs-brand-action-quiet); border-color: var(--fs-brand-display); }

.CheckArea {
  background: var(--fs-ink-000);
  border: 1px solid var(--fs-ink-200);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-sm);
  padding: var(--fs-space-5);
}
.CheckArea h2 { font-size: var(--fs-text-lg); color: var(--fs-navy-700); margin-top: 0; }
.CheckArea .item { min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: var(--fs-space-2); }
.CheckArea .item i { font-style: normal; font-size: var(--fs-text-sm); color: var(--fs-ink-600); }

/* =====================================================================
   20. REVIEW AND SEND  (sharesummary.jsp)
   ---------------------------------------------------------------------
   SignNow's send-invite pattern: message on the left, what is being sent on
   the right, one unmistakable Send. #txtSubjectMail, #txtContentMail, every
   hidden package/token input and sendEmailSubject() are untouched.
   --------------------------------------------------------------------- */

.fullContent {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-space-5);
  align-items: flex-start;
  padding: var(--fs-space-5);   /* the panels were full-bleed against the
      stepper and the footer -- this page has no .container wrapper */
}
.fullLeft, .fullRight {
  flex: 1 1 420px;
  min-width: 0;
  background: var(--fs-ink-000);
  border: 1px solid var(--fs-ink-200);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-sm);
  padding: var(--fs-space-5);
}
.fullContent .subtitle {
  display: block;
  margin-bottom: var(--fs-space-2);
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-semibold);
  color: var(--fs-navy-700);
}
.fullContent .txt {
  width: 100%;
  min-height: 44px;
  padding: var(--fs-space-3) var(--fs-space-4);
  border: 1px solid var(--fs-ink-300);
  border-radius: var(--fs-radius-md);
  background: var(--fs-ink-100);
  font-family: var(--fs-font);
  font-size: var(--fs-text-base);
  color: var(--fs-ink-900);
}
.fullContent textarea.txt { min-height: 168px; line-height: var(--fs-leading-normal); resize: vertical; }
.fullContent .txt:focus {
  outline: none;
  background: var(--fs-ink-000);
  border-color: var(--fs-brand-action);
  box-shadow: 0 0 0 3px var(--fs-brand-action-quiet);
}
.fullRight .fileList,
.fullRight .userList { margin-bottom: var(--fs-space-5); }

@media (max-width: 900px) {
  .fullLeft, .fullRight { flex: 1 1 100%; }
  .fullRight { max-height: none !important; }   /* beats the inline max-height:90% */
}

/* =====================================================================
   21. Shell polish for the remaining app pages
   ---------------------------------------------------------------------
   Everything that carries the shell benefits from the canvas and the card
   surfaces; these are the smallest rules that make the rest of the product
   look like it belongs to the same system, without reaching into any
   page-specific structure.
   --------------------------------------------------------------------- */

.contline .aDetail,
.contline .aForm {
  border-radius: var(--fs-radius-lg);
  border: 1px solid var(--fs-ink-200);
  box-shadow: var(--fs-shadow-sm);
}
.contline .backpage { min-height: 32px; display: inline-flex; align-items: center; }
.contline .aSubject { color: var(--fs-navy-700); }

/* ---------------------------------------------------------------------
   Back link inside a page header.

   UsersLogin/master.css declares `.backpage { position: absolute; top:16px;
   left:16px }`. That is right for the LOGIN screens it was written for, where
   the link floats over the brand panel. Inner pages load the same stylesheet,
   so the same rule lifted their back link out of the document flow and dropped
   it on top of the <h2> — "Set Your Password" sitting across "Please enter
   your password to proceed", and "Return to the account page" across "Device
   connection (SIC)".

   The markup is already in the right order (link, then heading), so the fix is
   simply to put the link back in flow and let the two stack. Scoped to
   `.contline .TopArea` so the login screens keep the absolute positioning they
   actually want.
   --------------------------------------------------------------------- */
.contline .TopArea { position: relative; }
.contline .TopArea .backpage {
  position: static;
  display: inline-flex;
  float: none;
  top: auto;
  left: auto;
  margin: 0 0 6px 0;
  padding-left: 16px;      /* room for the chevron, not master.css's 32px */
  font-size: 13px;
  color: var(--fs-ink-600, #5a6474) !important;
  background-position: left center;
  background-size: 8px;
}
.contline .TopArea .backpage:hover { color: var(--fs-navy-700, #1b3a6b) !important; }
/* The heading follows the link rather than sharing its line. */
.contline .TopArea h2 { clear: both; margin-top: 0; }


/* --- signature presentation ------------------------------------------- */

/*
   ONE rule for every place a stored signature is shown.

   Signature images were being given an explicit width AND height (the upload
   preview was a literal 170x60), which stretches whatever aspect ratio the user
   actually produced. A signature is a fixed-proportion mark: it may be scaled
   to fit its box and centred in it, and nothing else. The stored PNG is the
   canonical asset -- see resources/core/js/signature-image.js -- so presentation
   here never modifies it.
*/
.fs-sign-frame,
.mysign .sign-preview,
#imgSignatureUpload,
#imgSignatureDraw,
#imgSignatureText {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fs-sign-img,
.mysign .sign-preview img,
img#imgSignatureUpload,
img#imgSignatureDraw,
img#imgSignatureText {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/*
   The redraw control.

   It was a bare 16px reload.svg -- below the ~24px minimum that is comfortable
   with a mouse and far below a finger target. It clears the pad only; the
   PERSISTED default signature is untouched until the user saves a new one.
*/
.clear-signature-pad {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  box-sizing: content-box;
  padding: 8px;                 /* 24 + 2x8 = 40px target */
  border-radius: var(--fs-radius-sm, 4px);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity .12s ease, background-color .12s ease;
}
.clear-signature-pad:hover,
.clear-signature-pad:focus-visible {
  opacity: 1;
  background-color: var(--fs-ink-100, #f1f1f1);
  outline: none;
}
.clear-signature-pad:focus-visible {
  box-shadow: 0 0 0 2px var(--fs-navy-700, #1b3a6b);
}

/* The draw pad's white page. The canvas backing store is transparent so the
   exported PNG carries ink only; the white the signer sees is this. */
canvas#signature-pad { background: #fff; }