@import url("buttons.css");
/* Ovalle Holdings shell · kit 1.5.0
 *
 * One shell for every console we run: the hub, the Decision Desk, the Capital Command Center,
 * COTRADES, the Brandstrive prospect desk, and Quanthera when it has a surface. Same rail, same
 * search bar, same title and row of verbs, same panels, pills, type, radii and hairlines, same
 * light and dark switch. Only the content and the functions differ.
 *
 * Measured from the Mercury platform; the numbers are in 04-CTO/MERCURY-REFERENCE.md.
 *
 * A surface may override the tokens on :root and add its own rules. It must not edit this file.
 * Five copies of a shell is five places to change and four to forget, which is how a wording
 * change reached the letters instantly and never reached the screen.
 */
:root{
  --bg:#F7F8FA; --rail:#FBFCFD; --panel:#FFFFFF;
  --ink:#1E1E2A; --tx2:#5A5A6B; --tx3:#8A8A99;
  --line:#E6E8EE; --line2:#F1F2F6;
  --acc:#2F3B52;            /* Ovalle Holdings slate */
  --acc-ink:#FFFFFF;
  --btn:#2F3B52;            /* Ovalle Holdings slate: the filled button reads as the band's gray-blue, where the band's own #2D2F3B read black at button size (CEO, 21 Oct 2026) */
  --btn-ink:#FFFFFF;
  --btn-sec:#B6A99E;        /* sand carries the second button (CEO, 21 Oct 2026) */
  --btn-sec-ink:#1E1E2A;
  --wash:rgba(112,115,147,.10);
  --mark:#B6A99E;           /* sand, the active marker */
  --logo-light:block; --logo-dark:none;
}
:root[data-theme="dark"]{
  --bg:#171721; --rail:#10101A; --panel:#1C1C28;
  --ink:#FFFFFF; --tx2:#A8A8B8; --tx3:#7C7C8C;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.06);
  --acc:#B6A99E;            /* sand carries the action on dark */
  --acc-ink:#1A1A24;
  --btn:#B6A99E;            /* dark mode's buttons stay sand */
  --btn-ink:#1A1A24;
  --btn-sec:#3A3D4C;        /* dark mode swaps the pair: slate second */
  --btn-sec-ink:#FFFFFF;
  --wash:rgba(180,183,200,.12);
  --mark:#B6A99E;
  --logo-light:none; --logo-dark:block;
}
*{box-sizing:border-box}
html,body{height:100%}
/* text under 19px at 400 with Inter optical sizing (CEO, 22 Oct 2026; BRIDGE-PATTERNS §14) */
html{font-optical-sizing:auto}
body{font-weight:400;margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.55 Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* ---- the shell: a fixed rail, and only the right side scrolls ---- */
/* A sized row, or the rail keeps min-height:auto, grows to its content, and never scrolls on
   its own. Bridge hit exactly that: a rail that would not move on a long menu. */
.app{display:grid;grid-template-columns:268px 1fr;grid-template-rows:minmax(0,1fr);
  min-height:100vh}
.rail{background:var(--rail);border-right:1px solid var(--line);
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:14px 12px 10px;
  min-height:0;overflow-y:auto;overscroll-behavior:contain}
/* and the items keep their height once the rail is allowed to be shorter than its contents */
.rail > *{flex-shrink:0}

/* The page itself does not scroll: the rail is always whole and always where it was, and the
 * content moves under it. Written against :has so that a browser without it simply keeps the
 * older behaviour — the page scrolling as one — rather than losing the scrollbar altogether.
 * It is also why the sign-in pages, which have no .app, are untouched and can still scroll on
 * a short window.
 *
 * Anything that scrolled the window must scroll .main instead. There is one: the hub's filter,
 * returning to the top when All is pressed. */
@media(min-width:861px){
  html:has(.app),body:has(.app){height:100%;overflow:hidden}
  body:has(.app) .app{height:100vh;min-height:0}
  body:has(.app) .rail{position:static;height:100%}
  body:has(.app) .main{height:100vh;overflow-y:auto;overscroll-behavior:contain}
}
.brand{padding:4px 8px 22px}
.brand img{width:148px;height:auto;display:block}
.brand img.l{display:var(--logo-light)} .brand img.d{display:var(--logo-dark)}
.rail nav{display:flex;flex-direction:column;gap:1px;overflow:auto}
/* A group label, in the hub's own form: sentence case and quiet, not a small-caps heading. */
.rail .lbl{font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--tx3);padding:12px 10px 4px}
/* Every item carries an icon, as the hub's sidebar does. A surface supplies the glyphs; the
   kit only leaves the slot, so one console cannot drift to a different size or spacing. */
