/* Copyright (c) 2026 Datum Investment Solutions, LLC. All rights reserved.
   Proprietary and confidential. See LICENSE at the repository root. */

/* =====================================================================
   nav.css  |  the application rail
   ===================================================================== */
/* One width, named once. It was written out at 196px in five places and
   54px in four more, so the collapsed state could not be added without
   copying all nine. */
body{--railw:196px}
body.railmini{--railw:54px}

.rail{position:fixed;left:0;top:0;bottom:0;width:var(--railw);z-index:1400;
  background:#14202c;color:#c8d6e2;display:flex;flex-direction:column;gap:2px;
  padding:14px 10px 12px;transition:width .14s ease}
body.railmini .rail{padding:12px 7px}
body.hasrail{padding-left:var(--railw)}
/* The rail carries identity, sign in/out and favorites now, so the
   header's copies of them go. The elements stay in the markup because
   app.js keeps their state and mirrors the count into the rail -- deleting
   them would mean threading "does this element exist" through code that
   has no other reason to care. */
body.hasrail .who #whoami,
body.hasrail .who #signin,
body.hasrail .who #signout,
body.hasrail .who #favtoggle{display:none}
body.hasrail .who:empty,
body.hasrail .who{gap:0}

.rcount{margin-left:auto;background:rgba(255,255,255,.18);border-radius:9px;
  font-size:10.5px;font-weight:700;padding:1px 6px;min-width:18px;text-align:center}
.ri.on .rcount{background:rgba(255,255,255,.28)}
/* RED, for the one badge that is people waiting rather than things kept.
   A neutral pill beside other neutral pills is a number; this has to read
   as a queue from the corner of somebody's eye. Solid rather than a tint,
   so it holds against both the rail's dark ground and the lighter panel
   the active row draws. The colour is stated rather than taken from
   --crit: this sheet renders on a fixed dark ground in either theme, and
   a token that flips with the theme would go pale on one of them. */
