/*
   IST-239 Final Exam Project
   Sung Kim | 6-28-26 | IST-239-W01
   Program: Final Project Landing Page

   Purpose:
   This stylesheet creates the responsive three-column liquid layout and
   controls the appearance of the header, navigation, project list, feature
   panels, and footer. 

   Filename: styles.css
   Related: index.html, js/data.js, js/navigation.js, js/weather.js, js/tic-tac-toe.js, js/blog.js, js/tip-calculator.js, js/index.js
*/

/* Site color, spacing, shadow, and radius variables. */
:root {
   --navy-900: #152434;
   --navy-800: #1e3247;
   --navy-700: #29445f;
   --blue-600: #2f78b7;
   --blue-500: #438fca;
   --blue-100: #e8f3fb;
   --blue-050: #f4f9fd;
   --surface: #ffffff;
   --page-bg: #edf2f6;
   --text-main: #20303d;
   --text-muted: #667685;
   --border: #d7e0e7;
   --success: #2f7d57;
   --player-color: #2f78b7;
   --computer-color: #c73535;
   --shadow-soft: 0 10px 28px rgba(21, 36, 52, 0.08);
   --shadow-small: 0 4px 14px rgba(21, 36, 52, 0.08);
   --radius-large: 18px;
   --radius-medium: 12px;
   --radius-small: 8px;
   --content-width: 1600px;
}

/* Universal box model and spacing reset. */
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

/* Smooth scrolling for page navigation. */
html {
   scroll-behavior: smooth;
}

/* Main page layout, colors, and typography. */
body {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
   line-height: 1.6;
   color: var(--text-main);
   background: var(--page-bg);
}

/* Responsive image defaults. */
img {
   display: block;
   max-width: 100%;
}

/* Default link color. */
a {
   color: var(--blue-600);
}

/* Keyboard focus outline for links and summaries. */
a:focus-visible,
summary:focus-visible {
   outline: 3px solid #f0bd4f;
   outline-offset: 3px;
}

/* Hidden skip link for keyboard navigation. */
.skip-link {
   position: fixed;
   top: 10px;
   left: 10px;
   z-index: 1000;
   padding: 10px 14px;
   color: #ffffff;
   background: var(--navy-900);
   border-radius: var(--radius-small);
   text-decoration: none;
   transform: translateY(-150%);
}

/* Displays the skip link when focused. */
.skip-link:focus {
   transform: translateY(0);
}

/* Page header layout and background. */
header {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 26px;
   padding: 34px clamp(24px, 6vw, 90px);
   color: #ffffff;
   text-align: left;
   background:
      radial-gradient(circle at 80% 20%, rgba(67, 143, 202, 0.24), transparent 30%),
      linear-gradient(135deg, var(--navy-900), var(--navy-700));
   border-bottom: 4px solid var(--blue-500);
}

/* Student headshot size and appearance. */
#headshot {
   width: 138px;
   height: 138px;
   flex: 0 0 138px;
   object-fit: cover;
   border: 4px solid rgba(255, 255, 255, 0.9);
   border-radius: 50%;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* Student name heading. */
#header-info h1 {
   margin-bottom: 4px;
   font-size: clamp(2rem, 4vw, 3rem);
   line-height: 1.1;
   letter-spacing: 0.02em;
}

/* Header course and contact text. */
#header-info p {
   color: #d2e0eb;
   font-size: 0.96rem;
}

/* Student email text. */
#header-info p:first-of-type {
   margin-bottom: 3px;
   color: #ffffff;
   font-size: 1.02rem;
}

/* Sticky navigation bar. */
#feature-nav {
   position: sticky;
   top: 0;
   z-index: 100;
   padding: 0;
   background: var(--navy-800);
   box-shadow: 0 4px 14px rgba(21, 36, 52, 0.18);
}

/* Navigation list layout. */
#feature-nav ul {
   width: min(96%, var(--content-width));
   margin: 0 auto;
   display: flex;
   justify-content: center;
   list-style: none;
}

/* Navigation list items. */
#feature-nav li {
   flex: 0 1 auto;
}

/* Navigation link appearance. */
#feature-nav a {
   display: block;
   padding: 14px 18px;
   color: #d9e5ee;
   font-size: 0.9rem;
   font-weight: 700;
   text-align: center;
   text-decoration: none;
   transition: background-color 0.2s ease, color 0.2s ease;
}

/* Navigation link hover state. */
#feature-nav a:hover {
   color: #ffffff;
   background: var(--blue-600);
}