.rail a.item{display:flex;align-items:center;gap:11px;height:36px;padding:0 10px;
  border-radius:8px;font-size:15px;font-weight:400;color:var(--ink);text-decoration:none;
  transition:background-color .16s ease-out,color .16s ease-out}
.rail a.item > svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--tx2)}
.rail a.item.sub{height:32px;padding-left:38px;font-size:14.5px;color:var(--tx2)}
.rail a.item > span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.rail a.item:hover{background:var(--wash);color:var(--ink)}
.rail a.item.on{background:var(--wash);color:var(--ink)}
.rail a.item.on::before{content:"";position:absolute;margin-left:-14px;width:2px;height:16px;
  background:var(--mark);border-radius:2px}
.rail a.item em{font-style:normal;font-size:12.5px;color:var(--tx3);flex:none}
.railfoot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);display:flex;
  align-items:center;gap:8px;font-size:13px;color:var(--tx3)}
.railfoot .who{flex:1}
.who{font-size:13px;color:var(--tx3);padding-left:10px;overflow:hidden;text-overflow:ellipsis}

/* ---- the one thin bar across the top of the content ---- */
.bar{display:flex;align-items:center;gap:12px;padding:12px 28px;border-bottom:1px solid var(--line)}
/* More specific than the form-input rule below, which would otherwise draw a box around a
   search that is meant to read as part of the bar. */
.bar input[type=text]{flex:1;max-width:460px;height:34px;border:0;background:transparent;
  color:var(--ink);font:400 15px Inter,system-ui,sans-serif;outline:none;padding:0}
.bar svg{width:16px;height:16px;color:var(--tx3);flex:none}
.bar input::placeholder{color:var(--tx3)}
.spacer{flex:1}

/* ---- buttons ----
 * In buttons.css, imported at the top of this file so a surface that loads the shell keeps its
 * buttons without a second link in its head. The hub carries its own chrome, does not load this
 * shell, and links buttons.css itself. One definition either way. */

/* ---- content ---- */
.main{min-width:0}
.pad{padding:30px 28px 72px;max-width:1180px}
h1{font-size:28px;line-height:36px;font-weight:380;letter-spacing:-.012em;margin:0}
.lede{color:var(--tx2);font-size:15px;margin:6px 0 0}
/* Companies as panels, the way Mercury's dashboard holds Accounts and Bill Pay: a header with
   the name and a count, then one row per destination. The name sits on top, so the full width
   belongs to the content. */
/* Columns rather than a grid: a grid makes every panel in a row as tall as the tallest and
   leaves holes under the short ones. Columns pack them. */
.panels{column-count:3;column-gap:12px;margin-top:22px}
section[data-group]{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  overflow:hidden;break-inside:avoid;margin:0 0 12px;display:inline-block;width:100%}
.phead{display:flex;align-items:center;gap:8px;padding:13px 16px 12px}
.phead h2{font-size:15px;font-weight:480;letter-spacing:0;text-transform:none;color:var(--ink);
  margin:0}
.count{margin-left:auto;font-size:12.5px;color:var(--tx3);background:var(--wash);
  border-radius:9999px;padding:2px 9px;line-height:18px}
a.row{display:flex;align-items:flex-start;gap:12px;padding:11px 16px;text-decoration:none;
  border-top:1px solid var(--line2)}
