/*
 * Dedicated presentation for the manual Déchiffrement view.
 *
 * This stylesheet is loaded after the shared mobile contract so the
 * calculator keeps a compact, readable layout on phones. The calculation
 * and access logic remain in calculatrice.js and on the Edge Function.
 */

#matrixCalculatorPanel.matrix-calculator-panel {
  background: #f5f7fb !important;
  color: #162033 !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  padding: 18px 14px calc(28px + var(--cid-nav-height, 66px) + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 720px) {
  body.matrix-keyboard-open .category-bar {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(130%) !important;
  }
}

#matrixCalculatorPanel.matrix-keyboard-open {
  overscroll-behavior: contain !important;
  scroll-padding-top: 18px !important;
  scroll-padding-bottom: 18px !important;
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)) !important;
}

/*
 * After the result dialog's Continue action, the advanced decoder becomes
 * the only visible step. The ten-number result remains at the top, followed
 * immediately by the manual input and the advanced analysis output.
 */
#matrixCalculatorPanel.matrix-calc-plus-dedicated .matrix-calc-head,
#matrixCalculatorPanel.matrix-calc-plus-dedicated .matrix-calc-social,
#matrixCalculatorPanel.matrix-calc-plus-dedicated .matrix-calc-initial-step {
  display: none !important;
}

#matrixCalculatorPanel.matrix-calc-plus-dedicated .matrix-calc-content {
  gap: 14px !important;
  padding-top: 4px;
}

#matrixCalculatorPanel.matrix-calc-plus-dedicated #matrixCalcOutput {
  order: 1;
  margin-top: 0 !important;
}

#matrixCalculatorPanel.matrix-calc-plus-dedicated #matrixCalcPlusPanel {
  display: flex !important;
  flex-direction: column;
  order: 2;
  margin-top: 0 !important;
}

#matrixCalculatorPanel.matrix-calc-plus-dedicated #matrixCalcPlusOutput {
  order: 2;
}

#matrixCalculatorPanel.matrix-calc-plus-dedicated .matrix-calc-plus-manual {
  order: 3;
}

#matrixCalculatorPanel.matrix-calc-plus-dedicated
  .matrix-calc-plus-manual + div {
  order: 4;
}

#matrixCalculatorPanel .matrix-calc-head,
#matrixCalculatorPanel .matrix-calc-content {
  width: min(100%, 720px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#matrixCalculatorPanel .matrix-calc-head {
  min-height: 34px;
  margin-bottom: 12px !important;
  padding: 0 2px;
}

#matrixCalculatorPanel .matrix-calc-head > div {
  color: #172033 !important;
  font-size: clamp(20px, 5vw, 25px) !important;
  letter-spacing: -.04em;
}

#matrixCalculatorPanel .matrix-calc-content {
  gap: 14px !important;
}

#matrixCalculatorPanel .matrix-calc-social {
  display: flex;
  width: min(100%, 720px);
  min-height: 44px;
  margin: 0 auto 2px;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

#matrixCalculatorPanel #matrixCalcLike {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 8px 13px;
  border: 1px solid #dbe3ef;
  border-radius: 999px;
  background: #fff;
  color: #667085;
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease, transform 160ms ease;
}

#matrixCalculatorPanel #matrixCalcLike svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#matrixCalculatorPanel #matrixCalcLike:hover,
#matrixCalculatorPanel #matrixCalcLike:focus-visible {
  border-color: rgba(23, 105, 224, .35);
  color: #1769e0;
  outline: none;
}

#matrixCalculatorPanel #matrixCalcLike:active {
  transform: scale(.98);
}

#matrixCalculatorPanel #matrixCalcLike.is-liked {
  border-color: rgba(214, 55, 89, .25);
  background: #fff3f5;
  color: #d63759;
}

#matrixCalculatorPanel #matrixCalcLike.is-liked svg {
  fill: currentColor;
}

#matrixCalculatorPanel #matrixCalcLikeCount {
  color: #667085;
  font-size: 12px;
  font-weight: 650;
}

#matrixCalculatorPanel #matrixCalcLikeStatus {
  color: #667085;
  font-size: 11px;
}

