/* ==========================================================================
   FIA Webmail - "Meridian" skin
   Full visual redesign of Roundcube via a CSS-only overlay on Elastic.
   No core files, no skin fork, no JS DOM rewriting. Removing the
   `fia_skin` plugin (or restoring the previous fia.css) restores stock.

   Design language
   - Public-sector "night ops desk": deep ink panes, parchment-dark surfaces,
     a single Sierra Leone green accent. One accent, used everywhere.
   - Distinctive signatures:
       * vertical icon rail (taskmenu) as a slim command bar
       * message list rows as ledger lines with a green read-spine
       * folder rail items as inset "tickets" with unread pills
       * compose window framed like a dispatch slip
   - Off-black (#0f1316 family), never pure black/white. Radius 6px system.
   - Motion: 0.16-0.2s ease on transform/opacity only, reduced-motion safe.
   ========================================================================== */

:root {
  /* surfaces */
  --ink-0: #0d1114;   /* page backdrop            */
  --ink-1: #11161a;   /* deepest pane (rail)      */
  --ink-2: #161c21;   /* pane surface             */
  --ink-3: #1c242b;   /* elevated surface         */
  --ink-4: #232d35;   /* hover / active surface   */
  --line-0: #1e262d;  /* hairline                 */
  --line-1: #2a343d;  /* stronger divider         */

  /* text */
  --tx-0: #e8edef;    /* primary text             */
  --tx-1: #b3bec5;    /* secondary text           */
  --tx-2: #7e8b93;    /* muted text               */

  /* single accent: Sierra Leone green, desaturated for night use */
  --grn-0: #2f8f6b;   /* accent base              */
  --grn-1: #3aa37b;   /* accent bright (text/hover) */
  --grn-2: #1f6b50;   /* accent pressed/deep      */
  --grn-soft: rgb(47 143 107 / 0.14);
  --grn-faint: rgb(47 143 107 / 0.07);

  /* semantic */
  --warn: #d99a3d;
  --err:  #d0604f;
  --ok:   var(--grn-1);

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --sans: "Ubuntu Sans", "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --mono: "Ubuntu Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* rail widths */
  --rail-w: 64px;     /* task icon rail           */
  --folder-w: 240px;  /* folder sidebar           */

  /* letter paper: HTML mail is black-on-light. Dark chrome + dark paper
     = unreadable. Warm grey, never #fff. */
  --paper: #e7e2d6;
  --paper-ink: #1c242b;
}

/* --------------------------------------------------------------------------
   Global canvas
   -------------------------------------------------------------------------- */
html, body {
  background: var(--ink-0) !important;
  color: var(--tx-0) !important;
  font-family: var(--sans) !important;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scrollbar-color: var(--ink-4) var(--ink-1);
  accent-color: var(--grn-0);
}

::selection { background: rgb(47 143 107 / 0.32); color: var(--tx-0); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-1); }
::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 8px; border: 2px solid var(--ink-1); }
::-webkit-scrollbar-thumb:hover { background: var(--line-1); }

html #layout,
html #layout > div,
html #layout-menu,
html #layout-list,
html #layout-content,
html #layout-sidebar,
html .header,
html .footer {
  background: var(--ink-2) !important;
  border-color: var(--line-0) !important;
  color: var(--tx-0) !important;
}

html #layout { background: var(--ink-0) !important; }
html #layout-menu { background: var(--ink-1) !important; }

/* Links */
a { color: var(--grn-1); text-decoration: none; }
a:hover { color: #4cbf92; text-decoration: none; }

/* --------------------------------------------------------------------------
   Typography rhythm inside panes
   -------------------------------------------------------------------------- */
.header-title {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tx-0);
}
.count { color: var(--tx-2); font-family: var(--mono); font-size: 0.82em; }

/* --------------------------------------------------------------------------
   Buttons - one accent, one radius system, tactile press
   -------------------------------------------------------------------------- */