/* Three-column liquid page layout. */
.layout {
   width: min(96%, var(--content-width));
   margin: 0 auto;
   padding: 28px 0 36px;
   display: grid;
   grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.55fr) minmax(280px, 1fr);
   gap: 24px;
   align-items: start;
   flex: 1;
}

/* Shared column sizing and scroll offset. */
.column {
   min-width: 0;
   scroll-margin-top: 78px;
}

/* Lab Projects column. */
.left {
   padding: 20px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-large);
   box-shadow: var(--shadow-soft);
}

/* Center and right column grid layouts. */
.center,
.right {
   display: grid;
   gap: 24px;
}

/* Lab Projects heading area. */
.column-intro {
   margin-bottom: 18px;
   padding: 2px 4px 16px;
   text-align: center;
   border-bottom: 1px solid var(--border);
}

/* Shared section heading colors. */
.column-intro h2,
.welcome-panel h2,
.feature-panel h2,
.side-panel h2 {
   color: var(--navy-900);
   line-height: 1.25;
   text-align: center;
}

/* Lab Projects heading size. */
.column-intro h2 {
   margin-bottom: 5px;
   font-size: 1.5rem;
}

/* Secondary text color. */
.column-intro p:last-child,
.feature-panel > p,
.side-panel > p,
.welcome-panel > p:last-of-type {
   color: var(--text-muted);
   text-align: center;
}

/* Small section label text. */
.section-label {
   margin-bottom: 4px;
   color: var(--blue-600);
   font-size: 0.74rem;
   font-weight: 800;
   letter-spacing: 0.12em;
   text-transform: uppercase;
}

/* Removes the default summary marker. */
details > summary {
   list-style: none;
}

/* Hides the WebKit summary marker. */
details > summary::-webkit-details-marker {
   display: none;
}

/* Spacing between course units. */
.unit-details + .unit-details {
   margin-top: 12px;
}

/* Course unit summary button. */
.unit-details > summary {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 10px;
   padding: 13px 14px 13px 38px;
   color: #ffffff;
   background: var(--navy-800);
   border-left: 4px solid transparent;
   border-radius: var(--radius-small);
   cursor: pointer;
   font-size: 1.03rem;
   font-weight: 700;
   line-height: 1.35;
   text-align: left;
   user-select: none;
   transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Course unit arrow icon. */
.unit-details > summary::before {
   position: absolute;
   left: 14px;
   content: "\25B6";
   color: #8cc6ef;
   font-size: 0.72rem;
   transition: transform 0.2s ease;
}

/* Rotates the unit arrow when expanded. */
.unit-details[open] > summary::before {
   transform: rotate(90deg);
}

/* Unit hover and expanded states. */
.unit-details > summary:hover,
.unit-details[open] > summary {
   background: var(--navy-700);
   border-left-color: var(--blue-500);
}

/* Course unit content spacing. */
.unit-body {
   padding: 12px 0 2px;
}

/* Spacing between chapter groups. */
.chapter-details + .chapter-details {
   margin-top: 9px;
}

/* Chapter summary button. */
.chapter-details > summary {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 8px;
   padding: 10px 14px 10px 38px;
   color: var(--navy-900);
   background: var(--blue-050);
   border: 1px solid #dce9f2;
   border-left: 4px solid var(--blue-500);
   border-radius: var(--radius-small);
   cursor: pointer;
   font-size: 1.02rem;
   font-weight: 700;
   line-height: 1.4;
   text-align: left;
   user-select: none;
   transition: background-color 0.2s ease;
}

/* Chapter arrow icon. */
.chapter-details > summary::before {
   position: absolute;
   left: 14px;
   content: "\25B8";
   flex: 0 0 auto;
   color: var(--blue-600);
   transition: transform 0.2s ease;
}

/* Rotates the chapter arrow when expanded. */
.chapter-details[open] > summary::before {
   transform: rotate(90deg);
}

/* Chapter hover and expanded states. */
.chapter-details > summary:hover,
.chapter-details[open] > summary {
   background: var(--blue-100);
}

/* Chapter project list spacing. */
.chapter-body {
   padding: 8px 0 2px;
}

/* Individual lab project card. */
.project-card {
   overflow: hidden;
   margin-bottom: 8px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-small);
   box-shadow: 0 2px 8px rgba(21, 36, 52, 0.04);
}

/* Project card summary row. */
.project-card > summary {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 10px 36px;
   color: var(--navy-900);
   background: #ffffff;
   cursor: pointer;
   font-size: 0.98rem;
   font-weight: 700;
   text-align: center;
   transition: background-color 0.2s ease;
}

/* Collapsed project card icon. */
.project-card > summary::after {
   position: absolute;
   right: 12px;
   content: "+";
   color: var(--blue-600);
   font-size: 1.05rem;
   line-height: 1;
}