#matrixCalculatorPanel label {
  color: #344054 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

#matrixCalculatorPanel #matrixCalcInput {
  display: block;
  width: 100% !important;
  min-height: 148px !important;
  padding: 14px !important;
  border: 1px solid #dbe3ef !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: #172033 !important;
  font: 500 16px/1.55 "Noto Sans", system-ui, sans-serif !important;
  box-shadow: 0 6px 18px rgba(20, 39, 72, .05) !important;
  resize: vertical;
}

#matrixCalculatorPanel input,
#matrixCalculatorPanel textarea {
  max-width: 100% !important;
  min-width: 0 !important;
}

#matrixCalculatorPanel input:focus,
#matrixCalculatorPanel textarea:focus {
  border-color: rgba(23, 105, 224, .55) !important;
  box-shadow: 0 0 0 4px rgba(23, 105, 224, .1),
    0 6px 18px rgba(20, 39, 72, .05) !important;
  outline: none !important;
}

#matrixCalculatorPanel #matrixCalcInput::placeholder {
  color: #98a2b3;
}

#matrixCalculatorPanel .matrix-calc-input-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#matrixCalculatorPanel .matrix-calc-field,
#matrixCalculatorPanel .matrix-calc-clear-wrap {
  min-width: 0 !important;
}

#matrixCalculatorPanel .matrix-calc-field label,
#matrixCalculatorPanel .matrix-calc-field-label {
  display: block;
  min-height: 15px;
  margin: 0 0 6px;
  color: #344054 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.15;
}

#matrixCalculatorPanel .matrix-calc-input-row input {
  display: block;
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border: 1px solid #dbe3ef !important;
  border-radius: 11px !important;
  background: #fff !important;
  color: #172033 !important;
  font-size: 16px !important;
  line-height: 1.2;
  box-sizing: border-box;
}

#matrixCalculatorPanel .matrix-calc-input-row input::placeholder {
  color: #98a2b3;
}

#matrixCalculatorPanel .matrix-calc-clear {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid #dbe3ef;
  border-radius: 11px;
  background: #fff;
  color: #667085;
  cursor: pointer;
  font: 750 13px/1.15 "Noto Sans", system-ui, sans-serif;
  white-space: nowrap;
  transition: border-color 160ms ease, background-color 160ms ease,
    color 160ms ease, transform 160ms ease;
}

#matrixCalculatorPanel .matrix-calc-clear:hover,
#matrixCalculatorPanel .matrix-calc-clear:focus-visible {
  border-color: rgba(23, 105, 224, .35);
  background: #f8fbff;
  color: #1769e0;
  outline: none;
}

#matrixCalculatorPanel .matrix-calc-clear:active {
  transform: translateY(1px);
}

#matrixCalculatorPanel #matrixCalcOutput,
#matrixCalculatorPanel #matrixCalcPlusPanel {
  border: 1px solid #e1e7f0 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 6px 18px rgba(20, 39, 72, .04) !important;
}

#matrixCalculatorPanel #matrixCalcOutput > div:first-child,
#matrixCalculatorPanel #matrixCalcPlusTitle {
  color: #172033 !important;
  font-size: 16px !important;
  letter-spacing: -.01em;
}

#matrixCalculatorPanel .matrix-calc-inline-actions {
  display: flex !important;
  flex: 0 0 auto;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

#matrixCalculatorPanel .matrix-calc-action {
  width: auto !important;
  max-width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 15px !important;
  border-radius: 11px !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  white-space: normal;
  text-align: center;
  box-shadow: 0 5px 12px rgba(20, 39, 72, .08);
}

#matrixCalculatorPanel .matrix-calc-action:active {
  transform: translateY(1px);
}

#matrixCalculatorPanel #matrixCalcStatus,
#matrixCalculatorPanel #matrixCalcPlusStatus {
  min-width: 0;
  color: #667085 !important;
  font-size: 12px !important;
  line-height: 1.35;
}

#matrixCalculatorPanel .matrix-calc-main-actions {
  min-width: 0;
}

#matrixCalculatorPanel #matrixCalcStatus {
  flex: 1 1 180px;
  margin-left: 0 !important;
}

