/* The owner pages (epic 9, docs/design/owner-pages-options.html): the hub at /owners with a card per feature, the
   header's owners menu, the feature page template, and the drawings every card and page uses. Tokens only */

/* The hub's hero: the headline, the lede and the address box */
.ow-hero { display: grid; gap: var(--s4); max-width: 70ch; padding-top: var(--s5); }
.ow-hero__title { margin: 0; font-family: var(--mono); font-size: 44px; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.ow-hero__lede { margin: 0; color: var(--ink-2); font-size: var(--text-md); }
.ow-hero__find { max-width: 560px; }

/* The cards: one per feature, every drawing the same height so the titles sit on one line per row */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
@media (max-width: 1100px) { .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .doors { grid-template-columns: minmax(0, 1fr); } }
.door { display: grid; grid-template-rows: auto auto 1fr; gap: var(--s3); align-content: start; padding: var(--s4); border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--surface-2); color: inherit; text-decoration: none; }
a.door:hover { border-color: var(--ink-3); }
a.door:hover .door__title i { color: var(--ink); }
.door__pic { height: 180px; overflow: hidden; }
/* In one column nothing sits beside a card, so its drawing takes its own height rather than being cut at 180 px */
@media (max-width: 700px) { .door__pic { height: auto; } }
.door__title { display: flex; justify-content: space-between; align-items: center; margin: 0; font-family: var(--mono); font-size: var(--text-md); font-weight: 500; }
.door__title i { color: var(--ink-3); font-size: 16px; }
.door__body { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }

/* The header's owners menu: the link, a chevron, and a panel shown on hover or focus within at desk widths.
   A plain block, not a details: a closed details never renders its content, so CSS couldn't open it on hover */
/* It reaches down to the header's bottom edge (padding, cancelled by the margin so it still centers like the sign-in
   button), so the panel starts right there and the pointer never crosses a gap that would close it */
.owners-menu { position: relative; display: flex; align-items: center; gap: 4px; padding-bottom: var(--s4); margin-bottom: calc(-1 * var(--s4)); }
.owners-menu__chevron { color: var(--ink-3); font-size: 14px; }
.owners-menu__panel { display: none; position: absolute; top: 100%; right: 0; z-index: 20; width: 560px; margin-top: -1px; padding: var(--s3); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 0 0 var(--r-card) var(--r-card); box-shadow: var(--shadow-card); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.owners-menu:hover > .owners-menu__panel, .owners-menu:focus-within > .owners-menu__panel { display: grid; }
.owners-menu__item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: var(--r-ctl); color: var(--ink); text-decoration: none; }
.owners-menu__item:hover, .owners-menu__item:focus-visible { background: var(--surface-3); }
.owners-menu__item i { color: var(--brand); font-size: 18px; line-height: 1.2; }
.owners-menu__item b { display: block; font-weight: 600; font-size: var(--text-sm); }
.owners-menu__item span { color: var(--ink-3); font-size: var(--text-xs); }
.owners-menu__all { grid-column: 1 / -1; display: block; margin-top: 4px; padding: 10px 12px 4px; border-top: 1px solid var(--line); color: var(--link); font-size: var(--text-sm); text-decoration: none; }
.owners-menu__all:hover { color: var(--ink); }
@media (max-width: 760px) { .owners-menu { display: none; } }

/* A feature page: the crumb, the headline beside the big drawing, a reading column, the needs row, next */
.fp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s7); align-items: center; padding-top: var(--s5); }
@media (max-width: 900px) { .fp-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } }
.fp-crumb { margin: 0 0 var(--s3); font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-3); }
.fp-crumb a { color: var(--link); text-decoration: none; }
.fp-title { margin: 0 0 var(--s3); font-family: var(--mono); font-size: 40px; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.fp-lede { margin: 0 0 var(--s4); color: var(--ink-2); font-size: var(--text-md); max-width: 46ch; }
.fp-sections { display: grid; gap: var(--s6); max-width: 70ch; }
.fp-section h2 { margin: 0 0 var(--s2); font-family: var(--mono); font-size: var(--text-md); font-weight: 500; }
.fp-section p { margin: 0; color: var(--ink-2); }
.fp-section p + p { margin-top: var(--s2); }
/* A section with its own drawing beside it (3b), alternating sides */
.fp-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: center; max-width: none; }
.fp-pair:nth-of-type(even) > .fp-pair__words { order: 2; }
@media (max-width: 900px) { .fp-pair { grid-template-columns: minmax(0, 1fr); } .fp-pair:nth-of-type(even) > .fp-pair__words { order: 0; } }
.fp-needs { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--line); }
@media (max-width: 900px) { .fp-needs { grid-template-columns: minmax(0, 1fr); } }
.fp-needs h2 { margin: 0 0 var(--s2); font-family: var(--mono); font-size: var(--text-md); font-weight: 500; }
.fp-needs p { margin: 0; color: var(--ink-2); max-width: 50ch; }
.fp-next { display: grid; gap: var(--s2); padding-top: var(--s6); border-top: 1px solid var(--line); }
.fp-next span { font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-3); }
.fp-next a { color: var(--link); font-family: var(--mono); font-size: var(--text-md); text-decoration: none; }
.fp-next a:hover { color: var(--ink); }

