/*
========================================
COLORS
========================================
*/

:root {
  --primary: #760031;
  --secondary: #d51c39;
  --highlight: #ff5a63;

  --dark-base: #050203;
  --dark-accent: #2a000d;

  --ivory: #fff8f8;
  --white: #ffffff;

  --text-main: #21191b;
  --text-muted: #74666a;

  --border: #e8dadd;
  --border-strong: #d7c3c8;

  --surface-soft: #fbf6f7;

  --shadow:
    0 10px 28px
    rgba(42, 0, 13, 0.07);

  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 18px;
}


/*
========================================
RESET
========================================
*/

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background:
    var(--ivory);

  color:
    var(--text-main);

  line-height: 1.5;
}

button,
select {
  font-family: inherit;
}


/*
========================================
TOPBAR
========================================
*/

.site-topbar {
  background:
    var(--dark-accent);
}

.site-topbar-inner {
  width:
    min(
      94%,
      1180px
    );

  min-height:
    72px;

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:
    center;

  gap:
    18px;
}

.site-logo {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  color:
    var(--white);

  text-decoration:
    none;
}

.site-logo-image {
  width:
    40px;

  height:
    40px;

  object-fit:
    contain;
}

.site-logo-text {
  color:
    var(--ivory);

  font-size:
    17px;

  font-weight:
    800;
}

.site-nav {
  display:
    flex;

  justify-content:
    center;

  gap:
    4px;
}

.nav-link {
  padding:
    9px 10px;

  border-radius:
    8px;

  color:
    rgba(255, 248, 248, 0.75);

  font-size:
    12px;

  font-weight:
    700;

  text-decoration:
    none;

  white-space:
    nowrap;
}

.nav-link:hover,
.nav-link.active {
  background:
    rgba(255, 90, 99, 0.16);

  color:
    var(--white);
}

.contact-button {
  padding:
    10px 14px;

  border-radius:
    8px;

  background:
    var(--secondary);

  color:
    var(--white);

  font-size:
    12px;

  font-weight:
    700;

  text-decoration:
    none;
}


/*
========================================
MAIN
========================================
*/

.paito-container {
  width:
    min(
      96%,
      1600px
    );

  margin:
    34px auto 60px;
}


/*
========================================
HERO
========================================
*/

.hero {
  max-width:
    760px;

  margin:
    0 auto 24px;

  text-align:
    center;
}

.eyebrow {
  margin:
    0 0 5px;

  color:
    var(--secondary);

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}

.hero h1 {
  margin: 0;

  color:
    var(--dark-accent);

  font-size:
    clamp(
      30px,
      5vw,
      44px
    );
}

.hero-description {
  margin:
    10px 0 0;

  color:
    var(--text-muted);

  font-size:
    14px;
}


/*
========================================
CARDS
========================================
*/

.disclaimer,
.control-card,
.paito-title-card,
.table-card,
.content-card {
  margin-bottom:
    16px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-large);

  background:
    var(--white);

  box-shadow:
    var(--shadow);
}

.disclaimer {
  padding:
    15px 17px;

  border-left:
    4px solid
    var(--secondary);

  background:
    #fff4f5;
}

.disclaimer strong {
  font-size:
    13px;
}

.disclaimer p {
  margin:
    4px 0 0;

  color:
    var(--text-muted);

  font-size:
    12px;
}

.control-card,
.paito-title-card,
.content-card {
  padding:
    18px;
}


/*
========================================
SETUP
========================================
*/

.setup-grid {
  display:
    grid;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(180px, 1fr);

  gap:
    12px;
}

.form-group label {
  display:
    block;

  margin-bottom:
    7px;

  font-size:
    12px;

  font-weight:
    800;
}

.form-group select {
  width:
    100%;

  min-height:
    43px;

  padding:
    10px 12px;

  border:
    1px solid
    var(--border-strong);

  border-radius:
    8px;

  background:
    var(--white);

  font-size:
    13px;
}

.form-group small {
  display:
    block;

  margin-top:
    6px;

  color:
    var(--text-muted);

  font-size:
    10px;
}

.setup-actions {
  margin-top:
    14px;
}

.btn-primary {
  min-height:
    40px;

  padding:
    9px 14px;

  border:
    none;

  border-radius:
    8px;

  background:
    var(--primary);

  color:
    var(--white);

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;
}


/*
========================================
TOOLS
========================================
*/

.tool-heading h2 {
  margin: 0;

  font-size:
    17px;
}

.tool-heading p {
  margin:
    3px 0 10px;

  color:
    var(--text-muted);

  font-size:
    11px;
}

.tool-block {
  display:
    grid;

  grid-template-columns:
    120px 1fr;

  align-items:
    center;

  gap:
    12px;

  padding:
    11px 0;

  border-top:
    1px solid
    var(--border);
}

.tool-label {
  font-size:
    12px;

  font-weight:
    800;
}

.color-palette,
.digit-toolbar,
.digit-buttons,
.position-buttons,
.reset-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  flex-wrap:
    wrap;
}

