use mod.prelude.widgets_internal.*
use mod.sdf.Cap

// THE MATERIAL. One navy-charcoal ground, pushed up into raised parts or
// pressed into wells. Relief is light, not colour: a faint lift above a
// raised part, a soft fall and a tight contact shadow below it, a
// one-device-pixel near-black contact line round it, a lighter line just
// inside its top edge, and a face that is a shallow dish (darker under the
// top edge, a little lighter than the ground at the foot). State lives in
// small lights of one accent, set in a dark slot so they read as lights.
// Light comes from the top left. Distances are points; shadows are drawn
// OUTSIDE the layout box, in a quad grown in `vertex`, so they cost no
// padding.

let nd_ground = fn() -> vec3 {
    return vec3(0.173, 0.184, 0.212)
}
let nd_accent = fn() -> vec3 {
    return vec3(0.271, 0.922, 0.878)
}
let nd_line = fn() -> vec3 {
    return vec3(0.043, 0.051, 0.067)
}

// Fine monochrome grain, one value per device pixel in window space, so a
// face and the ground round it read as one material. `amt` is the peak in
// levels of 255 (the standard deviation is 0.41 of it).
let nd_grain = fn(q: vec2, px: float, amt: float) -> float {
    return Finish.grain(q / px, amt / 255.0)
}

// What a raised part throws round itself, premultiplied: a soft fall below
// (reaching about a quarter of the part's height), a tight contact shadow
// right under the edge, and a faint lift of the ground above and to the
// left. `s` is the part's own height, the rest their strengths.
let nd_cast = fn(p: vec2, c: vec2, h: vec2, r: float, s: float, fall: float, lift: float, con: float) -> vec4 {
    let f = Finish.drop(p, c, h, r, vec2(0.02 * s, 0.075 * s), max(0.09 * s, 1.0)) * 0.7 * fall
    let t = Finish.drop(p, c, h, r, vec2(0.0, 0.03 * s), max(0.03 * s, 0.5)) * 0.65 * con
    let l = Finish.drop(p, c, h, r, vec2(-0.025 * s, -0.05 * s), max(0.06 * s, 0.7)) * 0.13 * lift
    var acc = vec4(vec3(0.039, 0.043, 0.055) * f, f)
    acc = Finish.over(acc, vec4(0.0, 0.0, 0.0, t))
    acc = Finish.over(acc, vec4(l, l, l, l))
    return acc
}

// A raised face: the dish, the light line one device pixel inside the top
// edge (fading down the corners), and a fainter one along the foot.
let nd_face = fn(p: vec2, c: vec2, h: vec2, r: float, d: float, px: float, raise: float, lift: float, lines: float) -> vec3 {
    let v = clamp((p.y - (c.y - h.y)) / max(2.0 * h.y, 1.0), 0.0, 1.0)
    let g = mix(-0.042, 0.03, smoothstep(0.02, 0.92, v)) * raise + lift
    var col = nd_ground() + vec3(g, g, g)
    let top = 1.0 - smoothstep(r * 0.3, r + 0.6, p.y - (c.y - h.y))
    let bot = 1.0 - smoothstep(r * 0.3, r + 0.6, (c.y + h.y) - p.y)
    let inner = Finish.band(d, px, 2.0 * px, px)
    col = mix(col, vec3(1.0, 1.0, 1.0), inner * top * 0.11 * lines)
    col = mix(col, vec3(1.0, 1.0, 1.0), inner * bot * 0.05 * lines)
    return col
}

// A well: the fill given, the ground's shadow falling in along the top, and
// a dark line on the rim.
let nd_well = fn(fill: vec3, p: vec2, c: vec2, h: vec2, r: float, d: float, px: float, s: float, k: float) -> vec3 {
    let sh = Finish.inset(p, c, h, r, vec2(0.0, 0.1 * s), max(0.14 * s, 0.8))
    var o = mix(fill, vec3(0.0, 0.0, 0.0), sh * 0.6 * k)
    o = mix(o, nd_line(), Finish.band(d, 0.0, px, px) * 0.55 * k)
    return o
}

// The lit lip one device pixel outside a well's lower edge.
let nd_lip = fn(p: vec2, c: vec2, h: vec2, d: float, px: float, k: float) -> vec4 {
    let low = smoothstep(c.y + h.y * 0.1, c.y + h.y, p.y)
    let a = Finish.ring_out(d, 0.0, px, px) * low * 0.08 * k
    return vec4(a, a, a, a)
}

// The focus mark: a one-pixel accent ring a point and a half outside the
// contact line, and a short teal halo either side of it.
let nd_focus = fn(d: float, px: float, f: float) -> vec4 {
    let ring = Finish.ring_out(d, 1.5, 1.5 + px, px) * 0.55 * f
    let soft = (1.0 - smoothstep(0.0, 2.5, abs(d - 1.5 - 0.5 * px))) * 0.25 * step(0.0, d) * f
    var acc = vec4(vec3(0.118, 0.408, 0.412) * soft, soft)
    return Finish.over(acc, vec4(nd_accent() * ring, ring))
}

// A light in a slot. `dc` is the distance to the lit core (negative
// inside): the core, one device pixel of dark gap round it, and beyond the
// gap a short halo that is gone three points out. Unlit, the core is a dark
// cell and there is no halo.
let nd_led_gap = fn(col: vec3, dc: float, px: float, gap: float, ink: vec3, lit: float, halo: float) -> vec3 {
    let x = max(dc - gap, 0.0)
    let fall = 1.0 - smoothstep(0.0, 2.3, x)
    var o = col + ink * 0.2 * fall * fall * halo * lit * step(0.0, dc)
    o = mix(o, nd_line(), Finish.ring_out(dc, 0.0, gap, px) * 0.85)
    let core = mix(vec3(0.102, 0.110, 0.129), ink, lit)
    return mix(o, core, Finish.cover(dc, px))
}
let nd_led = fn(col: vec3, dc: float, px: float, ink: vec3, lit: float, halo: float) -> vec3 {
    return nd_led_gap(col, dc, px, px, ink, lit, halo)
}

// A round lamp: lit, the core with a hot middle; off, a dark cell below the
// ground.
let nd_lamp = fn(col: vec3, p: vec2, lc: vec2, lr: float, px: float, ink: vec3, lit: float, halo: float) -> vec3 {
    let dd = length(p - lc) - lr
    let hot = 1.0 - smoothstep(lr * 0.15, lr * 0.55, length(p - lc - vec2(0.0, -0.1 * lr)))
    let lamp_ink = mix(ink, mix(ink, vec3(1.0, 1.0, 1.0), 0.4), hot * lit)
    let off = vec3(0.086, 0.094, 0.102)
    var o = nd_led(col, dd, px, lamp_ink, lit, halo)
    return mix(o, mix(off, lamp_ink, lit), Finish.cover(dd, px))
}

// The distance to an arc of radius R about c, clockwise from a0 to a1
// measured from straight down, with round ends, w wide. Written here
// because the stock arc gives up on any sweep past half a turn.
let nd_arc = fn(p: vec2, c: vec2, R: float, a0: float, a1: float, w: float) -> float {
    let q = p - c
    var ap = atan2(-q.x, q.y)
    if ap < 0.0 {
        ap = ap + 2.0 * PI
    }
    let rel = ap - a0 - floor((ap - a0) / (2.0 * PI)) * 2.0 * PI
    let on = step(rel, a1 - a0)
    let band = abs(length(q) - R) - 0.5 * w
    let e0 = length(q - vec2(-sin(a0), cos(a0)) * R) - 0.5 * w
    let e1 = length(q - vec2(-sin(a1), cos(a1)) * R) - 0.5 * w
    return mix(min(e0, e1), band, on)
}

// A distance to a segment, for the strokes the faces draw by hand.
let nd_seg = fn(p: vec2, a: vec2, b: vec2) -> float {
    let pa = p - a
    let ba = b - a
    let t = clamp(dot(pa, ba) / max(dot(ba, ba), 0.0001), 0.0, 1.0)
    return length(pa - ba * t)
}

// BUTTONS. `rest` 1 stands up off the page, 0 lies flat and rises two
// thirds under the pointer; `ghost` draws the contact line round a flat
// face; `hollow` shows nothing until the pointer asks, and then a faint
// hollow. `slot` puts an LED line in the foot of the face (`led.a` is how
// lit it is). Held, any of them is pressed in: flat, a step below the
// ground, the page's shadow falling in along the top.
let nd_button = fn(pq: vec2, size: vec2, org: vec2, px: float, hover: float, down: float, focus: float, disabled: float, loading: float, anim: float, ink: vec4, rest: float, ghost: float, hollow: float, slot: float, led: vec4) -> vec4 {
    let lo = vec2(Finish.snap(org.x, px), Finish.snap(org.y, px)) - org
    let hi = vec2(Finish.snap(org.x + size.x, px), Finish.snap(org.y + size.y, px)) - org
    let c = (lo + hi) * 0.5
    let h = (hi - lo) * 0.5
    let s = min(size.y, 32.0)
    let r = min(0.27 * size.y, min(h.x, h.y))
    let d = Material.sd_box(pq, c, h, r)
    let en = 1.0 - disabled
    let hv = hover * en
    let press = down * en
    let raised = step(0.5, rest)
    let up = mix(mix(0.65 * hv, 1.0, raised), 0.0, hollow) * (1.0 - press)
    var acc = nd_cast(pq, c, h, r, s, up * mix(1.0, 0.4, disabled), up * en * (1.0 + 0.4 * hv), max(up * mix(1.0, 0.5, disabled), 0.45 * press))
    var col = nd_face(pq, c, h, r, d, px, up * en, 0.03 * hv, up * en * (1.0 + 0.6 * hv))
    let sink = max(press, hollow * hv * 0.55)
    let deep = Finish.inset(pq, c, h, r, vec2(0.0, 0.08 * s), 0.1 * s)
    let pc = mix(nd_ground() - vec3(0.045, 0.045, 0.045), vec3(0.0, 0.0, 0.0), deep * 0.5)
    col = mix(col, pc, sink)
    // The LED line in the foot of the face: 0.4 of the width, two device
    // pixels of light in a slot of dark, its centre on a pixel boundary so
    // the core fills two whole rows.
    let ly = Finish.snap(org.y + c.y + h.y - 0.12 * s, px) - org.y
    let lw = h.x * 0.4
    let dc = nd_seg(pq, vec2(c.x - lw, ly), vec2(c.x + lw, ly)) - px
    col = mix(col, nd_led(col, dc, px, led.rgb, led.a * en, 1.0), slot)
    col = col + vec3(nd_grain(org + pq, px, 1.9))
    // The contact line: on anything that stands up, on a pressed face, and
    // on the ghost's flat one.
    let ol = max(max(up, sink), ghost) * mix(0.75, 0.3, disabled)
    col = mix(col, nd_line(), Finish.band(d, 0.0, px, px) * ol)
    let a = Finish.cover(d, px)
    acc = Finish.over(acc, vec4(col * a, a))
    // A ghost face is cut into the page: the lit lip under its foot.
    acc = Finish.over(acc, nd_lip(pq, c, h, d, px, max(ghost * (1.0 - up), sink) * en))
    acc = Finish.over(acc, nd_focus(d, px, focus * en))
    // The wait spinner is drawn by the face, so a face that replaces the
    // stock one has to draw it again: a lit arc in a dark track.
    let rr = max(min(h.x, h.y) - 5.0, 2.0)
    let a0 = anim * 2.0 * PI
    let sa = Finish.cover(nd_arc(pq, c, rr, a0, a0 + 1.5 * PI, 1.0), px) * ink.a * loading
    return Finish.over(acc, vec4(ink.rgb * sa, sa))
}

// The room round every button for its shadows and its focus ring.
mod.widgets.ButtonFlat.draw_bg.vertex = fn() {
    let m = 10.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.ButtonFlat.clip_x = false
mod.widgets.ButtonFlat.clip_y = false
// A view lets what it holds draw past its edge; scroll views still clip.
mod.widgets.View.clip_x = false
mod.widgets.View.clip_y = false

// The flat button: the page until the pointer raises it.
mod.widgets.ButtonFlat.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return self.host_over(nd_button(pq, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, self.loading_color, 0.0, 0.0, 0.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0)), m)
}
// The standard, sized and compound buttons stand up off the page.
mod.widgets.Button.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return self.host_over(nd_button(pq, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, self.loading_color, 1.0, 0.0, 0.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0)), m)
}
mod.widgets.ButtonXs.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return self.host_over(nd_button(pq, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, self.loading_color, 1.0, 0.0, 0.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0)), m)
}
mod.widgets.ButtonSm.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return self.host_over(nd_button(pq, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, self.loading_color, 1.0, 0.0, 0.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0)), m)
}
mod.widgets.ButtonLg.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return self.host_over(nd_button(pq, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, self.loading_color, 1.0, 0.0, 0.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0)), m)
}
mod.widgets.ButtonXl.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return self.host_over(nd_button(pq, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, self.loading_color, 1.0, 0.0, 0.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0)), m)
}
mod.widgets.ButtonCompound.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return self.host_over(nd_button(pq, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, self.loading_color, 1.0, 0.0, 0.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0)), m)
}
// The primary face is the plain face with its LED line lit; the colour is
// that line and never a filled face.
mod.widgets.ButtonPrimary.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return self.host_over(nd_button(pq, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, self.loading_color, 1.0, 0.0, 0.0, 1.0, vec4(0.271, 0.922, 0.878, 1.0)), m)
}
// The second voice is the plain raised face.
mod.widgets.ButtonSecondary.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return self.host_over(nd_button(pq, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, self.loading_color, 1.0, 0.0, 0.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0)), m)
}
mod.widgets.ButtonTertiary.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return self.host_over(nd_button(pq, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, self.loading_color, 1.0, 0.0, 0.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0)), m)
}
// The destructive button says so in its label only.
mod.widgets.ButtonDanger.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return self.host_over(nd_button(pq, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, self.loading_color, 1.0, 0.0, 0.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0)), m)
}
// The outlined button is cut into the page: the contact line round a flat
// face and a lit lip under it; it rises under the pointer.
mod.widgets.ButtonOutline.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return self.host_over(nd_button(pq, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, self.loading_color, 0.0, 1.0, 0.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0)), m)
}
// The borderless button shows nothing until the pointer finds it.
mod.widgets.ButtonFlatter.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return self.host_over(nd_button(pq, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.disabled, self.loading, self.anim_time, self.loading_color, 0.0, 0.0, 1.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0)), m)
}