/* Expanded project card icon. */
.project-card[open] > summary::after {
   content: "\2212";
}

/* Project card hover and expanded states. */
.project-card > summary:hover,
.project-card[open] > summary {
   background: var(--blue-050);
}

/* Expanded project description area. */
.project-content {
   padding: 12px;
   text-align: left;
   border-top: 1px solid var(--border);
}

/* Project summary text. */
.project-content p {
   margin-bottom: 11px;
   color: var(--text-muted);
   font-size: 0.94rem;
   line-height: 1.6;
   text-align: left;
}

/* Project link button. */
.project-link {
   display: block;
   width: fit-content;
   margin: 0 auto;
   padding: 7px 10px;
   color: #ffffff;
   background: var(--blue-600);
   border-radius: 6px;
   font-size: 0.86rem;
   font-weight: 700;
   text-align: center;
   text-decoration: none;
   transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Project link button hover state. */
.project-link:hover {
   background: var(--navy-700);
   transform: translateY(-1px);
}

/* Reveal animation for expanded content. */
.unit-body,
.chapter-body,
.project-content {
   animation: reveal-content 0.22s ease-out;
}

/* Expanded content reveal animation. */
@keyframes reveal-content {
   /* Starting reveal animation state. */
   from {
      opacity: 0;
      transform: translateY(-5px);
   }

   /* Ending reveal animation state. */
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Shared panel appearance. */
.welcome-panel,
.feature-panel,
.side-panel {
   text-align: center;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-large);
   box-shadow: var(--shadow-soft);
}

/* Portfolio introduction panel. */
.welcome-panel {
   padding: clamp(24px, 4vw, 38px);
   text-align: center;
   background:
      linear-gradient(135deg, rgba(232, 243, 251, 0.95), rgba(255, 255, 255, 0.98)),
      var(--surface);
}

/* Portfolio introduction heading. */
.welcome-panel h2 {
   margin-bottom: 10px;
   font-size: clamp(1.75rem, 3vw, 2.35rem);
}

/* Portfolio summary grid. */
.overview-grid {
   margin-top: 24px;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 12px;
}

/* Portfolio summary item. */
.overview-item {
   padding: 16px 10px;
   text-align: center;
   background: rgba(255, 255, 255, 0.84);
   border: 1px solid #d7e8f4;
   border-radius: var(--radius-medium);
}

/* Portfolio summary number. */
.overview-item strong {
   display: block;
   color: var(--blue-600);
   font-size: 1.7rem;
   line-height: 1.1;
}

/* Portfolio summary label. */
.overview-item span {
   display: block;
   margin-top: 4px;
   color: var(--text-muted);
   font-size: 0.88rem;
   font-weight: 700;
}

/* Center-column feature panels. */
.feature-panel {
   padding: clamp(22px, 3vw, 30px);
   text-align: center;
   scroll-margin-top: 78px;
}

/* Feature panel heading layout. */
.panel-heading {
   margin-bottom: 14px;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
}

/* Feature panel heading size. */
.panel-heading h2 {
   font-size: 1.45rem;
}

/* Feature status badge. */
.status-badge {
   flex: 0 0 auto;
   padding: 6px 9px;
   color: var(--blue-600);
   background: var(--blue-100);
   border: 1px solid #c7dfef;
   border-radius: 999px;
   font-size: 0.68rem;
   font-weight: 800;
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

/* Interactive graphic preview area. */
.graphic-preview {
   position: relative;
   min-height: 280px;
   margin-top: 24px;
   overflow: hidden;
   display: grid;
   place-items: center;
   background:
      linear-gradient(rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.84)),
      repeating-linear-gradient(0deg, transparent, transparent 29px, #dce9f2 30px),
      repeating-linear-gradient(90deg, transparent, transparent 29px, #dce9f2 30px);
   border: 1px solid #d8e7f1;
   border-radius: var(--radius-medium);
}

/* Shared graphic ring appearance. */
.graphic-ring {
   position: absolute;
   border: 2px solid rgba(47, 120, 183, 0.32);
   border-radius: 50%;
}

/* Large graphic ring size. */
.graphic-ring-large {
   width: 220px;
   height: 220px;
}

/* Small graphic ring size. */
.graphic-ring-small {
   width: 150px;
   height: 150px;
   border-style: dashed;
}

/* Center element of the graphic preview. */
.graphic-center {
   position: relative;
   z-index: 2;
   width: 112px;
   height: 112px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   text-align: center;
   background: linear-gradient(135deg, var(--navy-700), var(--blue-600));
   border: 6px solid #ffffff;
   border-radius: 50%;
   box-shadow: var(--shadow-small);
}

/* Graphic preview number. */
.graphic-center strong {
   font-size: 1.8rem;
   line-height: 1;
}

/* Graphic preview label. */
.graphic-center span {
   width: 80px;
   margin-top: 5px;
   font-size: 0.64rem;
   line-height: 1.2;
}

/* Shared graphic dot appearance. */
.graphic-dot {
   position: absolute;
   width: 18px;
   height: 18px;
   background: var(--blue-500);
   border: 4px solid #ffffff;
   border-radius: 50%;
   box-shadow: var(--shadow-small);
}

/* First graphic dot position. */
.dot-one {
   top: 42px;
   left: 24%;
}

/* Second graphic dot position. */
.dot-two {
   right: 22%;
   bottom: 48px;
}

/* Third graphic dot position. */
.dot-three {
   top: 74px;
   right: 19%;
}

/* Right-column feature panels. */
.side-panel {
   padding: 22px;
   text-align: center;
   scroll-margin-top: 78px;
}

/* Compact panel heading spacing. */
.compact-heading {
   margin-bottom: 12px;
}

/* Right-column heading sizes. */
.compact-heading h2,
.checklist-panel h2 {
   font-size: 1.25rem;
}

/* News blog entry. */
.news-entry {
   padding: 15px 0;
   border-top: 1px solid var(--border);
}

/* First news entry spacing. */
.news-entry:first-of-type {
   padding-top: 12px;
}

/* News entry date. */
.news-entry time {
   display: block;
   margin-bottom: 3px;
   color: var(--blue-600);
   font-size: 0.73rem;
   font-weight: 800;
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

/* News entry heading. */
.news-entry h3 {
   margin-bottom: 4px;
   color: var(--navy-900);
   font-size: 0.98rem;
}

/* News entry text. */
.news-entry p {
   color: var(--text-muted);
   font-size: 0.86rem;
   line-height: 1.5;
}

/* Feature and checklist list formatting. */
.planned-list,
.checklist {
   margin-top: 16px;
   list-style: none;
}

/* Feature and checklist list items. */
.planned-list li,
.checklist li {
   position: relative;
   padding: 8px 0 8px 27px;
   color: var(--text-muted);
   border-top: 1px solid #edf1f4;
   font-size: 0.87rem;
}

/* Planned feature list icon. */
.planned-list li::before {
   content: "\25C7";
   position: absolute;
   left: 2px;
   color: var(--blue-600);
   font-weight: 800;
}

/* Checklist item icon. */
.checklist li::before {
   content: "\25CB";
   position: absolute;
   left: 2px;
   color: #93a0aa;
   font-weight: 800;
}

/* Completed checklist item text. */
.checklist li.complete {
   color: var(--text-main);
}

/* Completed checklist checkmark. */
.checklist li.complete::before {
   content: "\2713";
   color: var(--success);
}

/* Page footer appearance. */
footer {
   padding: 20px;
   color: #b9c9d6;
   text-align: center;
   background: var(--navy-900);
   border-top: 4px solid var(--blue-500);
   font-size: 0.85rem;
   line-height: 1.8;
}

/* Footer update date. */
footer p:first-child {
   color: #ffffff;
   font-weight: 700;
}

/* Desktop row alignment for portfolio feature panels. */
@media (min-width: 1121px) {
   /* Lab Projects column spans the feature panel rows. */
   .left {
      grid-column: 1;
      grid-row: 1 / span 3;
   }

   /* Center and right wrappers let their panels share the page grid rows. */
   .center,
   .right {
      display: contents;
   }

   /* JavaScript Portfolio panel aligns with the News Blog. */
   .welcome-panel {
      grid-column: 2;
      grid-row: 1;
   }

   /* News Blog panel aligns with the JavaScript Portfolio panel. */
   #feature-blog {
      grid-column: 3;
      grid-row: 1;
   }

   /* Weather Dashboard panel aligns with the Tip Calculator panel. */
   #feature-graphic {
      grid-column: 2;
      grid-row: 2;
   }

   /* Tip Calculator panel aligns with the Weather Dashboard panel. */
   #feature-custom {
      grid-column: 3;
      grid-row: 2;
   }

   /* Tic Tac Toe panel appears beneath the Weather Dashboard. */
   #feature-game {
      grid-column: 2;
      grid-row: 3;
   }
}