#matrixCalculatorPanel #matrixCalcOutput {
  padding: 14px !important;
}

#matrixCalculatorPanel #matrixCalcList {
  display: block !important;
}

#matrixCalculatorPanel #matrixCalcList > div:first-child {
  margin: 0 0 10px !important;
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

/* Five compact columns on a phone. The ID makes this rule win over the
 * legacy responsive selector that forced every inline grid to one column. */
#matrixCalculatorPanel .matrix-calc-number-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 8px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

#matrixCalculatorPanel .matrix-calc-number {
  width: 100% !important;
  max-width: 64px;
  aspect-ratio: 1;
  height: auto !important;
  min-height: 44px !important;
  margin: 0 auto;
  border: 1.5px solid #1769e0 !important;
  border-radius: 14px !important;
  background: #f8fbff !important;
  color: #1769e0 !important;
  font-size: clamp(15px, 4.8vw, 19px) !important;
  box-shadow: 0 4px 12px rgba(23, 105, 224, .08);
}

#matrixCalculatorPanel #matrixCalcPlusPanel {
  padding: 14px !important;
  border-color: #ead7b7 !important;
  background: #fffaf2 !important;
}

#matrixCalculatorPanel #matrixCalcPlusTitle {
  color: #7a4700 !important;
}

#matrixCalculatorPanel #matrixCalcPlusDescription {
  margin-top: 5px !important;
  color: #795b35 !important;
  font-size: 12px !important;
  line-height: 1.45;
}

#matrixCalculatorPanel .matrix-calc-plus-manual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(171, 103, 0, .14);
}

#matrixCalculatorPanel .matrix-calc-plus-manual label {
  grid-column: 1 / -1;
  color: #684a21 !important;
  font-size: 12px !important;
}

#matrixCalculatorPanel #matrixCalcPlusManualNumbers {
  width: auto !important;
  min-width: 0 !important;
  grid-column: 1;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border: 1px solid #e5cfaa !important;
  border-radius: 11px !important;
  background: #fff !important;
  color: #513100 !important;
  font-size: 16px !important;
  letter-spacing: .02em;
}

#matrixCalculatorPanel .matrix-calc-plus-clear {
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #e5cfaa;
  border-radius: 11px;
  background: transparent;
  color: #8a704d;
  cursor: pointer;
  font: 750 13px/1.15 "Noto Sans", system-ui, sans-serif;
  white-space: nowrap;
  transition: border-color 160ms ease, background-color 160ms ease,
    color 160ms ease;
}

#matrixCalculatorPanel .matrix-calc-plus-clear:hover,
#matrixCalculatorPanel .matrix-calc-plus-clear:focus-visible {
  border-color: #b66a00;
  background: #fff;
  color: #7a4700;
  outline: none;
}

#matrixCalculatorPanel .matrix-calc-plus-manual small {
  grid-column: 1 / -1;
}

#matrixCalculatorPanel #matrixCalcPlusManualNumbers::placeholder {
  color: #a8906d;
  letter-spacing: 0;
}

#matrixCalculatorPanel .matrix-calc-plus-manual small {
  color: #8a704d;
  font-size: 11px;
  line-height: 1.4;
}

#matrixCalculatorPanel #matrixCalcPlus {
  background: #b66a00 !important;
}

#matrixCalculatorPanel #matrixCalcPlus.is-access-active {
  border-color: #2a9a64 !important;
  background: #e5f7ed !important;
  color: #17643f !important;
  box-shadow: 0 5px 12px rgba(42, 154, 100, .14);
}

#matrixCalculatorPanel #matrixCalcPlusStatus {
  flex: 1 1 180px;
  color: #795b35 !important;
}

#matrixCalculatorPanel #matrixCalcPlusOutput {
  margin-top: 12px !important;
  color: #513100;
}

#matrixCalculatorPanel #matrixCalcPlusOutput > div:first-child {
  color: #7a4700 !important;
  margin-bottom: 8px !important;
}

#matrixCalculatorPanel #matrixCalcPlusOutput > div:last-child > div {
  padding: 9px 10px !important;
  border: 1px solid rgba(171, 103, 0, .16) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #513100 !important;
  font-size: 12px !important;
  line-height: 1.4;
}

