/* OAuth2: its own parts, loaded after websec.css. */

:root { --app: #2e8b3e; --api: #6a4fc9; }
@media (prefers-color-scheme: dark) { :root { --app: #6fd38a; --api: #b39dff; } }

/* The stage: the asking side on the left (alice's browser over the app), the
   providing side on the right (the authorization server over its API), the
   wire between them, as tall as both rows. Every card has a fixed height
   and scrolls under its heading and its button. */
.oa-sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 0.75rem; margin-top: 0.4rem; min-height: 1.5rem; align-items: center;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); }
.oa-sides span:last-child { text-align: right; }
.oa-stage {
  display: grid; gap: 0.75rem; margin-top: 0.1rem; margin-bottom: 1.5rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: 25rem 19rem;
  grid-template-areas: "browser wire auth" "app wire api";
}
.oa-stage { position: relative; }
.oa-link { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
@media (max-width: 860px) { .oa-link { display: none; } .oa-stage { margin-bottom: 0; } }
.ws-shell .ws-say { margin-top: 0; }
.oa-browser { grid-area: browser; } .oa-wire { grid-area: wire; } .oa-auth { grid-area: auth; }
.oa-app { grid-area: app; } .oa-api { grid-area: api; }
.oa-card, .oa-wire { display: flex; flex-direction: column; min-height: 0; overflow: hidden; transition: box-shadow 0.25s, border-color 0.25s; }
.oa-wire { overflow-y: auto; }
.srv-body { position: relative; overflow-y: auto; min-height: 0; flex: 1; margin: 0 -0.4rem; padding: 0 0.4rem; }
.oa-card.here { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
@media (max-width: 860px) {
  .oa-sides { display: none; }
  .oa-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "browser" "wire" "app" "auth" "api"; }
  .oa-card { max-height: 30rem; }
}

.oa-browser { --c: var(--client); border-top: 4px solid var(--c); }
.oa-app { --c: var(--app); border-top: 4px solid var(--c); }
.oa-auth { --c: var(--server); border-top: 4px solid var(--c); }
.oa-api { --c: var(--api); border-top: 4px solid var(--c); }
.p-browser { color: var(--client); } .p-app { color: var(--app); } .p-auth { color: var(--server); } .p-api { color: var(--api); }

/* alice's browser: the address bar, two bookmarks, the page, then its history */
.oa-browser .bw { flex: none; }
.bw-bar .addr { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.72rem; overflow-wrap: anywhere; }
.bw-marks { display: flex; gap: 0.3rem; padding: 0.25rem 0.45rem; border-bottom: 1px solid var(--border); background: var(--btn); }
.bw-marks .mark { all: unset; cursor: pointer; font-size: 0.72rem; color: var(--accent); padding: 0 0.3rem; border-radius: 4px; }
.bw-marks .mark:hover:not(:disabled) { text-decoration: underline; }
.bw-marks .mark:disabled { opacity: 0.5; cursor: default; }
.oa-browser .bw-view { min-height: 0; height: 12.5rem; overflow-y: auto; }
.bw-view h1 { font-size: 1.02rem; margin: 0 0 0.35rem; }
.bw-view h4 { font-size: 0.78rem; margin: 0.4rem 0 0.25rem; }
.bw-view p { margin: 0 0 0.4rem; }
.bw-view.waiting > :not(.bw-wait-tag) { opacity: 0.4; }
.bw-wait-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--panel); color: var(--panel-text);
  border-radius: 8px; padding: 0.3rem 0.7rem; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.pg-site { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.15rem; }
.pg-site.app { color: var(--app); } .pg-site.auth { color: var(--server); }
.bw-view .form { display: grid; gap: 0.3rem; max-width: 15rem; }
.bw-view .form label { display: grid; gap: 0.1rem; font-size: 0.74rem; color: var(--dim); }
.bw-view .form input { font-family: ui-monospace, Menlo, Consolas, monospace !important; padding: 0.15rem 0.35rem !important; }
.bw-view .form .ws-btn, .bw-view > .ws-btn { justify-self: start; }
.bw-view .err { color: var(--bad); font-weight: 600; }
.bw-view .okline { color: var(--ok); font-weight: 600; }
.bw-view .scopes { margin: 0 0 0.3rem; padding-left: 1.1rem; }
.bw-view .btns { display: flex; gap: 0.4rem; }
.bw-view .album, .bw-view .app-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; margin-bottom: 0.45rem; }
.thumbs { letter-spacing: 0.1em; }
.small { font-size: 0.74rem; }
.oa-browser .reply { margin: 0.45rem 0 0.2rem; }
.hist { margin: 0; padding-left: 1.2rem; font-size: 0.72rem; display: grid; gap: 0.1rem; }
.hist .link { all: unset; cursor: pointer; font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; color: var(--accent); }
.hist .link:hover:not(:disabled) { text-decoration: underline; }
.hist .link:disabled { cursor: default; color: var(--text); }
.hist span { font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.jar-list { list-style: none; margin: 0; padding: 0; font-size: 0.74rem; display: grid; gap: 0.1rem; }

/* The servers' cards */
.sess td { vertical-align: top; font-size: 0.76rem; overflow-wrap: anywhere; border-bottom: 1px dashed var(--border); }
.sess td:last-child { width: auto; text-align: left; }
.sess b.bad, .sess .bad { color: var(--bad); }
.mem { font-size: 0.76rem; }
.mem dd code { overflow-wrap: anywhere; }
.keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; font-size: 0.78rem; }
.keys .kg { color: var(--secret); font-weight: 700; }
.tools { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tool-out { margin: 0.35rem 0 0; font-size: 0.78rem; font-weight: 600; }
.oa-card .trace li { grid-template-columns: 1.2rem minmax(0, 1fr); }
.oa-card .trace li code { grid-column: 2; }
.trace li.dim code { color: var(--dim); }

/* The wire: which channel, who to whom, the message */
.chan { margin: 0 0 0.35rem; font-size: 0.78rem; font-weight: 700; text-align: center; padding: 0.15rem 0.4rem; border-radius: 6px; }
.chan.front { background: color-mix(in srgb, var(--client) 14%, transparent); }
.chan.back { background: color-mix(in srgb, var(--app) 14%, transparent); }
.ws-msg .dir span:first-child, .ws-msg .dir span:last-child { color: inherit; }
.ws-msg .dir .p-browser { color: var(--client); } .ws-msg .dir .p-app { color: var(--app); }
.ws-msg .dir .p-auth { color: var(--server); } .ws-msg .dir .p-api { color: var(--api); }
.ws-msg .dir .arrow { color: var(--dim); }
.ws-msg.live { animation: in-right 0.35s ease-out; }
@media (prefers-reduced-motion: reduce) { .ws-msg.live { animation: none; } }
.from-browser .ws-raw { border-left-color: var(--client); } .from-app .ws-raw { border-left-color: var(--app); }
.from-auth .ws-raw { border-left-color: var(--server); } .from-api .ws-raw { border-left-color: var(--api); }
.ws-raw .pk { color: var(--dim); }
.ws-raw .pv { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.ws-raw .sub { overflow-wrap: anywhere; }

/* The messages so far: one colour per sender, the back channel dashed */
.ws-seq .msg.ap { stroke: var(--app); } .ws-seq .ah.ap { fill: var(--app); }
.ws-seq .msg.au { stroke: var(--server); } .ws-seq .ah.au { fill: var(--server); }
.ws-seq .msg.pi { stroke: var(--api); } .ws-seq .ah.pi { fill: var(--api); }
.ws-seq .msg.back { stroke-dasharray: 7 4; }

/* The whole tool in the window, with no page scrolling: the controls, the
   side labels and the explanation keep their heights, and the stage takes
   the rest, split once by what each row holds (the browser's page and the
   authorization server's pages over the app and the API). The split is
   fixed for the whole story, and each card scrolls inside itself. Below
   860px wide, or in a window too short for it, the page scrolls as before. */
@media (min-width: 860px) and (min-height: 700px) {
  html, body { height: 100%; overflow: hidden; }
  .ws-shell { height: 100vh; }
  .ws-shell .ws-app { height: 100vh; display: flex; flex-direction: column; padding-bottom: 0.5rem; }
  .ws-bar, .oa-sides { flex: none; }
  .oa-stage { flex: 1; min-height: 0; grid-template-rows: minmax(0, 62fr) minmax(0, 38fr); }
  .ws-shell .ws-say { flex: none; height: 6.75rem; margin-top: 0; }
  /* the browser: its page takes the room, the history and cookies a fixed third under it */
  .oa-browser .bw { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .oa-browser .bw-bar, .oa-browser .bw-marks { flex: none; }
  .oa-browser .bw-view { flex: 1; height: auto; min-height: 0; }
  .oa-browser .srv-body { flex: 0 0 20%; }
  /* the parts every card keeps in view, made compact so the rest has room */
  .oa-stage .ws-slot { padding: 0.5rem 0.7rem; }
  .oa-stage .ws-slot h2 { margin-bottom: 0.35rem; }
  .oa-stage .reply { flex: none; margin-bottom: 0.4rem; padding: 0.25rem 0.45rem; }
  .oa-stage .reply .ws-btn { padding-top: 0.15rem; padding-bottom: 0.15rem; }
  .oa-browser .reply { margin: 0.35rem 0 0.2rem; }
  .bw-bar .addr { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
}