/* Medium-screen layout adjustments. */
@media (max-width: 1120px) {
   /* Changes the page to a two-column layout. */
   .layout {
      grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.45fr);
   }

   /* Places the right column across both grid columns. */
   .right {
      grid-column: 1 / -1;
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
}

/* Tablet layout adjustments. */
@media (max-width: 780px) {
   /* Stacks header content vertically. */
   header {
      flex-direction: column;
      text-align: center;
   }

   /* Removes navigation side padding. */
   #feature-nav {
      padding: 0;
   }

   /* Allows navigation links to wrap. */
   #feature-nav ul {
      flex-wrap: wrap;
   }

   /* Displays three navigation items per row. */
   #feature-nav li {
      flex: 1 0 33.333%;
   }

   /* Reduces navigation link size and spacing. */
   #feature-nav a {
      padding: 11px 8px;
      font-size: 0.78rem;
   }

   /* Changes the page to a single-column layout. */
   .layout {
      width: min(94%, 700px);
      grid-template-columns: 1fr;
   }

   /* Returns the right column to one grid column. */
   .right {
      grid-column: auto;
      grid-template-columns: 1fr;
   }

   /* Keeps the summary in three columns. */
   .overview-grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

/* Phone layout adjustments. */
@media (max-width: 560px) {
   /* Reduces the base font size on phones. */
   body {
      font-size: 15px;
   }

   /* Reduces header padding on phones. */
   header {
      padding: 26px 18px;
   }

   /* Reduces the headshot size on phones. */
   #headshot {
      width: 118px;
      height: 118px;
      flex-basis: 118px;
   }

   /* Displays two navigation items per row. */
   #feature-nav li {
      flex-basis: 50%;
   }

   /* Reduces page spacing on phones. */
   .layout {
      padding-top: 18px;
      gap: 18px;
   }

   /* Reduces panel corner rounding on phones. */
   .left,
   .welcome-panel,
   .feature-panel,
   .side-panel {
      border-radius: var(--radius-medium);
   }

   /* Stacks portfolio summary items. */
   .overview-grid {
      grid-template-columns: 1fr;
   }

   /* Stacks feature panel heading content. */
   .panel-heading {
      flex-direction: column;
      gap: 8px;
   }

   /* Limits the Tic Tac Toe board width on phones. */
   .tic-tac-toe-board {
      max-width: 260px;
   }
}

