/* Amazon S3 in Depth: tables, policies, terminals and the slides' small
   diagrams. Loads after /slides/slides.css. */

:root { --mono: ui-monospace, Menlo, Consolas, monospace; --ok: #1d8102; --no: #d13212; --s3: #3f8624; }

.sv-fig { justify-content: flex-start; gap: 14px; }
@media (min-width: 861px) { .sv-side .sv-body { grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); } }

/* The sections' colours. */
[data-sec="intro"] { --sec: #334155; }
[data-sec="objects"] { --sec: #3f6212; }
[data-sec="classes"] { --sec: #0f766e; }
[data-sec="protect"] { --sec: #b45309; }
[data-sec="security"] { --sec: #be123c; }
[data-sec="features"] { --sec: #4338ca; }

.ic { width: 32px; height: 32px; flex: none; vertical-align: middle; }
.arr { font-style: normal; color: var(--sv-ink2); white-space: nowrap; }
.arr.big { font-size: 26px; }
.ok { color: var(--ok); font-weight: 700; }
.no { color: var(--no); font-weight: 700; }
.chip { display: inline-block; font-size: 12.5px; background: #fff; border: 1px solid var(--sv-line); border-radius: 12px; padding: 1px 9px; }
.chip.on { border-color: var(--ok); color: var(--ok); font-weight: 600; }
code { font-family: var(--mono); }

/* Terminals and JSON. */
.term, .json {
  margin: 0; padding: 10px 14px; border-radius: 8px; max-width: 100%;
  font: 13px/1.5 var(--mono); overflow: auto; white-space: pre;
}
.term { background: #16191f; color: #e8eaed; }
.term .pr { color: #7aa116; user-select: none; }
.term .out { color: #aab3bd; }
.json { background: #fff; border: 1px solid var(--sv-line); color: #16191f; }
.json.big { font-size: 14px; }
.json .k { color: #0a5aa8; }
.json .hl { display: inline-block; min-width: 100%; border-radius: 3px; background: var(--c, #fdf0e3); box-shadow: inset 3px 0 0 var(--cc, #ec7211); }
.json .hl.p { --c: #fdecef; --cc: #be123c; }
.json .hl.a { --c: #e9f4fb; --cc: #0972d3; }
.json .hl.r { --c: #eef6e6; --cc: #3f6212; }
.json .hl.sid { --c: #f3f4f6; --cc: #6b7178; }
.json .hl.onb { --c: #e9f4fb; --cc: #0972d3; }
.json .hl.ono { --c: #eef6e6; --cc: #3f6212; }
.json .hl.c { --c: #f3edff; --cc: #6d28d9; }
.json .hl.t { --c: #e6f4f1; --cc: #0f766e; }
.json .hl.x { --c: #fdecef; --cc: #be123c; }
.json .note { font: italic 12.5px system-ui, sans-serif; color: var(--cc); margin-left: 14px; }

/* Tables. */
.tbl { border-collapse: collapse; background: #fff; border: 1px solid var(--sv-line); font-size: 14px; }
.tbl th, .tbl td { padding: 7px 11px; border-top: 1px solid #eef0f3; text-align: left; vertical-align: top; }
.tbl tr:first-child th { border-top: 0; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--sv-ink2); }
.tbl tr:not(:first-child) th { font-weight: 700; white-space: nowrap; }
.fn { margin: 0; font-size: 13px; color: var(--sv-ink2); }

/* Introduction: the three kinds of storage. */
.kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kind { background: #fff; border: 1px solid var(--sv-line); border-top: 4px solid #8a8f96; border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.kind.k-object { border-top-color: var(--s3); box-shadow: 0 0 0 2px #d9ead0; }
.kind-h { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.kind small { color: var(--sv-ink2); }
.kind code { font-size: 13px; color: var(--sv-ink2); }

/* Introduction: an object is written and read whole. */
.whole { background: #fff; border: 1px solid var(--sv-line); border-left: 5px solid var(--s3); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.whole > b { font-size: 15px; }
.whole-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.w-step { display: inline-flex; align-items: center; gap: 6px; background: #f6f7f9; border: 1px solid var(--sv-line); border-radius: 8px; padding: 4px 10px; }
.w-step small { color: var(--sv-ink2); }
.whole p { margin: 0; font-size: 14px; color: var(--sv-ink2); }

/* The bucket name. */
.bname { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.uses.wide { max-width: 820px; }
.uses.wide .use code { font-size: 14px; }
.id-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 2px solid var(--s3); border-radius: 10px; padding: 12px 16px; }
.id-card .ic { width: 44px; height: 44px; }
.id-card > div:not(.lives) { display: flex; flex-direction: column; margin-right: auto; }
.lives { display: flex; flex-direction: column; align-items: flex-end; border: 1.6px dashed #00a4a6; background: #f5fbfb; border-radius: 6px; padding: 4px 10px; }
.id-card .lives code { font-size: 17px; font-weight: 700; }
.lives small { color: var(--sv-ink2); font-weight: 400; }
.id-card small { color: var(--sv-ink2); font-weight: 600; }
.id-card code { font-size: 26px; font-weight: 700; }
.uses, .names { background: #fff; border: 1px solid var(--sv-line); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.uses > b, .names > b { font-size: 14.5px; }
.use { display: flex; flex-direction: column; gap: 2px; }
.use small { color: var(--sv-ink2); font-weight: 600; }
.use code { font-size: 12.5px; overflow-wrap: anywhere; }
.use .for { font-size: 12.5px; color: var(--sv-ink2); margin: -2px 0 4px 12px; }
.use.arn { border-top: 1px dashed var(--sv-line); padding-top: 8px; }
.use em { font-style: normal; background: #e6f4f1; box-shadow: inset 0 -2px 0 #00a4a6; border-radius: 2px; }
.use mark { background: #eef6e6; box-shadow: inset 0 -2px 0 var(--s3); border-radius: 2px; }
.nm { display: grid; grid-template-columns: 13em 1.4em minmax(0, 1fr); align-items: baseline; gap: 6px; font-size: 13.5px; }
.nm small { color: var(--sv-ink2); }
.names .rules { color: var(--sv-ink2); font-size: 13.5px; margin-top: -4px; }

/* The bucket and the object. */
.obj-card { background: #fff; border: 2px solid var(--s3); border-radius: 10px; padding: 12px 16px; }
.kv { margin: 0; }
.kv > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px solid #eef0f3; font-size: 14px; }
.kv dt { color: var(--sv-ink2); font-weight: 600; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv code { font-size: 13px; }
.kv .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.obj-wrap { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.folders { background: #fff; border: 1px solid var(--sv-line); border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.folders small { color: var(--sv-ink2); font-weight: 600; }
.folders ul { list-style: none; margin: 6px 0; padding-left: 14px; }
.folders > ul { padding-left: 0; }
.folders .keys { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--sv-line); font-size: 12.5px; color: var(--sv-ink2); }

/* Tags. */
.tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tres { background: #fff; border: 1px solid var(--sv-line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tres-h { display: flex; flex-direction: column; gap: 1px; }
.tres-h .g, .tres-h .ic { font-size: 24px; width: 28px; height: 28px; }
.tres-h small { color: var(--sv-ink2); font-weight: 600; }
.tres-h code { font-size: 13px; overflow-wrap: anywhere; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font: 12.5px var(--mono); background: #f3f4f6; border: 1px solid #c6ccd2; border-radius: 4px; padding: 1px 6px; }
.tag b { font-weight: 700; }
.tag.hi { background: #fdf0e3; border-color: #ec7211; }
.tuses { background: #fff; border: 1px solid var(--sv-line); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.tuses > b { display: flex; align-items: center; gap: 8px; }
.tuses div { display: flex; flex-direction: column; }
.tuses small { color: var(--sv-ink2); font-weight: 600; }
.tuses code { font-size: 12.5px; overflow-wrap: anywhere; }

/* Durability. */
.dur { display: flex; flex-direction: column; gap: 14px; }
.region { border: 1.6px dashed #00a4a6; background: #f5fbfb; border-radius: 8px; padding: 10px 12px; }
.region > b { font-family: var(--mono); font-size: 13.5px; }
.azs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.az { background: #fff; border: 1px solid var(--sv-line); border-radius: 6px; padding: 8px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.az b { margin-right: auto; }
.copy { font-size: 20px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fact { background: #fff; border: 1px solid var(--sv-line); border-top: 4px solid var(--sec); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; }
.fact small { color: var(--sv-ink2); font-weight: 600; }
.fact b { font-size: 18px; }

.limits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.case { background: #fff6f4; border: 1px solid #f3c2b8; border-left: 5px solid #d13212; border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.case > b { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #a1260d; }
.case p { margin: 4px 0 6px; }
.case a { color: #0972d3; font-size: 13.5px; }

/* Sizes: a ladder, each row about a size, coloured by how it can be uploaded. */
.sizes { background: #fff; border: 1px solid var(--sv-line); border-radius: 10px; padding: 8px 0; font-size: 14px; }
.sz-head, .sz-row { display: grid; grid-template-columns: 105px 160px minmax(0, 1fr); gap: 12px; padding: 5px 14px 5px 18px; }
.sz-head { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--sv-ink2); font-weight: 600; }
.sz-row { border-top: 1px solid #eef0f3; box-shadow: inset 6px 0 0 var(--band); }
.sz-row.one { --band: #7aa116; }
.sz-row.multi { --band: #ec7211; }
.sz-row b { font-family: var(--mono); }
.sz-row span:first-of-type { color: var(--sv-ink2); }
.sz-row.lim span:last-child { font-weight: 600; }
.sz-bands { display: flex; gap: 14px; padding: 8px 14px 0 18px; border-top: 1px solid #eef0f3; font-size: 13px; }
.sz-bands span { display: inline-flex; align-items: center; gap: 6px; }
.sz-bands span::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: var(--b); }
.sz-bands .one { --b: #7aa116; }
.sz-bands .multi { --b: #ec7211; }

/* Uploads. */
.up { display: flex; flex-direction: column; gap: 14px; }
.mp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid var(--sv-line); border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.mp-parts small { display: block; color: var(--sv-ink2); }
.mp-parts div { display: flex; gap: 4px; margin-top: 4px; }
.part { width: 26px; height: 26px; display: grid; place-items: center; background: #eef6e6; border: 1px solid #b7d38a; border-radius: 4px; font: 12px var(--mono); }
.mp-done { display: flex; flex-direction: column; gap: 4px; }
.mp-done code { font-size: 12.5px; }

/* Transfer Acceleration. */
.ta2 { display: flex; flex-direction: column; gap: 10px; }
.ta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ta-row span { display: inline-flex; align-items: center; gap: 6px; }
.arr.wavy { color: #b45309; }
.exam { background: #fffbea; border: 1px solid #e8d48a; border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.exam > b { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #8a6500; }
.exam p { margin: 6px 0 8px; }
.exam ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.exam li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); gap: 6px; padding: 4px 6px; border-radius: 6px; }
.exam li div { display: flex; flex-direction: column; }
.exam li small { color: var(--sv-ink2); font-size: 12.5px; }
.exam li.right { background: #eef8e6; box-shadow: inset 3px 0 0 var(--ok); }
.exam li.right small { color: var(--ok); font-weight: 600; }

/* Transfer Acceleration on the map: the internet in orange, AWS's network in purple. */
:root { --net: #e07b00; --aws: #7d3cff; }
.ta-map { width: 100%; height: auto; background: #f7f9fb; border: 1px solid var(--sv-line); border-radius: 10px; }
.net-path { stroke: var(--net); stroke-width: 4; stroke-linecap: round; }
.aws-path { fill: none; stroke: var(--aws); stroke-width: 3.5; stroke-linecap: round; }
.none-path { fill: none; stroke: #8a8f96; stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; }
.person circle:first-child { fill: #fff; stroke: #232f3e; stroke-width: 2; }
.person .head, .person .body { fill: #232f3e; }
.person.without circle:first-child { stroke: #8a8f96; }
.person.without .head, .person.without .body { fill: #8a8f96; }
.edge-bg { fill: #fff; stroke: #7d3cff; stroke-width: 2; }
.ta-map .lbl { font: 700 15px system-ui, sans-serif; fill: #16191f; paint-order: stroke; stroke: #f7f9fb; stroke-width: 5px; }
.ta-map .lbl.without { fill: #6b7178; font-size: 13px; }
.ta-key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--sv-ink2); }
.ta-key span { display: inline-flex; align-items: center; gap: 6px; }
.ta-key i { width: 28px; height: 5px; border-radius: 3px; background: var(--c); }
.ta-key img { width: 20px; height: 20px; }
.ta-key .k-net { --c: var(--net); }
.ta-key .k-aws { --c: var(--aws); }
.ta-key .k-none { height: 0; border-top: 3px dotted #8a8f96; background: none; border-radius: 0; }

/* Pricing. */
.meters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.meter { background: #fff; border: 1px solid var(--sv-line); border-top: 4px solid var(--sec); border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.meter b { font-size: 16px; }
.meter span { color: var(--sv-ink2); font-size: 14px; }
.free-note { align-self: flex-start; font-weight: 700; color: var(--ok); background: #f2f8e9; border: 1px solid #b7d38a; border-radius: 8px; padding: 6px 12px; }

/* The storage behind the classes. */
.cs { display: flex; flex-direction: column; gap: 10px; }
.cs-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 10px; }
.cs-drive, .cs-shards { background: #fff; border: 1px solid var(--sv-line); border-radius: 10px; padding: 10px 14px; }
.cs-drive { display: flex; align-items: center; gap: 12px; }
.cs-drive div, .cs-band > div:first-child { display: flex; flex-direction: column; }
.cs-drive small, .cs-shards > small, .cs-band small { color: var(--sv-ink2); font-size: 13px; }
.disk { flex: none; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle, #232f3e 0 4px, #c9d0d6 5px 9px, #8a96a3 10px 23px); box-shadow: inset 0 0 0 2px #5f6b78; }
.cs-azs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.cs-az { border: 1.5px dashed #00a4a6; background: #f5fbfb; border-radius: 6px; padding: 4px 8px; }
.cs-az small { font: 600 12px var(--mono); color: var(--sv-ink2); }
.cs-az > div { display: flex; gap: 6px; margin-top: 4px; }
.drive { width: 26px; height: 26px; border-radius: 50%; background: #8a96a3; display: grid; place-items: center; }
.sh { width: 12px; height: 12px; border-radius: 2px; }
.sh.d { background: #7aa116; } .sh.p { background: #7d3cff; }
.cs-band { display: grid; grid-template-columns: 13em minmax(0, 1fr); gap: 12px; align-items: center; background: #fff; border: 1px solid var(--sv-line); border-left: 6px solid var(--c); border-radius: 10px; padding: 8px 14px; }
.cs-band.hot { --c: #d13212; } .cs-band.cold { --c: #0972d3; } .cs-band.off { --c: #545b64; }
.cs-band.off { background: repeating-linear-gradient(-45deg, #fff, #fff 8px, #f4f5f7 8px, #f4f5f7 16px); }
.cs-classes { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-source { margin: 2px 0 0; font-size: 14px; }
.cs-source a { color: #0972d3; }
.cs-classes span { font-size: 13px; background: #f6f7f9; border: 1px solid var(--sv-line); border-radius: 12px; padding: 2px 10px; }

/* Inside S3: the layers a request passes. */
.inside { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.arr.down { align-self: center; font-size: 18px; line-height: 1; }
.in-client { align-self: flex-start; background: #fff; border: 1px solid var(--sv-line); border-radius: 8px; padding: 6px 12px; font-size: 14px; }
.in-client code { font-size: 12.5px; margin-left: 6px; }
.in-layer { background: #fff; border: 1px solid var(--sv-line); border-left: 6px solid var(--c); border-radius: 10px; padding: 8px 14px; display: flex; flex-direction: column; gap: 6px; }
.in-front { --c: #0972d3; } .in-index { --c: #b45309; } .in-nodes { --c: var(--s3); }
.in-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.in-h small { color: var(--sv-ink2); font-size: 13px; }
.in-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.in-box { font-size: 13px; border: 1px solid var(--sv-line); border-radius: 6px; padding: 2px 10px; background: #f6f7f9; }
.in-box.cache { background: #fdf0e3; border-color: #ec7211; }
.in-box.witness { background: #f3edff; border-color: #7d3cff; }
.in-nodes-row { display: flex; gap: 10px; flex-wrap: wrap; }
.in-node { display: flex; gap: 3px; border: 1px solid var(--sv-line); border-radius: 6px; padding: 4px 6px; background: #f6f7f9; }
.disk.sm { width: 20px; height: 20px; background: radial-gradient(circle, #232f3e 0 2px, #c9d0d6 3px 4px, #8a96a3 5px 10px); box-shadow: inset 0 0 0 1px #5f6b78; }
.in-express { margin-top: 8px; background: #fff; border: 1px dashed #7d3cff; border-radius: 10px; padding: 6px 14px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.in-express small { color: var(--sv-ink2); }

/* Storage classes. */
.tbl.classes td:nth-child(6), .tbl.classes td:nth-child(3), .tbl.classes td:nth-child(4) { white-space: nowrap; }
.tiers { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.tiers > .arr { align-self: center; }
.tier { flex: 1 1 110px; background: #fff; border: 1px solid var(--sv-line); border-top: 4px solid var(--sec); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.tier small { color: var(--sv-ink2); font-size: 12.5px; }
.tier span { color: var(--sv-ink2); font-size: 13px; }
.tier.opt { border-style: dashed; border-top-style: solid; background: #fbfbfc; }
.tier em { font-size: 12px; color: var(--sec); }
.lc-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lc-step { background: #fff; border: 1px solid var(--sv-line); border-top: 4px solid var(--sec); border-radius: 8px; padding: 6px 10px; display: flex; flex-direction: column; font-size: 14px; }
.lc-step small { color: var(--sv-ink2); }
.lc-step.end { border-top-color: var(--no); }

/* Versions. */
.ver-wrap, .dm { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 6px; min-width: 210px; }
.stack small, .stack > b { color: var(--sv-ink2); font-weight: 600; font-size: 14px; }
.stack > b { color: var(--sv-ink); }
.ver { display: flex; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid var(--sv-line); border-radius: 6px; padding: 6px 10px; font-size: 13.5px; }
.ver.cur { border: 2px solid var(--sec); }
.ver span { color: var(--sec); font-weight: 600; font-size: 12.5px; }
.ver.marker { background: repeating-linear-gradient(-45deg, #fff, #fff 6px, #fdecef 6px, #fdecef 12px); }
.ver.marker span { color: var(--no); }
.dm > .arr { align-self: center; }
.gets { display: flex; flex-direction: column; gap: 10px; }
.get { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.get code { background: #fff; border: 1px solid var(--sv-line); border-radius: 4px; padding: 2px 6px; font-size: 13px; }
.dm .get { align-self: center; }
.states small { display: block; color: var(--sv-ink2); font-weight: 600; margin-bottom: 4px; }
.states div { display: flex; align-items: center; gap: 6px; }
.locks { display: flex; flex-direction: column; gap: 14px; }
.lock { display: flex; flex-direction: column; gap: 6px; }
.lock > b { font-size: 15px; }
.repl { display: flex; align-items: center; gap: 14px; }
.rb { background: #fff; border: 2px solid var(--s3); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rb small { font-family: var(--mono); color: var(--sv-ink2); }
.r-mid { display: flex; flex-direction: column; align-items: center; font-size: 13px; color: var(--sv-ink2); }

/* Exam questions: versioning and protection. */
.pe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pe-q { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); gap: 8px; background: #fffbea; border: 1px solid #e8d48a; border-radius: 10px; padding: 8px 12px; font-size: 13.5px; }
.pe-q > b { font-size: 16px; color: #8a6500; }
.pe-q p { margin: 0 0 6px; }
.pe-a, .pe-w { display: grid; grid-template-columns: 1.2em minmax(0, 1fr); gap: 4px; font-size: 13px; }
.pe-a { font-weight: 600; color: #1b5e05; }
.pe-w { color: var(--sv-ink2); }
.pe-q:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Who can access a bucket. */
.tbl.ao td:nth-child(2) { white-space: nowrap; color: var(--sv-ink2); }
.tbl.ao td:last-child { line-height: 1.45; }
.ao-name { display: inline-block; white-space: nowrap; padding-left: 8px; border-left: 4px solid var(--c); }
.ao-grant { --c: var(--ok); } .ao-legacy { --c: #8a8f96; } .ao-block { --c: var(--no); } .ao-lend { --c: #0972d3; }

/* Resource-based policies. */
.rp { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rp-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rp-h { display: flex; align-items: center; gap: 10px; }
.rp-h > div { display: flex; flex-direction: column; }
.rp-h small { color: var(--sv-ink2); }
.who-glyph { font-size: 28px; }
.rp-note { margin: 0; font-size: 13.5px; color: var(--sv-ink2); }
.rp-note.p { color: #be123c; font-weight: 600; }
.rp .json { font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tbl.eval td, .tbl.eval th { text-align: center; }
.tbl.eval tr > th:first-child { text-align: left; }

/* Block Public Access. */
.bpa { display: flex; flex-direction: column; gap: 12px; }
.bpa-card { background: #fff; border: 1px solid var(--sv-line); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.bpa-card > b { font-size: 15px; }
.sw { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.tog { flex: none; width: 34px; height: 18px; border-radius: 9px; background: #b9c0c7; position: relative; }
.tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.tog.on { background: var(--ok); }
.tog.on::after { left: 18px; }

/* Access points: teams, their entrances, one bucket. */
.ap-fan { width: 100%; height: auto; max-width: 950px; background: #fff; border: 1px solid var(--sv-line); border-radius: 10px; }
.ap-team { font: 600 17px system-ui, sans-serif; fill: #16191f; }
.ap-col { font: 600 13px system-ui, sans-serif; fill: #545b64; }
.ap-arrow { stroke: #8a8f96; stroke-width: 1.6; }
.apg circle:first-child { fill: #fff; stroke: #3f8624; stroke-width: 3; }
.apg path { fill: none; stroke: #3f8624; stroke-width: 2.5; }
.apg circle:last-child { fill: #3f8624; }
.apg.vpc circle:first-child { stroke-dasharray: 5 4; }
.ap-name { font: 600 14px ui-monospace, Menlo, Consolas, monospace; fill: #16191f; }
.ap-pol { font: 13px system-ui, sans-serif; fill: #545b64; }
.ap-pol.vpc { fill: #0f766e; font-weight: 600; }

/* Presigned URLs: the two use cases first. */
.ucs { display: flex; flex-direction: column; gap: 10px; }
.uc { background: #fff; border: 1px solid var(--sv-line); border-left: 5px solid var(--sec); border-radius: 10px; padding: 8px 14px; display: flex; flex-direction: column; gap: 6px; }
.uc > b { font-size: 15px; }
.uc-row { display: flex; align-items: flex-start; gap: 8px; }
.uc-row > .arr { align-self: center; }
.uc-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: 13px; }
.uc-step .g { font-size: 24px; line-height: 32px; height: 32px; }
.uc-step .g .ic { width: 30px; height: 30px; }
.uc small { color: var(--sv-ink2); font-size: 13px; }

/* Presigned URLs. */
.ps { background: #fff; border: 1px solid var(--sv-line); border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ps-base { color: var(--sv-ink2); overflow-wrap: anywhere; }
.q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-left: 12px; border-left: 3px solid var(--c, #d5dbdb); }
.q code { overflow-wrap: anywhere; }
.q i { font-size: 12.5px; color: var(--c, var(--sv-ink2)); }
.q-alg { --c: #0972d3; } .q-cred { --c: #be123c; } .q-date { --c: #0f766e; } .q-exp { --c: #b45309; } .q-sig { --c: #6d28d9; }

/* Client-side against server-side encryption. */
.cs2 { display: flex; flex-direction: column; gap: 10px; }
.cs2-row { background: #fff; border: 1px solid var(--sv-line); border-left: 5px solid var(--sec); border-radius: 10px; padding: 8px 14px; display: flex; flex-direction: column; gap: 8px; }
.cs2-row > b { font-size: 15px; }
.cs2-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs2-box { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; border: 1px solid var(--sv-line); border-radius: 8px; padding: 4px 10px; background: #f6f7f9; }
.cs2-box .ic { width: 24px; height: 24px; }
.cs2-box.cipher { background: #f3edff; border-color: #7d3cff; }
.cs2-box.act { background: #fdf0e3; border-color: #ec7211; }
.cs2-box.dk { background: #fff8db; border-color: #d4a017; }
.cs2-box.mk { background: #232f3e; border-color: #232f3e; color: #fff; }
.cs2-row.env { gap: 6px; }
.cs2-box.wire { background: #e9f4fb; border-color: #0972d3; }

/* KMS. */
.km { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); align-items: center; gap: 10px; }
.km-card { background: #fff; border: 1px solid var(--sv-line); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.km-card small { color: var(--sv-ink2); font-size: 13px; }
.km-hsm { background: #232f3e; color: #fff; border-radius: 12px; padding: 12px 18px; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: inset 0 0 0 3px #4b5a6b; }
.km-hsm small { color: #c9d0d6; font-size: 12px; }
.km-key { font-size: 34px; }
.km-hsm b { font-family: var(--mono); font-size: 14px; }
.km-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.km-chip { font-size: 13.5px; border-radius: 8px; padding: 6px 12px; border: 1px solid var(--sv-line); background: #fff; }
.km-chip.pol { border-left: 4px solid #0972d3; }
.km-chip.log { border-left: 4px solid #b45309; }
.km-chip.off { border-left: 4px solid var(--no); }

/* Envelope encryption. */
.env2 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; }
.env-col { background: #fff; border: 1px solid var(--sv-line); border-left: 5px solid var(--sec); border-radius: 10px; padding: 8px 14px; align-self: stretch; }
.env-col h4 { margin: 0 0 6px; font-size: 15px; }
.env-col ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.env-col li { display: grid; grid-template-columns: 1.5em minmax(0, 1fr); gap: 4px; font-size: 13.5px; }
.env-col li b { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--sec); color: #fff; font-size: 11.5px; }
.env-kms { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; background: #232f3e; color: #fff; border-radius: 12px; padding: 12px 14px; font-size: 26px; max-width: 150px; }
.env-kms b { font-size: 14px; }
.env-kms small { font-size: 12px; color: #c9d0d6; }
.env-stored { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; }
.env-stored .ic { width: 28px; height: 28px; }

/* Which policy. */
.wp { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wp-col { background: #fff; border: 1px solid var(--sv-line); border-top: 4px solid var(--sec); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.wp-col > b { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.wp-col small { color: var(--sv-ink2); }
.wp-col ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.wp-col li { margin: 4px 0; }

/* Website and events. */
.site { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid var(--sv-line); border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.site > span { display: inline-flex; align-items: center; gap: 6px; }
.site-ep { display: flex; flex-direction: column; }
.site-ep small { color: var(--sv-ink2); }
.site-ep code { font-size: 12.5px; overflow-wrap: anywhere; }
.site-cf { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sv-ink2); }
.ev { display: flex; align-items: center; gap: 16px; }
.ev-src { background: #fff; border: 2px solid var(--s3); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ev-src code { font-size: 12.5px; }
.ev-dsts { display: flex; flex-direction: column; gap: 8px; }
.ev-dst { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--sv-line); border-radius: 8px; padding: 6px 12px; font-size: 14px; }
.eb { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; background: #e7157b; color: #fff; font: 700 12px system-ui; }

@media (max-width: 860px) {
  .tgrid, .limits { grid-template-columns: 1fr 1fr; }
  .pe, .env2, .km { grid-template-columns: 1fr; }
  .cs-top, .cs-band { grid-template-columns: 1fr; }
  .sz-head, .sz-row { grid-template-columns: 90px minmax(0, 1fr); }
  .sz-head span:nth-child(2), .sz-row span:first-of-type { display: none; }
  .kinds, .rp, .wp, .obj-wrap, .bname, .meters, .facts, .azs { grid-template-columns: 1fr; }
  .repl, .ev { flex-direction: column; align-items: stretch; }

  .kv > div { grid-template-columns: 1fr; gap: 2px; }
  .term, .json { font-size: 12px; }
  .tbl { font-size: 13px; display: block; overflow-x: auto; }
}