/* =========================================================
   DAMA — Cloud appearance set.

   Layout follows a left navigation rail with a light working
   canvas: white cards, a single confident accent, generous
   whitespace and quiet dividers.

   Every colour resolves to a --dama-* token, so the brand
   studio controls the whole surface. Nothing here is hardcoded
   except pure geometry.
   ========================================================= */

/* ---------------------------------------------------------
   Type + shape scaffolding
   --------------------------------------------------------- */
.dama-shell{
  font-family:var(--dama-font-body,'Manrope',Arial,sans-serif);
  font-size:calc(15px * var(--dama-font-scale,1));
  color:var(--dama-ink);
  background:var(--dama-canvas);
}
.dama-shell h1,.dama-shell h2,.dama-shell h3,.dama-shell h4,
.dama-shell .dama-hello,.dama-shell .dama-card-title,
.dama-shell .dama-kpi-tile-value,.dama-shell .dama-money-cell-value{
  font-family:var(--dama-font-display,'Manrope',Arial,sans-serif);
}
.dama-shell .dama-card,
.dama-shell .dama-tx-row,.dama-shell .dama-tx-card,
.dama-shell .dama-task-item,.dama-shell .dama-acct-tile{
  border-radius:var(--dama-radius,18px);
}

/* =========================================================
   SHELL — left navigation rail, main working column
   ========================================================= */
[data-dama-skin="cloud"]{
  display:grid;
  grid-template-columns:var(--dama-rail,258px) minmax(0,1fr);
  grid-template-areas:"nav main";
  align-items:start;
  gap:0;
  min-height:100vh;
  background:var(--dama-canvas);
}

/* ---- The rail ---- */
[data-dama-skin="cloud"] .dama-topbar{
  grid-area:nav;
  position:sticky; top:0;
  display:flex; flex-direction:column; align-items:stretch;
  gap:6px;
  height:100vh; overflow-y:auto;
  padding:26px 16px 20px !important;
  background:var(--dama-nav-bg) !important;
  border:0 !important;
  border-right:1px solid var(--dama-hair) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  z-index:30;
}
[data-dama-skin="cloud"] .dama-brand{
  display:flex; align-items:center; gap:10px;
  padding:0 10px 22px;
}
[data-dama-skin="cloud"] .dama-brand-name{
  font-family:var(--dama-font-display,inherit);
  font-weight:800; font-size:19px; letter-spacing:-.02em;
  color:var(--dama-ink);
}

[data-dama-skin="cloud"] .dama-switcher{
  display:flex; flex-direction:column; align-items:stretch;
  gap:4px; background:transparent; padding:0; border:0;
}
/* The sliding pill has no meaning in a vertical rail */
[data-dama-skin="cloud"] .dama-switcher-pill{ display:none !important; }

[data-dama-skin="cloud"] .dama-switch-btn{
  display:flex; align-items:center; gap:14px;
  width:100%; padding:12px 14px;
  background:transparent; border:0;
  border-radius:14px;
  font-family:inherit; font-size:14.5px; font-weight:600;
  color:var(--dama-nav-item);
  cursor:pointer; text-align:left;
  transition:background .16s ease, color .16s ease;
}
[data-dama-skin="cloud"] .dama-switch-btn .dama-nav-ico{
  flex:none; width:22px; height:22px; display:grid; place-items:center;
}
[data-dama-skin="cloud"] .dama-switch-btn .dama-nav-ico svg{ width:21px; height:21px; }
[data-dama-skin="cloud"] .dama-switch-btn:hover:not(.is-active){
  background:var(--dama-brand-soft);
  color:var(--dama-on-brand-soft);
}
[data-dama-skin="cloud"] .dama-switch-btn.is-active{
  background:var(--dama-nav-active) !important;
  color:var(--dama-on-nav-active) !important;
  box-shadow:0 10px 22px -14px var(--dama-nav-active);
}
[data-dama-skin="cloud"] .dama-switch-btn.is-active svg{ color:var(--dama-on-nav-active); }