a.row{transition:background-color .16s ease-out,color .16s ease-out}
a.row:hover{background:var(--wash)}
.glyph{width:30px;height:30px;flex:none;margin-top:2px;border-radius:9999px;background:var(--wash);
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:480;
  color:var(--tx2);letter-spacing:.02em}
.rbody{min-width:0;flex:1}
.rbody b{display:block;font-size:15px;font-weight:480;line-height:20px}
/* The line wraps rather than truncates: losing the end of a sentence is worse than a second line. */
.rbody span{display:block;font-size:13px;line-height:18px;color:var(--tx2)}
.rbody i{display:block;font-style:normal;font-size:12px;color:var(--tx3);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chev{flex:none;color:var(--tx3);width:14px;height:14px;margin-top:9px}
a.row:hover .chev{color:var(--tx2)}

/* The row of verbs under the title, as Mercury puts Send and Transfer under the greeting. */
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
/* The row of verbs takes the button as it comes: one spec, no per-place sizes. */
.foot{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);color:var(--tx3);
  font-size:13px}
.none{color:var(--tx3);font-size:15px;padding:28px 0}

/* ---- sign in ---- */
.auth{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.card{width:100%;max-width:400px}
.card .brand{padding:0 0 26px;display:flex;justify-content:center}
.card .brand img{width:184px}
.card h1{font-size:26px;line-height:34px;text-align:center}
.card .lede{text-align:center;margin:8px 0 24px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:26px 24px 22px}
label{display:block;font-size:12.5px;font-weight:400;color:var(--tx2);margin:0 0 6px}
input[type=text],input[type=email],input[type=password]{width:100%;height:44px;border-radius:4px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 13px;
  font:400 15px Inter,system-ui,sans-serif;outline:none}
input:focus{border-color:var(--acc)}
.field{margin-bottom:16px}
/* A sign-in card's action is the width of the fields above it and the height of one, which is
   a form control rather than a pill in a bar. The only place a button is not the two sizes. */
.card form .btn{width:100%;height:44px;font-size:14px;margin-top:4px}
.err{background:var(--wash);border-radius:4px;padding:10px 12px;font-size:14px;margin-bottom:16px}
.alt{text-align:center;font-size:13.5px;color:var(--tx3);margin:18px 0 0}
.themeline{text-align:center;margin-top:22px}
@media(max-width:1240px){.panels{column-count:2}}
@media(max-width:860px){
  .panels{column-count:1}
  .app{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
    border-right:0;border-bottom:1px solid var(--line);padding:12px}
  .rail nav{flex-direction:row;flex-wrap:wrap;gap:4px}
  .rail .lbl{display:none} .railfoot{margin:0;border:0;padding:0}
  .pad{padding:22px 16px 56px}
}

/* A destination whose figures are not current says so on its own row. Quieter than the name,
   plainer than a warning: it is a fact about the data, not an alarm. */
.rbody b .asat{display:inline-block;font-style:normal;font-size:11px;font-weight:400;
  line-height:16px;color:var(--tx3);background:var(--wash);border-radius:9999px;
  padding:0 8px;margin-left:8px;vertical-align:1px}

/* ---- inside the hub ----
 * A console opened in the hub's right-hand panel is the content, not the application: the hub
 * is already carrying the rail, the bar and the account. The surface keeps every one of its own
 * rules; it only stops drawing the chrome that would be drawn twice.
 */
:root[data-embed] .rail{display:none}
:root[data-embed] .app{grid-template-columns:1fr}
:root[data-embed] .bar{display:none}
:root[data-embed] .main{height:100vh}

/* Motion, as measured on Mercury and ruled 21 Oct: 160ms ease-out on background and color, 140 on
   opacity and filter, and nothing else ever moves. Width, height and position stay still. */
.item,.pill,.chip,.seg span,.ib,button,.tab{transition:background-color .16s ease-out,
  color .16s ease-out,border-color .16s ease-out,transform .16s ease-out,opacity .14s ease-out,
  filter .14s ease-out}