html .btn {
  border-radius: var(--r-md) !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid var(--line-1);
  background: var(--ink-3);
  color: var(--tx-0);
  box-shadow: none !important;
  transition: background 0.16s var(--ease), color 0.16s var(--ease),
              border-color 0.16s var(--ease), transform 0.12s var(--ease);
}
html .btn:active { transform: scale(0.98); }

html .btn.btn-primary,
html button.btn.btn-primary,
html input.btn.btn-primary,
html #rcmloginsubmit {
  background: var(--grn-2) !important;
  border-color: var(--grn-2) !important;
  color: #f2f8f5 !important;
  font-weight: 600;
}
html .btn.btn-primary:hover,
html #rcmloginsubmit:hover {
  background: var(--grn-0) !important;
  border-color: var(--grn-0) !important;
  color: #ffffff !important;
}
html .btn.btn-secondary,
html .btn.btn-link {
  background: transparent !important;
  border-color: var(--line-1) !important;
  color: var(--tx-1) !important;
}
html .btn.btn-secondary:hover,
html .btn.btn-link:hover {
  background: var(--ink-4) !important;
  color: var(--tx-0) !important;
}
html .btn.disabled, html .btn:disabled { opacity: 0.45; }

/* --------------------------------------------------------------------------
   Form controls - flat, inset, clear focus ring
   -------------------------------------------------------------------------- */
html .form-control,
html input[type=text], html input[type=password], html input[type=email],
html input[type=search], html input[type=number], html input[type=file],
html select, html textarea, html .custom-select {
  background: var(--ink-1) !important;
  color: var(--tx-0) !important;
  border: 1px solid var(--line-1) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease), background 0.16s var(--ease);
}
html .form-control:focus,
html input:focus, html select:focus, html textarea:focus, html .custom-select:focus {
  background: var(--ink-1) !important;
  border-color: var(--grn-0) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--grn-soft) !important;
}
html ::placeholder { color: var(--tx-2) !important; opacity: 1; }
html label, html .col-form-label { color: var(--tx-1); font-weight: 500; }

/* visible keyboard focus on everything interactive */
html a:focus-visible, html button:focus-visible, html [tabindex]:focus-visible {
  outline: 2px solid var(--grn-1) !important;
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   Task menu - slim vertical command rail (signature)
   -------------------------------------------------------------------------- */
#layout-menu {
  width: var(--rail-w) !important;
  min-width: var(--rail-w) !important;
  border-right: 1px solid var(--line-0) !important;
  display: flex !important;
  flex-direction: column;
  padding: 10px 0;
  gap: 2px;
}

#taskmenu { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
#taskmenu a {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 46px;
  margin: 0 8px;
  border-radius: var(--r-md) !important;
  color: var(--tx-2) !important;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), transform 0.12s var(--ease);
}
#taskmenu a:before { font-size: 1.25rem !important; line-height: 1; color: currentColor !important; }
#taskmenu a:hover { background: var(--ink-3) !important; color: var(--tx-0) !important; }
#taskmenu a:active { transform: scale(0.94); }

/* selected task: inset ticket + green left spine */
#taskmenu a.selected {
  background: var(--ink-3) !important;
  color: var(--grn-1) !important;
  box-shadow: inset 3px 0 0 var(--grn-0);
}
#taskmenu a.selected:hover { color: #4cbf92 !important; }

/* taskmenu labels are hidden; keep tooltips readable */
#taskmenu a .inner { display: none; }

/* logo in the rail */
body:not(.task-login) #layout-menu #logo,
body:not(.task-login) img#logo {
  display: block;
  margin: 2px auto 8px;
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  object-fit: contain !important;
  padding: 0 !important;
  filter: saturate(0.9);
}

/* menu action (logout/settings cog area) pinned to rail bottom */
#layout-menu #menu { margin-top: auto; }

/* --------------------------------------------------------------------------
   Sidebar (folder rail) - inset "ticket" items, unread pills
   -------------------------------------------------------------------------- */
#layout-sidebar {
  width: var(--folder-w) !important;
  border-right: 1px solid var(--line-0) !important;
  background: var(--ink-1) !important;
}
#layout-sidebar > .header { background: var(--ink-1) !important; border-bottom: 1px solid var(--line-0) !important; }

