/* Layout adapters for native server-rendered forms; visual tokens come from Control Room. */
a.button{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.topbar form{margin:0}.brand{text-decoration:none}.workspace h1{font:750 32px/1.12 var(--font-display);letter-spacing:-.025em;margin:4px 0}
.native-content{display:grid;gap:18px}.native-content>p{margin:0}.native-content>.card{overflow:hidden}
.native-content form:not(.topbar form){margin:0}.native-content label.field{margin:0 0 14px}
.native-content input[type=checkbox]{width:auto;margin-right:8px}.native-content label:has(input[type=checkbox]){display:block;font-weight:450}
.native-content fieldset{border:1px solid var(--border);border-radius:var(--r-card);padding:18px;margin:18px 0}
.native-content legend{font:700 15px var(--font-display);padding:0 6px}.native-content select{display:block;width:100%}
.native-content fieldset>select{padding:9px 11px;border:1px solid var(--field-border);border-radius:var(--r-input);background:var(--field-bg);color:var(--ink)}
.native-content .filters{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:14px;margin-top:14px}
.native-content .field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px}
.native-content .field-row>label.field{margin:0}
.native-content .notice{border-left:3px solid var(--info);padding:14px 16px;background:var(--subtle);border-radius:var(--r-input);overflow-wrap:anywhere}
.native-content .notice.error{border-left-color:var(--error);background:var(--danger-wash)}
.native-content .field input[aria-invalid="true"]{border-color:var(--error)}
.native-content dl{display:grid;grid-template-columns:minmax(130px,1fr) minmax(0,2fr);margin:0;gap:0}
.native-content dt,.native-content dd{margin:0;border-bottom:1px solid var(--border);padding:12px 0;overflow-wrap:anywhere}
.native-content dt{color:var(--muted);font-size:13px}.native-content dd{text-align:right}
.native-content nav.actions{justify-content:flex-start;align-items:center}.native-content nav.actions a{font-size:13px}
.native-content form>.button{margin-right:8px}.native-content form>p{color:var(--muted);font-size:13px}
.native-table-card{padding:0}.native-table-card>.section-heading{padding:18px 20px;margin:0}.native-table-card tbody tr:last-child td{border-bottom:0}
.native-summary{position:sticky;top:24px}.native-summary dl{grid-template-columns:1fr 1.4fr}.native-summary dt,.native-summary dd{font-size:13px}
.native-summary .button{width:100%;margin-top:18px}.native-summary h2{margin:6px 0 14px;overflow-wrap:anywhere}
.native-auth{max-width:560px}.native-auth .button{justify-self:start}.native-content .resource-link{text-decoration:none}
@media(max-width:1180px){.native-summary{position:static}}

.create-form .form-grid{margin:18px 0}.create-form .form-grid>fieldset{margin:0}.create-form .form-grid>p{grid-column:1/-1;margin:0;color:var(--muted)}.choice-filters{margin-top:12px;font-size:12px;color:var(--muted)}.choice-filters summary{cursor:pointer}.choice-filters .filters{grid-template-columns:minmax(0,1fr) 80px}
@media(max-width:720px){.create-form .form-grid{grid-template-columns:1fr}}
/* GIV-195: the VM form's vertical steps and image-source tabs. */
.create-toolbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.create-toolbar .field{flex:1 1 16rem}
.create-step{margin:0}.create-step-body{flex:1;min-width:0;display:grid;gap:12px}.create-step-body>p{margin:0}.create-step-body .form-grid{margin:0}
.create-image-tabs button{background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);padding:12px 15px 10px;font:inherit;font-weight:700;cursor:pointer}
.create-image-tabs button:hover{color:var(--ink)}.create-image-tabs button[aria-current=true]{border-bottom-color:var(--accent-text);color:var(--ink)}
.create-network-panel{padding:17px}.create-advanced summary{cursor:pointer;font-weight:700}.create-advanced[open]>*+*{margin-top:12px}
/* GIV-217/224: the native selection tables for offerings and key pairs. As in
   the native component, search is above and the page below; a long catalogue
   scrolls inside the table with its header kept in view. */
