/* Dotty Retro DS · box.css */

/* ─────────────────────────────────────────
   4. BOX / PANEL
   Apple.com ~2008: thin grey border, soft float, pinstripe header
   ───────────────────────────────────────── */
.ds-box {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #fff;
  background-image: repeating-linear-gradient(
    to bottom,
    #fff 0px,
    #fff 1px,
    var(--ds-panel-stripe) 1px,
    var(--ds-panel-stripe) 2px
  );
  background-size: 100% 2px;
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow);
  overflow: hidden;
}

.ds-box-quiet {
  border-color: transparent;
  box-shadow: none;
}

.ds-chromeless {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent;
  border-radius: 0;
}

.ds-box-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  color: var(--ds-ink);
  font-size: 13px;
  line-height: 1.5;
  background: transparent;
}
.ds-box-body.ds-lined {
  background-color: #fff;
  background-image: repeating-linear-gradient(
    to bottom,
    #fff 0px,
    #fff 1px,
    var(--ds-panel-stripe) 1px,
    var(--ds-panel-stripe) 2px
  );
  background-size: 100% 2px;
  background-position: 0 0;
}
.ds-box-body > .ds-btn-block {
  margin-top: auto;
}
.ds-box-body.flush { padding: 0; }
.ds-box-body.pad-sm { padding: 12px 14px; }
.ds-box-body.pad-lg { padding: 28px 32px; }

/*
  Header bar — glossy vertical wash + top bevel highlight
  (Aqua toolbar energy, no pinstripes).
*/
.ds-hdr {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid rgba(0, 0, 0, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  background-color: #7a9bb8;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.22) 42%,
    rgba(0, 0, 0, 0.04) 48%,
    rgba(0, 0, 0, 0.14) 100%
  );
}
.ds-hdr-left { justify-content: flex-start; }
.ds-hdr-sm { min-height: 22px; font-size: 11px; padding: 4px 10px; }
.ds-hdr-lg { min-height: 30px; font-size: 13px; padding: 8px 16px; }

.ds-hdr-aqua { background-color: #6a9ec8; }
.ds-hdr-graphite { background-color: #7a7a7a; }
.ds-hdr-sky {
  background-color: #a8c8e4;
  color: #1a3a55;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.ds-hdr-navy { background-color: #3a5a7a; }
.ds-hdr-purple { background-color: #7a5a9a; }
.ds-hdr-pink { background-color: #c07090; }
.ds-hdr-red { background-color: #b05048; }
.ds-hdr-orange { background-color: #c07838; }
.ds-hdr-yellow {
  background-color: #c8a838;
  color: #2a1a00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.ds-hdr-green { background-color: #5a9a48; }
.ds-hdr-teal { background-color: #3a8a7a; }
.ds-hdr-brown { background-color: #8a6040; }

/* Brushed-metal window title bar (matches toolkit toolbar) */
.ds-hdr-window {
  min-height: 30px;
  padding: 10px 16px;
  font-size: 15px;
  color: #222;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid #b0b0b0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);
  background-color: #cfcfcf;
  background-image: linear-gradient(
    to bottom,
    #efefef 0%,
    #d4d4d4 45%,
    #b8b8b8 55%,
    #d0d0d0 100%
  );
}

/*
  Large feature panel — Apple.com ~2010 product hero:
  soft grey frame + light float on the wash canvas.
*/
.ds-box-hero {
  border-color: var(--ds-rule);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow);
}

/*
  Classic ~2008 corner sash ribbon (Apple Store / product grids).
*/
.ds-ribbon {
  position: absolute;
  top: 14px;
  right: -36px;
  z-index: 3;
  width: 128px;
  padding: 5px 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
  transform: rotate(45deg);
  border: 1px solid #7a1820;
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.12) 42%,
      rgba(0, 0, 0, 0.06) 48%,
      rgba(0, 0, 0, 0.12) 100%
    ),
    linear-gradient(to bottom, #e85860, #b02028);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

/* Page-level sash — fixed to the viewport corner */
.ds-ribbon-page {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 40;
  width: 140px;
  height: 140px;
  overflow: hidden;
  pointer-events: none;
}
.ds-ribbon-page .ds-ribbon {
  top: 30px;
  right: -48px;
  width: 180px;
  padding: 7px 0 8px;
  font-size: 11px;
  letter-spacing: 0.03em;
}