/* HIVE app. Everything here leans on the site's own stylesheet (site.css):
   its variables for colour, radius, type scale, spacing and easing, and its
   classes for the header, buttons, headings and footer. */

.a-body { background: var(--color-beige-500); color: var(--color-charcoal); }
.a-main { display: block; }
.a-main .container { max-width: 1400px; padding-inline: var(--unit-md); }
@media (min-width: 1000px) { .a-main .container { padding-inline: calc(100vw / 16 + var(--unit-md)); max-width: none; } }

/* hero: the site's rounded colour block under the floating header */
.a-hero { background: var(--color-green-500); border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: calc(var(--spacing-safe-header) + var(--spacing-fluid-xl)) 0 var(--spacing-fluid-2xl); }
.a-hero_grid { display: grid; gap: var(--spacing-fluid-xl); align-items: end; }
@media (min-width: 1000px) { .a-hero_grid { grid-template-columns: 1.25fr 1fr; } }
.a-eyebrow { font-size: var(--text-lg); letter-spacing: -.04em; margin-bottom: var(--spacing-fluid-sm); }
.a-hero_title { text-wrap: balance; }
.a-hero_sub { font-size: var(--text-heading-xs); letter-spacing: -.05em; line-height: 1.2; margin-top: var(--spacing-fluid-sm); max-width: 26ch; }
.a-hero_side { display: grid; gap: var(--unit-md); }
@media (min-width: 700px) { .a-hero_side { grid-template-columns: 1fr 1fr; } }
.a-clock, .a-wallet { background: var(--color-white); border-radius: var(--radius-md); padding: var(--spacing-fluid-md); display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing-fluid-sm); min-height: 190px; }
.a-clock_label, .a-clock_note, .a-wallet_note { font-size: var(--text-sm); letter-spacing: -.03em; line-height: 1.3; color: #2c2e2a99; }
.a-clock_value { font-size: var(--text-heading-sm); letter-spacing: -.06em; line-height: 1; font-variant-numeric: tabular-nums; }
.a-wallet { background: var(--color-beige-400); }
.a-wallet .a-btn { align-self: flex-start; }

/* buttons: the site's .c-button, sized for forms and cards */
.a-btn { --color-primary: var(--color-green-500); --button-height: calc(var(--spacing) * 13); font-weight: 500; letter-spacing: -.03em; background: none; font-family: inherit; }
.a-btn .c-button_icon svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.a-btn--ink { --color-primary: var(--color-charcoal); --button-color: var(--color-white); --button-color-hover: var(--color-white); }
.a-btn--ink .c-button_icon { color: var(--color-charcoal); }
.a-btn--white { --button-background: var(--color-white); --button-icon-background: var(--color-green-500); --button-icon-background-hover: var(--color-green-500); }
.a-btn[disabled] { opacity: .45; pointer-events: none; }
.a-link { font: inherit; font-size: var(--text-sm); letter-spacing: -.03em; color: inherit; background: none; border: 0; padding: 6px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.a-link:hover { text-decoration: none; }

/* section links: the site's floating pill of anchors */
.a-anchors { position: sticky; top: calc(var(--menu-bar-height) + var(--spacing) * 6); z-index: 20; display: flex; gap: 2px; width: max-content; max-width: calc(100% - 2 * var(--unit-md)); margin: var(--spacing-fluid-md) auto 0; padding: 5px; background: var(--color-white); border-radius: var(--radius-sm); font-size: var(--text-sm); letter-spacing: -.03em; }
.a-anchors a { padding: 9px 14px; border-radius: 7px; color: #2c2e2a99; transition: background var(--transition-duration-fast), color var(--transition-duration-fast); white-space: nowrap; }
.a-anchors a:hover, .a-anchors a.is-active { color: var(--color-charcoal); background: var(--color-beige-400); }

.a-section { padding: var(--spacing-fluid-2xl) 0; scroll-margin-top: 140px; }
.a-section--panel { background: var(--color-beige-400); border-radius: var(--radius-lg); }
.a-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: var(--spacing-fluid-lg); }
.a-head_note, .a-small { font-size: var(--text-sm); letter-spacing: -.03em; line-height: 1.35; color: #2c2e2a99; }
.a-sub { font-size: var(--text-heading-xs); letter-spacing: -.05em; margin: var(--spacing-fluid-xl) 0 var(--spacing-fluid-sm); }

/* lists and cards */
.a-list { display: grid; gap: var(--unit-md); }
.a-empty { background: var(--color-beige-400); border-radius: var(--radius-md); padding: var(--spacing-fluid-xl) var(--spacing-fluid-md); font-size: var(--text-heading-xs); letter-spacing: -.05em; line-height: 1.2; max-width: none; }
.a-section--panel .a-empty { background: var(--color-white); }
.a-empty small { display: block; margin-top: 10px; font-size: var(--text-md); letter-spacing: -.03em; color: #2c2e2a99; }
.a-card { background: var(--color-white); border-radius: var(--radius-md); padding: var(--spacing-fluid-md); display: grid; gap: var(--spacing-fluid-sm) var(--spacing-fluid-lg); transition: transform var(--transition-duration) var(--ease-bounce); }
@media (min-width: 1000px) { .a-card { grid-template-columns: 1fr 300px; align-items: start; } }
.a-card.is-mine { outline: 2px solid var(--color-charcoal); outline-offset: -2px; }
.a-card.is-withdrawn { opacity: .55; }
.a-card_title { font-size: var(--text-heading-xs); letter-spacing: -.05em; line-height: 1.15; overflow-wrap: anywhere; }
.a-card_text { margin-top: 10px; font-size: var(--text-md); letter-spacing: -.03em; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.a-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--spacing-fluid-sm); }
.a-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--color-beige-400); border-radius: 999px; padding: 6px 12px; font-size: var(--text-sm); letter-spacing: -.03em; line-height: 1.2; max-width: 100%; overflow-wrap: anywhere; }
.a-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-green-500); flex: none; }
.a-chip.-blue i { background: var(--color-blue-500); } .a-chip.-red i { background: var(--color-red-500); } .a-chip.-pink i { background: var(--color-pink-500); } .a-chip.-ink i { background: var(--color-charcoal); }
.a-card_side { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.a-weight { width: 100%; }
.a-weight_row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-sm); letter-spacing: -.03em; }
.a-weight_bar { height: 10px; border-radius: 999px; background: var(--color-beige-400); overflow: hidden; margin-top: 6px; }
.a-weight_bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--color-green-500); transition: width var(--transition-duration-slow) var(--ease); }
.a-card_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.a-badge { display: inline-block; background: var(--color-charcoal); color: var(--color-white); border-radius: 999px; padding: 5px 11px; font-size: var(--text-sm); letter-spacing: -.03em; }
.a-badge.-win { background: var(--color-green-500); color: var(--color-charcoal); }