.create-table{display:grid;gap:8px;min-width:0}
.create-table-head{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap}
.create-table-label{font-size:13px;font-weight:680}
.create-table-search{flex:0 1 18rem}
.create-table-search input,.create-table-page input{width:100%;border:1px solid var(--field-border);border-radius:var(--r-input);padding:7px 10px;background:var(--field-bg);color:var(--ink);font:inherit;font-size:13px}
.create-table-rows{max-height:20rem;border:1px solid var(--border);border-radius:var(--r-input)}
.create-table-rows thead th{position:sticky;top:0;z-index:1}
.create-table-rows td{padding:9px 12px}
.create-table-rows th:first-child,.create-table-rows td:first-child{width:2.75rem;padding-right:0}
.create-table-rows tbody tr:last-child td{border-bottom:0}
.create-table-rows tr[data-select-row]{cursor:pointer}
.create-table-rows tr[data-select-row]:has(input:checked){background:var(--accent-wash)}
.native-content .create-table-rows input[type=radio],.native-content .create-table-rows input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--accent-text)}
.create-table-rows label{cursor:pointer;font-weight:620}
.create-table-foot{display:flex;justify-content:flex-end;align-items:center;gap:12px;font-size:12px;color:var(--muted)}
.create-table-page{display:flex;align-items:center;gap:6px}.create-table-page input{width:5.5rem;padding:5px 8px}
/* GIV-223: the native network step's two tables. The networks to attach have
   a normal-sized Create network button beside their search at the top, and
   their total, page and page size below; the selected networks' default, IP
   and MAC are set in the table under them, which is hidden while none is. */
.create-network-tools{justify-content:flex-end}
.create-network-tools .button{flex:0 0 auto}
.create-network-choice .create-table-foot{flex-wrap:wrap}
.native-content .create-table-page select{display:inline-block;width:auto;border:1px solid var(--field-border);border-radius:var(--r-input);padding:5px 8px;background:var(--field-bg);color:var(--ink);font:inherit;font-size:12px}
.create-network-config{display:grid;gap:8px;min-width:0}.create-network-config[hidden]{display:none}
.create-network-config>p{margin:0}
.create-network-config td input[name^="ip_"],.create-network-config td input[name^="mac_"]{width:100%;min-width:9rem;border:1px solid var(--field-border);border-radius:var(--r-input);padding:7px 9px;background:var(--field-bg);color:var(--ink)}
/* GIV-215/223: a manual IP or MAC on a selected network that the script's
   check refuses is marked as it is typed; empty means automatic. */
.create-network-config td input[aria-invalid="true"]{border-color:var(--error)}
/* GIV-225: the native Start Instance switch, drawn on the checkbox itself. Three
   classes deep to outrank `.native-content label:has(input[type=checkbox])`. */
.create-finish{display:grid;gap:10px}.create-finish>p{margin:0;font-size:13px}
.native-content .create-finish .create-start{display:inline-flex;align-items:center;gap:10px;font-weight:680;cursor:pointer;justify-self:start}
.native-content .create-finish .create-start input[type=checkbox]{appearance:none;flex:0 0 auto;width:36px;height:20px;margin:0;border-radius:var(--r-pill);background:var(--border-hover);position:relative;cursor:pointer;transition:background var(--transition)}
.create-start input::before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--knob);box-shadow:var(--shadow-knob);transition:transform var(--transition)}
.native-content .create-finish .create-start input:checked{background:var(--accent)}
.create-start input:checked::before{transform:translateX(16px);background:var(--accent-fg)}
/* GIV-216: every page shares one content column, centred beside the unchanged
   sidebar. It fills the workspace up to 1480px, then takes 70% of each further
   pixel so wide screens keep modest margins, and stops at 3780px (a viewport
   about 5120px wide); the percentage is of the workspace's content box. The top
   bar's padding must equal the workspace padding plus half the width the
   column leaves unused, so its breadcrumb and Sign out line up with the column.
   Its percentages are of the app body and its constants are coupled to the
   column's: change both together. */
