/* Teahub on Gitea 28: green tea colours, the 🍵 mark with its name in the navbar, the home page,
   and the dashboard sidebar with its Domains tab. Loaded by templates/custom/header.tmpl. */

/* The colours: Gitea's default themes in green. The colour-blind themes keep their own palettes. */
:root[data-theme="gitea-light"],
:root[data-theme="gitea-auto"] {
  --color-primary: #2f9e44;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #27863a;
  --color-primary-dark-2: #1f6f30;
  --color-primary-dark-3: #1c5f29;
  --color-primary-dark-4: #184f22;
  --color-primary-dark-5: #103718;
  --color-primary-dark-6: #09200e;
  --color-primary-dark-7: #030904;
  --color-primary-light-1: #43ad57;
  --color-primary-light-2: #63bd72;
  --color-primary-light-3: #78c085;
  --color-primary-light-4: #8dca98;
  --color-primary-light-5: #acd8b4;
  --color-primary-light-6: #d5ecda;
  --color-primary-light-7: #f3f9f4;
  --color-primary-alpha-10: #2f9e4419;
  --color-primary-alpha-20: #2f9e4433;
  --color-primary-alpha-30: #2f9e444b;
  --color-primary-alpha-40: #2f9e4466;
  --color-primary-alpha-50: #2f9e4480;
  --color-primary-alpha-60: #2f9e4499;
  --color-primary-alpha-70: #2f9e44b3;
  --color-primary-alpha-80: #2f9e44cc;
  --color-primary-alpha-90: #2f9e44e1;
  --color-primary-hover: var(--color-primary-dark-1);
  --color-primary-active: var(--color-primary-dark-2);
  --color-green: #2f9e44;
}

/* In Gitea's dark theme the "dark" shades are the lighter ones. White on this green is hard to read; near-black is not. */
:root[data-theme="gitea-dark"] {
  --color-primary: #58b96a;
  --color-primary-contrast: #0e2412;
  --color-primary-dark-1: #69c079;
  --color-primary-dark-2: #79c788;
  --color-primary-dark-3: #8ace97;
  --color-primary-dark-4: #9bd5a6;
  --color-primary-dark-5: #bce3c3;
  --color-primary-dark-6: #def1e1;
  --color-primary-dark-7: #f5fbf6;
  --color-primary-light-1: #4fa65f;
  --color-primary-light-2: #469455;
  --color-primary-light-3: #3e824a;
  --color-primary-light-4: #356f40;
  --color-primary-light-5: #234a2a;
  --color-primary-light-6: #122515;
  --color-primary-light-7: #050b06;
  --color-primary-alpha-10: #58b96a19;
  --color-primary-alpha-20: #58b96a33;
  --color-primary-alpha-30: #58b96a4b;
  --color-primary-alpha-40: #58b96a66;
  --color-primary-alpha-50: #58b96a80;
  --color-primary-alpha-60: #58b96a99;
  --color-primary-alpha-70: #58b96ab3;
  --color-primary-alpha-80: #58b96acc;
  --color-primary-alpha-90: #58b96ae1;
  --color-primary-hover: var(--color-primary-light-1);
  --color-primary-active: var(--color-primary-light-2);
  --color-green: #58b96a;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="gitea-auto"] {
    --color-primary: #58b96a;
    --color-primary-contrast: #0e2412;
    --color-primary-dark-1: #69c079;
    --color-primary-dark-2: #79c788;
    --color-primary-dark-3: #8ace97;
    --color-primary-dark-4: #9bd5a6;
    --color-primary-dark-5: #bce3c3;
    --color-primary-dark-6: #def1e1;
    --color-primary-dark-7: #f5fbf6;
    --color-primary-light-1: #4fa65f;
    --color-primary-light-2: #469455;
    --color-primary-light-3: #3e824a;
    --color-primary-light-4: #356f40;
    --color-primary-light-5: #234a2a;
    --color-primary-light-6: #122515;
    --color-primary-light-7: #050b06;
    --color-primary-alpha-10: #58b96a19;
    --color-primary-alpha-20: #58b96a33;
    --color-primary-alpha-30: #58b96a4b;
    --color-primary-alpha-40: #58b96a66;
    --color-primary-alpha-50: #58b96a80;
    --color-primary-alpha-60: #58b96a99;
    --color-primary-alpha-70: #58b96ab3;
    --color-primary-alpha-80: #58b96acc;
    --color-primary-alpha-90: #58b96ae1;
    --color-primary-hover: var(--color-primary-light-1);
    --color-primary-active: var(--color-primary-light-2);
    --color-green: #58b96a;
  }
}