// Rows of 26: 6 above and below the line, 12 either side.
mod.widgets.ButtonFlat.padding = mod.turtle.Inset{left: 12.0 right: 12.0 top: 6.25 bottom: 6.25}
mod.widgets.ButtonFlat.margin = mod.turtle.Inset{left: 0.0 right: 0.0 top: 0.0 bottom: 0.0}
mod.widgets.ButtonFlat.spacing = 6.0
mod.widgets.ButtonFlat.icon_walk.width = 13.0
mod.widgets.ButtonIcon.padding = mod.turtle.Inset{left: 6.0 right: 6.0 top: 6.0 bottom: 6.0}
mod.widgets.ButtonFlatIcon.padding = mod.turtle.Inset{left: 6.0 right: 6.0 top: 6.0 bottom: 6.0}
mod.widgets.ButtonFlatterIcon.padding = mod.turtle.Inset{left: 6.0 right: 6.0 top: 6.0 bottom: 6.0}
mod.widgets.ButtonFlat.draw_bg.loading_color = #45ebe0
mod.widgets.ButtonFlat.draw_icon.color = #b9bfca
mod.widgets.ButtonFlat.draw_icon_end.color = #b9bfca

// Hover eases in over the tenth of a second the animator already gives it
// rather than snapping, so a hover held still (the states page) shows.
mod.widgets.ButtonFlat.animator.hover.on.apply.draw_bg.hover = 1.0
mod.widgets.ButtonFlat.animator.hover.on.apply.draw_text.hover = 1.0
mod.widgets.TextInputFlat.animator.hover.on.apply.draw_bg.hover = 1.0
mod.widgets.TextInputFlat.animator.hover.on.apply.draw_text.hover = 1.0
// The press does the same, over three hundredths of a second, so a held
// press shows too.
mod.widgets.ButtonFlat.animator.hover.down.from.all.duration = 0.03
mod.widgets.ButtonFlat.animator.hover.down.apply.draw_bg.down = 1.0
mod.widgets.ButtonFlat.animator.hover.down.apply.draw_text.down = 1.0
mod.widgets.TextInputFlat.animator.hover.down.from.all.duration = 0.03
mod.widgets.TextInputFlat.animator.hover.down.apply.draw_bg.down = 1.0
mod.widgets.DropDownFlat.animator.hover.on.apply.draw_bg.hover = 1.0
mod.widgets.DropDownFlat.animator.hover.on.apply.draw_text.hover = 1.0
mod.widgets.DropDownFlat.animator.hover.down.from.all.duration = 0.03
mod.widgets.DropDownFlat.animator.hover.down.apply.draw_bg.down = 1.0
mod.widgets.CheckBoxFlat.animator.hover.down.from.all.duration = 0.03
mod.widgets.CheckBoxFlat.animator.hover.down.apply.draw_bg.down = 1.0
mod.widgets.ToggleFlat.animator.hover.down.from.all.duration = 0.03
mod.widgets.ToggleFlat.animator.hover.down.apply.draw_bg.down = 1.0
mod.widgets.RadioButtonFlat.animator.hover.down.from.all.duration = 0.03
mod.widgets.RadioButtonFlat.animator.hover.down.apply.draw_bg.down = 1.0
mod.widgets.RadioButtonTabFlat.animator.hover.down.from.all.duration = 0.03
mod.widgets.RadioButtonTabFlat.animator.hover.down.apply.draw_bg.down = 1.0

// Label inks: the working grey, a step brighter on the primary, the
// accent on the tertiary and the outline, coral on the destructive one.
let nd_medium = mod.theme.font_regular{font_family: mod.theme.font_regular.font_family{ibm_plex_text := FontMember{res: crate_resource("makepad_widgets:resources/Inter.ttf") weight: 500.0 asc: 0.0 desc: 0.0}}}
mod.widgets.ButtonFlat.draw_text.text_style = nd_medium
mod.widgets.ButtonPrimary.draw_text.color = #d7dde6
mod.widgets.ButtonPrimary.draw_text.color_hover = #eef2f7
mod.widgets.ButtonPrimary.draw_text.color_down = #eef2f7
mod.widgets.ButtonPrimary.draw_text.color_focus = #d7dde6
mod.widgets.ButtonPrimary.draw_text.color_disabled = #5a5e66
mod.widgets.ButtonPrimary.draw_icon.color = #d7dde6
mod.widgets.ButtonSecondary.draw_text.color = #b9bfca
mod.widgets.ButtonSecondary.draw_text.color_hover = #d7dde6
mod.widgets.ButtonSecondary.draw_text.color_down = #d7dde6
mod.widgets.ButtonSecondary.draw_text.color_focus = #b9bfca
mod.widgets.ButtonSecondary.draw_icon.color = #b9bfca
mod.widgets.ButtonTertiary.draw_text.color = #45ebe0
mod.widgets.ButtonTertiary.draw_text.color_hover = #8af3ec
mod.widgets.ButtonTertiary.draw_text.color_down = #8af3ec
mod.widgets.ButtonTertiary.draw_text.color_focus = #45ebe0
mod.widgets.ButtonTertiary.draw_icon.color = #45ebe0
mod.widgets.ButtonDanger.draw_text.color = #ec8f8a
mod.widgets.ButtonDanger.draw_text.color_hover = #f2a39e
mod.widgets.ButtonDanger.draw_text.color_down = #f2a39e
mod.widgets.ButtonDanger.draw_text.color_focus = #ec8f8a
mod.widgets.ButtonDanger.draw_icon.color = #ec8f8a
mod.widgets.ButtonOutline.draw_text.color = #b9bfca
mod.widgets.ButtonOutline.draw_text.color_hover = #d7dde6
mod.widgets.ButtonOutline.draw_text.color_down = #d7dde6
mod.widgets.ButtonOutline.draw_text.color_focus = #b9bfca
mod.widgets.ButtonOutline.draw_icon.color = #b9bfca