.native-content{max-width:clamp(1480px,calc(70% + 444px),3780px);margin-inline:auto}
@media(min-width:1021px){
 .topbar{padding-inline:max(clamp(24px,2.7vw,46px),calc(15% + .7 * clamp(24px,2.7vw,46px) - 222px),calc(50% - 1890px))}
}
/* GIV-216: the VM form keeps its proportions on every screen. The summary's
   width follows the column's, from 340px to 520px, and a summary taller than
   the window scrolls by itself so its Create button stays reachable; a long
   unbroken VM name wraps in its heading. Below 1180px the summary follows the
   form, as before. */
@media(min-width:1181px){
 .create-layout{grid-template-columns:minmax(0,1fr) clamp(340px,22%,520px)}
 .native-summary{max-height:calc(100vh - 48px);overflow-y:auto}
}
/* GIV-216: on wide screens form fields keep a readable width instead of
   stretching with the column. Grids pack from the left in tracks of at most
   30rem: auto-fill counts tracks by that maximum, so two need 973px at a 16px
   root, and 18rem is only the floor a track shrinks to. A .span2 field keeps
   its whole row. A field alone on its row stops at 40rem. Tables, cards and
   the summary still use the whole column. These follow the rules they narrow,
   which have the same specificity. */
@media(min-width:2240px){
 .native-content .form-grid,.native-content .field-row{grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),30rem))}
 .native-content .form-grid>.span2{grid-column:1/-1}
 .create-toolbar .field{flex:0 1 40rem}
 .native-content :is(.create-step-body,.create-advanced,.stack,form)>label.field{max-width:40rem}
}
@media(max-width:720px){
 .create-form{padding:16px}
 .create-form .form-section{gap:10px}
 .create-table-search{flex:1 1 100%}
 .create-table-foot{justify-content:space-between}
}

/* Native network tabs use the existing Control Room tab treatment. */
.native-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);overflow-x:auto;white-space:nowrap}
.native-tabs a{border-bottom:3px solid transparent;color:var(--muted);padding:12px 15px 10px;font-weight:700;text-decoration:none}
.native-tabs a:hover{color:var(--ink)}.native-tabs a[aria-current=page]{border-bottom-color:var(--accent-text);color:var(--ink)}
.native-content form.filters>.button{align-self:center}

.network-rule-form [hidden]{display:none}
/* Three classes deep on purpose: `.native-content label:has(input[type=checkbox])`
   above sets display:block on exactly the reveal toggle's own label, and a
   two-class selector loses to it, leaving an inert checkbox visible on a page
   whose script never ran. */
.native-content .volume-attach-choice [hidden]{display:none}

/* GIV-187: the create-volume form opens over the volume list in a native
   <dialog>. Only the box and its backdrop are styled here; everything inside is
   the existing card, field and button treatment. The backdrop's veil is --scrim,
   which tokens.css sets on ::backdrop itself: an older browser does not hand it
   the tokens on :root. */
.native-dialog{border:0;padding:0;background:transparent;color:var(--ink);width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto}
.native-dialog[open]{display:grid;gap:18px}
.native-dialog::backdrop{background:var(--scrim)}
/* The heading is the box's first child, and the box itself is transparent, so
   without a surface of its own the eyebrow and title paint straight onto the
   dimmed page -- over that page's own breadcrumb, at a contrast no token
   guarantees. This is the card treatment, from the same tokens. */
.native-dialog .page-heading{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:20px}
.native-dialog h2{font:750 24px/1.15 var(--font-display);letter-spacing:-.02em;margin:4px 0}

/* Keep narrow screens within the viewport; only tables and tabs scroll. */
.native-content,.native-content .card,.native-content form{min-width:0}
@media(max-width:720px){
 .workspace{padding:20px 12px}.topbar{padding-inline:12px}
 .native-content h1{overflow-wrap:anywhere}
 .native-content .form-grid,.native-content .field-row,.native-content .filters{grid-template-columns:minmax(0,1fr)}
 .native-content dl{grid-template-columns:minmax(0,1fr)}
 .native-content dd{text-align:left}
 .native-content fieldset{min-width:0;padding:12px}
 .native-content .native-summary{position:static}
}

