/* dashboard-pastel.css
   Dashboard tiles (Signal look): tile accents, status tags, readout panels, meters.
*/

/* ---- dashboard tiles in the Signal look: navy header, paper page, white sheets with a colored top rule ---- */
#screen-contribute:not(.expanded-mode){background:#f1f3ee;}
body:has(#screen-contribute.active:not(.expanded-mode)){background:#f1f3ee;}
.metro-page:not(.expanded-mode){
  color:#0f1a17;
  background:#f1f3ee;
}
.metro-page:not(.expanded-mode) .dashboard-header{
  background:#0f1a17;
  border-bottom:1px solid rgba(163,194,180,.26);
  box-shadow:none;
  color:#f1f3ee;
}
.metro-page:not(.expanded-mode) .dashboard-header .tab-btn{color:#b3bfb8;border-radius:0;font-weight:600;font-size:15px;}
.metro-page:not(.expanded-mode) .dashboard-header .tab-btn:hover,
.metro-page:not(.expanded-mode) .dashboard-header .tab-btn.active{background:#24362f;color:#f1f3ee;}
.metro-page:not(.expanded-mode) .dashboard-header .dashboard-tab-accent,
.metro-page:not(.expanded-mode) .dashboard-header .dashboard-tab-accent.active{background:#f2b33d;color:#0f1a17;box-shadow:none;}
.metro-page:not(.expanded-mode) .brand-mark{box-shadow:none;}
/* phones: the four header buttons share the width equally and shrink with the screen,
   instead of pushing the whole page wider than the phone (it was 348px wide on a 320px screen) */
@media (max-width:620px){
  .dashboard-header{min-width:0;}
  .dashboard-header .dashboard-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:100%;min-width:0;}
  .metro-page:not(.expanded-mode) .dashboard-header .tab-btn{
    min-width:0;padding:8px 2px;text-align:center;
    font-size:clamp(12px,3.9vw,15px);
  }
}
.metro-page:not(.expanded-mode) .metro-grid{gap:14px;padding:6px clamp(2px,1vw,12px) 18px;}
@media (min-width:901px){
  .metro-grid .dashboard-slot{grid-column:var(--desktop-col) / span var(--desktop-col-span,1);grid-row:var(--desktop-row) / span var(--desktop-row-span,1);}
}
@media (max-width:900px){
  .metro-grid .dashboard-slot{grid-column:var(--tablet-col) / span var(--tablet-col-span,1);grid-row:var(--tablet-row) / span var(--tablet-row-span,1);}
}
.metro-page:not(.expanded-mode) .metro-tile{
  --t-soft:#f5f7f3;
  --t-tint:#cad3cd;
  border:1px solid #cad3cd;
  border-top:5px solid var(--t-tint);
  border-radius:0;
  color:#0f1a17;
  overflow:hidden;
  background:#ffffff;
  box-shadow:none;
  transition:transform .15s ease,box-shadow .2s ease,border-color .15s ease,opacity .2s ease;
}
.metro-page:not(.expanded-mode) button.metro-tile:not(:disabled):hover{
  transform:translateY(-2px);
  filter:none;
  border-color:#0f1a17;
  border-top-color:var(--t-tint);
  box-shadow:0 10px 24px rgba(15,26,23,.12);
}
.metro-page:not(.expanded-mode) button.metro-tile:not(:disabled):active{
  transform:translateY(1px);
  box-shadow:none;
}
/* each tile keeps its own accent, now from the Signal set: periwinkle, violet, orange */
.metro-page:not(.expanded-mode) .tile-blue{--t-soft:#dce5df;--t-tint:#6f8d80;}
.metro-page:not(.expanded-mode) .tile-cyan{--t-soft:#dce5df;--t-tint:#a3c2b4;}
.metro-page:not(.expanded-mode) .tile-green{--t-soft:#dce5df;--t-tint:#8aa699;}
.metro-page:not(.expanded-mode) .tile-orange{--t-soft:#f5f7f3;--t-tint:#f2b33d;}
.metro-page:not(.expanded-mode) .tile-purple{--t-soft:#dce5df;--t-tint:#1d6e55;}
.metro-page:not(.expanded-mode) .tile-red{--t-soft:#f5f7f3;--t-tint:#ffc966;}
.metro-page:not(.expanded-mode) .tile-teal{--t-soft:#dce5df;--t-tint:#1d6e55;}
.metro-page:not(.expanded-mode) .tile-slate{--t-soft:#f5f7f3;--t-tint:#0f1a17;}
.metro-page:not(.expanded-mode) .tile-dashboard{--t-soft:#f5f7f3;--t-tint:#f2b33d;}
.metro-page:not(.expanded-mode) .metro-tile p,
.metro-page:not(.expanded-mode) .tile-orange p{color:#44524c;}
.metro-page:not(.expanded-mode) .metro-tile h3{font-weight:700;letter-spacing:-.012em;color:#0f1a17;}
/* locked tiles: same sheet, quieter */
.metro-page:not(.expanded-mode) .tile-locked{
  opacity:.6;
  filter:saturate(.4);
  border-top-color:#cad3cd;
  box-shadow:none;
}
.metro-page:not(.expanded-mode) .tile-dashboard.tile-locked{opacity:1;filter:none;}
/* status lamps replace the big check mark and the "locked" caption */
.metro-page:not(.expanded-mode) .tile-done::before,
.metro-page:not(.expanded-mode) .tile-lock::after{
  position:absolute;
  right:12px;
  top:12px;
  bottom:auto;
  left:auto;
  z-index:2;
  padding:4px 9px 4px 20px;
  border-radius:0;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#0f1a17;
  background:radial-gradient(circle at 10px 50%,#f2b33d 0 3.5px,transparent 4px),#f5f7f3;
  border:1px solid #d6ddd8;
  box-shadow:none;
}
.metro-page:not(.expanded-mode) .tile-done::before{content:"Done";}
.metro-page:not(.expanded-mode) .tile-lock::after{
  content:"Locked";
  color:#44524c;
  background:radial-gradient(circle at 10px 50%,#cad3cd 0 3.5px,transparent 4px),#f5f7f3;
}
.metro-page:not(.expanded-mode) .tile-done.tile-lock::before{display:none;}
.metro-page:not(.expanded-mode) .module-simple.tile-lock::after{right:auto;left:12px;top:auto;bottom:10px;}
/* section labels: soft pills instead of corner ribbons */
.metro-page:not(.expanded-mode) .tile-corner-flag{
  left:12px;
  top:12px;
  width:auto;
  transform:none;
  padding:4px 10px;
  border:1px solid #d6ddd8;
  border-radius:0;
  background:#f5f7f3;
  color:#44524c;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  box-shadow:none;
}
.metro-page:not(.expanded-mode) .module-simple .tile-time{
  right:12px;
  bottom:10px;
  padding:3px 9px;
  border-radius:0;
  background:#f5f7f3;
  font-size:12px;
  color:#44524c;
}
.metro-page:not(.expanded-mode) .tile-cta{
  border:2px solid #0f1a17;
  border-radius:0;
  padding:6px 12px;
  background:transparent;
  color:#0f1a17;
  font-weight:600;
  box-shadow:none;
}
.metro-page:not(.expanded-mode) button.metro-tile:not(:disabled):hover .tile-cta{background:#f2b33d;border-color:#8a5e0e;}
/* a flipped tile: the name and description on top, then a row of buttons that never shrinks
   (Continue or Retake, Last results for a retake, and on phones "Not now"). The text gives way:
   it is clipped and the description hides on short tiles, so the buttons are always in full view. */
.metro-grid .metro-tile.module-preview{justify-content:flex-start;gap:6px;}
.metro-grid .module-preview .tile-preview-text{flex:1 1 auto;min-height:0;overflow:hidden;}
.metro-grid .module-preview .tile-preview-text h3{overflow:hidden;text-overflow:ellipsis;}
.tile-preview-actions{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:auto;flex:0 0 auto;}
.tile-preview-actions .tile-cta{margin-top:0;}
.tile-preview-close{display:none;font-size:14px;font-weight:600;color:#44524c;text-decoration:underline;text-underline-offset:3px;padding:6px 2px;cursor:pointer;}
.tile-preview-results{display:inline-block;white-space:nowrap;font-size:13px;font-weight:600;color:#24362f;text-decoration:underline;text-underline-offset:3px;padding:2px 0;cursor:pointer;}
/* tablets and computers: tiles have a fixed size. The description comes before the name: on a short
   tile the name hides first (the tile's look already says which one it is), then the description
   shortens, and only on the very shortest tiles does it hide too. */
@media (min-width:621px){
  .metro-grid .metro-tile.module-preview{container-type:size;}
  .metro-grid .module-preview .tile-preview-text p{-webkit-line-clamp:4;}
  @container (max-height:170px){
    .metro-grid .module-preview .tile-preview-text h3{display:none;}
    .metro-grid .module-preview .tile-preview-text p{margin-top:0;-webkit-line-clamp:3;}
  }
  @container (max-height:118px){ .metro-grid .module-preview .tile-preview-text p{-webkit-line-clamp:2;} }
  /* (sizes are inside the tile's padding) */
  @container (max-height:80px){ .metro-grid .module-preview .tile-preview-text p{display:none;} }
  @container (max-width:64px){ .metro-grid .module-preview .tile-preview-text p{display:none;} }
}
/* phones: a 1x1 tile (about 80px square) can't hold a sentence and a button, so a flipped tile opens
   full-width over the rows below it, grows to fit its words, and keeps every word full size */
@media (max-width:620px){
  .metro-grid .metro-tile.module-preview.dashboard-slot{
    grid-column:1 / -1 !important;
    grid-row:var(--tablet-row) / span 2 !important;
    align-self:start;height:auto;min-height:100%;
    z-index:4;padding:16px 18px;gap:10px;
    box-shadow:0 14px 34px rgba(15,26,23,.28);
  }
  .metro-grid .module-preview h3{font-size:clamp(18px,5.4vw,22px)!important;white-space:normal;}
  .metro-grid .module-preview p{font-size:clamp(14px,4.1vw,16px)!important;line-height:1.4!important;margin-top:6px;display:block;-webkit-line-clamp:unset;overflow:visible;}
  .metro-page:not(.expanded-mode) .module-preview .tile-cta{font-size:14px;padding:9px 16px;}
  .tile-preview-close{display:inline-block;}
  .tile-preview-results{font-size:14px;}
}
/* readout panels and meters */
.dash-screen{
  display:grid;
  gap:7px;
  padding:10px 12px;
  border-radius:0;
  background:#f5f7f3;
  border:1px solid #d6ddd8;
  box-shadow:none;
  min-width:0;
}
.dash-meter{position:relative;display:block;height:8px;border-radius:0;background:#e1e6e2;}
.dash-meter-fill{position:absolute;left:0;top:0;bottom:0;border-radius:0;background:var(--t-tint,#8aa699);}
.dash-meter-ref{position:absolute;top:-5px;width:3px;height:18px;margin-left:-1.5px;border-radius:0;background:#f2b33d;}
.dash-meter-you{position:absolute;top:-5px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#1d6e55;border:3px solid #fff;box-shadow:0 2px 6px rgba(15,26,23,.28);}
.metro-page:not(.expanded-mode) .metro-tile:not(.tile-wide):not(.tile-large):not(.tile-mega).tile-done::before{content:"";padding:0;width:10px;height:10px;top:14px;right:12px;border:0;background:#f2b33d;box-shadow:0 0 0 3px rgba(242,179,61,.2);}
.dash-ddi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:stretch;margin-top:8px;flex:1;min-height:0;}
.dash-ddi-score{align-content:center;gap:12px;padding:14px 16px;}
.dash-ddi-number{display:flex;align-items:baseline;gap:6px;}
.dash-ddi-number b{font-family:var(--display-font);font-size:clamp(53px,6.4vw,84px);line-height:.86;font-weight:400;letter-spacing:-.03em;color:#0f1a17;font-variant-numeric:tabular-nums;}
.dash-ddi-number small{font-size:13px;font-weight:700;color:#44524c;}
.dash-ddi-note{font-size:12px;line-height:1.35;font-weight:650;color:#44524c;}
.dash-ddi-factors{display:grid;gap:10px;align-content:center;}
.dash-ddi.no-factors{grid-template-columns:minmax(0,1fr)!important;} /* the two factors hidden: the score takes the full width */
.dash-factor{display:grid;gap:7px;padding:10px 12px;border-radius:0;background:#f5f7f3;}
.dash-factor-head{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:700;color:#0f1a17;}
.dash-factor-head b{font-size:15px;font-variant-numeric:tabular-nums;}
.dash-factor-note{font-size:11.5px;line-height:1.3;font-weight:650;color:#44524c;}
.metro-page:not(.expanded-mode) .ddi-tile-footer .tile-note,
.metro-page:not(.expanded-mode) .tile-note{font-weight:700;color:#66756e;}
@media (max-width:900px){
  .dash-ddi{grid-template-columns:1fr 1fr;gap:10px;}
  .dash-ddi-note,.dash-factor-note{display:none;}
}
@media (max-width:620px){
  .metro-page:not(.expanded-mode) .metro-grid{gap:8px;padding:4px 0 12px;}
  .metro-page:not(.expanded-mode) .metro-tile{border-radius:0;}
  .metro-page:not(.expanded-mode) .tile-done::before,
  .metro-page:not(.expanded-mode) .tile-lock::after{right:6px;top:6px;padding:0;width:10px;height:10px;font-size:0;border:0;background:#f2b33d;box-shadow:0 0 0 3px rgba(242,179,61,.2);}
  .metro-page:not(.expanded-mode) .tile-lock::after{background:#cad3cd;box-shadow:none;}
  .metro-page:not(.expanded-mode) .module-simple.tile-lock::after{left:auto;right:6px;top:6px;bottom:auto;}
  .metro-page:not(.expanded-mode) .tile-corner-flag{display:none;}
  .metro-page:not(.expanded-mode) .module-simple.tile-wide h3{font-size:clamp(13px,4vw,16px)!important;}
  .metro-page:not(.expanded-mode) .metro-tile:not(.tile-wide):not(.tile-large):not(.tile-mega).tile-done::before{top:5px;right:5px;width:7px;height:7px;box-shadow:0 0 0 2px rgba(242,179,61,.2);}
  .metro-page:not(.expanded-mode) .metro-tile:not(.tile-wide):not(.tile-large):not(.tile-mega) h3{font-size:clamp(10px,3vw,13px)!important;padding:0 4px!important;white-space:nowrap;overflow:visible;text-overflow:clip;}
  .dash-meter{height:6px;}
  .dash-meter-you{width:12px;height:12px;margin-left:-6px;top:-3px;border-width:2px;}
  .dash-meter-ref{height:12px;top:-3px;}
  .dash-ddi{grid-template-columns:1fr;gap:6px;margin-top:4px;}
  .dash-ddi-score{padding:8px 10px;gap:6px;}
  .dash-ddi-number b{font-size:34px;}
  .dash-ddi-factors{display:none;}
}

/* ---- open vs locked tiles: clear contrast ----
   Open tiles (ready to take, or finished) are solid white sheets with a dark outline, a thick colored
   top edge, and a soft shadow, so they read as pressable. Locked tiles are muted, dashed, and greyed. */
.metro-page:not(.expanded-mode) .metro-tile:not(.tile-locked){
  border:2px solid #0f1a17;
  border-top:7px solid var(--t-tint);
  box-shadow:0 8px 20px rgba(15,26,23,.12);
}
.metro-page:not(.expanded-mode) button.metro-tile:not(.tile-locked):not(:disabled):hover{
  border-color:#0f1a17;
  border-top-color:var(--t-tint);
  box-shadow:0 14px 30px rgba(15,26,23,.2);
}
.metro-page:not(.expanded-mode) .metro-tile.tile-locked,
.metro-page:not(.expanded-mode) .tile-dashboard.tile-locked{
  background:#e4e9e5;
  border:1.5px dashed #a9b6ae;
  border-top:7px solid #cad3cd;
  box-shadow:none;
  opacity:1;
  filter:none;
}
.metro-page:not(.expanded-mode) .metro-tile.tile-locked > *{opacity:.5;filter:grayscale(1);}
.metro-page:not(.expanded-mode) .metro-tile.tile-locked::after{opacity:1;filter:none;}
/* "Take the DDI" while it's waiting to be taken: the one thing to press first */
.metro-page:not(.expanded-mode) .tile-dashboard:not(.tile-locked):not(.tile-done){
  border-color:#8a5e0e;
  border-top:9px solid #f2b33d;
  background:#fffbf0;
  box-shadow:0 10px 26px rgba(242,179,61,.28);
}

/* ---- done vs not done, the same on every tile (DDI, questionnaires, About you, tests) ----
   Not done yet: name and icon in black, black top edge. Done: name and icon in green, green top edge,
   and a small green check in the top-right corner (in place of the old "Done" tag and dot). */
.metro-page:not(.expanded-mode) .metro-tile:not(.tile-locked):not(.tile-done) .dash-icon,
.metro-page:not(.expanded-mode) .metro-tile:not(.tile-locked):not(.tile-done) h3{color:#0f1a17;}
.metro-page:not(.expanded-mode) .metro-tile:not(.tile-locked):not(.tile-done):not(.tile-dashboard){border-top-color:#0f1a17;}
.metro-page:not(.expanded-mode) .metro-tile.tile-done .dash-icon,
.metro-page:not(.expanded-mode) .metro-tile.tile-done h3{color:#1d6e55;}
.metro-page:not(.expanded-mode) .metro-tile.tile-done:not(.tile-locked){border-top-color:#1d6e55;}
.metro-page:not(.expanded-mode) .metro-tile.tile-done::before,
.metro-page:not(.expanded-mode) .metro-tile:not(.tile-wide):not(.tile-large):not(.tile-mega).tile-done::before{
  content:"✓";
  top:10px;right:10px;bottom:auto;left:auto;
  width:22px;height:22px;
  padding:0;
  border:0;
  border-radius:50%;
  display:grid;place-items:center;
  background:#1d6e55;
  color:#ffffff;
  font-size:13px;font-weight:800;line-height:1;
  letter-spacing:0;text-transform:none;
  box-shadow:none;
}
@media (max-width:620px){
  .metro-page:not(.expanded-mode) .metro-tile.tile-done::before,
  .metro-page:not(.expanded-mode) .metro-tile:not(.tile-wide):not(.tile-large):not(.tile-mega).tile-done::before{
    top:5px;right:5px;width:16px;height:16px;font-size:10px;
  }
}

/* Focus: "Long · 5 min" in the top-left corner (stays on phones, unlike the other section labels),
   and, until it unlocks, a padlock note saying it opens after 7 assessments, with progress */
.metro-page:not(.expanded-mode) .tile-long-flag{background:#fff4d6;border-color:#f2b33d;color:#8a5e0e;}
.tile-unlock-note{position:absolute;right:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;background:#f5f7f3;border:1px solid #d6ddd8;color:#24362f;font-size:11px;font-weight:700;line-height:1.2;}
.tile-unlock-note svg{width:12px;height:12px;flex:0 0 auto;fill:currentColor;}
.tile-unlock-note b{font-weight:800;color:#8a5e0e;}
/* the note and the flag stay sharp on a dimmed locked tile */
.metro-page:not(.expanded-mode) .metro-tile.tile-locked > .tile-unlock-note,
.metro-page:not(.expanded-mode) .metro-tile.tile-locked > .tile-long-flag{opacity:1;filter:none;}
@media (max-width:620px){
  .metro-page:not(.expanded-mode) .tile-corner-flag.tile-long-flag{display:inline-block;left:6px;top:6px;padding:2px 6px;font-size:9px;letter-spacing:.04em;}
  .tile-unlock-note{top:auto;bottom:6px;right:6px;padding:2px 6px;font-size:9.5px;gap:4px;max-width:calc(100% - 12px);}
  .tile-unlock-note svg{width:10px;height:10px;}
}