@media (max-width: 370px) {
  #matrixCalculatorPanel.matrix-calculator-panel {
    padding-left: 11px !important;
    padding-right: 11px !important;
  }

  #matrixCalculatorPanel .matrix-calc-input-row {
    gap: 6px !important;
  }

  #matrixCalculatorPanel .matrix-calc-clear {
    padding-left: 10px;
    padding-right: 10px;
  }

  #matrixCalculatorPanel .matrix-calc-plus-clear {
    padding-left: 10px;
    padding-right: 10px;
  }

  #matrixCalculatorPanel .matrix-calc-number-grid {
    gap: 6px !important;
  }

  #matrixCalculatorPanel .matrix-calc-action {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/*
 * Result dialog
 *
 * The overlay is a sibling of the calculator rather than a child of its
 * scroll surface. That keeps the dialog centered when the virtual keyboard
 * changes the available viewport height.
 */
.matrix-calc-results-modal {
  position: fixed;
  z-index: 3000;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: max(18px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(18px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(8, 20, 45, .54);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.matrix-calc-results-modal[hidden] {
  display: none !important;
}

.matrix-calc-results-dialog {
  width: min(100%, 540px);
  max-width: 100%;
  min-width: 0;
  max-height: min(650px, 100%);
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(20px, 5vw, 30px);
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 24px;
  background: linear-gradient(145deg, #ffffff 0%, #f5f8ff 100%);
  box-shadow: 0 24px 70px rgba(5, 20, 55, .3);
  color: #162033;
}

.matrix-calc-results-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  gap: 14px;
}

.matrix-calc-results-dialog-head > div {
  min-width: 0;
}

.matrix-calc-results-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: #1769e0;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.matrix-calc-results-dialog h2 {
  margin: 0;
  color: #162033;
  font-size: clamp(21px, 5vw, 28px);
  line-height: 1.12;
  overflow-wrap: anywhere;
  text-align: left;
}

.matrix-calc-results-close {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  margin: -3px -3px 0 0;
  padding: 0;
  border: 1px solid #dbe3ef;
  border-radius: 50%;
  background: #fff;
  color: #667085;
  cursor: pointer;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  transition: color 160ms ease, background-color 160ms ease,
    border-color 160ms ease, transform 160ms ease;
}

.matrix-calc-results-close:hover,
.matrix-calc-results-close:focus-visible {
  border-color: rgba(23, 105, 224, .35);
  background: #f5f9ff;
  color: #1769e0;
  outline: none;
}

.matrix-calc-results-close:active {
  transform: scale(.96);
}

.matrix-calc-results-description {
  margin: 15px 0 20px;
  color: #667085;
  font-size: 14px;
  line-height: 1.45;
}

.matrix-calc-results-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.matrix-calc-results-number {
  display: flex;
  min-width: 0;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  border: 1px solid rgba(23, 105, 224, .22);
  border-radius: 15px;
  background: #fff;
  color: #1769e0;
  box-shadow: 0 5px 14px rgba(23, 105, 224, .08);
}

.matrix-calc-results-number strong {
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 900;
  letter-spacing: .015em;
}

.matrix-calc-results-index {
  align-self: flex-start;
  margin-top: 8px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 800;
}

.matrix-calc-results-done {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 22px;
  padding: 11px 16px;
  border: 0;
  border-radius: 13px;
  background: #1769e0;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.2;
  box-shadow: 0 8px 18px rgba(23, 105, 224, .2);
}

.matrix-calc-results-done:hover,
.matrix-calc-results-done:focus-visible {
  background: #0d4db7;
  outline: none;
}

body.matrix-calc-modal-open {
  overflow: hidden !important;
}

@media (max-width: 380px) {
  .matrix-calc-results-modal {
    padding-left: 11px;
    padding-right: 11px;
  }

  .matrix-calc-results-dialog {
    padding: 18px;
    border-radius: 20px;
  }

  .matrix-calc-results-grid {
    gap: 7px;
  }

  .matrix-calc-results-index {
    display: none;
  }
}