.folderlist { padding: 6px; }
.folderlist li { margin: 1px 0; }
.folderlist li > a,
.folderlist li > div {
  display: flex !important;
  align-items: center;
  border-radius: var(--r-md) !important;
  padding: 7px 10px !important;
  color: var(--tx-1) !important;
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
  border: 1px solid transparent;
}
.folderlist li > a:hover,
.folderlist li > div:hover { background: var(--ink-3) !important; color: var(--tx-0) !important; }

/* selected folder = inset ticket with green spine */
.folderlist li.selected > a,
.folderlist li.selected > div {
  background: var(--ink-3) !important;
  color: var(--tx-0) !important;
  border-color: var(--line-1) !important;
  box-shadow: inset 3px 0 0 var(--grn-0);
  font-weight: 500;
}

/* unread pill */
.folderlist .unreadcount,
.messagelist .unreadcount {
  background: var(--grn-2) !important;
  color: #eaf5f0 !important;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}

/* quota widget */
.quota-widget { color: var(--tx-2); }
.quota-widget .bar { color: var(--grn-1) !important; }

/* --------------------------------------------------------------------------
   Header / toolbar rows - flat bars with hairline separators
   -------------------------------------------------------------------------- */
#layout-list > .header,
#layout-content > .header,
.header {
  background: var(--ink-2) !important;
  border-bottom: 1px solid var(--line-0) !important;
  min-height: 52px;
}
.footer { background: var(--ink-1) !important; border-top: 1px solid var(--line-0) !important; }

.toolbar { gap: 2px; }
.toolbar a.button,
.menu a {
  border-radius: var(--r-md) !important;
  color: var(--tx-2) !important;
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.toolbar a.button:before,
.menu a:before { color: currentColor !important; }
.toolbar a.button:hover,
.menu a:hover { background: var(--ink-3) !important; color: var(--tx-0) !important; }
.toolbar a.button.selected,
.menu a.selected { color: var(--grn-1) !important; }

/* search bar */
.searchbar {
  background: var(--ink-1) !important;
  border: 1px solid var(--line-1) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden;
}
.searchbar input { color: var(--tx-0) !important; background: transparent !important; border: 0 !important; }
.searchbar a { color: var(--tx-2); }
.searchbar a.selected { color: var(--grn-1) !important; }

/* --------------------------------------------------------------------------
   Message list - ledger rows with green read-spine (signature)
   -------------------------------------------------------------------------- */
#layout-list { background: var(--ink-2) !important; }

.messagelist { background: transparent !important; border-collapse: collapse; }
.messagelist thead th {
  background: var(--ink-2) !important;
  color: var(--tx-2) !important;
  border-bottom: 1px solid var(--line-1) !important;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 10px;
}
.messagelist td {
  color: var(--tx-1) !important;
  border-bottom: 1px solid var(--line-0) !important;
  padding: 9px 10px !important;
  background: transparent !important;
}
.messagelist tr { transition: background 0.12s var(--ease); }
.messagelist tbody tr:hover td { background: var(--ink-3) !important; }
.messagelist tbody tr.selected,
.messagelist tbody tr.focused {
  outline: none !important;
}
.messagelist tbody tr.selected td,
.messagelist tbody tr.focused td {
  background: var(--ink-4) !important;
  color: var(--tx-0) !important;
  box-shadow: none !important;
  outline: none !important;
}
.messagelist tbody tr.selected td:first-child,
.messagelist tbody tr.focused td:first-child {
  box-shadow: inset 3px 0 0 var(--grn-0) !important;
}

/* unread = brighter text + green spine, no bold-everything */
.messagelist tr.unread td { color: var(--tx-0) !important; }
.messagelist tr.unread td.subject {
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--grn-0);
}
.messagelist tr.flagged td .flag span:before,
.messagelist span.flagged:before,
a.button.flag.flagged { color: var(--warn) !important; }

.messagelist td.subject .date { color: var(--tx-2); font-family: var(--mono); font-size: 0.78rem; }

/* list selection/status bars */
#listcontrols, .pagenav { color: var(--tx-2) !important; }
.pagenav a { color: var(--tx-2) !important; }
.pagenav a:hover { color: var(--tx-0) !important; }

/* --------------------------------------------------------------------------
   Message reading pane - comfortable measure, framed header
   -------------------------------------------------------------------------- */
#layout-content,
#mailview-bottom, #mailview-right,
#message-content {
  background: var(--ink-2) !important;
  border-color: var(--line-0) !important;
}