/* User controls pinned to the bottom of the rail */
[data-dama-skin="cloud"] .dama-topbar-right{
  margin-top:auto; padding-top:18px;
  border-top:1px solid var(--dama-hair);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
[data-dama-skin="cloud"] .dama-icon-btn{
  width:38px; height:38px; border-radius:11px;
  background:var(--dama-tint); border:0; color:var(--dama-ink-2);
}
[data-dama-skin="cloud"] .dama-icon-btn:hover{
  background:var(--dama-brand-soft); color:var(--dama-on-brand-soft);
}

/* ---- Main column ---- */
[data-dama-skin="cloud"] .dama-view{
  grid-area:main;
  padding:calc(26px * var(--dama-density,1)) calc(30px * var(--dama-density,1));
  gap:calc(18px * var(--dama-density,1));
}
[data-dama-skin="cloud"] .dama-admin-banner{ grid-column:1 / -1; }

/* =========================================================
   CARDS
   ========================================================= */
[data-dama-skin="cloud"] .dama-card{
  background:var(--dama-surface);
  border:1px solid var(--dama-hair);
  border-radius:calc(var(--dama-radius,18px) + 2px);
  box-shadow:0 1px 2px rgba(16,24,20,.04);
  padding:calc(20px * var(--dama-density,1));
}
[data-dama-skin="cloud"] .dama-hello{
  font-weight:800; letter-spacing:-.03em;
  font-size:clamp(1.5rem,2.6vw,2rem);
  color:var(--dama-ink);
}
[data-dama-skin="cloud"] .dama-crumb{ color:var(--dama-muted); font-size:12.5px; }

[data-dama-skin="cloud"] .dama-pill-btn{
  background:var(--dama-surface); border:1px solid var(--dama-hair);
  color:var(--dama-ink-2); border-radius:11px; font-weight:600;
}
[data-dama-skin="cloud"] .dama-pill-btn:hover{
  background:var(--dama-brand-soft); color:var(--dama-on-brand-soft);
  border-color:var(--dama-brand-soft);
}
[data-dama-skin="cloud"] .dama-pill-btn--primary{
  background:var(--dama-brand) !important;
  color:var(--dama-on-brand) !important;
  border:0 !important; border-radius:11px !important;
}

/* =========================================================
   FINANCE — horizontal tab bar
   ========================================================= */
.dama-fintabs{
  display:flex; gap:6px;
  margin:4px 0 18px;
  padding:5px;
  background:var(--dama-tint);
  border-radius:14px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.dama-fintabs::-webkit-scrollbar{ display:none; }
.dama-fintab{
  flex:1 1 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  white-space:nowrap;
  padding:11px 16px;
  border:0; border-radius:10px;
  background:transparent;
  font-family:inherit; font-size:13.5px; font-weight:600;
  color:var(--dama-ink-2);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.dama-fintab svg{ width:17px; height:17px; flex:none; }
.dama-fintab:hover:not(.is-active){ background:var(--dama-brand-soft); color:var(--dama-on-brand-soft); }
.dama-fintab.is-active{
  background:var(--dama-brand); color:var(--dama-on-brand);
  box-shadow:0 8px 18px -12px var(--dama-brand);
}
.dama-fintab-panel{ display:none; }
.dama-fintab-panel.is-active{ display:block; animation:damaFade .2s ease; }
@keyframes damaFade{ from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:none;} }

@media (max-width:820px){
  .dama-fintabs{ padding:4px; gap:4px; }
  .dama-fintab{ flex:0 0 auto; padding:10px 13px; font-size:13px; }
  .dama-fintab .dama-fintab-text{ display:none; }
  .dama-fintab.is-active .dama-fintab-text{ display:inline; }
  .dama-fintab svg{ width:18px; height:18px; }
}

/* =========================================================
   BEHAVIOUR CARDS (financial character read-outs)
   ========================================================= */
.dama-behave-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px;
}
.dama-behave{
  background:var(--dama-surface);
  border:1px solid var(--dama-hair);
  border-radius:calc(var(--dama-radius,18px) + 2px);
  padding:20px; position:relative; overflow:hidden;
}
.dama-behave-head{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.dama-behave-ico{
  width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--dama-brand-soft); color:var(--dama-on-brand-soft);
}
.dama-behave-ico svg{ width:20px; height:20px; }
.dama-behave-title{ font-weight:700; font-size:14.5px; font-family:var(--dama-font-display,inherit); }
.dama-behave-sub{ font-size:11.5px; color:var(--dama-muted); margin-top:1px; }
.dama-behave-verdict{
  font-family:var(--dama-font-display,inherit);
  font-size:20px; font-weight:800; letter-spacing:-.02em; margin-bottom:6px;
}
.dama-behave-note{ font-size:13px; line-height:1.55; color:var(--dama-ink-2); }
.dama-behave-meter{
  height:8px; border-radius:999px; background:var(--dama-tint);
  overflow:hidden; margin:14px 0 8px;
}
.dama-behave-meter i{ display:block; height:100%; border-radius:999px; background:var(--dama-brand); transition:width .5s ease; }
.dama-behave-scale{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--dama-muted); font-weight:600; }
.dama-behave-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
.dama-behave-tag{
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px;
  background:var(--dama-tint); color:var(--dama-ink-2);
}
.dama-behave-tag.--good{ background:var(--dama-pos-soft); color:var(--dama-pos-deep); }
.dama-behave-tag.--bad{ background:var(--dama-neg-soft); color:var(--dama-neg-deep); }
.dama-behave-tag.--warn{ background:var(--dama-warn-soft); color:var(--dama-warn); }