// CHECK BOX. A 14 point well with a 3 point corner, lit lip below; the mark
// is a 1.5 point accent stroke set in the dark, with a short halo. Under
// the pointer an unticked box shows the tick engraved.
let nd_check = fn(pq: vec2, size: vec2, org: vec2, px: float, box: float, hover: float, down: float, focus: float, active: float, disabled: float, mixed: float, error: float, round: float, at_end: float) -> vec4 {
    let y0 = Finish.snap(org.y + size.y * 0.5 - box * 0.5, px) - org.y
    let x0 = Finish.snap(org.x + (size.x - box) * at_end, px) - org.x
    let c = vec2(x0 + box * 0.5, y0 + box * 0.5)
    let h = vec2(box * 0.5, box * 0.5)
    let r = mix(3.0, box * 0.5, round)
    let d = Material.sd_box(pq, c, h, r)
    let en = 1.0 - disabled
    let fill = mix(vec3(0.055, 0.059, 0.075) + vec3(0.02, 0.02, 0.022) * hover * en - vec3(0.02, 0.02, 0.02) * down * en, vec3(0.133, 0.145, 0.165), disabled)
    var col = nd_well(fill, pq, c, h, r, d, px, box, (1.0 + 0.3 * down) * mix(1.0, 0.4, disabled))
    let ink = mix(mix(nd_accent(), vec3(0.878, 0.443, 0.424), error), vec3(0.29, 0.306, 0.337), disabled)
    let k0 = vec2(c.x - box * 0.25, c.y + box * 0.0)
    let k1 = vec2(c.x - box * 0.07, c.y + box * 0.18)
    let k2 = vec2(c.x + box * 0.25, c.y - box * 0.17)
    let tick = min(nd_seg(pq, k0, k1), nd_seg(pq, k1, k2)) - 0.75
    let dash = nd_seg(pq, vec2(c.x - box * 0.22, c.y), vec2(c.x + box * 0.22, c.y)) - 0.75
    let dm = mix(tick, dash, mixed)
    let on = max(active, mixed)
    // The short light of the mark on the well floor.
    let x = max(dm, 0.0)
    let fall = 1.0 - smoothstep(0.0, 2.5, x)
    col = col + ink * 0.22 * fall * fall * on * en * step(0.0, dm)
    // Off, under the pointer: the tick engraved in the floor.
    let eng = Finish.cover(tick, px) * (1.0 - on) * hover * en
    col = mix(col, vec3(0.2, 0.212, 0.239), eng * 0.8)
    col = mix(col, ink, Finish.cover(dm, px) * on)
    col = col + vec3(nd_grain(org + pq, px, 1.9))
    // Under the error intent the well's rim takes the error ink.
    col = mix(col, vec3(0.878, 0.443, 0.424), Finish.band(d, 0.0, px, px) * error * 0.85)
    let a = Finish.cover(d, px)
    var acc = vec4(col * a, a)
    acc = Finish.over(acc, nd_lip(pq, c, h, d, px, en))
    return Finish.over(acc, nd_focus(d, px, focus * en))
}
mod.widgets.CheckBoxFlat.draw_bg.vertex = fn() {
    let m = 5.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.CheckBoxFlat.clip_x = false
mod.widgets.CheckBoxFlat.clip_y = false
mod.widgets.CheckBoxFlat.draw_bg.pixel = fn() {
    let m = 5.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return nd_check(pq, self.rect_size, self.rect_pos, px, 14.0, self.hover, self.down, self.focus, self.active, self.disabled, self.mixed, self.error, 0.0, self.mark_at_end)
}
mod.widgets.CheckBoxCircle.draw_bg.pixel = fn() {
    let m = 5.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return nd_check(pq, self.rect_size, self.rect_pos, px, 14.0, self.hover, self.down, self.focus, self.active, self.disabled, self.mixed, self.error, 1.0, self.mark_at_end)
}
mod.widgets.CheckBoxFlat.draw_bg.size = 14.0
mod.widgets.CheckBoxFlat.padding = mod.turtle.Inset{left: 0.0 right: 4.0 top: 6.5 bottom: 6.5}
mod.widgets.CheckBoxFlat.label_walk.margin.left = 21.0

// TOGGLE. A 34 by 18 pill well with a lit lip, and in it a 14 point raised
// thumb carrying a 5 point lamp: off a dark cell, on the accent with a hot
// middle.
let nd_toggle = fn(pq: vec2, size: vec2, org: vec2, px: float, hover: float, down: float, focus: float, active: float, disabled: float, error: float, t: float, at_end: float) -> vec4 {
    let w = 34.0
    let x0 = Finish.snap(org.x + (size.x - w) * at_end, px) - org.x
    let cy = Finish.snap(org.y + size.y * 0.5, px) - org.y
    let tc = vec2(x0 + w * 0.5, cy)
    let th = vec2(w * 0.5, 9.0)
    let td = Material.sd_box(pq, tc, th, 9.0)
    let en = 1.0 - disabled
    let dis = mix(1.0, 0.4, disabled)
    var col = nd_well(mix(vec3(0.075, 0.082, 0.098), vec3(0.133, 0.145, 0.165), disabled), pq, tc, th, 9.0, td, px, 18.0, dis)
    // A faint accent wash along the well where the lit thumb has been.
    let wash = (1.0 - smoothstep(0.0, 18.0, abs(pq.x - (x0 + 9.0 + 16.0 * t)))) * active * en * 0.05
    col = col + nd_accent() * wash
    col = col + vec3(nd_grain(org + pq, px, 1.9))
    let ta = Finish.cover(td, px)
    var acc = vec4(col * ta, ta)
    acc = Finish.over(acc, nd_lip(pq, tc, th, td, px, en))
    // The thumb, and what it throws.
    // Seven points, rounded to whole device pixels so the light line under
    // the thumb's top edge lands on one pixel row.
    let kr = Finish.snap(7.0, px)
    let kc = vec2(x0 + 9.0 + 16.0 * t, cy)
    let kh = vec2(kr, kr)
    let kd = length(pq - kc) - kr
    let press = down * en
    let up = 1.0 - press
    let hv = hover * en * (1.0 - press)
    acc = Finish.over(acc, nd_cast(pq, kc, kh, kr, 14.0, up * dis, up * en * (1.0 + 0.4 * hv), dis))
    // The face: a dish from the ground under its top edge to well above it
    // at its foot, with the light line, so the thumb stands off the black
    // track; held, it is pressed flat below the ground with the shadow
    // falling in along its top.
    var kcol = nd_face(pq, kc, kh, kr, kd, px, en, 0.042 * en + 0.03 * hv, en * (1.35 + 0.5 * hv))
    let deep = Finish.inset(pq, kc, kh, kr, vec2(0.0, 1.6), 1.8)
    let pc = mix(nd_ground() - vec3(0.05, 0.05, 0.05), vec3(0.0, 0.0, 0.0), deep * 0.6)
    kcol = mix(kcol, pc, press)
    kcol = mix(kcol, nd_line(), Finish.band(kd, 0.0, px, px) * 0.75 * dis)
    let ink = mix(nd_accent(), vec3(0.878, 0.443, 0.424), error)
    // The lamp cell, five points across with its dark ring.
    kcol = nd_lamp(kcol, pq, kc, 2.5 - px, px, ink, active * en, 1.0)
    kcol = kcol + vec3(nd_grain(org + pq, px, 1.9))
    let ka = Finish.cover(kd, px)
    acc = Finish.over(acc, vec4(kcol * ka, ka))
    return Finish.over(acc, nd_focus(td, px, focus * en))
}
mod.widgets.ToggleFlat.draw_bg.vertex = fn() {
    let m = 6.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.ToggleFlat.clip_x = false
mod.widgets.ToggleFlat.clip_y = false
mod.widgets.ToggleFlat.draw_bg.pixel = fn() {
    let m = 6.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let t = mix(self.active, self.drag_pos, self.drag)
    return nd_toggle(pq, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.active, self.disabled, self.error, t, self.mark_at_end)
}
mod.widgets.ToggleFlat.draw_bg.size = 18.0
mod.widgets.ToggleFlat.draw_bg.pill_aspect = 1.889
mod.widgets.ToggleFlat.padding = mod.turtle.Inset{left: 0.0 right: 4.0 top: 4.0 bottom: 4.0}
mod.widgets.ToggleFlat.label_walk.margin.left = 42.0

// RADIO. A 14 point round well, darker than a box, with a 7 point lamp in
// it: off a dim grey cell, on the accent with a hot middle.
let nd_radio = fn(pq: vec2, size: vec2, org: vec2, px: float, hover: float, down: float, focus: float, active: float, disabled: float) -> vec4 {
    let rr = 7.0
    let cy = Finish.snap(org.y + size.y * 0.5, px) - org.y
    let c = vec2(rr, cy)
    let h = vec2(rr, rr)
    let d = length(pq - c) - rr
    let en = 1.0 - disabled
    let dis = mix(1.0, 0.4, disabled)
    let v = clamp((pq.y - (c.y - rr)) / (2.0 * rr), 0.0, 1.0)
    var fill = mix(vec3(0.02, 0.024, 0.043), vec3(0.059, 0.071, 0.09), v)
    fill = fill + vec3(0.04, 0.042, 0.046) * hover * en - vec3(0.015, 0.015, 0.015) * down * en
    fill = mix(fill, vec3(0.133, 0.145, 0.165), disabled)
    var col = nd_well(fill, pq, c, h, rr, d, px, 14.0, (1.0 + 0.3 * down) * dis)
    let dr = 3.5
    let dd = length(pq - c) - dr
    let offc = mix(vec3(0.2, 0.212, 0.239) + vec3(0.08, 0.08, 0.09) * hover * en, vec3(0.16, 0.17, 0.19), disabled)
    col = mix(col, offc, Finish.cover(dd, px) * (1.0 - active * en))
    col = mix(col, nd_lamp(col, pq, c, dr, px, nd_accent(), 1.0, 1.0), active * en)
    col = col + vec3(nd_grain(org + pq, px, 1.9))
    let a = Finish.cover(d, px)
    var acc = vec4(col * a, a)
    acc = Finish.over(acc, nd_lip(pq, c, h, d, px, en))
    return Finish.over(acc, nd_focus(d, px, focus * en))
}
mod.widgets.RadioButtonFlat.draw_bg.vertex = fn() {
    let m = 5.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.RadioButtonFlat.clip_x = false
mod.widgets.RadioButtonFlat.clip_y = false
mod.widgets.RadioButtonFlat.draw_bg.pixel = fn() {
    let m = 5.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return nd_radio(pq, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.active, self.disabled)
}
mod.widgets.RadioButtonFlatter.draw_bg.pixel = fn() {
    let m = 5.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return nd_radio(pq, self.rect_size, self.rect_pos, px, self.hover, self.down, self.focus, self.active, self.disabled)
}
mod.widgets.RadioButtonFlat.draw_bg.size = 14.0
mod.widgets.RadioButtonFlat.padding = mod.turtle.Inset{left: 0.0 right: 4.0 top: 6.5 bottom: 6.5}
mod.widgets.RadioButtonFlat.label_walk.margin.left = 21.0

// A 7 by 4 point chevron at a one-point stroke, pointing down.
let nd_chevron = fn(p: vec2, cx: float, cy: float, px: float) -> float {
    let d = min(nd_seg(p, vec2(cx - 3.5, cy - 2.0), vec2(cx, cy + 2.0)), nd_seg(p, vec2(cx, cy + 2.0), vec2(cx + 3.5, cy - 2.0)))
    return Finish.cover(d - 0.6, px)
}

// TEXT FIELDS. A raised pill plate whose face is a deeper dish than a
// button's: dark under the top edge, lighter at the foot, so the words sit
// in a hollow. Focused, an LED line lights in its foot, 0.6 of the width.
let nd_field = fn(pq: vec2, size: vec2, org: vec2, px: float, r: float, hover: float, down: float, focus: float, disabled: float) -> vec4 {
    let lo = vec2(Finish.snap(org.x, px), Finish.snap(org.y, px)) - org
    let hi = vec2(Finish.snap(org.x + size.x, px), Finish.snap(org.y + size.y, px)) - org
    let c = (lo + hi) * 0.5
    let h = (hi - lo) * 0.5
    let rr = min(r, min(h.x, h.y))
    let d = Material.sd_box(pq, c, h, rr)
    let s = min(size.y, 30.0)
    let en = 1.0 - disabled
    let dis = mix(1.0, 0.4, disabled)
    var acc = nd_cast(pq, c, h, rr, s, 0.9 * dis, 0.8 * en * (1.0 + 0.4 * hover), dis)
    let v = clamp((pq.y - (c.y - h.y)) / max(2.0 * h.y, 1.0), 0.0, 1.0)
    let g = mix(-0.06, 0.035, smoothstep(0.0, 0.95, v)) * en + 0.03 * hover * en
    var col = nd_ground() + vec3(g, g, g)
    // The hollow's own shadow under the top edge.
    let sh = Finish.inset(pq, c, h, rr, vec2(0.0, 0.08 * s), 0.1 * s)
    col = mix(col, vec3(0.0, 0.0, 0.0), sh * (0.25 + 0.35 * down) * en)
    col = col - vec3(0.02, 0.02, 0.02) * down * en
    let bot = 1.0 - smoothstep(rr * 0.3, rr + 0.6, (c.y + h.y) - pq.y)
    col = mix(col, vec3(1.0, 1.0, 1.0), Finish.band(d, px, 2.0 * px, px) * bot * 0.06 * en)
    let ly = c.y + h.y - 0.13 * s
    let lw = h.x * 0.6 - rr * 0.5
    let dc = nd_seg(pq, vec2(c.x - lw, ly), vec2(c.x + lw, ly)) - 0.5
    col = mix(col, nd_led(col, dc, px, nd_accent(), 1.0, 1.0), focus * en)
    col = col + vec3(nd_grain(org + pq, px, 1.9))
    col = mix(col, nd_line(), Finish.band(d, 0.0, px, px) * mix(0.75, 0.35, disabled))
    let a = Finish.cover(d, px)
    return Finish.over(acc, vec4(col * a, a))
}
// The inputs a slider, a combo box, a number or a well carries inside
// themselves draw nothing: the control round them is the box.
mod.widgets.TextInputFlat.draw_bg.vertex = fn() {
    let m = 8.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
// A field keeps its sideways clip (a long line scrolls inside it) and lets
// its shadows past its top and foot.
mod.widgets.TextInputFlat.clip_y = false
mod.widgets.TextInputFlat.draw_bg.pixel = fn() {
    if self.color.w < 0.01 || self.border_radius < 0.5 {
        return vec4(0.0, 0.0, 0.0, 0.0)
    }
    let m = 8.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return nd_field(pq, self.rect_size, self.rect_pos, px, self.border_radius, self.hover, self.down, self.focus, self.disabled)
}
mod.widgets.TextInputFlat.padding.left = 12.0
mod.widgets.TextInputFlat.padding.right = 12.0

// The number field: a rectangular plate of the same kind, with its stepper
// cap standing at the right end.
mod.widgets.NumberField.draw_bg.vertex = fn() {
    let m = 8.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.NumberField.draw_bg.pixel = fn() {
    let m = 8.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return nd_field(pq, self.rect_size, self.rect_pos, px, 7.0, self.hover, 0.0, self.focus, self.disabled)
}
mod.widgets.NumberField.clip_y = false
mod.widgets.NumberField.pad_left = 12.0
// The stepper: a raised cap split by a seam, one pixel dark over one pixel
// light; the half held sinks and its triangle lights.
mod.widgets.NumberSpin.draw_bg.pixel = fn() {
    let p = self.pos * self.rect_size
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let w = self.rect_size.x
    let h = self.rect_size.y
    let mid = Finish.snap(self.rect_pos.y + h * 0.5, px) - self.rect_pos.y
    let live = 1.0 - self.disabled
    let upper = step(p.y, mid)
    let hot = mix(max(0.0, -self.hot), max(0.0, self.hot), upper) * live
    let dn = mix(max(0.0, -self.down), max(0.0, self.down), upper) * live
    let c = vec2(w * 0.5, h * 0.5)
    let hh = vec2(w * 0.5 - 2.0, h * 0.5 - 2.0)
    let d = Material.sd_box(p, c, hh, 4.0)
    var acc = nd_cast(p, c, hh, 4.0, 14.0, 0.8 * live, 0.8 * live, 1.0)
    var col = nd_face(p, c, hh, 4.0, d, px, live, 0.018 * hot, live)
    let hc = vec2(c.x, mix(mid + (h - 2.0 - mid) * 0.5, 2.0 + (mid - 2.0) * 0.5, upper))
    let hb = vec2(hh.x, (mid - 2.0) * 0.5)
    let deep = Finish.inset(p, hc, hb, 3.0, vec2(0.0, 1.0), 1.4)
    col = mix(col, mix(nd_ground() - vec3(0.045, 0.045, 0.045), vec3(0.0, 0.0, 0.0), deep * 0.5), dn)
    let inx = step(c.x - hh.x + 1.0, p.x) * step(p.x, c.x + hh.x - 1.0)
    col = mix(col, nd_line(), step(mid - px, p.y) * step(p.y, mid) * inx * 0.8)
    col = mix(col, vec3(1.0, 1.0, 1.0), step(mid, p.y) * step(p.y, mid + px) * inx * 0.06)
    col = col + vec3(nd_grain(self.rect_pos + p, px, 1.9))
    col = mix(col, nd_line(), Finish.band(d, 0.0, px, px) * 0.75)
    // Triangles five points wide, dim grey, lit while held.
    let yu = mid * 0.5 + 1.0
    let yd = mid + (h - mid) * 0.5 - 1.0
    let tu = max((yu - 1.5 + 1.12 * abs(p.x - c.x) - p.y) * 0.67, p.y - yu - 1.3)
    let td = max((p.y - yd - 1.5 + 1.12 * abs(p.x - c.x)) * 0.67, yd - 1.3 - p.y)
    let mu = Finish.cover(tu, px)
    let md = Finish.cover(td, px)
    let dimc = mix(vec3(0.604, 0.624, 0.659), vec3(0.3, 0.31, 0.34), self.disabled)
    col = mix(col, mix(dimc, nd_accent(), max(0.0, self.down) * live), mu)
    col = mix(col, mix(dimc, nd_accent(), max(0.0, -self.down) * live), md)
    let a = Finish.cover(d, px)
    return Finish.over(acc, vec4(col * a, a))
}
// The printed arrow glyphs are hidden; the face draws the triangles.
mod.widgets.NumberSpin.draw_text.color = #9a9fa800
mod.widgets.NumberSpin.draw_text.color_disabled = #9a9fa800

// The drag-number: the field's plate, its track a faint accent wash.
mod.widgets.ValueInput.draw_bg.vertex = fn() {
    let m = 8.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.ValueInput.draw_bg.pixel = fn() {
    let m = 8.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    var acc = nd_field(pq, self.rect_size, self.rect_pos, px, 7.0, max(self.hover, self.drag), 0.0, self.focus, 0.0)
    let d = Material.sd_box(pq, self.rect_size * 0.5, self.rect_size * 0.5, 7.0)
    let wash = step(0.0, self.fill) * step(pq.x, 1.0 + (self.rect_size.x - 2.0) * max(self.fill, 0.0)) * Finish.cover(d + 1.0, px) * 0.07
    return Finish.over(acc, vec4(nd_accent() * wash, wash))
}
mod.widgets.ValueInput.draw_text.color = #b9bfca
mod.widgets.ValueInput.arrow_color = #9a9fa8
mod.widgets.ValueInput.text_input.draw_bg.color = #00000000

// DROP-DOWN. The button's body with a chevron at the right; open, the face
// is pressed in and the chevron lights.
let nd_dropdown = fn(pq: vec2, size: vec2, org: vec2, px: float, hover: float, down: float, open: float, focus: float, disabled: float) -> vec4 {
    let face = nd_button(pq, size, org, px, hover, max(down, open), focus, disabled, 0.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0), 1.0, 0.0, 0.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0))
    let ch = nd_chevron(pq, size.x - 12.5, size.y * 0.5 + 0.5, px)
    let ink = mix(mix(vec3(0.604, 0.624, 0.659), nd_accent(), open * (1.0 - disabled)), vec3(0.3, 0.31, 0.34), disabled)
    return Finish.over(face, vec4(ink * ch, ch))
}
mod.widgets.DropDownFlat.draw_bg.vertex = fn() {
    let m = 10.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.DropDownFlat.clip_x = false
mod.widgets.DropDownFlat.clip_y = false
mod.widgets.DropDownFlat.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return nd_dropdown(pq, self.rect_size, self.rect_pos, px, self.hover, self.down, self.active, self.focus, self.disabled)
}
mod.widgets.DropDownFlat.padding.left = 12.0
mod.widgets.DropDownFlat.padding.right = 26.0

// The select wears a button of its own, built before this sheet: it is
// given the drop-down's face and the grown quad by its own path.
mod.widgets.Select.face.draw_bg.vertex = fn() {
    let m = 10.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.Select.face.clip_x = false
mod.widgets.Select.face.clip_y = false
mod.widgets.MultiSelect.face.draw_bg.vertex = fn() {
    let m = 10.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.MultiSelect.face.clip_x = false
mod.widgets.MultiSelect.face.clip_y = false
// The select round the face is a view of its own, and clips unless told.
mod.widgets.Select.clip_x = false
mod.widgets.Select.clip_y = false
mod.widgets.MultiSelect.clip_x = false
mod.widgets.MultiSelect.clip_y = false
mod.widgets.Select.face.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return nd_dropdown(pq, self.rect_size, self.rect_pos, px, self.hover, self.down, 0.0, self.focus, self.disabled)
}
mod.widgets.Select.face.padding.right = 26.0
mod.widgets.MultiSelect.face.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return nd_dropdown(pq, self.rect_size, self.rect_pos, px, self.hover, self.down, 0.0, self.focus, self.disabled)
}
mod.widgets.MultiSelect.face.padding.right = 26.0

// COMBO BOX. A field one can type in: the field's plate with the chevron.
mod.widgets.ComboBoxFlat.draw_bg.vertex = fn() {
    let m = 8.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.ComboBoxFlat.clip_y = false
mod.widgets.ComboBoxFlat.draw_bg.pixel = fn() {
    let m = 8.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let face = nd_field(pq, self.rect_size, self.rect_pos, px, 7.0, self.hover, 0.0, self.focus, self.disabled)
    let ch = nd_chevron(pq, self.rect_size.x - 12.5, self.rect_size.y * 0.5 + 0.5, px) * mix(1.0, 0.4, self.disabled)
    return Finish.over(face, vec4(vec3(0.604, 0.624, 0.659) * ch, ch))
}
mod.widgets.ComboBoxFlat.padding.left = 12.0
mod.widgets.ComboBoxFlat.padding.right = 26.0
mod.widgets.ComboBoxFlat.input.min_height = 0.0

// SLIDERS. Every slider face draws its thumb and its shadows past its own
// box, so the family's root grows the quad and stops clipping.
mod.widgets.SliderMinimal.draw_bg.vertex = fn() {
    let m = 8.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.SliderMinimal.clip_x = false
mod.widgets.SliderMinimal.clip_y = false

// A raised disc thumb of radius r with a lamp in its middle: a dark cell at
// rest, lit while it is dragged or keyed.
let nd_thumb = fn(acc: vec4, pq: vec2, org: vec2, hc: vec2, r: float, px: float, hover: float, drag: float, focus: float, disabled: float) -> vec4 {
    let en = 1.0 - disabled
    let dis = mix(1.0, 0.4, disabled)
    let kh = vec2(r, r)
    let hd = length(pq - hc) - r
    var o = Finish.over(acc, nd_cast(pq, hc, kh, r, 2.0 * r, dis, en * (1.0 + 0.4 * hover), dis))
    // The face a dish from just under the ground at its top to well over it
    // at its foot, so the thumb reads as a raised handle on the black groove.
    var col = nd_face(pq, hc, kh, r, hd, px, en, 0.03 * en + 0.035 * hover * en - 0.01 * drag * en, en * (1.0 + 0.5 * hover))
    col = mix(col, nd_line(), Finish.band(hd, 0.0, px, px) * 0.75 * dis)
    // The lamp cell: five points across (its dark ring included) on a 16
    // point thumb, in proportion on the smaller ones.
    col = nd_lamp(col, pq, hc, max(r * 0.3125 - px, 1.2), px, nd_accent(), max(drag, focus) * en, 1.0)
    col = col + vec3(nd_grain(org + pq, px, 1.9))
    let ha = Finish.cover(hd, px)
    return Finish.over(o, vec4(col * ha, ha))
}

// The slot a value runs in: a pill well with a lit lip and a black groove
// down its middle. Returns the well colour; the lip is laid by the caller.
let nd_slot = fn(pq: vec2, org: vec2, c: vec2, h: vec2, groove: float, px: float, dis: float) -> vec3 {
    let r = min(h.x, h.y)
    let d = Material.sd_box(pq, c, h, r)
    var col = nd_well(mix(vec3(0.075, 0.082, 0.098), vec3(0.133, 0.145, 0.165), 1.0 - dis), pq, c, h, r, d, px, h.y * 2.0 + 4.0, dis)
    let gh = vec2(max(h.x - (h.y - groove * 0.5), 0.5), groove * 0.5)
    let gd = Material.sd_box(pq, c, gh, groove * 0.5)
    col = mix(col, vec3(0.0, 0.0, 0.0), Finish.cover(gd, px) * 0.9 * dis)
    return col
}

// The plain slider: a 6 point slot with a 2 point black groove, the value a
// one-point LED line in the groove from the stop (or from the default) to
// the thumb, and a 16 point raised thumb. The label and the readout stand
// in the 20 points above.
mod.widgets.SliderFlat.draw_bg.pixel = fn() {
    let m = 8.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let org = self.rect_pos
    let en = 1.0 - self.disabled
    let dis = mix(1.0, 0.4, self.disabled)
    let top = 20.0
    let cy = Finish.snap(org.y + top + (self.rect_size.y - top) * 0.5, px) - org.y
    let hr = 8.0
    let x0 = hr + 1.0
    let x1 = self.rect_size.x - hr - 1.0
    let gc = vec2(self.rect_size.x * 0.5, cy)
    // Ten device pixels tall about a snapped centre, so both rims and the
    // lit lip under the foot fall on whole pixel rows.
    let gh = vec2(self.rect_size.x * 0.5 - 1.0, 5.0 * px)
    let gd = Material.sd_box(pq, gc, gh, gh.y)
    var col = nd_slot(pq, org, gc, gh, 4.0 * px, px, dis)
    let lo = min(self.origin_pos, self.slide_pos)
    let hi = max(self.origin_pos, self.slide_pos)
    let from = mix(0.0, lo, self.arc_origin)
    let to = mix(self.slide_pos, hi, self.arc_origin)
    let fx0 = mix(x0, x1, from)
    let fx1 = mix(x0, x1, to)
    let fd = nd_seg(pq, vec2(fx0, cy), vec2(fx1, cy)) - px
    let show = step(0.25, fx1 - fx0)
    let lit = col + nd_accent() * 0.2 * (1.0 - smoothstep(0.0, 2.3, max(fd, 0.0))) * (1.0 - smoothstep(0.0, 2.3, max(fd, 0.0))) * en
    col = mix(col, mix(lit, mix(nd_accent(), vec3(0.29, 0.306, 0.337), self.disabled), Finish.cover(fd, px)), show)
    col = col + vec3(nd_grain(org + pq, px, 1.9))
    let ga = Finish.cover(gd, px)
    var acc = vec4(col * ga, ga)
    acc = Finish.over(acc, nd_lip(pq, gc, gh, gd, px, 0.875 * en))
    return nd_thumb(acc, pq, org, vec2(mix(x0, x1, self.slide_pos), cy), hr, px, self.hover, self.drag, self.focus, self.disabled)
}

// The minimal slider: an engraved hairline (one pixel dark over one pixel
// light), the value a one-point LED line on it, and a 10 point thumb.
mod.widgets.SliderMinimal.draw_bg.pixel = fn() {
    let m = 8.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let org = self.rect_pos
    let en = 1.0 - self.disabled
    let top = self.offset_y
    let cy = Finish.snap(org.y + top + (self.rect_size.y - top) * 0.5, px) - org.y
    let hr = 5.0
    let x0 = hr
    let x1 = self.rect_size.x - hr
    let inx = step(0.0, pq.x) * step(pq.x, self.rect_size.x)
    let dk = step(cy - px, pq.y) * step(pq.y, cy + px) * inx * mix(0.85, 0.4, self.disabled)
    let lt = step(cy + px, pq.y) * step(pq.y, cy + 2.0 * px) * inx * mix(0.07, 0.03, self.disabled)
    var acc = vec4(nd_line() * dk, dk)
    acc = Finish.over(acc, vec4(lt, lt, lt, lt))
    let lo = min(self.origin_pos, self.slide_pos)
    let hi = max(self.origin_pos, self.slide_pos)
    let from = mix(0.0, lo, self.arc_origin)
    let to = mix(self.slide_pos, hi, self.arc_origin)
    let fx0 = mix(x0, x1, from)
    let fx1 = mix(x0, x1, to)
    let fd = nd_seg(pq, vec2(fx0, cy), vec2(fx1, cy)) - px
    let fa = Finish.cover(fd, px) * step(0.25, fx1 - fx0)
    let ink = mix(nd_accent(), vec3(0.29, 0.306, 0.337), self.disabled)
    acc = Finish.over(acc, vec4(ink * fa, fa))
    return nd_thumb(acc, pq, org, vec2(mix(x0, x1, self.slide_pos), cy), hr, px, self.hover, self.drag, self.focus, self.disabled)
}

// The round slider: the value runs in a pill well strip beside its label,
// an LED line in a black groove, and a small raised thumb rides in it.
mod.widgets.SliderRoundFlat.draw_bg.pixel = fn() {
    let m = 8.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let org = self.rect_pos
    let en = 1.0 - self.disabled
    let dis = mix(1.0, 0.4, self.disabled)
    let cy = Finish.snap(org.y + self.rect_size.y * 0.5, px) - org.y
    let sx0 = self.label_size
    let sh = min(self.rect_size.y * 0.5, 8.0)
    let sc = vec2((sx0 + self.rect_size.x) * 0.5, cy)
    let shh = vec2((self.rect_size.x - sx0) * 0.5, sh)
    let sd = Material.sd_box(pq, sc, shh, sh)
    var col = nd_well(mix(vec3(0.075, 0.082, 0.098), vec3(0.133, 0.145, 0.165), self.disabled), pq, sc, shh, sh, sd, px, 16.0, dis)
    let hr = sh - 2.0
    // The readout stands in the strip's right end, behind a seam.
    let room = 34.0
    let x0 = sx0 + sh
    let x1 = self.rect_size.x - sh - room
    let sx = Finish.snap(org.x + self.rect_size.x - room - 2.0, px) - org.x
    let seam = step(sx - px, pq.x) * step(pq.x, sx) * step(abs(pq.y - cy), sh - 3.0)
    col = mix(col, vec3(0.0, 0.0, 0.0), seam * 0.6)
    col = mix(col, vec3(1.0, 1.0, 1.0), step(sx, pq.x) * step(pq.x, sx + px) * step(abs(pq.y - cy), sh - 3.0) * 0.05)
    let gd = Material.sd_box(pq, vec2((x0 + x1) * 0.5, cy), vec2((x1 - x0) * 0.5 + 2.0 * px, 2.0 * px), 2.0 * px)
    col = mix(col, vec3(0.0, 0.0, 0.0), Finish.cover(gd, px) * 0.9 * dis)
    let hx = mix(x0, x1, self.slide_pos)
    let fd = nd_seg(pq, vec2(x0, cy), vec2(hx, cy)) - px
    col = col + nd_accent() * 0.2 * (1.0 - smoothstep(0.0, 2.3, max(fd, 0.0))) * (1.0 - smoothstep(0.0, 2.3, max(fd, 0.0))) * en * step(0.0, fd) * Finish.cover(sd, px)
    col = mix(col, mix(nd_accent(), vec3(0.29, 0.306, 0.337), self.disabled), Finish.cover(fd, px))
    col = col + vec3(nd_grain(org + pq, px, 1.9))
    let sa = Finish.cover(sd, px)
    var acc = vec4(col * sa, sa)
    acc = Finish.over(acc, nd_lip(pq, sc, shh, sd, px, en))
    return nd_thumb(acc, pq, org, vec2(hx, cy), hr, px, self.hover, self.drag, self.focus, self.disabled)
}

// The readout's field takes no height of its own, so its digits stand on
// the strip's middle line and not a field's padding below it.
mod.widgets.SliderRoundFlat.text_input.min_height = 0.0
mod.widgets.SliderRoundFlat.text_input.margin.top = 2.3

// The fader: the light sheet's white spheres puck in this sheet's dark
// palette. A round cap 16 points across and 8 tall in the raised handle's
// colour, its top cut by a sphere into a shallow dish inside a rounded rim,
// lit by one key light from the top left and throwing a soft shadow down
// and to the right. It rides a 2 point slot sunk in the page, with twenty
// ticks on the far side, every fifth long, and no value fill: the cap is
// the value. The shape, its curves and the material numbers are the bench
// preset's, as in the light sheet; the inks and the ground are this
// sheet's. The puck is as wide as it is long, so `cap_cross` is not read.
// Lying down or standing up.
mod.widgets.SliderFader.cap_size = 16.0
mod.widgets.SliderFader.track_inset = 8.0
mod.widgets.SliderFader.draw_bg.track_size = uniform(2.0)
mod.widgets.SliderFader.clip_x = false
mod.widgets.SliderFader.clip_y = false
// The material, live in the tweaker: the key light in screen space (x
// right, y down, z toward the viewer) and its intensity; the highlight, its
// roughness, the broad gloss sheen and the rim toward grazing; the
// occlusion at the foot and how far up it reaches; the plain sky's
// reflection and how close the eye sits over the cap (0 far above); metal,
// turned grain and self-light, all off here; the exposure in stops and the
// highlight roll-off; the cast shadow's strength and its softest edge (held
// to the cap's height), the contact shadow's strength and the inner shadow
// in the slot.
mod.widgets.SliderFader.draw_bg.cap_light = uniform(vec3(-0.36, -0.6, 0.72))
mod.widgets.SliderFader.draw_bg.cap_light_intensity = uniform(0.9)
mod.widgets.SliderFader.draw_bg.cap_specular = uniform(0.08)
mod.widgets.SliderFader.draw_bg.cap_roughness = uniform(0.38)
mod.widgets.SliderFader.draw_bg.cap_gloss = uniform(0.16)
mod.widgets.SliderFader.draw_bg.cap_rim = uniform(0.54)
mod.widgets.SliderFader.draw_bg.cap_ao = uniform(0.32)
mod.widgets.SliderFader.draw_bg.cap_ao_reach = uniform(1.4)
mod.widgets.SliderFader.draw_bg.cap_reflection = uniform(0.16)
mod.widgets.SliderFader.draw_bg.cap_reflection_perspective = uniform(0.35)
mod.widgets.SliderFader.draw_bg.cap_metal = uniform(0.0)
mod.widgets.SliderFader.draw_bg.cap_spun = uniform(0.0)
mod.widgets.SliderFader.draw_bg.cap_glow = uniform(0.0)
mod.widgets.SliderFader.draw_bg.cap_exposure = uniform(0.0)
mod.widgets.SliderFader.draw_bg.cap_rolloff = uniform(0.6)
mod.widgets.SliderFader.draw_bg.cap_shadow = uniform(0.45)
mod.widgets.SliderFader.draw_bg.cap_shadow_blur = uniform(18.0)
mod.widgets.SliderFader.draw_bg.cap_contact = uniform(0.25)
mod.widgets.SliderFader.draw_bg.cap_inner = uniform(0.6)
// The inks, this sheet's: the cap in the raised handle's colour, the light
// white and the shade black as the dark theme under this sheet sets them
// (the shade a multiplier: what a full shadow does to what it falls on),
// the slot in the well ink and the ticks in the dim ink the old fader
// printed them in. The ground is the page's own colour, so the fader, laid
// over the page premultiplied, leaves the page itself untouched.
mod.widgets.SliderFader.draw_bg.cap_ground = uniform(mod.theme.color_bg_app)
mod.widgets.SliderFader.draw_bg.cap_body = uniform(mod.theme.color_handle)
mod.widgets.SliderFader.draw_bg.cap_light_ink = uniform(mod.theme.color_material_light)
mod.widgets.SliderFader.draw_bg.cap_shadow_ink = uniform(mod.theme.color_material_shadow)
mod.widgets.SliderFader.draw_bg.cap_track_ink = uniform(mod.theme.color_inset)
mod.widgets.SliderFader.draw_bg.cap_tick_ink = uniform(#4a4e56)

// The puck's solid at `q`, a point in the cap's own frame (x along the
// track, y across it), `hs` its half size and `r` its corner: the height
// 0..1 in .x, its gradient per point in .yz, and in .w the footprint's
// distance, negative inside. The curves are the preset's, handles resolved
// by the bench: along, across and plan level at full (a round footprint
// under a flat top), and the edge rising from the outline and rounding level
// over the whole radius. Shape: corner and edge width the whole half size,
// blend 0.02, 8 points tall. No ribs, no mark. The cut is a sphere (2) at
// the middle (0), its radius 1.17 of the half length, its centre 1.38
// heights up. On the preset's 16 point cap the wall leaves the outline at 45
// degrees and the cut takes the top down to a fifth of the height at the
// middle, a dish inside a rim; the height and the cut's centre are in
// points, so a longer cap dishes deeper, as it does on the bench.
let nd_puck_solid = fn(q: vec2, hs: vec2, r: float) -> vec4 {
    let plan = Cap.curve((q.x / hs.x + 1.0) * 0.5, 2.0, vec2(0.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0))
    let fp = Cap.sd_cap(q, hs, r, plan)
    let along = Cap.curve((q.x / hs.x + 1.0) * 0.5, 2.0, vec2(0.0, 1.0), vec2(0.1667, 0.0), vec2(-0.1667, 0.0), vec2(1.0, 1.0), vec2(0.1667, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0))
    let across = Cap.curve(abs(q.y) / hs.y, 2.0, vec2(0.0, 1.0), vec2(0.1667, 0.0), vec2(-0.1667, 0.0), vec2(1.0, 1.0), vec2(0.1667, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0))
    // The edge is read no further out than the outline: past it the curve
    // has no slope, and the pixels the outline half covers would take the
    // flat top's light, a dotted bright line along the shaded foot.
    let edge = Cap.curve(Cap.edge_x(min(fp.x, 0.0), hs, 1.0), 2.0, vec2(0.0, 0.0), vec2(0.1667, 0.1667), vec2(-0.1667, 0.0), vec2(1.0, 1.0), vec2(0.1667, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 1.0))
    let f = Cap.field(q, hs, fp, along, across, edge, vec2(1.0, 0.0), vec4(1.0, 1.0, 0.02, 8.0), vec4(0.0, 0.0, 0.0, 1.0), vec4(0.0, 0.0, 0.0, 0.0), vec4(0.0, 0.5, 1.0, 0.0), vec4(2.0, 0.0, 1.17, 1.38))
    return vec4(f.x, f.y, f.z, fp.x)
}

// A colour drawn on a page of colour `ground`, handed back premultiplied so
// the page itself is left as it is: the least cover that keeps every
// channel, and the light it adds over what shows through. Exact over that
// ground, so a shade keeps the hue of what it falls on; the engine's
// `on_ground` covers by the darkest channel alone and greys it.
let nd_on_page = fn(col: vec3, ground: vec3) -> vec4 {
    let dark = max(ground - col, vec3(0.0, 0.0, 0.0)) / max(ground, vec3(0.01, 0.01, 0.01))
    let a = clamp(max(dark.x, max(dark.y, dark.z)), 0.0, 1.0)
    return vec4(max(col - ground * (1.0 - a), vec3(0.0, 0.0, 0.0)), a)
}

// The quad grows past the layout box by the cast shadow's reach (its throw,
// five and a half points from this light, and its softest edge, the cap's 8
// point height), the focus ring's four points, and whatever of the cap is
// wider than the control, so a cap at a stop never has its shadow or its
// ring cut at the quad's edge.
mod.widgets.SliderFader.draw_bg.vertex = fn() {
    let across = mix(self.rect_size.y, self.rect_size.x, self.is_vertical)
    let m = 14.0 + max(self.cap_px - across, 0.0) * 0.5
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.SliderFader.draw_bg.pixel = fn() {
    let v = self.is_vertical
    let sz = self.rect_size
    let along = mix(sz.x, sz.y, v)
    let across = mix(sz.y, sz.x, v)
    let m = 14.0 + max(self.cap_px - across, 0.0) * 0.5
    let pq = self.pos * (sz + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let en = 1.0 - self.disabled
    let dis = mix(1.0, 0.4, self.disabled)
    // Track space: `ab.x` along the track from the value's zero (up the
    // screen when the fader stands), `ab.y` across it.
    let ab = vec2(mix(pq.x, sz.y - pq.y, v), mix(pq.y, pq.x, v))
    let inset = self.inset_px
    let travel = max(along - inset * 2.0 - self.cap_px, 1.0)
    let foot = inset + self.cap_px * 0.5
    let mid = across * 0.5
    let ground = self.cap_ground.rgb
    let body = self.cap_body.rgb
    let light_ink = self.cap_light_ink.rgb
    let shadow_ink = self.cap_shadow_ink.rgb
    // The key light on screen for the cap's shading, and turned into track
    // space for everything laid out along the track.
    let l = normalize(self.cap_light)
    let lt = Cap.light(self.cap_light, v)

    // The ground: the slot the whole length of the track, its floor in the
    // shade of the wall toward the light and its far lip lit, then the
    // scale. Disabled, both fade toward the page as this sheet's grooves and
    // ticks do.
    let tw = min(self.track_size, across)
    let tlen = max(along - inset * 2.0, 1.0)
    let tbox = vec4(inset + tlen * 0.5, mid, tlen * 0.5, tw * 0.5)
    let at = foot + self.slide_pos * travel
    let hs = vec2(self.cap_px * 0.5, self.cap_px * 0.5)
    let track_ink = self.cap_track_ink.rgb
    var col = Cap.slot(ground, ab, tbox, tw * 0.5, 0.0, inset, inset, at, hs.x, lt, px, 0.0, 0.0, track_ink, track_ink, light_ink, shadow_ink, self.cap_inner, self.cap_ao)
    col = Cap.ticks(col, ab, mid, foot, travel, 20.0, 1.0, 5.0, tw, 0.0, px, self.cap_tick_ink.rgb)
    col = mix(ground, col, dis)

    // The cap, worked out only where it, its shadow or its focus ring can
    // reach. Under the hand its face lightens a step, as this sheet's raised
    // faces do. Held, it sinks half a point, so its shadow shortens, and its
    // face darkens as this sheet's held caps do. Disabled, its relief falls
    // to four tenths as this sheet's does: its shadows and its own
    // modelling, and its rim light goes, as this sheet's disabled faces lose
    // their lit lines.
    let q = ab - vec2(at, mid)
    let r = min(hs.x, hs.y)
    let height = 8.0
    let rise = height - 0.5 * self.drag
    let reach = rise * 0.7 * length(lt.xy) / max(lt.z, 0.25) + max(rise, 1.0) + 5.0
    var capc = ground
    var cov = 0.0
    var shd = 0.0
    var halo = 0.0
    var cap_d = 100.0
    if max(abs(q.x) - hs.x, abs(q.y) - hs.y) < reach {
        let s = nd_puck_solid(q, hs, r)
        let n = Cap.normal(s.yz, height, v)
        let eye = Cap.view(q, hs, self.cap_reflection_perspective, v)
        capc = Cap.shade(n, l, eye, s.x, body, 0.0, 0.0, 1.0, self.cap_specular, self.cap_roughness, self.cap_gloss, self.cap_rim * en, self.cap_ao, self.cap_ao_reach, self.cap_reflection, self.cap_metal, self.cap_light_intensity, body, light_ink, shadow_ink, ground)
        if self.cap_spun > 0.001 {
            let grain = Cap.spun(q, hs, lt.xy) * self.cap_spun
            capc = Cap.in_shadow(Cap.in_light(capc, clamp(grain, 0.0, 1.0) * 0.55, light_ink), clamp(-grain, 0.0, 1.0) * 0.42, shadow_ink)
        }
        if self.cap_glow > 0.001 {
            capc = Cap.emit(capc, s.x, body, light_ink, self.cap_glow)
        }
        if self.disabled > 0.001 {
            // The cap as a flat disc would read, the relief laid back over
            // it at four tenths.
            let level = Cap.shade(vec3(0.0, 0.0, 1.0), l, vec3(0.0, 0.0, 1.0), 1.0, body, 0.0, 0.0, 1.0, self.cap_specular, self.cap_roughness, self.cap_gloss, 0.0, self.cap_ao, self.cap_ao_reach, self.cap_reflection, self.cap_metal, self.cap_light_intensity, body, light_ink, shadow_ink, ground)
            capc = mix(level, capc, dis)
        }
        cov = Cap.cover(s.w, px)
        // Under it: the cast shadow, thrown from the top outline the bench
        // gives for this cap, and the contact shadow round its foot.
        let cast_sh = Cap.shadow(q, hs, r, vec3(0.3529, 0.3529, 1.0), lt, rise, self.cap_shadow_blur, self.cap_shadow * dis, px)
        let contact_sh = Cap.contact(s.w, max(rise * 0.3, 1.0), self.cap_contact * dis)
        shd = clamp(cast_sh + contact_sh, 0.0, 1.0)
        halo = Cap.glow(s.w, hs, self.cap_glow)
        cap_d = s.w
    }
    col = mix(col, col * shadow_ink, shd * (1.0 - cov))
    col = col + body * halo * 0.9 * (1.0 - cov)
    col = mix(col, capc, cov)
    // Toned, the page's colour toned alike. The face's lift under the hand
    // and its darkening when held go on after the tone, as displayed, so
    // the roll-off does not swallow them. Then the fader is laid over the
    // page without painting it, and this sheet's focus ring goes round the
    // cap.
    let ev = pow(2.0, self.cap_exposure)
    let lift = (0.016 * self.hover - 0.01 * self.drag) * en * cov
    let shown = Cap.tone(col, ev, self.cap_rolloff) + vec3(lift, lift, lift)
    let res = nd_on_page(shown, Cap.tone(ground, ev, self.cap_rolloff))
    return Finish.over(res, nd_focus(cap_d, px, self.focus * en))
}

// KNOBS. A raised cap in a sunken collar, ringed by an LED arc in a dark
// slot: the unlit arc a dark track, the lit part the accent with a short
// halo. The pointer is a pale dot that lights while the knob is turned.
let nd_cap = fn(pq: vec2, org: vec2, c: vec2, rr: float, px: float, a0: float, a1: float, start: float, sweep: float, ang: float, hover: float, drag: float, focus: float, disabled: float) -> vec4 {
    let en = 1.0 - disabled
    let dis = mix(1.0, 0.4, disabled)
    let q = pq - c
    let dl = length(q)
    // The collar: a sunken ring between the arc and the cap.
    let cr = rr - clamp(0.17 * rr, 1.75, 3.5)
    let r = cr - clamp(0.12 * rr, 1.25, 2.5)
    let kd = dl - cr
    var col = nd_well(vec3(0.082, 0.09, 0.106), pq, c, vec2(cr, cr), cr, kd, px, 2.0 * cr, dis)
    // The arc: the whole sweep a dark track, the value lit. On a knob of 40
    // points and more the ring is the knob's feature: a two-pixel core with
    // a pixel and a half of dark either side; smaller knobs keep a hairline.
    let big = step(15.5, rr)
    let cw = mix(1.0, 2.0 * px, big)
    let gap = mix(px, 1.5 * px, big)
    let track = nd_arc(pq, c, rr, start, start + sweep, 1.0)
    let va = nd_arc(pq, c, rr, a0, max(a1, a0 + 0.001), cw)
    let lit = step(0.0005, a1 - a0) * en
    var g = nd_ground() + vec3(nd_grain(org + pq, px, 3.7))
    g = mix(g, nd_led_gap(g, track, px, gap, nd_accent(), 0.0, 0.0), mix(0.75, 1.0, big))
    g = mix(g, nd_led_gap(g, va, px, gap, nd_accent(), 1.0, 1.0), lit)
    let ga = 1.0 - Finish.cover(kd, px)
    // The ground round the collar, with the arc on it, is drawn opaque only
    // where the arc or its halo is; the rest is left to the page.
    let arc_a = max(Finish.cover(track - gap - 0.1, px), (1.0 - smoothstep(0.0, 2.3, max(va - gap, 0.0))) * lit) * ga
    var acc = vec4(g * arc_a, arc_a)
    // The collar, its lip on the page below it.
    col = col + vec3(nd_grain(org + pq, px, 1.9))
    let wa = Finish.cover(kd, px)
    acc = Finish.over(acc, vec4(col * wa, wa))
    acc = Finish.over(acc, nd_lip(pq, c, vec2(cr, cr), kd, px, en))
    // The cap and what it throws into the collar.
    let kh = vec2(r, r)
    let d = dl - r
    acc = Finish.over(acc, nd_cast(pq, c, kh, r, 1.2 * r, dis, en * (1.0 + 0.4 * hover), dis))
    let v = clamp(q.y / r * 0.5 + 0.5, 0.0, 1.0)
    let gg = (mix(-0.05, 0.035, smoothstep(0.0, 0.85, v)) + 0.016 * hover - 0.01 * drag) * en
    var kc = nd_ground() + vec3(gg, gg, gg)
    let upper = smoothstep(0.15, -0.6, q.y / r)
    let lower = smoothstep(0.3, 0.9, q.y / r)
    let inner = Finish.band(d, px, 2.0 * px, px)
    kc = mix(kc, vec3(1.0, 1.0, 1.0), inner * upper * 0.12 * en)
    kc = mix(kc, vec3(1.0, 1.0, 1.0), inner * lower * 0.06 * en)
    // The pointer: a small pale dot set in from the rim, lit in the accent
    // while the knob is turned or keyed.
    let dir = vec2(-sin(ang), cos(ang))
    let pr = max(0.08 * r, 1.1)
    let pd = length(q - dir * r * 0.7) - pr
    let pink = mix(mix(vec3(0.82, 0.85, 0.89), nd_accent(), max(drag, focus) * en), vec3(0.3, 0.31, 0.34), disabled)
    kc = kc + pink * 0.12 * (1.0 - smoothstep(0.0, 1.5, max(pd, 0.0))) * step(0.0, pd) * en
    kc = mix(kc, pink, Finish.cover(pd, px))
    kc = kc + vec3(nd_grain(org + pq, px, 1.9))
    kc = mix(kc, nd_line(), Finish.band(d, 0.0, px, px) * 0.8 * dis)
    let a = Finish.cover(d, px)
    acc = Finish.over(acc, vec4(kc * a, a))
    return Finish.over(acc, nd_focus(dl - rr - 0.5, px, focus * en))
}

// The panel knob: the arc in the biggest circle the box holds, pinned to
// the bottom under its legend.
mod.widgets.RotaryKnob.draw_bg.pixel = fn() {
    let m = 8.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let dia = min(self.rect_size.x, self.rect_size.y)
    let c = vec2(self.rect_size.x * 0.5, self.rect_size.y - dia * 0.5)
    let rr = dia * 0.5 - 3.0
    let one = PI / 180.0
    let sweep = 2.0 * PI - self.gap * one
    let start = self.gap * one * 0.5
    let val = start + sweep * self.slide_pos
    let org_a = start + sweep * self.origin_pos
    let a0 = mix(start, min(org_a, val), self.arc_origin)
    let a1 = mix(val, max(org_a, val), self.arc_origin)
    return nd_cap(pq, self.rect_pos, c, rr, px, a0, a1, start, sweep, val, self.hover, self.drag, self.focus, self.disabled)
}
mod.widgets.RotaryKnob.width = 44.0
mod.widgets.RotaryKnob.height = 60.0
mod.widgets.RotaryFlat.text_input.draw_bg.color = #00000000
// The readout is plain digits like the slider values: the selection the
// slider keeps over its number shows only while the field is keyed.
mod.widgets.RotaryFlat.text_input.draw_selection.color = #0000
mod.widgets.RotaryFlat.text_input.draw_selection.color_hover = #0000
mod.widgets.RotaryFlat.text_input.draw_selection.color_down = #0000
mod.widgets.RotaryFlat.text_input.draw_selection.color_empty = #0000
mod.widgets.RotaryFlat.text_input.draw_selection.color_disabled = #0000
mod.widgets.RotaryFlat.text_input.draw_text.color = #b9bfca
mod.widgets.RotaryFlat.text_input.min_height = 0.0
mod.widgets.RotaryFlat.text_input.padding.top = 0.0
mod.widgets.RotaryFlat.text_input.padding.bottom = 0.0
mod.widgets.Rotary.text_input.min_height = 0.0
mod.widgets.Rotary.text_input.padding.top = 0.0
mod.widgets.Rotary.text_input.padding.bottom = 0.0
mod.widgets.RotaryFlat.label_walk.margin.top = 4.0
mod.widgets.Rotary.label_walk.margin.top = 4.0
// The legend over a knob is a caption: small capitals in the dim label
// grey, semibold.
mod.widgets.RotaryKnob.draw_text.color = #9a9fa8
mod.widgets.RotaryKnob.draw_text.text_style = mod.theme.font_bold{font_size: 7.0}

// The dial: the same cap, collar and arc, larger, under its legend and
// readout.
mod.widgets.RotaryFlat.draw_bg.pixel = fn() {
    let m = 8.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let top = 24.0
    let dia = min(self.rect_size.x, self.rect_size.y - top)
    let c = vec2(self.rect_size.x * 0.5, top + dia * 0.5)
    let rr = dia * 0.5 - 4.0
    let one = PI / 180.0
    let sweep = 2.0 * PI - self.gap * one
    let start = self.gap * one * 0.5
    let val = start + sweep * self.slide_pos
    let org_a = start + sweep * self.origin_pos
    let a0 = mix(start, min(org_a, val), self.arc_origin)
    let a1 = mix(val, max(org_a, val), self.arc_origin)
    return nd_cap(pq, self.rect_pos, c, rr, px, a0, a1, start, sweep, val, self.hover, self.drag, self.focus, self.disabled)
}

// PROGRESS. A 6 point slot with its lip; the fill a one-point LED line in
// its black groove, with a hot dot at the leading end. Without a value the
// bar holds one lit segment, 30 percent of the slot, in its middle: a
// shader may not read the clock, so the sweep stands still.
mod.widgets.ProgressBarFlat.draw_bg.pixel = fn() {
    let p = self.pos * self.rect_size
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let org = self.rect_pos
    let w = self.rect_size.x
    let t = min(6.0, self.rect_size.y - 1.0)
    let cy = Finish.snap(org.y + (self.rect_size.y - 1.0) * 0.5, px) - org.y
    let x0 = w * self.start
    let x1 = w * self.end
    let gc = vec2((x0 + x1) * 0.5, cy)
    let gh = vec2((x1 - x0) * 0.5, t * 0.5)
    let gd = Material.sd_box(p, gc, gh, t * 0.5)
    var col = nd_slot(p, org, gc, gh, 4.0 * px, px, 1.0)
    let xv = w * clamp(self.value, self.start, self.end)
    let det = step(0.0, self.value)
    let fa0 = mix(x0 + w * 0.35, x0 + t * 0.5, det)
    let fa1 = mix(x0 + w * 0.65, max(xv - t * 0.5, x0 + t * 0.5), det)
    let ink = mix(nd_accent(), self.fill_color().rgb, step(0.5, self.intent))
    let fd = nd_seg(p, vec2(fa0, cy), vec2(fa1, cy)) - px
    let show = mix(1.0, step(x0 + 0.5, xv), det)
    col = col + ink * 0.2 * (1.0 - smoothstep(0.0, 2.3, max(fd, 0.0))) * (1.0 - smoothstep(0.0, 2.3, max(fd, 0.0))) * step(0.0, fd) * show
    col = mix(col, ink, Finish.cover(fd, px) * show)
    // The hot end.
    let hd = length(p - vec2(fa1, cy)) - 1.5
    col = mix(col, mix(ink, vec3(1.0, 1.0, 1.0), 0.5), Finish.cover(hd, px) * show * det)
    col = col + vec3(nd_grain(org + p, px, 1.9))
    let ga = Finish.cover(gd, px) * step(0.5, self.track)
    var acc = vec4(col * ga, ga)
    acc = Finish.over(acc, nd_lip(p, gc, gh, gd, px, step(0.5, self.track)))
    return acc * self.opacity
}
mod.widgets.ProgressBarFlat.height = 8.0
mod.widgets.ProgressBarFlat.draw_bg.thickness = 6.0

// LEVEL METER. A sunken slot holding a ladder of flat cells, 3 points
// along at a 5 point pitch: lit in the accent up to eight tenths, coral
// above; unlit cells are dark holes below the ground, never a dim accent.
// The peak holds as one lit cell; the lamp at the end is a round cell that
// turns coral when it latches. Nothing here glows.
mod.widgets.LevelMeter.draw_bg.pixel = fn() {
    let p = self.pos * self.rect_size
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let org = self.rect_pos
    let v = self.vertical
    let along = mix(self.rect_size.x, self.rect_size.y, v)
    let across = mix(self.rect_size.y, self.rect_size.x, v)
    let q = vec2(mix(p.x, self.rect_size.y - p.y, v), mix(p.y, p.x, v))
    let lamp_room = self.lamp * (across + self.lamp_gap)
    let bar = max(4.0, along - lamp_room)
    let r = min(2.5, across * 0.5)
    let gc = vec2(bar * 0.5, across * 0.5)
    let gh = vec2(bar * 0.5, across * 0.5)
    let gd = Material.sd_box(q, gc, gh, r)
    var col = nd_well(vec3(0.106, 0.114, 0.133), q, gc, gh, r, gd, px, 10.0, 1.0)
    let pad = 1.5
    let span = max(1.0, bar - pad * 2.0)
    let pitch = 5.0
    let n = floor((q.x - pad) / pitch)
    let cx0 = pad + n * pitch
    let cc = vec2(cx0 + 1.5, across * 0.5)
    let cd = Material.sd_box(q, cc, vec2(1.5, across * 0.5 - pad), 0.75)
    let share = clamp((cx0 + 1.5) / span, 0.0, 1.0)
    let zone = mix(nd_accent(), vec3(0.878, 0.443, 0.424), step(0.8, share))
    let inside = step(pad, q.x) * step(cx0 + 3.0, bar - pad + 0.01)
    let lit = step(cx0 + 1.5, pad + span * self.level)
    let hx = pad + span * self.hold
    let held = step(0.002, self.hold) * step(cx0, hx) * step(hx, cx0 + pitch)
    let cellc = mix(vec3(0.086, 0.094, 0.102), zone, max(lit, held))
    col = mix(col, cellc, Finish.cover(cd, px) * inside)
    col = col + vec3(nd_grain(org + p, px, 1.9))
    let ga = Finish.cover(gd, px)
    var acc = vec4(col * ga, ga)
    acc = Finish.over(acc, nd_lip(q, gc, gh, gd, px, 1.0 - v))
    // The lamp.
    let lr = across * 0.5
    let lc = vec2(along - lr, across * 0.5)
    let ld = length(q - lc) - lr
    var lcol = nd_well(vec3(0.075, 0.082, 0.098), q, lc, vec2(lr, lr), lr, ld, px, 8.0, 1.0)
    lcol = mix(lcol, vec3(0.878, 0.443, 0.424), self.over * Finish.cover(ld + 1.0, px))
    let la = Finish.cover(ld, px) * self.lamp
    acc = Finish.over(acc, vec4(lcol * la, la))
    return acc * self.opacity
}
mod.widgets.LevelMeter.height = 9.0
mod.widgets.LevelMeterColumn.width = 9.0

// SCROLL BAR. An 8 point slot at half depth with a 6 point raised pill
// thumb; dragged, a one-pixel accent line runs down the thumb.
mod.widgets.ScrollBar.draw_bg.pixel = fn() {
    let p = self.pos * self.rect_size
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let v = self.is_vertical
    let along = mix(self.rect_size.x, self.rect_size.y, v)
    let across = mix(self.rect_size.y, self.rect_size.x, v)
    let q = vec2(mix(p.x, p.y, v), mix(p.y, p.x, v))
    let w = min(8.0, across)
    let mb = across * 0.5
    let tc = vec2(along * 0.5, mb)
    let th = vec2(along * 0.5, w * 0.5)
    let td = Material.sd_box(q, tc, th, w * 0.5)
    let col = nd_well(vec3(0.106, 0.114, 0.133), q, tc, th, w * 0.5, td, px, 8.0, 0.6)
    let ta = Finish.cover(td, px) * 0.8
    var acc = vec4(col * ta, ta)
    let s0 = along * self.norm_scroll + 1.0
    let s1 = along * (self.norm_scroll + self.norm_handle) - 1.0
    let hc = vec2((s0 + s1) * 0.5, mb)
    let hh = vec2(max((s1 - s0) * 0.5, 3.0), 3.0)
    let hd = Material.sd_box(q, hc, hh, 3.0)
    let sh = Finish.drop(q, hc, hh, 3.0, vec2(0.0, 0.8), 1.2) * 0.45
    acc = Finish.over(acc, vec4(0.0, 0.0, 0.0, sh))
    let g = 0.012 + 0.015 * self.hover
    var hcol = nd_ground() + vec3(g, g, g) + vec3(0.03, 0.03, 0.03) * clamp((q.y - (mb - 3.0)) / 6.0, 0.0, 1.0)
    hcol = mix(hcol, nd_accent(), step(abs(q.y - mb), px * 0.5) * step(abs(q.x - hc.x), hh.x - 3.0) * self.drag * 0.6)
    hcol = mix(hcol, nd_line(), Finish.band(hd, 0.0, px, px) * 0.6)
    let ha = Finish.cover(hd, px)
    acc = Finish.over(acc, vec4(hcol * ha, ha))
    return acc * self.opacity
}
mod.widgets.ScrollBar.bar_size = 10.0

// SEGMENTED CONTROL. One raised body with a 7 point corner; the answer in
// use is a segment pressed into it, flat and a step darker, with its label
// in the accent.
mod.widgets.SegmentedControlFlat.segment_height = 22.0
mod.widgets.SegmentedControlFlat.segment_padding = 12.0
mod.widgets.SegmentedControlFlat.draw_bg.vertex = fn() {
    let m = 10.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.SegmentedControlFlat.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return nd_button(pq, self.rect_size, self.rect_pos, px, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0), 1.0, 0.0, 0.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0))
}
mod.widgets.SegmentedControlFlat.draw_pill.pixel = fn() {
    let p = self.pos * self.rect_size
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let c = self.rect_size * 0.5
    let h = self.rect_size * 0.5
    let d = Material.sd_box(p, c, h, 5.0)
    let deep = Finish.inset(p, c, h, 5.0, vec2(0.0, 2.0), 2.6)
    var col = mix(nd_ground() - vec3(0.045, 0.045, 0.045), vec3(0.0, 0.0, 0.0), deep * 0.5)
    col = col + vec3(nd_grain(self.rect_pos + p, px, 1.9))
    col = mix(col, nd_line(), Finish.band(d, 0.0, px, px) * 0.75)
    let a = Finish.cover(d, px)
    return vec4(col * a, a)
}
mod.widgets.SegmentedControlFlat.draw_text.color = #a3a9b4
// The selected label takes the ink of the control's intent family, not
// draw_text_selected's colour, so the family's container ink is set here.
mod.widgets.SegmentedControlFlat.intent = mod.widgets.BadgeIntent.Primary
mod.widgets.SegmentedControlFlat.palette.on_primary_container = #45ebe0
mod.widgets.SegmentedControl.palette.on_primary_container = #45ebe0
mod.widgets.SegmentedControlFlat.draw_text_selected.color = #45ebe0
mod.widgets.SegmentedControlFlat.draw_text_selected.text_style = nd_medium

// TABS. The strip is one raised body; the tab in use is pressed into it,
// flat and a step darker; between the tabs runs a seam, one pixel dark
// with one pixel of light beside it.
mod.widgets.Tabs.height = 26.0
mod.widgets.Tabs.draw_bg.vertex = fn() {
    let m = 10.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.Tabs.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return nd_button(pq, self.rect_size, self.rect_pos, px, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0), 1.0, 0.0, 0.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0))
}
mod.widgets.Tabs.draw_tab.pixel = fn() {
    return vec4(0.0, 0.0, 0.0, 0.0)
}
mod.widgets.Tabs.draw_tab_hover.pixel = fn() {
    let p = self.pos * self.rect_size
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let c = self.rect_size * 0.5
    let h = self.rect_size * 0.5 - vec2(1.0, 1.0)
    let d = Material.sd_box(p, c, h, 4.0)
    let a = Finish.cover(d, px) * 0.035
    return vec4(a, a, a, a)
}
mod.widgets.Tabs.draw_tab_active.pixel = fn() {
    let p = self.pos * self.rect_size
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let c = self.rect_size * 0.5
    let h = self.rect_size * 0.5 - vec2(2.0, 2.0)
    let d = Material.sd_box(p, c, h, 5.0)
    let deep = Finish.inset(p, c, h, 5.0, vec2(0.0, 2.0), 2.6)
    var col = mix(nd_ground() - vec3(0.045, 0.045, 0.045), vec3(0.0, 0.0, 0.0), deep * 0.5)
    col = col + vec3(nd_grain(self.rect_pos + p, px, 1.9))
    col = mix(col, nd_line(), Finish.band(d, 0.0, px, px) * 0.75)
    let a = Finish.cover(d, px)
    return vec4(col * a, a)
}
mod.widgets.Tabs.draw_sep.vertex = fn() {
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(1.0, 0.0), self.rect_size + vec2(2.0, 0.0))
}
mod.widgets.Tabs.draw_sep.pixel = fn() {
    let p = self.pos * (self.rect_size + vec2(2.0, 0.0)) - vec2(1.0, 0.0)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let x = Finish.snap(self.rect_pos.x + self.rect_size.x * 0.5, px) - self.rect_pos.x
    let iny = step(3.0, p.y) * step(p.y, self.rect_size.y - 3.0)
    let dk = step(x - px, p.x) * step(p.x, x) * 0.8 * iny
    let lt = step(x, p.x) * step(p.x, x + px) * 0.05 * iny
    var acc = vec4(nd_line() * dk, dk)
    return Finish.over(acc, vec4(lt, lt, lt, lt))
}
// Close and add: 7 point marks at a one-point stroke.
mod.widgets.Tabs.draw_mark.color = #9a9fa8
mod.widgets.Tabs.draw_mark.pixel = fn() {
    let p = self.pos * self.rect_size
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let c = self.rect_size * 0.5
    let e = 3.0
    let a = mix(0.7853981634, 0.0, self.plus)
    let r = e * mix(1.2, 1.0, self.plus)
    let ax = cos(a) * r
    let ay = sin(a) * r
    let d = min(nd_seg(p, c - vec2(ax, ay), c + vec2(ax, ay)), nd_seg(p, c + vec2(ay, -ax), c + vec2(-ay, ax)))
    let k = Finish.cover(d - 0.55, px) * self.color.w
    return vec4(self.color.rgb * k, k)
}
mod.widgets.Tabs.draw_text.color = #a3a9b4
mod.widgets.Tabs.draw_text_active.color = #45ebe0
mod.widgets.Tabs.draw_text_active.text_style = nd_medium

// RADIO TABS. Flat on the page at rest, rising under the pointer; the one
// in use is pressed in, with its label in the accent.
mod.widgets.RadioButtonTabFlat.draw_bg.vertex = fn() {
    let m = 10.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.RadioButtonTabFlat.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return nd_button(pq, self.rect_size, self.rect_pos, px, self.hover * (1.0 - self.active), max(self.down, self.active), self.focus, self.disabled, 0.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0), 0.0, 0.0, 0.0, 0.0, vec4(0.0, 0.0, 0.0, 0.0))
}
mod.widgets.RadioButtonTabFlat.clip_x = false
mod.widgets.RadioButtonTabFlat.clip_y = false
mod.widgets.RadioButtonTabFlat.padding = mod.turtle.Inset{left: 12.0 right: 12.0 top: 6.5 bottom: 6.5}
// The label stands in the middle: the stock walk keeps room at its left for
// the circle a tab does not draw.
mod.widgets.RadioButtonTabFlat.label_walk.margin = mod.turtle.Inset{left: 0.0 right: 0.0 top: 0.0 bottom: 0.0}
mod.widgets.RadioButtonTabFlat.draw_text.color = #a3a9b4
mod.widgets.RadioButtonTabFlat.draw_text.color_active = #45ebe0

// CHIPS. A small raised pill, pressed in while held; a keyed chip wears the
// focus ring.
mod.widgets.ChipFlat.draw_bg.vertex = fn() {
    let m = 8.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.ChipFlat.draw_bg.pixel = fn() {
    let m = 8.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let c = self.rect_size * 0.5
    let h = self.rect_size * 0.5
    let r = min(self.radius, h.y)
    let d = Material.sd_box(pq, c, h, r)
    let s = self.rect_size.y
    let up = 1.0 - self.down
    var acc = nd_cast(pq, c, h, r, s, up, up * (1.0 + 0.4 * self.hover), max(up, 0.45 * self.down))
    var col = nd_face(pq, c, h, r, d, px, up, 0.014 * self.hover, up * (1.0 + 0.3 * self.hover))
    let deep = Finish.inset(pq, c, h, r, vec2(0.0, 0.08 * s), 0.1 * s)
    col = mix(col, mix(nd_ground() - vec3(0.045, 0.045, 0.045), vec3(0.0, 0.0, 0.0), deep * 0.5), self.down)
    col = col + vec3(nd_grain(self.rect_pos + pq, px, 1.9))
    col = mix(col, nd_line(), Finish.band(d, 0.0, px, px) * 0.75)
    let a = Finish.cover(d, px)
    acc = Finish.over(acc, vec4(col * a, a))
    return Finish.over(acc, nd_focus(d, px, self.keyed))
}
mod.widgets.ChipFlat.draw_text.color = #b9bfca

// SURFACES. A panel is the ground raised by a shallow step with a 10 point
// corner: a soft fall, the contact line, a faint light line on its top
// edge, and the ground's own grain. An inset panel is the same step pressed
// in: the contact line, the page's shadow falling in at the top, and the
// lit lip at the foot.
let nd_panel = fn(pq: vec2, size: vec2, org: vec2, px: float, face: vec3, r: float, raised: float, sunken: float, lift: float) -> vec4 {
    let c = size * 0.5
    let h = size * 0.5
    let rr = min(r, min(h.x, h.y))
    let d = Material.sd_box(pq, c, h, rr)
    let fall = Finish.drop(pq, c, h, rr, vec2(0.5, 3.0), 4.0) * (0.4 + 0.08 * lift) * raised
    let con = Finish.drop(pq, c, h, rr, vec2(0.0, 0.8), 0.8) * 0.45 * raised
    let hl = Finish.drop(pq, c, h, rr, vec2(-0.6, -1.4), 1.8) * 0.05 * raised
    var acc = vec4(vec3(0.039, 0.043, 0.055) * fall, fall)
    acc = Finish.over(acc, vec4(0.0, 0.0, 0.0, con))
    acc = Finish.over(acc, vec4(hl, hl, hl, hl))
    let lf = 0.008 * raised + 0.006 * lift
    var col = face + vec3(lf, lf, lf)
    let top = 1.0 - smoothstep(rr * 0.3, rr + 0.6, pq.y)
    col = mix(col, vec3(1.0, 1.0, 1.0), Finish.band(d, px, 2.0 * px, px) * top * 0.07 * raised)
    let tray = face - vec3(0.02, 0.02, 0.02)
    let dk = Finish.inset(pq, c, h, rr, vec2(0.0, 1.5), 2.2)
    let tcol = mix(tray, vec3(0.0, 0.0, 0.0), dk * 0.4)
    col = mix(col, tcol, sunken)
    // A raised panel carries the ground's grain; the floor of a sunken one
    // is knit, a two-pixel checker a couple of levels either side.
    let kq = floor((org + pq) / (2.0 * px))
    let knit = ((kq.x + kq.y) - 2.0 * floor((kq.x + kq.y) * 0.5) - 0.5) * 2.0 * 2.5 / 255.0
    col = col + vec3(mix(nd_grain(org + pq, px, 3.7), knit, step(0.5, sunken)))
    col = mix(col, nd_line(), Finish.band(d, 0.0, px, px) * mix(0.6, 0.75, sunken) * max(raised, sunken))
    let a = Finish.cover(d, px)
    acc = Finish.over(acc, vec4(col * a, a))
    return Finish.over(acc, nd_lip(pq, c, h, d, px, sunken * 0.8))
}
mod.widgets.RoundedView.clip_x = false
mod.widgets.RoundedView.clip_y = false
mod.widgets.PanelView.draw_bg.vertex = fn() {
    let m = 12.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.PanelView.draw_bg.pixel = fn() {
    let m = 12.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return nd_panel(pq, self.rect_size, self.rect_pos, px, nd_ground(), 10.0, 1.0 - self.sunken, self.sunken, 0.0)
}

// A card is a raised panel too; a pressable one lifts under the pointer.
mod.widgets.Card.radius = 10.0
mod.widgets.Card.clip_x = false
mod.widgets.Card.clip_y = false
mod.widgets.Card.draw_bg.vertex = fn() {
    let m = 12.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.Card.draw_bg.pixel = fn() {
    let m = 12.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    // Elevated stands up; filled is a shallow tray; outlined lies flat
    // inside the contact line. Under the pointer each rises a step.
    let lift = self.hover * (1.0 - self.down)
    let outlined = step(0.01, self.border_size)
    let raised = max(clamp(self.shadow_radius / 4.0, 0.0, 1.0), 0.6 * lift) * (1.0 - self.down)
    let sunk = max((1.0 - clamp(self.shadow_radius / 4.0, 0.0, 1.0)) * (1.0 - outlined) * (1.0 - lift), self.down)
    var acc = nd_panel(pq, self.rect_size, self.rect_pos, px, nd_ground(), self.border_radius, raised, sunk, lift)
    let c = self.rect_size * 0.5
    let d = Material.sd_box(pq, c, c, min(self.border_radius, min(c.x, c.y)))
    let eng = Finish.band(d, 0.0, px, px) * outlined * (1.0 - raised) * (1.0 - sunk) * 0.7
    acc = Finish.over(acc, vec4(nd_line() * eng, eng))
    return Finish.over(acc, nd_lip(pq, c, c, d, px, outlined * (1.0 - raised) * (1.0 - sunk)))
}

// The rounded view keeps whatever colour it is given; a view the colour of
// the page is a surface of the page, and stands up off it like a panel.
mod.widgets.RoundedView.draw_bg.vertex = fn() {
    let m = 10.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.RoundedView.draw_bg.pixel = fn() {
    let m = 10.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    var fill = self.color
    if self.color_2.x > -0.5 {
        let dir = if self.gradient_fill_horizontal > 0.5 self.pos.x else self.pos.y
        fill = mix(self.color, self.color_2, dir)
    }
    let lower = vec2(self.border_inset.x, self.border_inset.y)
    let upper = self.rect_size - vec2(self.border_inset.z, self.border_inset.w)
    let c = (lower + upper) * 0.5
    let h = max((upper - lower) * 0.5, vec2(0.5, 0.5))
    // The corner as the stock face draws it, so a view keeps its shape.
    let r = min(2.0 * max(1.0, self.border_radius), min(h.x, h.y))
    let d = Material.sd_box(pq, c, h, r)
    let near = (1.0 - smoothstep(0.02, 0.06, abs(Finish.lum(fill.rgb) - 0.184))) * step(0.99, fill.w)
    let fall = Finish.drop(pq, c, h, r, vec2(0.4, 2.2), 3.0) * 0.4 * near
    let hl = Finish.drop(pq, c, h, r, vec2(-0.5, -1.2), 1.6) * 0.05 * near
    var acc = vec4(vec3(0.039, 0.043, 0.055) * fall, fall)
    acc = Finish.over(acc, vec4(hl, hl, hl, hl))
    let a = Finish.cover(d, px)
    var col = fill.rgb
    let top = 1.0 - smoothstep(r * 0.3, r + 0.6, pq.y - lower.y)
    col = mix(col, vec3(1.0, 1.0, 1.0), Finish.band(d, px, 2.0 * px, px) * top * 0.07 * near)
    col = mix(col, nd_line(), Finish.band(d, 0.0, px, px) * 0.6 * near)
    acc = Finish.over(acc, vec4(col * a * fill.w, a * fill.w))
    let bd = Finish.band(d, 0.0, max(self.border_size, 0.0), px) * step(0.001, self.border_size) * self.border_color.w
    return Finish.over(acc, vec4(self.border_color.rgb * bd, bd))
}

// LIST ROWS. No shadow per row. Between rows a seam (one pixel dark over
// one pixel light) inset 12; under the pointer a faint lift; the selected
// row a sunken strip with a lit bar at its left end, half the row tall.
mod.widgets.ListItem.draw_bg.pixel = fn() {
    let p = self.pos * self.rect_size
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let org = self.rect_pos
    let w = self.rect_size.x
    let h = self.rect_size.y
    // The strip is set in from the row: 6 points at the left (the seams
    // begin 12 in) and 10 at the right, clear of the scroll bar.
    let c = vec2((6.0 + w - 10.0) * 0.5, h * 0.5)
    let hh = vec2((w - 16.0) * 0.5, min(h * 0.5 - 4.0, 12.0))
    let d = Material.sd_box(p, c, hh, 4.0)
    let en = 1.0 - self.disabled
    let sel = self.selected * en
    let deep = Finish.inset(p, c, hh, 4.0, vec2(0.0, 1.8), 2.4)
    var col = mix(nd_ground() - vec3(0.045, 0.045, 0.045), vec3(0.0, 0.0, 0.0), deep * 0.5)
    col = mix(col, nd_line(), Finish.band(d, 0.0, px, px) * 0.6)
    let bx = c.x - hh.x + 3.5
    let bd = nd_seg(p, vec2(bx, c.y - hh.y * 0.5), vec2(bx, c.y + hh.y * 0.5)) - 0.5
    col = nd_led(col, bd, px, nd_accent(), 1.0, 1.0)
    col = col + vec3(nd_grain(org + p, px, 1.9))
    let wa = Finish.cover(d, px) * max(sel, self.down * 0.6 * en)
    var acc = vec4(col * wa, wa)
    let hv = Finish.cover(d, px) * self.hover * en * (1.0 - sel) * 0.03
    acc = Finish.over(acc, vec4(hv, hv, hv, hv))
    let yb = Finish.snap(org.y + h, px) - org.y
    let inx = step(12.0, p.x) * step(p.x, w - 12.0) * (1.0 - sel)
    let dk = step(yb - 2.0 * px, p.y) * step(p.y, yb - px) * inx * 0.35
    let lt = step(yb - px, p.y) * step(p.y, yb) * inx * 0.04
    acc = Finish.over(acc, vec4(0.0, 0.0, 0.0, dk))
    acc = Finish.over(acc, vec4(lt, lt, lt, lt))
    return acc
}
mod.widgets.ListItem.draw_text.color = #b9bfca

// BADGE. A neutral badge is a small sunken cell with light digits; a
// coloured one (an error count, say) keeps its colour, flat.
let nd_badge = fn(pq: vec2, size: vec2, org: vec2, px: float, fill: vec4, radius: float, bw: float, bc: vec4) -> vec4 {
    let c = size * 0.5
    let h = size * 0.5
    let r = min(radius, min(h.x, h.y))
    let d = Material.sd_box(pq, c, h, r)
    let neutral = 1.0 - step(0.12, abs(Finish.lum(fill.rgb) - 0.184) + length(fill.rgb - vec3(Finish.lum(fill.rgb), Finish.lum(fill.rgb), Finish.lum(fill.rgb))))
    var col = mix(fill.rgb, nd_well(vec3(0.075, 0.082, 0.098), pq, c, h, r, d, px, size.y, 1.0), neutral)
    col = col + vec3(nd_grain(org + pq, px, 1.9))
    let a = Finish.cover(d, px) * max(fill.w, neutral)
    var acc = vec4(col * a, a)
    acc = Finish.over(acc, nd_lip(pq, c, h, d, px, neutral))
    let bd = Finish.band(d, 0.0, max(bw, 0.0), px) * step(0.001, bw) * bc.w
    return Finish.over(acc, vec4(bc.rgb * bd, bd))
}
mod.widgets.BadgeFlat.draw_bg.vertex = fn() {
    let m = 2.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.BadgeFlat.draw_bg.pixel = fn() {
    let m = 2.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return nd_badge(pq, self.rect_size, self.rect_pos, px, self.color, self.radius, self.border_size, self.border_color)
}
mod.widgets.Badge.draw_bg.pixel = fn() {
    let m = 2.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return nd_badge(pq, self.rect_size, self.rect_pos, px, self.color, self.radius, self.border_size, self.border_color)
}
mod.widgets.BadgeFlat.palette.neutral = #2c2f36
mod.widgets.BadgeFlat.palette.on_neutral = #d7dde6
mod.widgets.Badge.palette.neutral = #2c2f36
mod.widgets.Badge.palette.on_neutral = #d7dde6
mod.widgets.BadgeFlat.draw_text.text_style = mod.theme.font_regular{font_size: 7.5 font_family: mod.theme.font_regular.font_family{ibm_plex_text := FontMember{res: crate_resource("makepad_widgets:resources/Inter.ttf") weight: 500.0 asc: 0.0 desc: 0.0}}}
mod.widgets.Badge.draw_text.text_style = mod.theme.font_regular{font_size: 7.5 font_family: mod.theme.font_regular.font_family{ibm_plex_text := FontMember{res: crate_resource("makepad_widgets:resources/Inter.ttf") weight: 500.0 asc: 0.0 desc: 0.0}}}

// THE OPEN LIST. A raised panel with a 6 point corner; the row under the
// pointer lifts a little, the chosen row is a sunken strip with a lit bar
// at its left end and its label in the accent.
mod.widgets.PopupMenuFlat.draw_bg.vertex = fn() {
    let m = 12.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.PopupMenuFlat.draw_bg.pixel = fn() {
    let m = 12.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    return nd_panel(pq, self.rect_size, self.rect_pos, px, nd_ground() + vec3(0.012, 0.012, 0.014), 6.0, 1.0, 0.0, 0.0)
}
mod.widgets.PopupMenuFlat.clip_x = false
mod.widgets.PopupMenuFlat.clip_y = false
mod.widgets.PopupMenuItem.draw_bg.pixel = fn() {
    let p = self.pos * self.rect_size
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let c = self.rect_size * 0.5
    let h = self.rect_size * 0.5 - vec2(0.0, 1.0)
    let d = Material.sd_box(p, c, h, 3.0)
    let en = 1.0 - self.disabled
    let deep = Finish.inset(p, c, h, 3.0, vec2(0.0, 1.6), 2.2)
    var col = mix(nd_ground() - vec3(0.035, 0.035, 0.035), vec3(0.0, 0.0, 0.0), deep * 0.5)
    let bx = 3.0
    let bd = nd_seg(p, vec2(bx, c.y - h.y * 0.45), vec2(bx, c.y + h.y * 0.45)) - 0.5
    col = mix(col, nd_led(col, bd, px, nd_accent(), 1.0, 1.0), self.active)
    let wa = Finish.cover(d, px) * self.active * en
    var acc = vec4(col * wa, wa)
    let hv = Finish.cover(d, px) * self.hover * en * 0.04
    return Finish.over(acc, vec4(hv, hv, hv, hv))
}
mod.widgets.PopupMenuItem.draw_text.color_active = #45ebe0

// Templates that draw a face of their own on top of these roots keep the
// plain quad: the grown one is only for the faces written here.
mod.widgets.CloseButton.draw_bg.vertex = fn() {
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
}
mod.widgets.CopyButton.draw_bg.vertex = fn() {
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
}
mod.widgets.BurgerButton.draw_bg.vertex = fn() {
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
}
mod.widgets.ButtonFloating.draw_bg.vertex = fn() {
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
}
mod.widgets.ButtonFloatingSm.draw_bg.vertex = fn() {
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
}
mod.widgets.CheckBoxCustom.draw_bg.vertex = fn() {
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
}
mod.widgets.glass.CutButton.draw_bg.vertex = fn() {
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
}
mod.widgets.glass.RadioButton.draw_bg.vertex = fn() {
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos, self.rect_size)
}

// THE PAGE. The window's own ground: the navy-charcoal, a long fall from
// the lit top left (a little bluer there) to the bottom right, and a fine
// free grain that doubles as the dither for the fall.
mod.widgets.Window.show_bg = true
mod.widgets.Window.draw_bg.pixel = fn() {
    let p = self.pos * self.rect_size
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let t = (self.pos.x + self.pos.y) * 0.5
    let g = 0.02 - 0.055 * t
    let tint = vec3(0.0, 2.0, 3.0) / 255.0 * (1.0 - t)
    return vec4(nd_ground() + vec3(g, g, g) + tint + vec3(nd_grain(self.rect_pos + p, px, 3.7)), 1.0)
}

// A ROW OF FIELDS IS ONE HEIGHT. The box metrics are stated once here and
// handed to each field below, so the fields, the drop-down and the buttons
// stand in one 26 point row.
let field_height = 26.0
let field_pad_v = 6.0
// A pill: the plate's corner is half its height.
let field_radius = 13.0
// No borders: the relief draws the edge.
let field_border = 0.0

// The room a Fit field takes: where a field is Fit, the padding IS its
// height.
let field_room = fn(w) {
    w.min_height = field_height
    w.padding.top = field_pad_v
    w.padding.bottom = field_pad_v
}
// The box a field draws. Given the draw object and not the widget, because
// not every field draws its own box.
let field_face = fn(d) {
    d.border_radius = field_radius
    d.border_size = field_border
}
// A field that states a frame and lays its own parts out inside it takes
// the height alone: a padding would displace its line.
let field_frame = fn(w) {
    w.min_height = field_height
}

field_room(mod.widgets.TextInput)
field_face(mod.widgets.TextInput.draw_bg)
field_room(mod.widgets.ComboBox)
field_face(mod.widgets.ComboBox.draw_bg)
field_room(mod.widgets.DropDown)
field_face(mod.widgets.DropDown.draw_bg)
field_room(mod.widgets.DropDown2)
field_face(mod.widgets.DropDown2.draw_bg)
field_room(mod.widgets.FieldWell)
field_face(mod.widgets.FieldWell.draw_bg)
field_room(mod.widgets.TagField)
field_face(mod.widgets.TagField.draw_bg)
field_frame(mod.widgets.NumberField)
mod.widgets.NumberField.draw_bg.border_radius = 7.0
field_frame(mod.widgets.ValueInput)
field_frame(mod.widgets.DateField)
field_frame(mod.widgets.TimeField)
field_frame(mod.widgets.DatePicker)
field_frame(mod.widgets.DateRangePicker)
// The chrome-less input a well holds must impose no height of its own.
mod.widgets.WellInput.min_height = 0.0
mod.widgets.Window.pass.clear_color = #2c2f36
// ---------------------------------------------------------------- band

// THE BAND is the sheet's own slider with two thumbs: the same track, the
// same lit value and the same thumb as the Slider, the value lit between
// the two thumbs, its quad grown as the slider's is so the thumbs keep
// their shape. The widget's grab geometry is set to the thumbs' own, so
// what is drawn is what is dragged.
mod.widgets.RangeSliderFlat.clip_x = false
mod.widgets.RangeSliderFlat.clip_y = false
mod.widgets.RangeSliderFlat.track_inset = 1.0
mod.widgets.RangeSliderFlat.handle_size = 16.0
mod.widgets.RangeSliderFlat.draw_bg.vertex = fn() {
    let m = 8.0
    self.vertex_pos = self.clip_and_transform_vertex(self.rect_pos - vec2(m, m), self.rect_size + vec2(2.0 * m, 2.0 * m))
}
mod.widgets.RangeSliderFlat.draw_bg.pixel = fn() {
    let m = 8.0
    let pq = self.pos * (self.rect_size + vec2(2.0 * m, 2.0 * m)) - vec2(m, m)
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let org = self.rect_pos
    let en = 1.0 - self.disabled
    let dis = mix(1.0, 0.4, self.disabled)
    let top = self.label_px
    let cy = Finish.snap(org.y + top + (self.rect_size.y - top) * 0.5, px) - org.y
    let hr = 8.0
    let x0 = hr + 1.0
    let x1 = self.rect_size.x - hr - 1.0
    let gc = vec2(self.rect_size.x * 0.5, cy)
    let gh = vec2(self.rect_size.x * 0.5 - 1.0, 5.0 * px)
    let gd = Material.sd_box(pq, gc, gh, gh.y)
    var col = nd_slot(pq, org, gc, gh, 4.0 * px, px, dis)
    let fx0 = mix(x0, x1, self.start_pos)
    let fx1 = mix(x0, x1, self.end_pos)
    let fd = nd_seg(pq, vec2(fx0, cy), vec2(fx1, cy)) - px
    let show = step(0.25, fx1 - fx0)
    let lit = col + nd_accent() * 0.2 * (1.0 - smoothstep(0.0, 2.3, max(fd, 0.0))) * (1.0 - smoothstep(0.0, 2.3, max(fd, 0.0))) * en
    col = mix(col, mix(lit, mix(nd_accent(), vec3(0.29, 0.306, 0.337), self.disabled), Finish.cover(fd, px)), show)
    col = col + vec3(nd_grain(org + pq, px, 1.9))
    let ga = Finish.cover(gd, px)
    var acc = vec4(col * ga, ga)
    acc = Finish.over(acc, nd_lip(pq, gc, gh, gd, px, 0.875 * en))
    acc = nd_thumb(acc, pq, org, vec2(fx0, cy), hr, px, self.hot_start, self.drag * self.hot_start, self.focus, self.disabled)
    return nd_thumb(acc, pq, org, vec2(fx1, cy), hr, px, self.hot_end, self.drag * self.hot_end, self.focus, self.disabled)
}

// ---------------------------------------------------------------- switches and meter

// THE SWITCHES are the sheet's own toggle, in proportion with the
// labels and the controls beside them: the rocker and the slide switch
// take the toggle's face, its size and shape, its quad and its label
// gap (the library's own faces for them are flat boxes sized for
// another face). The rocker turns on a click; the slide switch follows a
// drag, as the toggle does.
mod.widgets.ToggleRocker.draw_bg.vertex = mod.widgets.ToggleFlat.draw_bg.vertex
mod.widgets.ToggleSlide.draw_bg.vertex = mod.widgets.ToggleFlat.draw_bg.vertex
mod.widgets.ToggleRocker.clip_x = false
mod.widgets.ToggleSlide.clip_x = false
mod.widgets.ToggleRocker.clip_y = false
mod.widgets.ToggleSlide.clip_y = false
mod.widgets.ToggleRocker.draw_bg.pixel = mod.widgets.ToggleFlat.draw_bg.pixel
mod.widgets.ToggleSlide.draw_bg.pixel = mod.widgets.ToggleFlat.draw_bg.pixel
mod.widgets.ToggleRocker.draw_bg.size = 18.0
mod.widgets.ToggleSlide.draw_bg.size = 18.0
mod.widgets.ToggleRocker.draw_bg.pill_aspect = 1.889
mod.widgets.ToggleSlide.draw_bg.pill_aspect = 1.889
mod.widgets.ToggleRocker.padding = mod.turtle.Inset{left: 0.0 right: 4.0 top: 4.0 bottom: 4.0}
mod.widgets.ToggleSlide.padding = mod.turtle.Inset{left: 0.0 right: 4.0 top: 4.0 bottom: 4.0}
mod.widgets.ToggleRocker.label_walk.margin.left = 42.0
mod.widgets.ToggleSlide.label_walk.margin.left = 42.0

// THE METER sits in the same window as the readouts and the screen: the
// library's display housing drawn round its face -- the bezel ring, a shade
// of whatever ground it is set in with a device pixel of dark at its edge;
// the face with the surround's shadow falling across it from the top and a
// device pixel of black where the glass meets the bezel; the glass's quiet
// diagonal band and the light line inside its top edge; the lip of light on
// the ground under it -- with the same corner, so the meter and the
// readouts read as one family. The scale, the red zone, the needle and its
// pivot are the library's own.
mod.widgets.NeedleMeter.draw_bg.border_radius = uniform(theme.corner_radius * 0.5)
mod.widgets.NeedleMeter.draw_bg.color_bezel = uniform(theme.color_d_05)
mod.widgets.NeedleMeter.draw_bg.color_lip = uniform(theme.color_u_15)
mod.widgets.NeedleMeter.draw_bg.pixel = fn() {
    let p = self.pos * self.rect_size
    let px = 1.0 / max(self.draw_pass.dpi_factor, 0.5)
    let lo = vec2(Finish.snap(self.rect_pos.x, px), Finish.snap(self.rect_pos.y, px)) - self.rect_pos
    let hi = vec2(Finish.snap(self.rect_pos.x + self.rect_size.x, px), Finish.snap(self.rect_pos.y + self.rect_size.y, px) - px) - self.rect_pos
    let c = (lo + hi) * 0.5
    let ho = (hi - lo) * 0.5
    let r_out = min(self.border_radius, min(ho.x, ho.y))
    let outer = Material.sd_box(p, c, ho, r_out)
    let b = Finish.snap(2.0, px)
    let hf = max(ho - vec2(b, b), vec2(0.5, 0.5))
    let rf = max(r_out - b, 0.0)
    let face_d = Material.sd_box(p, c, hf, rf)
    let pv = self.pivot()
    let rr = self.scale_radius()
    let q = p - pv
    let r = length(q)
    let ang = atan2(q.x, 0.0 - q.y)
    let sweep = self.sweep * 0.017453293
    let t = ang / sweep + 0.5
    let on_scale = step(-0.0001, t) * step(t, 1.0001)
    var face = self.color.rgb
    // The scale: a hairline arc and a tick at every division.
    let arc = Finish.cover(abs(r - rr) - px * 0.5, px) * on_scale
    let n = max(floor(self.majors + 0.5), 1.0) * max(floor(self.minors + 0.5), 1.0)
    let k = floor(clamp(t, 0.0, 1.0) * n + 0.5)
    let ak = (k / n - 0.5) * sweep
    let perp = abs(q.x * cos(ak) + q.y * sin(ak))
    let mn = max(floor(self.minors + 0.5), 1.0)
    let major = 1.0 - step(0.5, k - mn * floor(k / mn + 0.0001))
    let len = mix(self.tick_minor, self.tick_major, major)
    let radial = max(rr - len - r, r - rr)
    let tick = Finish.cover(perp - px * mix(0.5, 1.0, major), px) * Finish.cover(radial, px) * step(0.0, 0.0 - q.y * cos(ak) + q.x * sin(ak))
    face = mix(face, self.color_scale.rgb, max(arc, tick))
    if self.zone < 0.999 {
        let zone_t = Finish.cover((self.zone - t) * sweep * r, px) * Finish.cover((t - 1.0) * sweep * r, px)
        let zone_r = Finish.cover(max(rr + px - r, r - rr - 2.5), px)
        face = mix(face, self.color_zone.rgb, zone_t * zone_r)
    }
    // The needle, from under the pivot cover to just past the scale.
    let na = self.needle_angle(self.value)
    let nd = vec2(sin(na), 0.0 - cos(na))
    let along = dot(q, nd)
    let across = abs(q.x * nd.y - q.y * nd.x)
    let needle = Finish.cover(across - px * 0.5, px) * Finish.cover(along - (rr + 3.0), px) * Finish.cover(0.0 - along - max(self.pivot_size - px, 0.0), px)
    face = mix(face, self.color_needle.rgb, needle)
    let pd = r - self.pivot_size
    face = mix(face, mix(self.color_needle.rgb, self.color.rgb, 0.35), Finish.cover(pd, px))
    face = mix(face, face * 0.55, Finish.band(pd, 0.0, px, px))
    // The housing: the surround's shadow across the face from the top, the
    // black device pixel at the glass's edge, and the glass over it all.
    let insh = Finish.inset(p, c, hf, rf, vec2(0.0, 2.0), 1.8)
    face = face * (1.0 - 0.55 * insh)
    face = mix(face, face * 0.4, Finish.band(face_d, 0.0, px, px))
    let u = (p - (c - hf)) / max(hf * 2.0, vec2(1.0, 1.0))
    let diag = u.x + u.y * 0.6
    let band = smoothstep(0.0, 0.12, diag) * (1.0 - smoothstep(0.28, 0.5, diag))
    let top = Finish.cover(abs(p.y - (c.y - hf.y) - px * 1.5) - px * 0.5, px) * 0.6
    let ga = clamp(0.03 * (band + top), 0.0, 1.0) * Finish.cover(face_d + px, px)
    face = face * (1.0 - ga) + vec3(ga, ga, ga)
    let bz = self.color_bezel
    var col = vec4(bz.rgb * bz.a, bz.a)
    col = Finish.over(col, vec4(0.0, 0.0, 0.0, 0.45 * Finish.band(outer, 0.0, px, px)))
    col = mix(col, vec4(face, 1.0), Finish.cover(face_d, px))
    col = col * Finish.cover(outer, px)
    let lip = Finish.ring_out(outer, 0.0, px, px) * step(hi.y, p.y)
    let la = self.color_lip.a * lip
    return Finish.over(vec4(self.color_lip.rgb * la, la), col) * self.color.a * self.opacity
}

true