#message-header,
.message-headers,
.headers-table {
  background: var(--ink-1) !important;
  border-bottom: 1px solid var(--line-0) !important;
  color: var(--tx-1) !important;
}
.message-headers .header-title { color: var(--tx-0); font-size: 1.05rem; }
.message-headers .subject { font-weight: 600; color: var(--tx-0); }

/* Elastic dark mode keeps HTML mail on a light canvas so Date/Word
   inline color:#000 stays readable (github.com/roundcube/roundcubemail/issues/8964).
   We used to paint this pane ink — black text on black. Paper, not #fff. */
#messagebody,
.message-part,
.message-htmlpart,
.message-htmlpart div.rcmBody,
.iframebox,
#messagecontframe {
  background: var(--paper) !important;
  color: var(--paper-ink) !important;
}

html.iframe,
html.iframe body,
html.iframe #layout,
html.iframe #layout > div,
html.iframe #layout-content,
html.iframe #message-content {
  background: var(--paper) !important;
  color: var(--paper-ink) !important;
}

/* remote-content / info banners */
.message .warning, .message .notice, #remote-objects-message {
  background: var(--ink-3) !important;
  border: 1px solid var(--line-1) !important;
  border-left: 3px solid var(--warn) !important;
  border-radius: var(--r-md);
  color: var(--tx-1) !important;
}

/* attachment chips */
.attachmentslist li,
.attachmentslist a,
#attachment-list li {
  background: var(--ink-3) !important;
  border: 1px solid var(--line-1) !important;
  border-radius: var(--r-md) !important;
  color: var(--tx-1) !important;
}
.attachmentslist li:hover, #attachment-list li:hover { background: var(--ink-4) !important; color: var(--tx-0) !important; }

/* --------------------------------------------------------------------------
   Compose - "dispatch slip" framing
   -------------------------------------------------------------------------- */
#compose-content { background: var(--ink-2) !important; }
.compose-headers { background: var(--ink-1) !important; border-bottom: 1px solid var(--line-1) !important; }
#compose-subject, .compose-headers input, .compose-headers select, .compose-headers textarea {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line-0) !important;
  border-radius: 0 !important;
  color: var(--tx-0) !important;
}
#compose-subject:focus, .compose-headers input:focus, .compose-headers textarea:focus {
  border-bottom-color: var(--grn-0) !important;
  box-shadow: none !important;
}
#composebodycontainer, #composebody {
  background: var(--paper) !important;
  color: var(--paper-ink) !important;
}
#composestatusbar { background: var(--ink-1) !important; border-top: 1px solid var(--line-0) !important; color: var(--tx-2); }

/* --------------------------------------------------------------------------
   Settings / addressbook / misc tasks
   -------------------------------------------------------------------------- */
.task-settings #layout-list,
.task-addressbook #layout-list { background: var(--ink-1) !important; }

.settings-list li a, .contactlist td { color: var(--tx-1) !important; }
.settings-list li.selected a, .contactlist tr.selected td { color: var(--tx-0) !important; background: var(--ink-3) !important; }

.formcontent fieldset { border: 1px solid var(--line-0) !important; border-radius: var(--r-lg); padding: 16px; margin-bottom: 16px; }
.formcontent legend { color: var(--tx-1); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 0 8px; }
.formbuttons { border-top: 1px solid var(--line-0); padding-top: 14px; }

table.propform td, table.propform th { border-color: var(--line-0) !important; }