/* =========================================================
   BACKUP — full card, never a dropdown
   ========================================================= */
.dama-backup-card{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.dama-backup-pane{
  border:1px solid var(--dama-hair);
  border-radius:calc(var(--dama-radius,18px) - 2px);
  padding:20px; background:var(--dama-surface-2);
  display:flex; flex-direction:column;
}
.dama-backup-pane h4{
  font-family:var(--dama-font-display,inherit);
  font-size:15px; font-weight:700; margin:0 0 4px;
}
.dama-backup-pane p{ font-size:12.5px; color:var(--dama-muted); line-height:1.55; margin:0 0 14px; }
.dama-backup-ico{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:var(--dama-brand-soft); color:var(--dama-on-brand-soft); margin-bottom:13px;
}
.dama-backup-ico svg{ width:22px; height:22px; }
.dama-backup-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
  gap:8px; margin:4px 0 14px;
}
.dama-backup-stat{
  background:var(--dama-tint); border-radius:11px; padding:9px 11px; min-width:0;
}
.dama-backup-stat b{
  display:block; font-family:var(--dama-font-display,inherit);
  font-size:17px; font-weight:800; line-height:1.15; color:var(--dama-ink);
}
.dama-backup-stat span{
  font-size:10px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--dama-muted); font-weight:700;
}
.dama-backup-drop{
  border:2px dashed var(--dama-hair); border-radius:14px;
  padding:20px; text-align:center; transition:.18s; background:var(--dama-surface);
  margin-bottom:13px;
}
.dama-backup-drop.is-over{ border-color:var(--dama-brand); background:var(--dama-brand-soft); }
.dama-backup-drop input[type="file"]{ max-width:100%; font-size:12px; }
.dama-backup-actions{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.dama-backup-modes{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
@media (max-width:820px){ .dama-backup-card{ grid-template-columns:1fr; } }

/* =========================================================
   Collapsible sections (used sparingly now)
   ========================================================= */
.dama-acc{ margin-top:16px; min-width:0; }
.dama-acc > .dama-acc-body{ min-width:0; }
.dama-acc > .dama-acc-body > *{ margin-top:0 !important; }
.dama-acc-head{
  width:100%; display:flex; align-items:center; gap:14px;
  padding:16px 20px; cursor:pointer; text-align:left;
  background:var(--dama-surface); border:1px solid var(--dama-hair);
  border-radius:var(--dama-radius,18px);
  font-family:inherit; color:var(--dama-ink); transition:.18s;
}
.dama-acc-head:hover{ border-color:var(--dama-brand); }
.dama-acc-icon{
  width:36px; height:36px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--dama-brand-soft); color:var(--dama-on-brand-soft);
}
.dama-acc-icon svg{ width:18px; height:18px; }
.dama-acc-title{ font-weight:700; font-size:15px; font-family:var(--dama-font-display,inherit); }
.dama-acc-sub{ font-size:12px; color:var(--dama-muted); margin-top:2px; }
.dama-acc-meta{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.dama-acc-count{
  background:var(--dama-brand-soft); color:var(--dama-on-brand-soft);
  padding:4px 11px; border-radius:999px; font-size:12px; font-weight:700;
}
.dama-acc-chev{ transition:transform .25s ease; color:var(--dama-muted); flex:none; }
.dama-acc.is-open .dama-acc-chev{ transform:rotate(180deg); }
.dama-acc-body{ display:none; padding-top:14px; }
.dama-acc.is-open .dama-acc-body{ display:block; animation:damaAccIn .22s ease; }
@keyframes damaAccIn{ from{opacity:0;transform:translateY(-5px);} to{opacity:1;transform:none;} }

/* =========================================================
   Advisor band
   ========================================================= */
.dama-advice-band{
  background:var(--dama-surface); border:1px solid var(--dama-hair);
  border-radius:calc(var(--dama-radius,18px) + 4px);
  padding:22px 24px; margin-bottom:18px; position:relative; overflow:hidden;
}
.dama-advice-band::after{
  content:''; position:absolute; inset:0 0 auto auto; width:280px; height:280px;
  background:radial-gradient(circle,var(--dama-brand-soft),transparent 70%);
  transform:translate(40%,-45%); pointer-events:none;
}
.dama-advice-top{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.dama-advice-scores{ display:flex; gap:10px; margin-left:auto; flex-wrap:wrap; }
.dama-score{ text-align:center; padding:10px 16px; border-radius:14px; min-width:88px; background:var(--dama-tint); }
.dama-score b{ display:block; font-size:22px; font-weight:800; font-family:var(--dama-font-display,inherit); line-height:1.1; }
.dama-score span{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--dama-muted); font-weight:700; }
.dama-score.--good b{ color:var(--dama-pos); }
.dama-score.--warn b{ color:var(--dama-warn); }
.dama-score.--bad  b{ color:var(--dama-neg); }
.dama-advice-headline{
  font-family:var(--dama-font-display,inherit); font-size:20px; font-weight:700;
  letter-spacing:-.02em; margin-bottom:5px;
}
.dama-advice-lead{ color:var(--dama-muted); font-size:13.5px; line-height:1.6; max-width:66ch; }
.dama-advice-tabs{ display:inline-flex; gap:3px; background:var(--dama-tint); padding:4px; border-radius:999px; margin:16px 0 12px; }
.dama-advice-tab{
  border:0; background:transparent; padding:7px 16px; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:600; color:var(--dama-muted); transition:.15s;
}
.dama-advice-tab.is-active{ background:var(--dama-brand); color:var(--dama-on-brand); }
.dama-advice-list{ display:flex; flex-direction:column; gap:9px; position:relative; z-index:1; }
.dama-advice-item{
  display:flex; gap:11px; align-items:flex-start;
  padding:12px 14px; border-radius:13px; background:var(--dama-tint);
  font-size:13.5px; line-height:1.55;
}
.dama-advice-item i{ width:7px; height:7px; border-radius:50%; background:var(--dama-brand); flex:none; margin-top:7px; }
.dama-scripture{
  margin-top:14px; padding:14px 16px; border-radius:14px;
  background:var(--dama-brand-soft); border-left:3px solid var(--dama-brand);
  position:relative; z-index:1;
}
.dama-scripture p{ font-size:13.5px; line-height:1.6; font-style:italic; color:var(--dama-ink-2); margin:0 0 5px; }
.dama-scripture b{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dama-brand-deep); }
.dama-advice-foot{
  display:flex; align-items:center; gap:12px; margin-top:14px;
  font-size:11.5px; color:var(--dama-muted); position:relative; z-index:1;
}

/* =========================================================
   Watch feed
   ========================================================= */
.dama-watch-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; }
.dama-watch-card{
  display:block; border-radius:14px; overflow:hidden; text-decoration:none;
  background:var(--dama-surface); border:1px solid var(--dama-hair);
  transition:transform .2s,box-shadow .2s; color:inherit;
}
.dama-watch-card:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -20px rgba(16,24,20,.5); }
.dama-watch-thumb{ position:relative; aspect-ratio:16/9; background:var(--dama-tint); overflow:hidden; }
.dama-watch-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.dama-watch-play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.45));
  opacity:0; transition:opacity .2s;
}
.dama-watch-card:hover .dama-watch-play{ opacity:1; }
.dama-watch-play span{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.94);
  display:grid; place-items:center; color:#111;
}
.dama-watch-meta{ padding:10px 11px; }
.dama-watch-title{
  font-size:12.5px; font-weight:600; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.dama-watch-chan{ font-size:11px; color:var(--dama-muted); margin-top:4px; }

/* =========================================================
   Brand studio
   ========================================================= */
.dama-brand-groups{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:18px; margin-top:16px; }
.dama-brand-group{
  border:1px solid var(--dama-hair); border-radius:14px; padding:15px 16px; background:var(--dama-surface-2);
}
.dama-brand-group h5{
  font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--dama-muted);
  margin:0 0 10px; font-weight:800;
}
.dama-brand-row{ display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--dama-hair); }
.dama-brand-row:last-child{ border-bottom:0; }
.dama-brand-row label{ flex:1; font-size:12.5px; color:var(--dama-ink-2); min-width:0; }
.dama-brand-row input[type="color"]{
  width:34px; height:30px; padding:0; border:1px solid var(--dama-hair);
  border-radius:8px; background:none; cursor:pointer; flex:none;
}
.dama-brand-row input[type="range"]{ width:104px; flex:none; accent-color:var(--dama-brand); }
.dama-brand-row select{
  flex:none; min-width:118px; padding:6px 8px; border-radius:9px;
  border:1px solid var(--dama-hair); background:var(--dama-surface);
  color:var(--dama-ink); font-family:inherit; font-size:12.5px;
}
.dama-brand-val{ font-size:11px; color:var(--dama-muted); width:36px; text-align:right; flex:none; }
.dama-skin-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.dama-skin-card{
  border:2px solid var(--dama-hair); border-radius:16px; padding:14px; cursor:pointer;
  background:var(--dama-surface); text-align:left; font-family:inherit; transition:.18s;
}
.dama-skin-card:hover{ border-color:var(--dama-brand); }
.dama-skin-card.is-active{ border-color:var(--dama-brand); box-shadow:0 0 0 3px var(--dama-brand-soft); }
.dama-skin-swatch{ display:flex; gap:5px; margin-bottom:11px; }
.dama-skin-swatch i{ width:26px; height:26px; border-radius:8px; display:block; border:1px solid var(--dama-hair); }
.dama-skin-name{ font-weight:700; font-size:14px; font-family:var(--dama-font-display,inherit); }
.dama-skin-blurb{ font-size:11.5px; color:var(--dama-muted); line-height:1.5; margin-top:4px; }