.rcount.alert{background:#d64232;color:#fff}

/* THE TOP-RIGHT CLUSTER: favorites, cart, you.
   Three controls that are ABOUT YOU rather than about the application.
   The rail on the left is where you go; this corner is what you are
   carrying and who you are.
   Fixed rather than dropped into a header: three of the six pages have no
   header bar, and a control that appears on half of them is worse than
   one that appears nowhere. z-index above the page and BELOW the detail
   panel's own controls (1001/1002), so it never sits on the close button
   of a listing somebody has open. */
.ucluster{position:fixed;top:11px;right:14px;z-index:900;
  display:flex;align-items:center;gap:9px}

/* ROOM FOR IT. The header bar runs to the right edge of the window and
   this is fixed on top of it, so the marketplace's Search button ended up
   underneath the heart. Three controls at 38px, two 9px gaps and 14px of
   edge is 146; 158 leaves a gap that reads as one. Stated here, next to
   the sizes it is derived from, so the two move together. */
body.hascluster .bar{padding-right:158px}
@media (max-width:560px){ body.hascluster .bar{padding-right:126px} }
/* A guest's corner is a basket and a Sign In chip rather than three
   discs, and the chip is wider than the disc it replaces. */
body.hascluster.guestcluster .bar{padding-right:170px}
@media (max-width:560px){ body.hascluster.guestcluster .bar{padding-right:150px} }

/* The two that carry a count. Quiet by default -- they are always on
   screen, and three loud controls in a corner is a corner nobody reads. */
.uc{position:relative;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;
  background:var(--card,#fff);color:var(--ink2,#43586b);
  border:1px solid var(--line,#d8e3ee);
  box-shadow:0 2px 10px rgba(12,18,24,.10);
  transition:color .15s ease,border-color .15s ease}
.uc:hover{color:var(--accent,#1d6fa8);border-color:var(--accent,#1d6fa8)}
.uc.on{color:var(--accent,#1d6fa8);border-color:var(--accent,#1d6fa8)}
.uc svg{width:19px;height:19px;display:block}

/* SIGN IN, for a guest carrying a cart. The circle beside it is sized for
   a 19px icon, and two words dropped into a 38px disc wrap to two lines
   and spill out of it. This is the same chip made wide enough for words:
   auto width, room at the sides, and no wrapping. */
.uc.ucin{width:auto;height:34px;border-radius:8px;padding:0 12px;
  font-size:13px;font-weight:600;white-space:nowrap;
  color:var(--ink,#0f1c2a)}
.uc.ucin:hover{color:var(--accent,#1d6fa8)}

/* The count rides on the control rather than beside it, so an empty one
   and a full one are the same size and the icons never shift. Red, like
   the Inbox badge, and for the same reason: a number that wants acting on. */
.uc .bcount{position:absolute;top:-3px;right:-3px;margin:0;
  min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:#d64232;color:#fff;font-size:10px;font-weight:700;
  line-height:17px;text-align:center;
  box-shadow:0 0 0 2px var(--card,#fff)}

/* YOU, at the end, against the edge, so the menu has somewhere to hang. */
.ume{position:relative}
.uavatar{width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;padding:0;overflow:hidden;
  background:var(--accent,#1d6fa8);color:#fff;
  font:700 13px/1 inherit;letter-spacing:.02em;
  box-shadow:0 2px 10px rgba(12,18,24,.14)}
.uavatar:hover{filter:brightness(1.08)}
.uavatar img{width:100%;height:100%;object-fit:cover;display:block}

/* Downwards, because this is at the TOP of the screen -- the rail's own
   menu opens upwards for the mirror-image reason. */
.upop{position:absolute;top:46px;right:0;min-width:190px;z-index:1;
  background:var(--card,#fff);border:1px solid var(--line,#d8e3ee);
  border-radius:11px;padding:6px;
  box-shadow:0 10px 30px rgba(12,18,24,.18)}
.upopwho{margin:0;padding:8px 10px 9px;border-bottom:1px solid var(--line,#d8e3ee);
  font-size:13px;font-weight:700;color:var(--ink,#0f1c2a);
  display:flex;flex-direction:column;gap:2px}
.upopwho i{font-style:normal;font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink2,#43586b)}
.upopitem{display:block;width:100%;text-align:left;border:0;background:none;
  font:inherit;font-size:13.5px;color:var(--ink,#0f1c2a);cursor:pointer;
  padding:9px 10px;border-radius:7px;text-decoration:none}
.upopitem:hover{background:var(--bg,#f0f5fa)}
/* Sign out is the one destructive control in here and is named as such
   rather than looking like Profile with different words. */
.upopitem.danger{color:var(--crit,#a8261d);margin-top:4px;
  border-top:1px solid var(--line,#d8e3ee);border-radius:0 0 7px 7px}

/* The detail panel is a full-screen page in its own right and carries its
   own way back. The cluster floating over it would sit beside the close
   button and be pressed by mistake. */
body:has(.detail:not([hidden])) .ucluster{display:none}

/* The system menu at the foot of the rail wears a cog rather than
   initials: it is not a person. */
.ravatar.sysic{background:rgba(255,255,255,.14);font-size:15px}

@media (max-width:560px){
  .ucluster{top:8px;right:10px;gap:7px}
  .uc,.uavatar{width:34px;height:34px}
  .uc svg{width:17px;height:17px}
  .uavatar{font-size:12px}
}}
.ri.on .rcount.alert{background:#e8503f}

/* Everything else on the page assumed it started at the left edge. */
body.hasrail .bar,body.hasrail .scrim{left:var(--railw)}
body.hasrail .detail:not(.full){right:0}
body.hasrail .detail.full{left:var(--railw);width:calc(100% - var(--railw))}
/* The side panel is a 680px column, or 94vw when the screen is smaller
   than that. On a phone 94vw starts 23px from the left edge -- underneath
   a rail that is 54px wide and sits above it, so the rail ate the first
   character of every line. Below the point where the rail is forced to a
   strip, the panel starts where the rail ends. */
@media (max-width:900px){
  body.hasrail .detail:not(.full){left:var(--railw);width:auto}
}
/* THE FROZEN BAR TAKES THE PANEL'S GEOMETRY, because it is fixed rather
   than sticky and so does not inherit it. Every line above that moves
   .detail has to move this too, or the rail sits on top of the thumbnail
   and the first half of the address -- which is exactly what it did. */
body.hasrail .detail.full .dsticky{left:var(--railw);width:calc(100% - var(--railw))}
@media (max-width:900px){
  body.hasrail .detail:not(.full) .dsticky{left:var(--railw);width:auto}
}
body.hasrail .photos,body.hasrail .lightbox{left:var(--railw)}

/* THE HEAD OF THE RAIL: the wordmark and the collapse control, together,
   at the top. The toggle used to sit at the very bottom, under everything
   it hides -- the reasoning being that a control which moves what is above
   it should not itself be above it. That is tidy and wrong: nobody looks
   at the bottom of a menu, and the pointer is already up here. */
.rhead{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0 2px 14px}
.rbrand{display:block;padding:4px 6px;text-decoration:none;flex:1 1 auto;min-width:0}
.rbrand .mark{background:var(--accent);color:#fff;font-weight:700;letter-spacing:.5px;
  border-radius:6px;padding:4px 8px;font-size:13px}

.rgroup{display:grid;gap:2px}
.rsec{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:#6d8296;padding:16px 10px 6px}

.ri{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  color:#c8d6e2;text-decoration:none;font-size:13.5px;border:0;background:none;
  width:100%;text-align:left;font-family:inherit;cursor:pointer}
.ri:hover{background:#1e2f40;color:#fff}
.ri.on{background:var(--accent);color:#fff}
.ric{width:18px;text-align:center;font-size:14px;opacity:.9}
.rit{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.rfoot{margin-top:auto;display:grid;gap:2px;border-top:1px solid #23364a;padding-top:10px}
/* The profile menu sits at the bottom of the rail, so it opens UPWARDS --
   a menu that opens downwards from there is a menu off the screen. */
.rmenu{position:relative}
.rme{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;
  text-decoration:none;color:inherit;width:100%;font:inherit;text-align:left;
  background:transparent;border:0;cursor:pointer}
.rme:hover{background:#1e2f40}
.rme:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.rcaret{margin-left:auto;opacity:.55;font-size:11px;line-height:1}

.rpop{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:40;
  background:#16243a;border:1px solid #2b405a;border-radius:10px;padding:5px;
  box-shadow:0 10px 30px rgba(0,0,0,.45)}
/* Who this menu belongs to. The button below it is a face and a name; this
   is the same name in words, so an open menu is never ambiguous about
   whose it is. */
.rpopwho{margin:0 0 4px;padding:7px 9px 6px;border-bottom:1px solid #23364a;
  font-size:12.5px;font-weight:600;color:#e8eef6}
.rpopwho i{display:block;font-style:normal;font-weight:400;font-size:11px;
  color:#93a7bd;margin-top:1px}
.rpopitem{display:block;width:100%;text-align:left;font:inherit;font-size:13px;
  color:#cfdbe8;background:transparent;border:0;border-radius:7px;
  padding:8px 9px;cursor:pointer;text-decoration:none}
.rpopitem:hover{background:#22364d;color:#fff}
.rpopitem:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Collapsed to a strip of icons there is no room for a name, a role or a
   caret -- but the face is still a button and still opens the menu, so the
   menu itself widens instead of being squeezed to 54px. */
.railmini .rmeta,.railmini .rcaret{display:none}
.railmini .rme{justify-content:center;padding:7px 4px}
.railmini .rpop{left:6px;right:auto;width:190px}
/* The footer is now the only way to the profile page, so it has to be able
   to say when that is where you are. Without it the rail goes blank the
   moment you arrive, which reads as having navigated out of the app. */
.rme.on{background:var(--accent)}
.rme.on .rmeta i{color:rgba(255,255,255,.8)}
/* The initials circle is the same accent as the active row, so on the
   profile page it would disappear into it. Inverted, it stays a face. */
.rme.on .ravatar{background:var(--card);color:var(--accent)}
.ravatar{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:11.5px;font-weight:700;flex:0 0 auto;
  overflow:hidden}
.ravatar img{width:100%;height:100%;object-fit:cover;display:block}
.rmeta{display:grid;min-width:0}
.rmeta b{font-size:12.5px;color:#eaf1f7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rmeta i{font-size:10.5px;color:#7b90a4;font-style:normal;text-transform:capitalize}
.rout{color:#9db0c2}

/* COLLAPSED: a strip of icons. One definition, two reasons to be in it --
   the reader clicked the toggle, or the window is too narrow to spend 196px
   on a menu. nav.js decides which; the CSS does not need to know, and this
   used to be a media query that the toggle would have had to duplicate. */
body.railmini .rit,
body.railmini .rmeta,
body.railmini .rsec,
body.railmini .rbuild{display:none}
/* THE WORDMARK BECOMES A MONOGRAM. `Datum` is 56px wide in a rail that is
   54px, so the collapsed strip cannot hold the whole name -- and shrinking
   the type until it fits gives a mark nobody can read. A single letter is
   what a wordmark is supposed to do at this size, and the <a> carries the
   full name as its label so a screen reader still hears `Datum`. */
.rbrand .mark b{font-weight:700}
/* The company, under the mark, so the two read as one name: Datum /
   Investment Solutions, LLC. It is the header of every page in the
   product, and the entity that owns it belongs there rather than only in
   a copyright line at the bottom of the rail.

   Gone when the rail is collapsed, with the wordmark -- a strip of icons
   has no room for a legal name, and the `D` still stands for it. */
.rlegal{flex:0 0 100%;margin:6px 0 0 3px;font-size:10.5px;letter-spacing:.02em;
  color:var(--mut)}
body.railmini .rlegal{display:none}

.mkmini{display:none}
body.railmini .mkfull{display:none}
body.railmini .mkmini{display:inline}
body.railmini .rbrand .mark{padding:4px 9px;font-size:13px}
body.railmini .ri{justify-content:center;padding:9px 0}
body.railmini .rme{justify-content:center;padding:7px 0}
body.railmini .rcount{position:absolute;top:3px;right:5px;margin:0;font-size:9px;
  padding:0 4px}
body.railmini .ri{position:relative}

/* The toggle. A square button beside the wordmark, so the label can go
   without the control going with it. */
/* Visible at rest, not only on hover. The whole reason it moved up here
   is that people were not finding it; a control that only appears when the
   pointer is already on it solves nothing. */
.rtoggle{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  border:1px solid #26384b;background:#1a2836;color:#a9bccd;font:inherit;
  font-size:12px;cursor:pointer;padding:7px;border-radius:8px;
  width:30px;height:30px}
.rtoggle:hover{background:#25384c;color:#fff;border-color:#33506b}
.rtoggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rtoggle .ric{font-size:15px;line-height:1;transition:transform .14s ease}
/* The word is for the wide rail only; at 54px the chevron is the control. */
.rtoggle .rit{display:none}
body.railmini .rtoggle .ric{transform:rotate(180deg)}
/* Collapsed, the head stacks: mark over chevron, both centerd. */
body.railmini .rhead{flex-direction:column;gap:8px;padding-bottom:10px}
body.railmini .rbrand{flex:0 0 auto;padding:4px 0;text-align:center}

/* ---------- narrow: the rail becomes a drawer ---------- */
/* Below the forced-strip width the expanded rail floats OVER the page
   rather than pushing it, because pushing would leave nothing to read.
   The page keeps its 54px gutter throughout, so nothing reflows when the
   drawer opens and closes. */
.railscrim{display:none}
body.railover .railscrim{display:block;position:fixed;inset:0;z-index:1399;
  background:rgba(10,15,20,.45)}
body.railover .rail{width:196px;box-shadow:2px 0 24px rgba(5,10,15,.5)}
body.railover{padding-left:54px}
body.railover .rhead{flex-direction:row}

/* The build, quietly. It has to be readable when somebody goes looking and
   invisible the rest of the time -- a version number competing with the
   navigation is a version number people learn to stop seeing. */
.rbuild{font-size:10px;color:#8298ac;letter-spacing:.3px;padding:6px 8px 2px;
  font-variant-numeric:tabular-nums;cursor:default}
/* Quieter than the build line, and under it. It is a statement of fact
   that has to be present, not one anybody needs to read twice. */
/* The notices, inside the application. The cover's footer carries all
   six; the three anybody actually looks for are here, because a signed-in
   customer never sees that footer again after the day they signed up. */
.rlaw{display:flex;flex-wrap:wrap;align-items:center;gap:5px;
  font-size:9.5px;padding:0 8px 4px}
.rlaw a{color:#8298ac;text-decoration:none;letter-spacing:.2px}
.rlaw a:hover{color:#cfe0ee;text-decoration:underline}
.rlaw span{color:#4d6274}
body.railmini .rlaw{display:none}
.rown{font-size:9.5px;color:#7d90a2;letter-spacing:.2px;padding:0 8px 6px;cursor:default}
body.railmini .rown{display:none}