/* GIV-209: the workspace card is the way into Projects. It keeps the GIV-204
   card and its scoped state; only the link treatment is added. In the collapsed
   rail it becomes an icon entry, with its text kept for assistive technology. */
.sidebar-context.workspace-card{color:inherit;text-decoration:none;transition:border-color var(--transition),background var(--transition)}
.sidebar-context.workspace-card:hover{border-color:var(--border-hover)}
.sidebar-context.workspace-card.scoped:hover{border-color:var(--accent-text-strong)}
.sidebar-context.workspace-card[aria-current="page"]{box-shadow:inset 3px 0 0 var(--accent-text)}
.workspace-icon{display:none}
/* GIV-235 S12: the way into Projects is drawn as a button. The whole card is the
   link and a link cannot hold another, so the control is a span styled as one: a
   border, a folder, the label and a chevron, with a hover that follows the card.
   Inside a project (.scoped) it is filled with the accent wash and the name above
   it is the active project, which is the card's active state. Tokens only. */
.sidebar-context .workspace-action{display:flex;align-items:center;gap:8px;margin-top:8px;padding:6px 10px;border:1px solid var(--border-hover);border-radius:var(--r-btn);background:var(--surface);color:var(--ink);font:650 13px/1.3 var(--font-body);transition:background var(--transition),border-color var(--transition),color var(--transition)}
.workspace-action .workspace-folder,.workspace-action .workspace-chevron{display:grid;flex:0 0 auto}
.workspace-action svg{display:block;width:16px;height:16px}
.workspace-action .workspace-hint{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.workspace-card:hover .workspace-action{border-color:var(--accent-text);color:var(--accent-text-strong)}
.workspace-card.scoped .workspace-action{border-color:var(--accent-text);background:var(--accent-wash);color:var(--accent-text-strong);font-weight:700}
.workspace-card.scoped:hover .workspace-action{border-color:var(--accent-strong);background:var(--accent);color:var(--accent-fg)}
.breadcrumb .scope-crumb{color:inherit;text-decoration:none}
.breadcrumb .scope-crumb:hover{color:var(--ink);text-decoration:underline}
@media(max-width:1020px){
 .sidebar-context.workspace-card{display:grid;place-items:center;min-height:0;margin:18px 0 0;padding:9px;border-radius:11px}
 .sidebar-context.workspace-card>:not(.workspace-icon){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .sidebar-context.workspace-card .workspace-icon{display:grid;width:32px;height:32px}
}

/* GIV-208: Dashboard counters use the Control Room metric cards and meters. */
.dashboard-counts{margin-bottom:0}
a.metric-card{color:inherit;text-decoration:none}
a.metric-card[href]:hover{border-color:var(--border-hover)}
.dashboard-usage-row{display:grid;gap:6px}
.dashboard-usage-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.dashboard-usage-head span{color:var(--muted);font-size:13px;text-align:right}
.dashboard-usage-row>p{margin:0;font-size:12px}
@media(max-width:720px){.dashboard-grid{grid-template-columns:minmax(0,1fr)}}

/* GIV-220: a list row's actions are small round icon buttons, as in the native
   list's QuickView popover. A usable one is a link to the action's own page; a
   greyed one does not apply to its row, cannot be used, and its title says why.
   Delete is drawn as a danger button, as native draws it. */
.row-actions{display:inline-flex;gap:6px;vertical-align:middle;white-space:nowrap}
.row-action{display:inline-grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--ink);text-decoration:none;transition:background var(--transition),border-color var(--transition)}
.row-action svg{width:17px;height:17px}
a.row-action[href]:hover{background:var(--subtle);border-color:var(--border-hover)}
a.row-action[href]:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.row-action.danger{color:var(--danger-ink);border-color:var(--danger-border)}
a.row-action.danger[href]:hover{background:var(--danger-wash);border-color:var(--danger-border-hover)}
.row-action[aria-disabled="true"]{color:var(--muted);background:var(--subtle);opacity:.5;cursor:not-allowed}

/* GIV-219: each sidebar section is a <details> group. Its toggle keeps the
   section heading's look and adds a chevron for its state. A closed group that
   holds the current page is marked the way that page's entry is. */
.nav-group-toggle{position:relative;display:block;min-height:32px;padding:7px 34px 7px 12px;border-radius:9px;color:var(--muted);cursor:pointer;list-style:none}
.nav-group-toggle::-webkit-details-marker{display:none}
.nav-group-toggle::after{content:"";position:absolute;top:50%;right:15px;width:6px;height:6px;margin-top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--transition)}
.nav-group:not([open])>.nav-group-toggle::after{transform:rotate(-45deg)}
.nav-group-toggle:hover{background:var(--hover);color:var(--ink)}
.nav-group-toggle .nav-icon{display:none}
.nav-group-toggle .nav-section-label{display:block;padding:0;color:inherit}
.nav-group:has(a[aria-current="page"])>.nav-group-toggle{color:var(--ink)}
.nav-group:not([open]):has(a[aria-current="page"])>.nav-group-toggle{background:var(--subtle);box-shadow:inset 3px 0 0 var(--accent-text)}
.nav-group-items{display:grid;gap:3px;margin-top:3px}
/* In the icon rail a group is one icon, named for assistive technology by its
   visually hidden label. Without sidebar.js an open group lists its entries'
   icons below it. With it, an open group is a flyout beside its icon that shows
   each entry's label, and an icon's name appears beside it on hover or keyboard
   focus. Both are fixed so the scrolling rail cannot clip them, and the script
   places them; the raised rail keeps them above the page. */