/* form */
.a-two { display: grid; gap: var(--spacing-fluid-lg); }
@media (min-width: 1000px) { .a-two { grid-template-columns: 5fr 7fr; gap: calc(100vw / 16); } }
.a-two_text p { margin-top: var(--spacing-fluid-sm); font-size: var(--text-md); letter-spacing: -.03em; line-height: 1.35; max-width: 44ch; }
.a-form { display: grid; gap: var(--unit-md); background: var(--color-white); border-radius: var(--radius-md); padding: var(--spacing-fluid-md); }
.a-field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.a-field > span, .a-field > legend { font-size: var(--text-sm); letter-spacing: -.03em; padding: 0; }
.a-field > legend { margin-bottom: 8px; }
.a-field input, .a-field textarea { font: inherit; font-size: 16px; letter-spacing: -.02em; color: var(--color-charcoal); background: var(--input-background-color); border: 1px solid var(--color-beige-500); border-radius: var(--radius-sm); padding: 14px 15px; width: 100%; outline: none; transition: border-color var(--transition-duration-fast), background var(--transition-duration-fast); }
.a-field textarea { resize: vertical; min-height: 130px; line-height: 1.35; }
.a-field input:focus, .a-field textarea:focus { border-color: var(--color-charcoal); background: var(--color-white); }
.a-field ::placeholder { color: #2c2e2a66; }
.a-row { display: grid; gap: var(--unit-md); }
@media (min-width: 700px) { .a-row { grid-template-columns: 1.3fr 1fr; } }
.a-seg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.a-seg button { font: inherit; font-size: 16px; height: 50px; border-radius: var(--radius-sm); border: 1px solid var(--color-beige-500); background: var(--input-background-color); color: inherit; cursor: pointer; transition: transform var(--transition-duration) var(--ease-bounce), background var(--transition-duration-fast); }
.a-seg button:hover { transform: scale(1.06); }
.a-seg button[aria-pressed="true"] { background: var(--color-green-500); border-color: var(--color-green-500); }
.a-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 4px; }
.a-error { background: #ff705d26; border-radius: var(--radius-sm); padding: 12px 15px; font-size: var(--text-sm); letter-spacing: -.03em; }
.a-error[hidden] { display: none; }

/* confirmations: written into the page beside what they are about, never over it */
.a-say { background: var(--color-charcoal); color: var(--color-white); border-radius: var(--radius-sm); padding: 11px 15px; font-size: var(--text-sm); letter-spacing: -.03em; line-height: 1.3; width: 100%; }
.a-say[hidden] { display: none; }
.a-say.-inline { display: inline-block; width: auto; padding: 4px 10px; }
.a-say.-inline[hidden] { display: none; }
#proposals .a-say, .a-notices { margin-bottom: var(--unit-md); }
.a-notices { display: grid; gap: 6px; }
.a-notices[hidden] { display: none; }
.a-notice { display: flex; align-items: center; gap: 12px; background: var(--color-white); border-radius: var(--radius-sm); padding: 12px 15px; font-size: var(--text-md); letter-spacing: -.03em; line-height: 1.3; }
.a-notice span:nth-child(2) { flex: 1; min-width: 0; }

/* the dot: a round, solid dot; while it works, a row of small ones */
.a-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--color-green-500); flex: none; display: inline-block; }
.a-dots { display: inline-flex; gap: 5px; align-items: center; }
.a-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-charcoal); animation: a-pulse 1.2s var(--ease, ease-in-out) infinite; }
.a-dots i:nth-child(2) { animation-delay: .2s; } .a-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes a-pulse { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .a-dots i { animation: none; opacity: .6; } }
.a-working { display: flex; align-items: center; gap: 10px; font-size: var(--text-md); letter-spacing: -.03em; }
.a-dotline { display: flex; align-items: center; gap: 14px; background: var(--color-beige-400); border-radius: var(--radius-md); padding: var(--spacing-fluid-sm) var(--spacing-fluid-md); margin-bottom: var(--unit-md); }
.a-dotline .a-dot { width: 34px; height: 34px; }
.a-dotline p { min-width: 0; line-height: 1.45; }
.a-address { font: inherit; font-size: var(--text-md); letter-spacing: -.02em; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.a-address:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the report: full width under the week's card */
.a-report { grid-column: 1 / -1; background: var(--color-beige-400); border-radius: var(--radius-sm); padding: 0 var(--spacing-fluid-sm); }
.a-report summary { display: flex; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer; font-size: var(--text-md); letter-spacing: -.03em; list-style: none; }
.a-report summary::-webkit-details-marker { display: none; }
.a-report summary .a-small { margin-left: auto; }
.a-report_part { border-top: 1px solid var(--color-beige-500); padding: var(--spacing-fluid-sm) 0; display: grid; gap: 8px; font-size: var(--text-md); letter-spacing: -.03em; line-height: 1.4; }
@media (min-width: 1000px) { .a-report_part { grid-template-columns: 140px 1fr; } .a-report_part > h4 { grid-row: 1 / span 3; } .a-report_part > :not(h4) { grid-column: 2; } }
.a-report_part h4 { font-size: var(--text-heading-xs); letter-spacing: -.05em; line-height: 1.1; }
.a-report_text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 520px; overflow: auto; background: var(--color-white); border-radius: var(--radius-sm); padding: 16px 18px; }

.a-own { margin-top: var(--spacing-fluid-md); display: grid; gap: 10px; max-width: 44ch; }
.a-own a { text-decoration: underline; text-underline-offset: 3px; }
.a-own .a-field input { font-size: 14px; background: var(--color-white); }
.a-two_text .a-own p { margin-top: 0; }

.a-body .c-footer { margin-top: 0; }
@media (max-width: 699px) {
  .a-clock, .a-wallet { min-height: 0; }
  .a-anchors { top: calc(var(--menu-bar-height) + var(--spacing) * 6); }
}

.a-wallet .c-button_label { white-space: nowrap; }
.a-wallet { min-width: 0; }