/* Reduced-motion accessibility settings. */
@media (prefers-reduced-motion: reduce) {
   /* Disables smooth scrolling. */
   html {
      scroll-behavior: auto;
   }

   /* Minimizes animations and transitions. */
   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }
}

/* Main navigation layout on wide screens. */
#feature-nav ul {
   align-items: center;
}

/* Navigation feature panel. */
.navigator-panel {
   max-width: 540px;
   margin: 26px auto 0;
   padding: 18px;
   text-align: center;
   background: #ffffff;
   border: 1px solid #d7e8f4;
   border-radius: var(--radius-medium);
}

/* Navigation feature heading. */
.navigator-panel h3 {
   margin-bottom: 6px;
   color: var(--navy-900);
   font-size: 1.25rem;
   text-align: center;
   scroll-margin-top: 92px;
}

/* Navigation feature text. */
.navigator-panel p {
   max-width: 420px;
   margin-right: auto;
   margin-left: auto;
   color: var(--text-muted);
   font-size: 0.94rem;
   text-align: center;
}

/* Navigation controls container. */
.jump-controls {
   max-width: 360px;
   margin: 14px auto 0;
   display: grid;
   grid-template-columns: 1fr;
   gap: 8px;
   align-items: center;
   justify-items: center;
}

/* Navigation controls label. */
.jump-controls label {
   color: var(--navy-900);
   font-size: 0.92rem;
   font-weight: 700;
   text-align: center;
}

/* Project Navigator dropdown container. */
.project-jump-widget {
   position: relative;
   width: min(100%, 320px);
}

/* Project Navigator dropdown button. */
.project-jump-toggle {
   position: relative;
   width: 100%;
   padding: 10px 42px;
   color: var(--text-main);
   background: #ffffff;
   border: 1px solid var(--border);
   border-radius: var(--radius-small);
   font: inherit;
   text-align: center;
}

/* Project Navigator dropdown arrow. */
.project-jump-toggle::after {
   position: absolute;
   right: 14px;
   content: "\25BE";
   color: var(--navy-700);
}

/* Project Navigator dropdown menu. */
.project-jump-menu {
   position: absolute;
   top: calc(100% + 6px);
   right: 0;
   left: 0;
   z-index: 40;
   max-height: 270px;
   overflow-y: auto;
   background: #ffffff;
   border: 1px solid var(--border);
   border-radius: var(--radius-small);
   box-shadow: var(--shadow-small);
   scrollbar-gutter: stable both-edges;
}