@media(max-width:1020px){
 .sidebar{z-index:30}
 .nav-group-toggle{min-height:42px;padding:9px;border-radius:11px}
 .nav-group-toggle::after{display:none}
 .nav-group-toggle .nav-icon{display:grid;width:32px;height:32px;margin:0 auto}
 .nav-group-toggle .nav-section-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .nav[data-nav-flyouts] .nav-group:has(a[aria-current="page"])>.nav-group-toggle{background:var(--subtle);box-shadow:inset 3px 0 0 var(--accent-text)}
 .nav-group-items{gap:8px;margin-top:8px}
 .nav[data-nav-flyouts] .nav-group-items{position:fixed;top:var(--nav-top,8px);left:var(--nav-left,94px);z-index:1;gap:3px;width:max-content;min-width:12rem;max-width:min(18rem,calc(100vw - var(--nav-left,94px) - 12px));max-height:calc(100vh - 16px);overflow-y:auto;margin:0;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-lift)}
 .nav[data-nav-flyouts] .nav-group-items a{justify-content:flex-start;padding:9px 11px}
 .nav[data-nav-flyouts] .nav-group-items .nav-icon{width:23px;height:23px}
 .nav[data-nav-flyouts] .nav-group-items .nav-label{display:inline}
 .nav[data-nav-flyouts] .nav-group:not([open]):not([data-nav-tip-hidden])>.nav-group-toggle:focus-visible .nav-section-label{position:fixed;top:var(--nav-mid,50%);left:var(--nav-left,94px);z-index:2;width:auto;height:auto;overflow:visible;clip:auto;transform:translateY(-50%);padding:5px 9px;border-radius:7px;background:var(--ink);color:var(--surface);font-size:12px;font-weight:650;letter-spacing:.02em;text-transform:none}
}
/* A pointer can reach the name without it closing: the gap to the icon is part
   of the name's box. Touch screens get no hover name; a tap opens the flyout. */