/* --------------------------------------------------------------------------
   Popups, dialogs, toasts - elevated ink panels, no neon shadow
   -------------------------------------------------------------------------- */
.popup, .popover, .ui-dialog, .ui-widget-content, .popupmenu, .googie_menu {
  background: var(--ink-3) !important;
  color: var(--tx-0) !important;
  border: 1px solid var(--line-1) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.45) !important;
}
.ui-dialog .ui-dialog-titlebar {
  background: var(--ink-1) !important;
  color: var(--tx-0) !important;
  border-bottom: 1px solid var(--line-0) !important;
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
}
.popupmenu a, .googie_menu a { color: var(--tx-1) !important; border-radius: var(--r-sm); }
.popupmenu a:hover, .googie_menu a:hover { background: var(--ink-4) !important; color: var(--tx-0) !important; }
.popupmenu a.active, .popupmenu a.selected { color: var(--grn-1) !important; }

#messagestack div, .ui.alert {
  background: var(--ink-3) !important;
  color: var(--tx-0) !important;
  border: 1px solid var(--line-1) !important;
  border-left-width: 3px;
  border-radius: var(--r-md) !important;
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.4) !important;
}
#messagestack div.confirmation { border-left-color: var(--ok) !important; }
#messagestack div.error, #messagestack div.warning { border-left-color: var(--err) !important; }
#messagestack div.notice { border-left-color: var(--warn) !important; }

/* loading spinner stays neutral */
#loadingbar, .loadingbar { background: var(--ink-3) !important; color: var(--tx-1) !important; border: 1px solid var(--line-1) !important; }

/* --------------------------------------------------------------------------
   Login - split dispatch-gate screen (kept from prior pass, tuned)
   -------------------------------------------------------------------------- */
body.task-login { min-height: 100vh; min-height: 100dvh; background: var(--ink-0) !important; }
.task-login #layout-menu, .task-login .header, .task-login .footer { display: none !important; }

.task-login #layout,
.task-login #layout-content {
  background: var(--ink-0) !important;
  min-height: 100vh; min-height: 100dvh;
  height: 100%; max-width: none !important; padding: 0 !important;
}
.task-login #layout { display: flex !important; flex-direction: column; }
.task-login #layout-content { flex: 1 1 auto; }

.task-login #layout-content.selected {
  display: grid !important;
  grid-template-columns: 1fr;
  align-items: stretch;
  text-align: left !important;
}
@media (min-width: 768px) {
  .task-login #layout-content.selected {
    grid-template-columns: minmax(300px, 40vw) minmax(0, 1fr);
  }
}

/* brand rail: flat ink panel + faint seal halo (flat, not gradient slop) */
.task-login #layout-content.selected::before {
  content: "";
  grid-column: 1; grid-row: 1;
  background: var(--ink-1);
  border-right: 1px solid var(--line-0);
  background-image: radial-gradient(ellipse 60% 46% at 50% 46%, var(--grn-faint), transparent 70%);
}

.task-login img#logo, .task-login .fia-rail {
  position: static !important; top: auto !important;
  grid-column: 1; grid-row: 1; z-index: 1;
  margin: 0; max-height: none !important;
  width: auto !important; height: auto;
  background: transparent; border: 0;
}
.task-login .fia-rail {
  display: flex !important;
  flex-direction: column; justify-content: center; align-items: center;
  padding: 2.5rem 2rem;
}
.task-login .fia-brand { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; max-width: 100%; }

.task-login img#logo,
.task-login .fia-seal,
.task-login .fia-rail img.fia-seal {
  display: block !important;
  width: 240px; max-width: 80%; height: auto; max-height: 60vh;
  object-fit: contain; object-position: center;
  justify-self: center; align-self: center;
  background: transparent; border: 0; padding: 0;
  filter: drop-shadow(0 14px 26px rgb(0 0 0 / 0.5));
}

.task-login .fia-org {
  margin: 0; max-width: 19rem;
  font-size: 0.82rem; line-height: 1.4; letter-spacing: 0.01em;
  text-align: center; color: var(--tx-2); text-wrap: balance;
}