/* The navbar: 🍵 and the name. */
#navbar-logo {width:auto;gap:.45rem;}
#navbar-logo::after {content:"Teahub";font-size:1rem;font-weight:650;white-space:nowrap;}
#navbar-logo img {width:30px;height:30px;}

/* Teahub does not send people to Gitea's documentation. */
a.item[href="https://docs.gitea.com"] {display:none!important;}

/* Home: Teahub = Git + Tea + Time, beside the cup. */
.teahub-home {display:grid;min-height:calc(100vh - 8.5rem);place-items:center;padding:0 1.5rem;}
.teahub-home-shell {width:min(100% - 4rem,1160px)!important;max-width:none!important;}
.teahub-home-hero {display:grid;grid-template-columns:minmax(0,1.45fr) minmax(15rem,.55fr);align-items:center;gap:clamp(2rem,5vw,5rem);width:100%;padding:clamp(4rem,12vh,9rem) 0;margin:0 auto;}
.teahub-home-copy {min-width:0;}
.teahub-home-brand {margin:0 0 clamp(2.5rem,5vh,3.5rem);color:var(--color-text);font-size:clamp(2.5rem,4vw,3.6rem);font-weight:700;letter-spacing:-.045em;line-height:1;}
.teahub-home-equation {display:flex;align-items:baseline;flex-wrap:nowrap;white-space:nowrap;width:max-content;max-width:100%;margin:0;color:var(--color-text);font-size:clamp(4rem,6.4vw,7rem);font-weight:540;line-height:.9;font-kerning:normal;}
.teahub-home-equation > span:not(.teahub-home-plus),.teahub-home-equation em {letter-spacing:-.07em;}
.teahub-home-equation em {display:inline-block;color:inherit;font-family:Georgia,"Times New Roman",serif;font-size:.94em;font-weight:400;line-height:1;letter-spacing:-.055em;}
.teahub-home-plus {color:var(--color-primary);font-size:.64em;font-weight:560;letter-spacing:0;line-height:1;margin-inline:.16em;}
.teahub-home-cta {margin-top:2rem!important;border-radius:.65rem!important;padding:.9rem 1.2rem!important;}
.teahub-home-cta span {display:inline-block;margin-left:.25rem;font-size:.9em;}
.teahub-home-cup {justify-self:center;display:grid;place-items:center;min-width:0;width:min(100%,20rem);aspect-ratio:1;font-size:clamp(6rem,13vw,9rem);line-height:1;}

@media (max-width:767px) {
  .teahub-home {min-height:auto;padding:3rem 1rem;}
  .teahub-home-shell {width:min(100% - 1rem,1160px)!important;}
  .teahub-home-hero {grid-template-columns:1fr;gap:2.5rem;padding:3rem 0 4rem;text-align:center;}
  .teahub-home-copy {text-align:center;}
  .teahub-home-brand {margin-bottom:2rem;font-size:clamp(2rem,8vw,2.7rem);}
  .teahub-home-equation {justify-content:center;width:100%;font-size:clamp(2.35rem,12vw,4rem);}
  .teahub-home-cup {grid-row:2;width:min(68vw,15rem);font-size:clamp(6rem,25vw,9rem);}
}