@media(max-width:1020px) and (hover:hover){
 .nav[data-nav-flyouts] .nav-group:not([open]):not([data-nav-tip-hidden])>.nav-group-toggle:hover .nav-section-label{position:fixed;top:var(--nav-mid,50%);left:var(--nav-left,94px);z-index:2;width:auto;height:auto;overflow:visible;clip:auto;transform:translateY(-50%);padding:5px 9px;border-radius:7px;background:var(--ink);color:var(--surface);font-size:12px;font-weight:650;letter-spacing:.02em;text-transform:none}
 .nav[data-nav-flyouts] .nav-group:not([open])>.nav-group-toggle:hover .nav-section-label::before{content:"";position:absolute;top:0;right:100%;bottom:0;width:24px}
}
/* GIV-235 S1: the badge colours of native Status.vue that the classes in
   control-room.css do not cover. processing is ant-design's blue status, and
   blue (scheduled) and orange (reserved) are the two getStatusColor presets.
   They follow the existing badge pattern: a tinted surface, a dot in the hue
   and text darkened towards ink. Every colour comes from the status tokens,
   and orange is the hue midway between warning and error. */
.badge.processing,.badge.blue{--badge-hue:var(--info)}
.badge.orange{--badge-hue:color-mix(in srgb,var(--warning),var(--error))}
.badge.processing,.badge.blue,.badge.orange{background:color-mix(in srgb,var(--badge-hue) 10%,var(--surface));color:color-mix(in srgb,var(--badge-hue) 50%,var(--ink))}
.badge.processing::before,.badge.blue::before,.badge.orange::before{background:var(--badge-hue)}
/* GIV-235 S2: the shared list toolbar. One wrapping row holds a list's filter
   form on the left and, on the right (.list-toolbar-actions), its Refresh,
   primary action and selection actions. .list-hint is the small note under it.
   Layout only: the one colour is the muted token, so it follows the theme. */
.list-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px}
.list-toolbar>form,.list-toolbar-actions{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;min-width:0}
.list-toolbar>form{flex:1 1 30rem}
.list-toolbar-actions{margin-left:auto}
.native-content .list-toolbar label.field{flex:0 1 10rem;min-width:8rem;margin:0}
.native-content .list-toolbar label.field.grow{flex:1 1 13rem;max-width:22rem}
.native-content .list-toolbar form>.button{margin-right:0}
.list-hint{margin:0;font-size:var(--caption);color:var(--muted)}
.list-toolbar+.list-hint{margin-top:-8px}
@media(max-width:720px){.list-toolbar>form,.list-toolbar-actions{flex:1 1 100%}.native-content .list-toolbar label.field,.native-content .list-toolbar label.field.grow{flex:1 1 100%;max-width:none}}
/* GIV-235 S3: the shared pagination footer (paging.go). One wrapping row: the
   "Showing X-Y of Z" text, the numbered pages, and the page sizes pushed to the
   right. A page and a size are the same small control; the current one is filled
   with the accent. Layout and theme tokens only, so it follows the theme. */
.paging{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.paging-summary{margin:0;font-size:var(--small);color:var(--muted)}
.paging-pages,.paging-sizes{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.paging-sizes{margin-left:auto}
.paging-label,.paging-gap{font-size:var(--small);color:var(--muted)}
.paging-page{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;padding:0 8px;box-sizing:border-box;border:1px solid var(--border);border-radius:var(--r-btn);background:var(--surface);color:var(--ink);font-size:13px;font-weight:650;text-decoration:none}
a.paging-page:hover{border-color:var(--border-hover);background:var(--subtle)}
.paging-page.current{border-color:var(--accent);background:var(--accent);color:var(--accent-fg)}
.paging-pages .button.compact{height:2.25rem;box-sizing:border-box}
@media(max-width:720px){.paging-sizes{margin-left:0}}
/* GIV-235 S4: the recent-operations button in an origin page's heading and the
   dialog it opens. The dialog is the shared .native-dialog box, wider for its
   four-column table; the button is a ghost button with a small count. Tokens
   only, so it follows the theme. */
.operations-dialog{width:min(760px,calc(100vw - 32px))}
.operations-dialog .page-heading{align-items:flex-start}
.operations-trigger{gap:8px}
.operations-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 6px;box-sizing:border-box;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-fg);font-size:var(--caption);font-weight:700;line-height:1}
.operations-count.warn{background:var(--warning);color:var(--dark-bg)}
/* GIV-235 S5: a machine's Start, Stop, Reboot or Delete confirmation opens over
   the VM list or its detail page in the shared .native-dialog box. The server
   renders it open, so a page whose script never ran still shows it: until
   dialog.js makes it a modal one (:modal), it sits in the flow of the page above
   what it asks about instead of floating over the rows. Tokens only. */
