/* Frogku marketing composition. The shared field, Select, segmented, table and
   popup owners stay intact. Selection tiles use the existing 12px option corner;
   content papers use 24px, while actions alone retain the capsule shape. */
.earnings-page{--earnings-field-radius:12px}
.earnings-page .header{color:var(--ink);border-bottom:1px solid #12121218}
.earnings-page .header[data-surface=green]{background:var(--brand-field)}
.earnings-page .header[data-surface=mint]{background:var(--section-mint)}
.earnings-page .header[data-surface=dark]{background:var(--section-dark);color:white;border-bottom-color:#ffffff18}
.earnings-tier-field{min-width:0;margin:0 0 32px;padding:0 0 32px;border:0;border-bottom:1px solid var(--ui-line)}
.earnings-tier-field legend,.earnings-field>label{display:block;font:500 15px/22px var(--font-ui);margin-bottom:12px}
.earnings-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:132px}
.earnings-tier.ui-secondary{display:grid;grid-template-columns:1fr;align-content:center;justify-content:start;align-items:start;gap:8px;width:100%;min-height:132px;padding:20px;border:1px solid var(--ui-line);border-radius:var(--earnings-field-radius);background:var(--ui-paper);color:var(--ui-fg);text-align:left;transition:background-color 180ms var(--ui-ease),border-color 180ms var(--ui-ease),color 180ms var(--ui-ease);box-shadow:none}
.earnings-tier.ui-secondary:hover{background:var(--ui-control-hover);border-color:var(--ui-brand-line)}
.earnings-tier.ui-secondary[aria-pressed=true]{background:var(--section-mint);border-color:var(--green-deep);box-shadow:inset 0 0 0 1px var(--green-deep);color:var(--green-deep)}
.earnings-tier-heading{display:flex;flex-direction:column;gap:4px;min-width:0}
.earnings-tier-number{font:400 12px/18px var(--font-ui);color:#626262}
.earnings-tier-name{font:500 18px/24px var(--font-ui);letter-spacing:-.025em}
.earnings-tier-rate{display:flex;flex-wrap:wrap;gap:2px 5px;align-items:baseline;min-width:0}
.earnings-tier-rate strong{font:500 15px/22px var(--font-ui);font-variant-numeric:tabular-nums;letter-spacing:-.015em;white-space:nowrap}
.earnings-tier-unit{font:400 12px/18px var(--font-ui);color:#626262}
.earnings-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}
.earnings-field{min-width:0}
.earnings-field :is(input,select){display:block;width:100%;min-height:52px;border:1px solid transparent;border-radius:var(--earnings-field-radius);padding:13px;background:var(--ui-surface);color:var(--ui-fg);font:400 16px/24px var(--font-ui);font-variant-numeric:tabular-nums;transition:background-color 180ms var(--ui-ease),border-color 180ms var(--ui-ease)}
.earnings-field select[hidden]{display:none}
.earnings-field input[readonly]{color:#626262}
.earnings-field .product-select-trigger{min-height:52px;border-radius:var(--earnings-field-radius);padding-block:13px}
.earnings-field .product-editable-select{gap:0;padding-right:4px}
.earnings-field .product-editable-select>input{flex:1;min-width:0;width:0;height:24px;min-height:24px;border:0;border-radius:0;padding:0;background:transparent;color:inherit;font:inherit;outline:none}
.product-editable-select .product-select-toggle{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-block:-10px;margin-right:-5px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
:root[data-input-modality=keyboard] .earnings-page .product-editable-select:focus-within{outline:2px solid var(--ui-brand-ink);outline-offset:3px}
.earnings-field input[aria-invalid=true]{border-color:var(--error-ink)}
.earnings-field :is(input,.product-select-trigger):focus-visible{outline:2px solid var(--ui-brand-ink);outline-offset:3px}
.earnings-field .product-editable-select>input:focus-visible{outline:none}
.earnings-hint{color:#626262;font:400 14px/22px var(--font-ui);margin-top:10px;text-wrap:pretty}
.earnings-error{color:var(--error-ink);font:400 14px/22px var(--font-ui);margin-top:10px}
.earnings-result{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;margin-top:36px;padding:32px;border-radius:24px;background:var(--green-deep);color:white}
.earnings-caption{display:block;font:400 13px/20px var(--font-ui);color:#ffffffb8;margin-bottom:6px}
.earnings-result strong{display:block;font:500 16px/24px var(--font-ui)}
.earnings-result #earnings-result-hours{font-variant-numeric:tabular-nums}
.earnings-total{grid-column:1/-1;padding-top:24px;border-top:1px solid #ffffff30}
.earnings-total .earnings-caption{margin-bottom:12px}
.earnings-result .earnings-total strong{font:500 40px/1.18 var(--font-ui);font-variant-numeric:tabular-nums;letter-spacing:-.055em;color:var(--brand-field);overflow-wrap:normal}
#earnings-monthly{font:400 16px/24px var(--font-ui);font-variant-numeric:tabular-nums;color:white;margin-top:12px}
.earnings-calculator-foot{display:flex;align-items:center;gap:32px;margin-top:28px}
.earnings-calculator-foot>p{flex:1;color:#626262;font:400 13px/21px var(--font-ui);text-wrap:pretty}
.earnings-start{flex:none;background:var(--green-deep);color:white;min-height:52px;font-size:15px;padding:15px 24px}
.earnings-start:hover{background:var(--ui-brand-ink)}
.earnings-table-heading{display:flex;align-items:baseline;justify-content:space-between;gap:var(--page-copy-gap)}
.earnings-table-heading p{display:none;font:400 13px/20px var(--font-ui);color:#626262}
.earnings-table-scroll{max-width:100%;overflow:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;border-radius:0;--bg:var(--ui-paper);--fg:var(--ui-fg);--line:var(--ui-line);--row-hover-bg:var(--section-mint);--brand-ink:var(--ui-brand-ink);--font-mixed:var(--font-ui)}
.earnings-table{min-width:820px;table-layout:auto;--earnings-cell-block:18px;--earnings-cell-inline:12px;--earnings-row-border:4px}
.earnings-table :is(th,td){white-space:nowrap;font:400 14px/22px var(--font-ui);font-variant-numeric:tabular-nums;padding:var(--earnings-cell-block) var(--earnings-cell-inline)}
.earnings-table thead th{position:static;font:500 14px/22px var(--font-ui);color:#626262;padding-block:16px}
/* InformationTable's opaque first column keeps the hour context in view. */
.earnings-table :is(th,td):first-child{position:sticky;left:0;z-index:1;background:var(--ui-paper)}
.earnings-table thead th:first-child{z-index:2}
.earnings-examples .earnings-table tbody tr>:is(th,td){border-block-width:var(--earnings-row-border);border-radius:0;background:var(--ui-paper)}
/* The hover surface clears the row dividers by the paper border on each edge. */
.earnings-cell-content{display:block;position:relative;isolation:isolate}
.earnings-cell-content::before{content:"";position:absolute;inset:calc(-1 * var(--earnings-cell-block)) calc(-1 * var(--earnings-cell-inline));z-index:-1;background:var(--ui-brand-hover);opacity:0;pointer-events:none;transition:opacity var(--row-hover-duration) var(--row-hover-ease)}
.earnings-table tbody tr:is(:hover,:focus-within) .earnings-cell-content::before{opacity:1}
.earnings-table tbody tr>:first-child .earnings-cell-content::before{border-radius:var(--earnings-field-radius) 0 0 var(--earnings-field-radius)}
.earnings-table tbody tr>:last-child .earnings-cell-content::before{border-radius:0 var(--earnings-field-radius) var(--earnings-field-radius) 0}
/* Emphasize the most-needed tier through type, keeping the table paper clear. */
.earnings-examples .earnings-table [data-tier="1"]{color:var(--selection-fill);font-weight:600}
.earnings-examples .earnings-table tbody tr:is(:hover,:focus-within)>[data-tier="1"]{color:var(--ui-brand-ink)}
.earnings-page .legal-footer{margin-top:0}
.earnings-page :is(.ui-secondary,.earnings-start,.earnings-table-scroll):focus-visible{outline:2px solid var(--ui-brand-ink);outline-offset:3px}
.earnings-page [hidden]{display:none!important}
@media(max-width:999px){
 .earnings-tier.ui-secondary{padding:16px}
 .earnings-result .earnings-total strong{font-size:36px}
 .earnings-table-heading p{display:block}
}
@media(max-width:699px){
 .earnings-tiers{grid-template-columns:1fr;min-height:0;gap:10px}
 .earnings-tier.ui-secondary{grid-template-columns:minmax(0,1fr) auto;align-items:center;align-content:center;gap:16px;min-height:96px;padding:16px}
 .earnings-tier-name{font-size:16px;line-height:22px}
 .earnings-tier-rate{flex-direction:column;align-items:flex-end;gap:4px}
 .earnings-tier-rate strong{font-size:14px;line-height:22px}
 .earnings-fields{grid-template-columns:1fr;gap:24px}
 .earnings-tier-field{margin-bottom:28px;padding-bottom:28px}
 .earnings-result{padding:24px;gap:24px 20px;margin-top:28px}
 .earnings-result .earnings-total strong{font-size:32px;line-height:1.22}
 .earnings-total{padding-top:24px}
 #earnings-monthly{font-size:14px;line-height:22px}
 .earnings-calculator-foot{flex-direction:column;align-items:stretch;gap:24px;margin-top:24px}
 .earnings-calculator-foot>p{font-size:13px;line-height:21px}
 .earnings-table-heading{display:block;padding-bottom:20px}
 .earnings-table-heading p{margin-top:8px}
}
@media(max-width:389px){
 .earnings-tier.ui-secondary{grid-template-columns:1fr;gap:8px;min-height:104px}
 .earnings-tier-heading{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
 .earnings-tier-rate{flex-direction:row;align-items:baseline;gap:4px 8px}
 .earnings-tier-name{font-size:16px}
 .earnings-result{padding:20px;grid-template-columns:1fr;gap:20px}
 .earnings-total{padding-top:20px}
 .earnings-result .earnings-total strong{font-size:28px}
 .earnings-result>div:nth-child(2){display:flex;gap:12px;align-items:baseline}
 .earnings-result>div:nth-child(2) .earnings-caption{margin-bottom:0}
}
@media(prefers-reduced-motion:reduce){.earnings-field input,.earnings-tier.ui-secondary{transition:none}}

/* Headings share the field edge; captions follow the inset input text. */
.earnings-tier-field legend,.earnings-field>label{padding-inline:0}
.earnings-field>.earnings-hint,.earnings-field>.earnings-error{padding-inline:14px}