/* Layout components rendered by the PHP server (server/src/View/Components):
   Hero, AppTile grid, SiteFooter, and .btn on links. Built on the tokens in
   tokens.css so light and dark themes follow automatically. */

a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

.hero{display:flex;flex-direction:column;gap:8px;padding:28px 22px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.hero-title{font-family:"Bricolage Grotesque",var(--body);font-size:clamp(24px,4vw,36px);line-height:1.15;max-width:28ch}
.hero-lede{color:var(--ink-2);max-width:60ch;font-size:16px}
.hero-actions{margin-top:6px}

.app-tiles{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.app-tile{display:flex;flex-direction:column;gap:10px}
.app-tile .row{margin-top:auto}
.tile-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;color:var(--ink-2)}

.site-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-top:12px;padding:16px 4px 0;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.site-foot-links{display:flex;flex-wrap:wrap;gap:6px 16px}
.site-foot-links a{color:var(--ink-2);text-decoration:none;font-weight:600}
.site-foot-links a:hover{color:var(--accent);text-decoration:underline}
.site-foot-meta{display:flex;flex-wrap:wrap;gap:6px 16px}

/* The menu and the segmented control as links: every entry has its own URL.
   Same look as the button versions in components.css. The menu scrolls
   sideways only: a row that may scroll one way is given a scrollbar the other
   way too unless it is told not to. */
.tabs{overflow-y:hidden}
.tabs a{padding:8px 14px;font-weight:600;color:var(--ink-2);border-bottom:3px solid transparent;white-space:nowrap;text-decoration:none}
.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--route)}
.subtabs a{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);padding:5px 12px;border-radius:999px;font-weight:600;font-size:13px;text-decoration:none}
.subtabs a[aria-current="page"]{background:var(--metal);color:var(--gold-flat);border-color:transparent}
.seg a{color:var(--ink-2);padding:5px 12px;border-radius:999px;font-weight:600;font-size:13px;text-decoration:none}
.seg a[aria-current="true"]{background:var(--metal);color:var(--gold-flat)}
/* Messages: the result of a form, or a form that could not be saved. */
.banner.good{background:var(--good-soft);border-color:var(--good)}
.banner.warn{background:var(--warn-soft);border-color:var(--warn)}
.banner.bad{background:var(--bad-soft);border-color:var(--bad)}

/* A flyer looked over before it is made: the pages, and the texts beside them. */
.flyer-review{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr);gap:16px;align-items:start}
@media (max-width:900px){.flyer-review{grid-template-columns:1fr}}

/* An email signature, shown in a sandbox. */
.signature-look{display:block;width:100%;height:170px;border:1px solid var(--line);border-radius:8px;background:#fff}

/* The person's own Google Calendar, on the calendar's layers. */
.cal-ev.k-gcal,.lay-dot.k-gcal,.legend i.k-gcal{border-color:var(--mk-agent)}

/* A record's name in a table is the link to its own page. */
td>a:has(>strong){color:var(--ink);text-decoration:none}
td>a:has(>strong):hover{text-decoration:underline}
@media (max-width:700px){
  .tabs a{border-bottom:0;border-top:3px solid transparent;margin:0;padding:8px 6px;font-size:11.5px;flex:1 0 auto;min-width:0;text-align:center}
  .tabs a[aria-current="page"]{border-top-color:var(--route)}
}
/* Eight tabs on the agent app (REMA Referral is one): on a narrow phone they share the width with no gap, so all of them show. */
@media (max-width:420px){
  .tabs{gap:0}
  .tabs a{padding:8px 3px;font-size:11px}
}

@media (max-width:560px){
  .hero{padding:20px 16px}
  .site-foot{flex-direction:column;align-items:flex-start}
}