.color-btn {
  width:
    35px;

  height:
    35px;

  padding: 0;

  border:
    2px solid
    transparent;

  border-radius:
    7px;

  cursor:
    pointer;
}

.color-btn.active {
  border-color:
    var(--dark-accent);

  box-shadow:
    0 0 0 3px
    rgba(118, 0, 49, 0.18);
}

.erase-btn,
.position-btn,
.btn-secondary,
.btn-danger,
.btn-tool-delete {
  min-height:
    35px;

  padding:
    7px 11px;

  border-radius:
    7px;

  font-size:
    10px;

  font-weight:
    800;

  cursor:
    pointer;
}

.erase-btn,
.position-btn,
.btn-secondary {
  border:
    1px solid
    var(--border-strong);

  background:
    var(--white);

  color:
    var(--text-main);
}

.erase-btn.active,
.position-btn.active {
  border-color:
    var(--primary);

  background:
    var(--primary);

  color:
    var(--white);
}

.digit-btn {
  min-width:
    36px;

  height:
    36px;

  border:
    1px solid
    var(--border-strong);

  border-radius:
    7px;

  background:
    var(--white);

  color:
    var(--secondary);

  font-weight:
    900;

  cursor:
    pointer;
}

.btn-tool-delete,
.btn-danger {
  border:
    1px solid
    var(--secondary);

  background:
    var(--secondary);

  color:
    var(--white);
}

.reset-actions {
  padding-top:
    12px;

  border-top:
    1px solid
    var(--border);
}


/*
========================================
TITLE
========================================
*/

.paito-title-card {
  text-align:
    center;
}

.paito-title-card h2 {
  margin: 0;

  color:
    var(--primary);

  font-size:
    19px;
}

.paito-title-card p {
  margin:
    4px 0 0;

  color:
    var(--text-muted);

  font-size:
    10px;
}


/*
========================================
TABLE
========================================
*/

.table-card {
  overflow:
    hidden;
}

.table-scroll {
  width:
    100%;

  overflow-x:
    auto;
}

.paito-table {
  width:
    100%;

  min-width:
    1810px;

  border-collapse:
    collapse;

  table-layout:
    fixed;

  background:
    var(--white);

  user-select:
    none;
}

.paito-table th,
.paito-table td {
  border:
    1px solid
    #d2ced0;

  text-align:
    center;
}

.day-header-row th {
  height:
    42px;

  background:
    #cbc9ca;

  color:
    #080808;

  font-size:
    12px;

  font-weight:
    900;
}

.position-header-row th {
  height:
    29px;

  background:
    #ece9ea;

  color:
    #6d6266;

  font-size:
    8px;

  font-weight:
    900;
}

.d-head {
  width:
    44px;
}

.paito-table td {
  height:
    38px;

  padding: 0;

  background:
    var(--white);

  color:
    #050505;

  font-size:
    14px;

  font-weight:
    800;
}

.paito-table tbody tr:nth-child(5n) td {
  border-bottom:
    2px solid
    #afa9ac;
}

.paito-cell {
  cursor:
    pointer;
}

.paito-cell:hover {
  filter:
    brightness(0.96);
}

.d-cell {
  background:
    #f0edef !important;

  color:
    #b9b1b4 !important;

  font-weight:
    500 !important;
}


/*
========================================
CONTENT
========================================
*/

.content-card h2 {
  margin: 0;

  font-size:
    17px;
}

.content-card p {
  margin:
    8px 0 0;

  color:
    var(--text-muted);

  font-size:
    12px;
}


/*
========================================
FOOTER
========================================
*/

.site-footer {
  padding:
    28px 20px;

  background:
    var(--dark-accent);

  color:
    rgba(255, 248, 248, 0.76);
}

.site-footer-inner {
  width:
    min(
      94%,
      1180px
    );

  margin:
    0 auto;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;
}

.site-footer p {
  margin: 0;

  font-size:
    11px;
}

.site-footer a {
  color:
    var(--highlight);

  text-decoration:
    none;
}


/*
========================================
RESPONSIVE
========================================
*/

@media (
  max-width: 900px
) {

  .site-logo-text {
    display:
      none;
  }

  .tool-block {
    grid-template-columns:
      1fr;
  }

}


@media (
  max-width: 760px
) {

  .site-topbar-inner {
    width:
      calc(100% - 22px);

    min-height:
      auto;

    padding:
      10px 0;

    grid-template-columns:
      1fr auto;
  }

  .site-nav {
    grid-column:
      1 / -1;

    grid-row:
      2;

    justify-content:
      flex-start;

    overflow-x:
      auto;
  }

  .nav-link {
    font-size:
      10px;
  }

  .contact-button {
    font-size:
      9px;
  }

  .setup-grid {
    grid-template-columns:
      1fr;
  }

  .paito-container {
    width:
      calc(100% - 14px);
  }

}


@media (
  max-width: 430px
) {

  .control-card,
  .paito-title-card,
  .content-card {
    padding:
      14px;
  }

  .site-footer-inner {
    flex-direction:
      column;

    text-align:
      center;
  }

}