/* The drawings: a framed panel in the mono face. --small fits a card's 180 px, --large is a page's picture */
.ow-pic { border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--surface-0); box-shadow: var(--shadow-card); overflow: hidden; font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-2); }
.ow-pic--small { font-size: 11.5px; }
.ow-pic__bar { display: flex; align-items: center; gap: var(--s2); padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: var(--text-xs); color: var(--ink-3); overflow-wrap: anywhere; }
.ow-pic--small .ow-pic__bar { padding: 8px 12px; }
.ow-pic__bar b { color: var(--ink); font-weight: 500; }
.ow-pic__dot { width: 8px; height: 8px; border-radius: var(--r-round); background: var(--live); flex: none; }
.ow-pic__feed { display: grid; gap: 6px; padding: 12px 14px; }
.ow-pic--small .ow-pic__feed { gap: 4px; padding: 10px 12px; }
.ow-pic__feed time { margin-right: var(--s2); color: var(--ink-3); }
.ow-pic__row { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 10px 14px; border-top: 1px solid var(--line); }
.ow-pic--small .ow-pic__row { padding: 8px 12px; }
.ow-who { color: var(--link); }
.ow-act { color: var(--warn); }
.ow-auto { color: var(--info); }
/* The Discord channel */
.ow-chan { display: grid; gap: 10px; padding: 12px 14px; }
.ow-pic--small .ow-chan { gap: 8px; padding: 10px 12px; }
.ow-msg { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.ow-msg__av { width: 26px; height: 26px; border-radius: var(--r-round); background: var(--surface-3); }
.ow-msg__av--bot { background: var(--brand); }
.ow-msg__name { margin-bottom: 2px; font-family: var(--sans); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.ow-msg__name small { margin-left: 6px; font-weight: 400; color: var(--ink-3); }
.ow-msg__app { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; background: color-mix(in srgb, var(--brand) 55%, var(--bg)); color: var(--white); font-family: var(--sans); font-size: 10px; vertical-align: 1px; }
.ow-msg__text { font-family: var(--sans); font-size: var(--text-sm); color: var(--ink-2); }
.ow-msg__text code { padding: 1px 5px; border-radius: 4px; background: var(--surface-2); color: var(--ink); font-family: var(--mono); }
.ow-msg__buttons { display: flex; gap: 8px; margin-top: 6px; }
.ow-msg__only { margin-top: 4px; font-family: var(--sans); font-size: 11px; color: var(--ink-3); }
.ow-embed { display: grid; gap: 4px; max-width: 420px; margin-top: 4px; padding: 8px 10px; border-left: 3px solid var(--brand); border-radius: 6px; background: var(--surface-2); }
.ow-embed b { font-family: var(--sans); color: var(--link); }
.ow-embed span { font-family: var(--sans); font-size: var(--text-sm); color: var(--ink-2); }
.ow-embed span b { color: var(--ink); }
.ow-embed small { font-size: 11px; color: var(--ink-3); }
/* A list with a state at the end of each row: the ban list, the roster */
.ow-list { display: grid; gap: 6px; padding: 10px 12px; }
.ow-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.ow-ok { color: var(--live); }
.ow-wait { color: var(--ink-3); }
/* The alerts channel */
.ow-alerts { display: grid; gap: 8px; padding: 10px 12px; }
.ow-alerts > div { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 8px; align-items: center; }
.ow-alerts__dot { display: block; width: 8px; height: 8px; border-radius: var(--r-round); }
.ow-alerts__dot--down { background: var(--danger); }
.ow-alerts__dot--up { background: var(--live); }
.ow-alerts__dot--busy { background: var(--brand); }
/* The standings */
.ow-rank { display: grid; gap: 6px; padding: 10px 12px; }
.ow-rank > div { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; }
.ow-rank__fake { color: var(--ink-3); text-decoration: line-through; }
.ow-rank__me { color: var(--ink); }
/* The API request */
.ow-req { display: grid; gap: 4px; padding: 12px 14px; overflow-wrap: anywhere; }
.ow-pic--small .ow-req { padding: 10px 12px; }
.ow-req__k { color: var(--ink-3); }
.ow-req__m { color: var(--live); }
.ow-req__s { color: var(--link); }
.ow-req__n { color: var(--warn); }