/* Project Navigator dropdown list. */
.project-jump-list {
   margin: 0;
   padding: 6px 0;
   list-style: none;
   list-style-type: none;
   text-align: center;
}

/* Project Navigator list items. */
.project-jump-list li {
   margin: 0;
   padding-left: 0;
   list-style: none;
}

/* Project Navigator list markers. */
.project-jump-list li::marker {
   content: "";
}

/* Project Navigator group labels. */
.destination-group-title {
   padding: 6px 18px;
   color: var(--navy-900);
   font-weight: 800;
   text-align: center;
}

/* Project Navigator dropdown items. */
.destination-option {
   padding: 4px 20px;
   color: var(--text-main);
   cursor: pointer;
   text-align: center;
}

/* Project Navigator dropdown item hover state. */
.destination-option:hover,
.destination-option:focus {
   color: #ffffff;
   background: var(--blue-600);
   outline: none;
}

/* Shared button style for feature tools. */
#project-jump-button,
.feature-button,
.tic-tac-toe-square,
.graphic-option {
   border: none;
   cursor: pointer;
   font-family: inherit;
}

/* Navigation button. */
#project-jump-button {
   width: min(100%, 180px);
   justify-self: center;
   padding: 11px 14px;
   color: #ffffff;
   background: var(--blue-600);
   border-radius: var(--radius-small);
   font-weight: 700;
   text-align: center;
}

/* Navigation button hover state. */
#project-jump-button:hover {
   background: var(--navy-700);
}

/* Tool message text. */
.tool-message {
   max-width: 420px;
   margin: 14px auto 0;
   color: var(--text-muted);
   font-size: 0.92rem;
   text-align: center;
}

/* Feature introduction text. */
.feature-copy {
   margin-top: 8px;
   color: var(--text-muted);
   font-size: 0.96rem;
   line-height: 1.6;
   text-align: center;
}

/* Weather form layout. */
.weather-form {
   width: min(100%, 460px);
   margin: 18px auto 0;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
   align-items: end;
   justify-items: stretch;
}

/* Weather form label. */
.weather-form label {
   display: grid;
   gap: 6px;
   color: var(--navy-900);
   font-size: 0.9rem;
   font-weight: 700;
   text-align: center;
}

/* Weather city input. */
.weather-form input {
   width: 100%;
   padding: 9px 10px;
   color: var(--text-main);
   background: #ffffff;
   border: 1px solid var(--border);
   border-radius: var(--radius-small);
   font: inherit;
   text-align: center;
}

/* Weather lookup button. */
.weather-form .feature-button {
   width: 100%;
   min-height: 43px;
   margin: 0;
   white-space: nowrap;
}

/* Weather Dashboard layout. */
.weather-tool {
   margin-top: 18px;
   padding: 16px;
   display: grid;
   grid-template-columns: 160px minmax(0, 1fr);
   gap: 18px;
   align-items: center;
   background: var(--blue-050);
   border: 1px solid #d8e7f1;
   border-radius: var(--radius-medium);
}

/* Weather visual card. */
.weather-card {
   min-height: 160px;
   padding: 16px;
   display: grid;
   place-items: center;
   align-content: center;
   gap: 8px;
   color: #ffffff;
   text-align: center;
   background: linear-gradient(135deg, var(--blue-600), var(--navy-700));
   border: 6px solid #ffffff;
   border-radius: 50%;
   box-shadow: var(--shadow-small);
}

/* Default weather card style. */
.weather-default {
   background: linear-gradient(135deg, var(--blue-600), var(--navy-700));
}

