/* =====================================================================
   Canara Hydraulics – Requirements Matrix – styles

   All colours are plain CSS colour NAMES (no #codes):

     midnightblue  = header band, footer band, headings
     navy          = round shape in the header, logo, main button
     royalblue     = screens (numbers + legend square), version label
     chocolate     = notifications (legend square) – same as the user flow page
     sienna        = notification numbers (a darker chocolate, easy to read in small text)
     darkslateblue = persona icon
     ghostwhite    = card background
     lavender      = small cells and card borders
     whitesmoke    = page behind the sheet
     slategray     = small grey text
   ===================================================================== */

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: whitesmoke;
  color: black;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}


/* ---------- buttons ---------- */
.plain-button,
.main-button {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.plain-button { border: 1px solid gainsboro; background: white; color: black; }
.plain-button:hover { border-color: navy; color: navy; }
.main-button { border: 1px solid navy; background: navy; color: white; }
.main-button:hover { background: darkslateblue; border-color: darkslateblue; }
.main-button:disabled { background: slategray; border-color: slategray; cursor: wait; }


/* ---------- top bar (same look as the user flow page) ---------- */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 12px 20px;
  background: white;
  border-bottom: 1px solid gainsboro;
  box-shadow: 0 2px 10px gainsboro;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: navy;
  color: white;
  font-weight: 800;
  font-size: 15px;
}
.brand h1 { margin: 0; font-size: 18px; font-weight: 700; color: navy; }
.brand-subtitle { font-size: 13px; color: slategray; }

.tools { display: flex; align-items: center; gap: 10px; }


/* ---------- the page behind the sheet ---------- */
.page { padding: 28px 20px 48px; }


/* ---------- the sheet (the document – this is what goes into the PDF) ---------- */
.sheet {
  position: relative;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  overflow: hidden;            /* cuts off the round shape at the sheet edge */
  background: white;
  box-shadow: 0 6px 24px gainsboro;
}


/* ---------- dark header band ---------- */
.sheet-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 34px 40px 30px;
  background: midnightblue;
}

/* the big round shape on the right (decoration). It also hangs a little below the band. */
.sheet-header::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -70px;
  right: -90px;
  width: 290px;
  height: 290px;
  border-radius: 50%;
  background: navy;
}

/* text sits above the round shape */
.sheet-heading,
.version { position: relative; z-index: 1; }

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: lightsteelblue;
}

.sheet-title {
  margin: 10px 0 8px;
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-weight: 700;
  color: white;
}

.sheet-subtitle {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  color: lavender;
}

.version {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.version-pill {
  padding: 8px 22px;
  border-radius: 20px;
  background: royalblue;
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.version-date { font-size: 11px; color: lightsteelblue; }


/* ---------- sections ---------- */
.sheet-section {
  position: relative;
  z-index: 1;                  /* above the round shape */
  padding: 24px 40px 4px;
}

/* "PERSONAS", "RELATIONSHIP MATRIX", "LEGENDS" – underlined headings */
.section-title {
  display: inline-block;
  margin: 0 0 14px;
  padding-bottom: 3px;
  border-bottom: 2px solid midnightblue;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: midnightblue;
}


/* ---------- persona cards ---------- */
.persona-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.persona-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 320px;
  padding: 14px 20px 14px 16px;
  background: ghostwhite;
  border: 1px solid lavender;
  border-radius: 10px;
}
.persona-card b { display: block; font-size: 15px; color: midnightblue; }
.persona-card small { display: block; margin-top: 3px; font-size: 12px; color: slategray; }
.persona-card .persona-counts { font-weight: 600; }

/* person icon made with two shapes: a round head and a rounded body */
.persona-icon {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: 50%;
  background: darkslateblue;
}
.icon-head {
  position: absolute;
  top: 10px;
  left: 16px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
}
.icon-body {
  position: absolute;
  top: 27px;
  left: 11px;
  width: 24px;
  height: 16px;
  border-radius: 12px 12px 4px 4px;
  background: white;
}


/* ---------- relationship matrix: one card per workflow ---------- */
.matrix-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

.matrix-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: ghostwhite;
  border: 1px solid lavender;
  border-radius: 10px;
}

.matrix-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.matrix-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: midnightblue;
}

/* the box on the right: screens (big) and notifications (small, raised) */
.count-badge {
  flex: none;
  min-width: 48px;
  padding: 3px 10px;
  border: 1px solid lightsteelblue;
  border-radius: 8px;
  background: white;
  font-size: 15px;
  text-align: center;
}
.count-badge sup { margin-left: 1px; font-size: 10px; }

/* the row of small cells: one cell per screen */
.cell-row {
  display: flex;
  gap: 6px;
  margin-top: auto;            /* cells sit at the bottom of the card */
}
.cell {
  flex: 1;
  padding: 6px 4px;
  border-radius: 6px;
  background: lavender;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}
.cell-dot { margin: 0 5px; color: slategray; }

/* number colours (also used in the legend and persona card) */
.screen-number { color: royalblue; font-weight: 800; }
.notification-number { color: sienna; font-weight: 800; }


/* ---------- legend ---------- */
.legend { padding: 20px 0 6px; }

.legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-size: 13px;
  font-weight: 600;
  color: midnightblue;
}
.legend-items span { display: inline-flex; align-items: center; gap: 8px; }

.legend-square {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
.screen-square { background: royalblue; }
.notification-square { background: chocolate; }

.legend-help { margin: 10px 0 0; font-size: 12px; color: slategray; }


/* ---------- dark footer band ---------- */
.sheet-footer {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  padding: 14px 40px;
  background: midnightblue;
  color: lavender;
  font-size: 11px;
  text-align: center;
}


/* ---------- PDF: always the full desktop sheet, the same width every time ---------- */
.pdf-capture .sheet { width: 920px; max-width: none; }


/* ---------- phones (760px and below): top bar and page ---------- */
@media (max-width: 760px) {
  .top-bar { flex-wrap: wrap; padding: 10px 16px; }
  .brand-subtitle { display: none; }
  .page { padding: 12px 0 24px; }
}


/* ---------- phones: the sheet ----------
   js/start-matrix.js puts the class "phone-layout" on <body> when the screen is
   760px or narrower. (A class is used instead of @media so that "Download PDF"
   can switch it off for a moment and always save the full desktop sheet.) */
.phone-layout .sheet-header {
  flex-direction: column;
  gap: 14px;
  padding: 26px 18px 22px;
}
.phone-layout .sheet-header::after { top: -90px; right: -110px; width: 220px; height: 220px; }
.phone-layout .sheet-title { font-size: 27px; }
.phone-layout .version { flex-direction: row; margin-top: 0; }

.phone-layout .sheet-section { padding: 20px 16px 4px; }
.phone-layout .persona-card { min-width: 0; width: 100%; }
.phone-layout .matrix-grid { grid-template-columns: 1fr; }
.phone-layout .sheet-footer { padding: 14px 16px; }