/* =========================================================
   RESPONSIVE — rail folds to a top bar, then a drawer
   ========================================================= */
@media (max-width:1100px){
  [data-dama-skin="cloud"]{ --dama-rail:212px; }
  [data-dama-skin="cloud"] .dama-switch-btn{ font-size:13.5px; padding:11px 12px; gap:11px; }
}

@media (max-width:900px){
  [data-dama-skin="cloud"]{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"nav" "main";
    min-height:0;
  }
  [data-dama-skin="cloud"] .dama-topbar{
    height:auto; position:sticky; top:0;
    flex-direction:row; flex-wrap:wrap; align-items:center;
    padding:12px 14px !important;
    border-right:0 !important;
    border-bottom:1px solid var(--dama-hair) !important;
    overflow:visible;
  }
  [data-dama-skin="cloud"] .dama-brand{ padding:0; margin-right:auto; }
  [data-dama-skin="cloud"] .dama-topbar-right{
    margin-top:0; padding-top:0; border-top:0; order:2;
  }
  /* The base stylesheet hides the switcher behind a hamburger that was
     never wired up, which left the app unnavigable on phones. The rail
     is kept visible here as a scrollable row instead — always reachable,
     one less piece of state to go wrong. */
  [data-dama-skin="cloud"] .dama-hamburger{ display:none !important; }
  [data-dama-skin="cloud"] .dama-switcher{
    display:flex !important;
    order:4; flex-direction:row !important; width:100%;
    overflow-x:auto; gap:6px; padding:10px 0 0 !important;
    background:transparent !important; box-shadow:none !important;
    border-radius:0 !important;
    scrollbar-width:none; animation:none !important;
  }
  [data-dama-skin="cloud"] .dama-switch-btn{
    width:auto !important; min-height:44px;
    padding:10px 14px !important; font-size:13.5px !important;
    border-radius:12px !important; justify-content:flex-start !important;
  }
  [data-dama-skin="cloud"] .dama-switcher::-webkit-scrollbar{ display:none; }
  [data-dama-skin="cloud"] .dama-switch-btn{ width:auto; flex:0 0 auto; white-space:nowrap; }
  [data-dama-skin="cloud"] .dama-view{ padding:18px 16px; }
}

@media (max-width:560px){
  [data-dama-skin="cloud"] .dama-view{ padding:14px 12px; }
  [data-dama-skin="cloud"] .dama-switch-btn .dama-nav-label{ display:none; }
  [data-dama-skin="cloud"] .dama-switch-btn.is-active .dama-nav-label{ display:inline; }
  [data-dama-skin="cloud"] .dama-switch-btn{ padding:10px 12px; }
  .dama-advice-scores{ margin-left:0; width:100%; }
  .dama-score{ flex:1; min-width:0; }
  .dama-watch-grid{ grid-template-columns:repeat(2,1fr); }
  .dama-brand-groups{ grid-template-columns:1fr; }
}