@media (min-width: 768px) {
  .task-login .fia-rail, .task-login #login-form { min-height: 100vh; min-height: 100dvh; }
}
@media (max-width: 767px) {
  .task-login #layout-content.selected::before { border-right: 0; border-bottom: 1px solid var(--line-0); }
  .task-login img#logo, .task-login .fia-rail { padding: 1.1rem 1.25rem; min-height: 0; gap: 0.5rem; }
  .task-login img#logo, .task-login .fia-seal, .task-login .fia-rail img.fia-seal {
    width: 160px; max-width: 52vw; max-height: 32vh;
  }
}

/* login form column */
.task-login #login-form {
  position: static !important; top: 0 !important;
  margin: 0; width: auto; max-width: none;
  display: flex !important; flex-direction: column; justify-content: center; align-items: center;
  align-self: stretch; height: 100%;
  padding: 2.5rem clamp(1.5rem, 7vw, 6rem);
  background: var(--ink-0);
  grid-column: 1; grid-row: 2; z-index: 1;
}
@media (min-width: 768px) { .task-login #login-form { grid-column: 2; grid-row: 1; } }

.task-login #login-form table,
.task-login #login-form .formbuttons,
.task-login #login-form #rcmloginsubmit,
.task-login #login-footer { width: 100%; max-width: 22rem; }

.task-login #login-form tr { display: flex !important; flex-direction: column; margin: 0 0 1.15rem !important; }
.task-login #login-form td.title { display: block !important; width: 100% !important; padding: 0 0 0.4rem !important; }
.task-login #login-form td.title label { color: var(--tx-1); font-size: 0.8rem; font-weight: 500; }
.task-login #login-form td.input { display: block !important; width: 100% !important; padding: 0 !important; }
.task-login #login-form .input-group { display: block !important; width: 100%; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.task-login #login-form .input-group-prepend, .task-login #login-form .input-group-text { display: none !important; }

body.task-login #login-form input,
body.task-login #login-form select,
body.task-login #login-form .form-control { min-height: 2.75rem; width: 100%; }
.task-login #login-form input::placeholder { color: transparent !important; opacity: 0 !important; }

.task-login #rcmloginsubmit { min-height: 2.8rem; margin-top: 0.3rem; width: 100%; max-width: 22rem; }

.task-login #login-footer { color: var(--tx-2) !important; font-size: 0.875rem; margin-top: 1.4rem; text-align: center; }
.task-login #login-footer > div { background: transparent !important; padding: 0 !important; }
.task-login #login-footer a { color: var(--grn-1) !important; }
.task-login .noscriptwarning { color: var(--tx-1); }

/* hide stock watermark in mail view */
body.task-mail #layout-content img#logo,
body.task-mail #layout-content .watermark,
body.task-mail #watermark { display: none !important; }

/* --------------------------------------------------------------------------
   Responsive tightening
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --folder-w: 210px; }
}
@media (max-width: 767px) {
  /* Elastic collapses to a mobile layout; keep rail horizontal-safe */
  #layout-menu { width: 100% !important; min-width: 0 !important; flex-direction: row; justify-content: center; border-right: 0; border-bottom: 1px solid var(--line-0); }
  #taskmenu { flex-direction: row; }
  #taskmenu a { margin: 4px; height: 42px; width: 42px; }
  #taskmenu a.selected { box-shadow: inset 0 -3px 0 var(--grn-0); }
  body:not(.task-login) #layout-menu #logo { margin: 6px 8px; }
}

/* --------------------------------------------------------------------------
   Reduced motion / reduced transparency - hard guarantees
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html *, html *::before, html *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html .btn:active, #taskmenu a:active { transform: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .task-login #layout-content.selected::before { background-image: none; background: var(--ink-1); }
}

/* print: fall back to near-stock light output for reliability */
@media print {
  html, body, #layout, #layout-content, #message-content { background: #fff !important; color: #111 !important; }
}