/* Clear weather card style. */
.weather-clear {
   background: linear-gradient(135deg, #f0a83a, #2f78b7);
}

/* Cloudy weather card style. */
.weather-cloudy {
   background: linear-gradient(135deg, #7d8fa1, var(--navy-700));
}

/* Rainy weather card style. */
.weather-rainy {
   background: linear-gradient(135deg, #3a70a8, #1e3247);
}

/* Stormy weather card style. */
.weather-stormy {
   background: linear-gradient(135deg, #4b4c60, #152434);
}

/* Snowy weather card style. */
.weather-snowy {
   color: var(--navy-900);
   background: linear-gradient(135deg, #e9f4fb, #9bc6df);
}

/* Foggy weather card style. */
.weather-foggy {
   background: linear-gradient(135deg, #9aa7b2, #667685);
}

/* Weather icon text. */
.weather-icon {
   display: block;
   font-size: 2.25rem;
   line-height: 1;
}

/* Weather location text. */
.weather-location {
   max-width: 110px;
   display: block;
   font-size: 0.78rem;
   font-weight: 800;
   line-height: 1.25;
}

/* Weather result text area. */
.weather-output {
   text-align: left;
}

/* Weather result heading. */
.weather-output h3 {
   margin-bottom: 6px;
   color: var(--navy-900);
   font-size: 1.2rem;
}

/* Weather result description. */
.weather-output p {
   color: var(--text-muted);
   font-size: 0.94rem;
   line-height: 1.5;
}

/* Weather measurement grid. */
.weather-metrics {
   margin: 14px 0 6px;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 8px;
}

/* Weather measurement card. */
.weather-metrics article {
   padding: 10px 8px;
   text-align: center;
   background: #ffffff;
   border: 1px solid #d7e8f4;
   border-radius: var(--radius-small);
}

/* Weather measurement value. */
.weather-metrics strong {
   display: block;
   color: var(--blue-600);
   font-size: 1.05rem;
   line-height: 1.1;
}

/* Weather measurement label. */
.weather-metrics span {
   display: block;
   margin-top: 4px;
   color: var(--text-muted);
   font-size: 0.72rem;
   font-weight: 700;
}

/* Game status layout. */
.game-status {
   margin-top: 18px;
   display: flex;
   justify-content: center;
   gap: 14px;
   flex-wrap: wrap;
}

/* Game status item. */
.game-status span {
   padding: 8px 12px;
   color: var(--text-muted);
   background: var(--blue-050);
   border: 1px solid #d8e7f1;
   border-radius: var(--radius-small);
   font-size: 0.92rem;
   opacity: 0.68;
   transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* Active player turn label. */
.player-turn-label.active-turn {
   color: #ffffff;
   background: var(--player-color);
   border-color: var(--player-color);
   opacity: 1;
}

/* Active computer turn label. */
.computer-turn-label.active-turn {
   color: #ffffff;
   background: var(--computer-color);
   border-color: var(--computer-color);
   opacity: 1;
}

/* Tic Tac Toe board layout. */
.tic-tac-toe-board {
   width: min(100%, 300px);
   margin: 20px auto 0;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
}

/* Tic Tac Toe board squares. */
.tic-tac-toe-square {
   aspect-ratio: 1;
   color: var(--navy-900);
   background: #ffffff;
   border: 1px solid var(--border);
   border-radius: var(--radius-small);
   font-size: 2rem;
   font-weight: 800;
   text-align: center;
}

/* Player square color. */
.tic-tac-toe-square.player-square {
   color: #ffffff;
   background: var(--player-color);
   border-color: var(--player-color);
}

/* Computer square color. */
.tic-tac-toe-square.computer-square {
   color: #ffffff;
   background: var(--computer-color);
   border-color: var(--computer-color);
}

/* Tic Tac Toe square hover state. */
.tic-tac-toe-square:hover:not(:disabled) {
   background: var(--blue-050);
   border-color: var(--blue-500);
}

/* Filled Tic Tac Toe squares. */
.tic-tac-toe-square:disabled {
   cursor: default;
}

/* Winning Tic Tac Toe squares. */
.tic-tac-toe-square.winning-square {
   color: #ffffff;
   background: var(--success);
   border-color: var(--success);
   box-shadow: 0 0 0 3px rgba(47, 125, 87, 0.18);
}

/* Feature tool button. */
.feature-button {
   display: block;
   width: fit-content;
   margin: 16px auto 0;
   padding: 10px 14px;
   color: #ffffff;
   background: var(--blue-600);
   border-radius: var(--radius-small);
   font-size: 0.92rem;
   font-weight: 700;
}

/* Feature tool button hover state. */
.feature-button:hover {
   background: var(--navy-700);
}

/* News blog list. */
#news-list {
   max-height: 360px;
   margin-top: 14px;
   padding: 0 10px;
   overflow-y: auto;
   scrollbar-gutter: stable both-edges;
   text-align: left;
   background: var(--blue-050);
   border: 1px solid var(--border);
   border-radius: var(--radius-medium);
}

/* News blog entry content. */
.news-entry {
   margin: 0;
   padding: 14px 0;
   text-align: left;
}

/* Blog storage note. */
.storage-note {
   margin-top: 8px;
   color: var(--text-muted);
   font-size: 0.84rem;
   text-align: center;
}

/* Blog editor container. */
.blog-editor-details {
   margin-top: 16px;
   text-align: left;
}

/* Blog editor toggle button. */
.blog-editor-details > summary {
   width: fit-content;
   margin: 0 auto;
   padding: 9px 12px;
   color: #ffffff;
   background: var(--blue-600);
   border-radius: var(--radius-small);
   cursor: pointer;
   font-size: 0.88rem;
   font-weight: 700;
   text-align: center;
}

/* Blog editor toggle hover state. */
.blog-editor-details > summary:hover {
   background: var(--navy-700);
}

/* Blog editor form layout. */
.blog-form {
   margin-top: 12px;
   display: grid;
   gap: 10px;
   text-align: left;
}

/* Blog editor field groups. */
.blog-form label {
   display: grid;
   gap: 5px;
   color: var(--navy-900);
   font-size: 0.9rem;
   font-weight: 700;
}

/* Blog editor label text. */
.blog-form span {
   display: block;
}

/* Blog editor input fields. */
.blog-form input,
.blog-form textarea {
   width: 100%;
   padding: 9px 10px;
   color: var(--text-main);
   background: #ffffff;
   border: 1px solid var(--border);
   border-radius: var(--radius-small);
   font: inherit;
}

/* Blog editor message box. */
.blog-form textarea {
   min-height: 90px;
   resize: vertical;
}

/* Blog editor button row. */
.blog-form-actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px;
}

/* Blog editor buttons. */
.blog-form-actions .feature-button {
   margin: 0;
}

/* Secondary blog buttons. */
.secondary-button {
   color: var(--navy-900);
   background: var(--blue-050);
   border: 1px solid var(--border);
}

/* Secondary blog button hover state. */
.secondary-button:hover {
   color: #ffffff;
   background: var(--navy-700);
}

/* Blog entry action row. */
.blog-actions {
   margin-top: 12px;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

/* Blog entry action buttons. */
.blog-action {
   padding: 7px 10px;
   color: #ffffff;
   background: var(--blue-600);
   border: 0;
   border-radius: var(--radius-small);
   font-size: 0.82rem;
   font-weight: 700;
}

/* Blog entry action button hover state. */
.blog-action:hover {
   background: var(--navy-700);
}

/* Blog delete button. */
.delete-action {
   background: #9f3d3d;
}

/* Blog delete button hover state. */
.delete-action:hover {
   background: #752c2c;
}

/* Compact feature description. */
.compact-copy {
   margin-bottom: 8px;
}

/* Tip Calculator form layout. */
.tip-form {
   max-width: 330px;
   margin: 14px auto 0;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
   align-items: end;
   justify-content: center;
}

/* Tip Calculator form label. */
.tip-form label {
   display: grid;
   gap: 5px;
   color: var(--navy-900);
   font-size: 0.88rem;
   font-weight: 700;
   text-align: center;
}

/* Tip Calculator input fields. */
.tip-form input {
   width: 100%;
   padding: 8px 9px;
   color: var(--text-main);
   background: #ffffff;
   border: 1px solid var(--border);
   border-radius: var(--radius-small);
   font: inherit;
   text-align: center;
}

/* Tip Calculator submit button. */
.tip-form .feature-button {
   grid-column: 1 / -1;
   justify-self: center;
   margin-top: 2px;
   padding: 8px 12px;
}

/* Tip Calculator output box. */
.tip-output {
   max-width: 330px;
   margin: 14px auto 0;
   padding: 12px;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
   color: var(--text-main);
   background: var(--blue-050);
   border: 1px solid #d8e7f1;
   border-radius: var(--radius-medium);
   text-align: center;
}

/* Tip Calculator result value. */
.tip-output span {
   display: grid;
   gap: 4px;
   padding: 10px 6px;
   background: #ffffff;
   border: 1px solid #d7e8f4;
   border-radius: var(--radius-small);
   font-size: 1.05rem;
   font-weight: 800;
}

/* Tip Calculator result label. */
.tip-output strong {
   color: var(--text-muted);
   font-size: 0.72rem;
   text-transform: uppercase;
   letter-spacing: 0.04em;
}

/* Narrow layout for jump controls and weather display. */
@media (max-width: 780px) {
   /* Stacks the Project Navigator controls. */
   .jump-controls {
      grid-template-columns: 1fr;
   }

   /* Stacks the weather display. */
   .weather-tool {
      grid-template-columns: 1fr;
   }

   /* Centers weather text on smaller screens. */
   .weather-output {
      text-align: center;
   }
}

/* Phone layout for weather and tip calculator controls. */
@media (max-width: 560px) {
   /* Stacks the weather form. */
   .weather-form {
      grid-template-columns: 1fr;
   }

   /* Stacks tip calculator fields on small screens. */
   .tip-form {
      grid-template-columns: 1fr;
   }

   /* Stacks tip calculator results on small screens. */
   .tip-output {
      grid-template-columns: 1fr;
   }
}