/* Dashboard: the feed, and beside it Domains | Repository | Organization above the contribution heatmap. */
.teahub-dashboard-layout {align-items:flex-start;gap:1.5rem;}
.teahub-dashboard-sidebar {display:grid;gap:1rem;}
.teahub-sidebar-repos,.teahub-sidebar-heatmap {min-width:0;width:100%;}
.teahub-sidebar-repos #dashboard-repo-list {width:100%;min-width:0;max-width:100%;}
.teahub-sidebar-repos #dashboard-repo-list > .ui.menu {margin-bottom:0!important;}
.teahub-sidebar-heatmap .divider {display:none;}
.teahub-resource-menu {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;min-width:0!important;}
.teahub-resource-menu > .item {width:auto!important;min-width:0!important;max-width:none!important;margin:0!important;justify-content:center!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;}
.teahub-domain-tab {display:none;}
#dashboard-repo-list.teahub-domains-active .teahub-domain-tab {display:block;}
#dashboard-repo-list.teahub-domains-active .dashboard-repos,
#dashboard-repo-list.teahub-domains-active .dashboard-orgs {display:none!important;}

/* The Domains tab: search, then exact names and suggestions from Cloudflare Registrar. */
.teahub-domain-search-shell {margin:0!important;border-radius:0!important;}
.teahub-domain-search-input > input {min-width:0;}
.teahub-domain-results {margin:0!important;padding:0!important;border-radius:0 0 .5rem .5rem!important;max-height:20rem;overflow:auto;}
.teahub-domain-results[hidden] {display:none!important;}
.teahub-domain-results ul {margin:0;padding:0;list-style:none;}
.teahub-domain-section-head {display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.45rem .7rem .45rem .9rem;border-bottom:1px solid var(--color-secondary);background:var(--color-secondary-bg);}
.teahub-domain-section-title {flex:0 0 auto;color:var(--color-text-light-2);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.teahub-domain-controls {display:flex;align-items:center;justify-content:flex-end;gap:.55rem;min-width:0;}
.teahub-domain-controls select {width:auto;min-width:7.9rem;max-width:9.5rem;height:2rem;padding:.3rem .55rem;font-size:.74rem;color:var(--color-input-text);background:var(--color-input-background);border:1px solid var(--color-input-border);border-radius:var(--border-radius);}
.teahub-domain-available-toggle {display:inline-flex;align-items:center;gap:.3rem;color:var(--color-text-light-2);font-size:.72rem;font-weight:400;white-space:nowrap;cursor:pointer;}
.teahub-domain-available-toggle input {margin:0;}
.teahub-domain-suggestions {border-top:1px solid var(--color-secondary);}
.teahub-domain-suggestions summary {cursor:pointer;padding:.6rem .9rem;color:var(--color-text-light-2);font-size:.8rem;user-select:none;}
.teahub-domain-suggestions summary .ui.label {margin-left:.35rem;}
.teahub-domain-row {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.7rem .9rem;border-bottom:1px solid var(--color-secondary);}
.teahub-domain-row:last-child {border-bottom:0;}
.teahub-domain-name {min-width:0;}
.teahub-domain-name strong {display:block;overflow-wrap:anywhere;font-size:.88rem;font-weight:500;}
.teahub-domain-price {text-align:right;white-space:nowrap;}
.teahub-domain-price strong {font-size:.82rem;font-weight:500;}
.teahub-domain-price span {display:block;color:var(--color-text-light-2);font-size:.72rem;margin-top:.08rem;}
.teahub-domain-state {display:inline-block;margin-top:.12rem;font-size:.7rem;font-weight:500;}
.teahub-domain-state.is-available {color:var(--color-green);}
.teahub-domain-state.is-unavailable {color:var(--color-red);}
.teahub-domain-empty {padding:1rem;color:var(--color-text-light-2);text-align:center;font-size:.8rem;}
.teahub-domain-empty-inline {border-bottom:1px solid var(--color-secondary);}

@media (max-width:540px) {
  .teahub-domain-section-head {align-items:flex-start;flex-direction:column;}
  .teahub-domain-controls {width:100%;justify-content:space-between;}
}