.vm-confirm-dialog[open]:not(:modal){position:static;margin:0 0 18px}
/* GIV-235 S11a: a list's create form is the same kind of dialog. The server
   draws it open, so a page whose script never ran still shows the form, in the
   flow of the page under the list as the inline form always was. dialog.js
   closes it and shows its close button, which stays hidden until then so a page
   without the script has no button that does nothing. Tokens only. */
.form-dialog[open]:not(:modal){position:static;margin:0 0 18px}
.form-dialog [data-dialog-close][hidden]{display:none}
/* GIV-235 S11b: a toolbar menu (list_layout.go, listMenu) is a <details>. Its
   summary is a button with a chevron, and its links open in a small panel under
   it, aligned to the button's right edge. It needs no script. Tokens only, so it
   follows the theme. */
.menu{position:relative}
.menu>summary{display:inline-flex;align-items:center;gap:8px;list-style:none}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:"";width:.4em;height:.4em;margin-top:-.2em;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.menu[open]>summary::after{margin-top:.2em;transform:rotate(-135deg)}
.menu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:20;display:grid;min-width:13rem;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-lift)}
.menu-list a{padding:9px 12px;border-radius:var(--r-btn);color:var(--ink);font-weight:650;text-decoration:none;white-space:nowrap}
.menu-list a:hover,.menu-list a:focus-visible{background:var(--subtle)}
/* GIV-235 S14: the top bar's profile menu (profile_menu.go) is that same menu,
   with an icon and the word "Account" on its button. Its items are links and the
   one Sign out form, whose button is drawn like a link and set apart by a rule
   when a visible item comes before it. A closed menu that holds the current page is
   marked as a collapsed sidebar group is. Below 720px only the icon shows and the
   word stays for assistive technology. Tokens only, so it follows the theme. */
.menu-list button{width:100%;padding:9px 12px;border:0;border-radius:var(--r-btn);background:transparent;color:var(--ink);font-weight:650;text-align:left;white-space:nowrap;cursor:pointer}
.menu-list button:hover,.menu-list button:focus-visible{background:var(--subtle)}
.menu-list>:not([hidden])~form{margin-top:6px;padding-top:6px;border-top:1px solid var(--border)}
.profile-icon{display:grid;place-items:center;width:20px;height:20px}
.profile-icon svg{width:20px;height:20px}
.profile-menu:not([open]):has(a[aria-current="page"])>summary{background:var(--subtle);border-color:var(--accent-text);color:var(--ink)}
@media(max-width:720px){.profile-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
/* GIV-235 S14b: the Use local timezone switch in that menu (local-time.js). The
   server draws it hidden and the script shows it. It is the checkbox drawn as a
   switch, as the VM form's Start switch is, on tokens only. */
.menu-list .menu-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 12px;border-radius:var(--r-btn);color:var(--ink);font-weight:650;white-space:nowrap;cursor:pointer}
.menu-list .menu-switch[hidden]{display:none}
.menu-list .menu-switch:hover{background:var(--subtle)}
.menu-switch input{appearance:none;flex:0 0 auto;width:36px;height:20px;margin:0;border-radius:var(--r-pill);background:var(--border-hover);position:relative;cursor:pointer;transition:background var(--transition)}
.menu-switch input::before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--knob);transition:transform var(--transition)}
.menu-switch input:checked{background:var(--accent)}
.menu-switch input:checked::before{transform:translateX(16px);background:var(--accent-fg)}
/* GIV-235 S17: the Appearance menu beside the profile menu (theme.go, theme.js).
   The server draws it hidden and the script shows it, as it does the timezone
   switch. Its Theme choice is a fieldset of three radios. Tokens only. */
.appearance-menu[hidden]{display:none}
.menu-list .menu-choice{margin:0;min-width:0;padding:6px 12px 8px;border:0}
.menu-choice legend{padding:0 0 4px;color:var(--muted);font-size:var(--caption);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.menu-choice label{display:flex;align-items:center;gap:10px;padding:6px 0;color:var(--ink);font-weight:650;white-space:nowrap;cursor:pointer}
.menu-choice input{flex:0 0 auto;width:16px;height:16px;margin:0;accent-color:var(--accent-text)}
/* GIV-235 S9a: the VM detail page. Two columns, as native draws InfoCard beside
   its tabs: the information card and tags on the left, the rest on the right.
   The machine's icon row sits in the heading beside the operations button; the
   round buttons are the list rows' (.row-action), and the console one is a POST
   form button rather than a link. Tokens only, so it follows the theme.
   GIV-235 S13b: the network's and the address's detail pages use the same
   arrangement under the generic .detail-* names. */
.vm-detail,.detail-columns{grid-template-columns:minmax(18rem,.42fr) minmax(0,1fr)}
.vm-detail-side,.vm-detail-main,.detail-side,.detail-main{display:grid;gap:15px;align-content:start;min-width:0}
.vm-actions,.detail-actions{align-items:center;justify-content:flex-end;gap:8px 12px}
.vm-actions .row-actions,.detail-actions .row-actions{flex-wrap:wrap;white-space:normal}
.row-action-form{display:inline-flex;margin:0}
button.row-action{padding:0;font:inherit;cursor:pointer}
button.row-action:hover:not(:disabled){background:var(--subtle);border-color:var(--border-hover)}
button.row-action:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
button.row-action:disabled{color:var(--muted);background:var(--subtle);opacity:.5;cursor:not-allowed}
@media(max-width:1180px){.vm-detail,.detail-columns{grid-template-columns:minmax(0,1fr)}}

/* GIV-235 S9b: the strip of a machine's pages reuses .native-tabs. Every entry is
   a link to a page, none switches in place, and the arrow marks an entry that
   leaves the machine's own pages for another page filtered to it. */
.vm-tabs .tab-out{margin-left:5px;font-size:var(--caption);font-weight:400;color:var(--muted)}

/* GIV-235 S10: the Metrics tab's period bar and server-drawn charts. Colours are
   the semantic tokens. The three series classes also differ in line style (the
   second and third are dashed; one chart never holds both) so a line is not told
   apart by colour alone. The green is darkened to keep 3:1 against the card. */
.vm-metric-controls{display:grid;gap:14px}
.vm-metric-ranges{display:flex;flex-wrap:wrap;gap:8px}
.vm-metric-ranges a{text-decoration:none}
.vm-metric-period{margin:0}
.vm-chart{margin:0;display:grid;gap:12px;min-width:0}
.vm-chart figcaption{display:grid;gap:2px}
.vm-chart figcaption strong{font:700 16px var(--font-display)}
.vm-chart figcaption .muted{font-size:13px}
.vm-chart-svg{display:block;width:100%;height:auto}
.vm-chart-svg text{fill:var(--muted);font:11px var(--font-body)}
.vm-chart-grid{stroke:var(--border);stroke-width:1}
.vm-chart-axis{stroke:var(--border-hover);stroke-width:1}
.vm-chart-c0{--series:var(--info)}
.vm-chart-c1{--series:color-mix(in srgb,var(--success) 72%,var(--ink));stroke-dasharray:7 4}
.vm-chart-c2{--series:var(--error);stroke-dasharray:7 4}
.vm-chart-line{fill:none;stroke:var(--series);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vm-chart-dot{fill:var(--series);stroke:none}
.vm-chart-swatch{width:26px;height:12px;vertical-align:middle}
.vm-chart .table-wrap th[scope=row]{white-space:nowrap}
/* GIV-235 S11d: in the project choice the row of the project the panel is working
   in is tinted, as a selected row is in the create tables; the "Current" badge
   still says it in words. Tokens only. */
.native-table-card tr.current-row{background:var(--accent-wash)}