/* IP Planner on this site: maps the app's Nextcloud theme variables to the
   site's palette and supplies the button and input styles Nextcloud would. */

.tool .top { position: static; border-bottom: 1px solid var(--line); }
.tool-head { padding: 26px var(--gutter) 22px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; }
.tool-head h1 { font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.025em; }
.tool-head p { color: var(--muted); max-width: 70ch; }
.tool-note { padding: 18px var(--gutter); border-top: 1px solid var(--line); color: var(--dim); font-size: .82rem; }
.tool-note a { color: var(--skin); }

#ipplanner#ipplanner {
  --color-main-background: #000;
  --color-main-text: var(--ink);
  --color-text-maxcontrast: var(--muted);
  --color-border: var(--line);
  --color-border-dark: var(--line-2);
  --color-background-hover: #0c0f0b;
  --color-background-dark: #11140f;
  --color-primary-element-light: #171c13;
  --color-error: #d9796a;
  --color-error-text: #e59a8d;
  --color-warning: var(--amber);
  --color-warning-text: var(--amber);
  --color-box-shadow: rgb(0 0 0 / .7);
  --border-radius: 2px;
  --border-radius-large: 2px;
  --font-face: var(--sans);
  --ipp-error-strong: #a8402c;
  --ipp-error-tint: #2a1512;
  --ipp-net: #8fbf7a;
  --ipp-host: #d9a94e;
  height: auto;
  min-height: calc(100vh - 230px);
  font-size: .92rem;
}

#ipplanner h2, #ipplanner h3 { margin-top: 0; }
#ipplanner .ipp-empty h2, #ipplanner .ipp-calc-title { font-weight: 300; letter-spacing: -.02em; }
#ipplanner .ipp-nav h3, #ipplanner .ipp-label, #ipplanner .ipp-stat-label, #ipplanner .ipp-table th {
  font-family: var(--mono); font-weight: 400; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
}
#ipplanner .ipp-nav h3 { color: var(--dim); margin-top: 22px; }
#ipplanner a { color: var(--skin); }
#ipplanner .ipp-hint { font-size: .82rem; line-height: 1.5; }

#ipplanner button {
  font: 500 .74rem/1.2 var(--mono); letter-spacing: .06em; color: var(--ink);
  background: transparent; border: 1px solid var(--line-2); border-radius: 2px;
  padding: 8px 12px; min-height: 34px; cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
#ipplanner button:hover:not(:disabled) { border-color: var(--skin); color: var(--glint); }
#ipplanner button:disabled { opacity: .3; cursor: default; }
#ipplanner button.primary { background: var(--skin); border-color: var(--skin); color: #050604; }
#ipplanner button.primary:hover:not(:disabled) { background: var(--glint); border-color: var(--glint); color: #050604; }
#ipplanner .ipp-list-item { border: 0; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: .9rem; }
#ipplanner .ipp-list-item.ipp-active { box-shadow: inset 2px 0 0 var(--skin); }
#ipplanner .ipp-stepper button, #ipplanner .ipp-actions button { min-height: 0; padding: 2px 6px; letter-spacing: 0; }

#ipplanner input[type="text"], #ipplanner input[type="number"] {
  font: .9rem var(--sans); color: var(--ink); background: var(--panel);
  border: 1px solid var(--line-2); border-radius: 2px; padding: 7px 10px; min-height: 34px; box-sizing: border-box;
}
#ipplanner input.ipp-mono { font-family: var(--mono); font-size: .85rem; }
#ipplanner input[type="text"]:focus, #ipplanner input[type="number"]:focus { border-color: var(--skin); outline: none; }
#ipplanner input::placeholder { color: var(--dim); }
#ipplanner .ipp-table input[type="text"] { background: transparent; border-color: transparent; }
#ipplanner .ipp-table input[type="text"]:hover { border-color: var(--line-2); }
#ipplanner .ipp-table input[type="text"]:focus { border-color: var(--skin); background: var(--panel); }
#ipplanner input[type="range"], #ipplanner input[type="checkbox"], #ipplanner input[type="radio"] { accent-color: var(--skin); }
#ipplanner .ipp-name { font-size: 1.15rem; font-weight: 400; }
#ipplanner .ipp-kind { font: .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--skin); }
#ipplanner .ipp-stat-value { font-family: var(--mono); }
#ipplanner .ipp-parent { background: var(--panel); }
#ipplanner .ipp-toast { border-left: 2px solid var(--skin); }

/* ---------- IP calculator: keep the results still while the mask slider moves ----------
   The app sizes everything to its content, so each step of the slider re-flowed
   the figures and resized the table columns. Here the figures sit in fixed
   slots, the tables have fixed column widths, and the parts whose length
   changes with the mask are placed last. */

/* Figures: a fixed grid. The three that are always present come first, then
   Address type, then the ones that come and go, so nothing in front moves. */
#ipplanner .ipp-parent > .ipp-stats:only-child {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 28px;
  margin-top: 0; min-height: 6.6em; align-content: start;
}
#ipplanner .ipp-parent > .ipp-stats:only-child .ipp-stat { order: 2; min-width: 0; }
#ipplanner .ipp-parent > .ipp-stats:only-child .ipp-stat:nth-child(-n+3) { order: 0; }
#ipplanner .ipp-parent > .ipp-stats:only-child .ipp-stat:last-child { order: 1; }
#ipplanner .ipp-stat-value { overflow-wrap: anywhere; }

/* Tables: full width with fixed columns, so a longer or shorter address
   cannot resize them. */
#ipplanner .ipp-calc-table { table-layout: fixed; width: 100%; max-width: 1100px; }
#ipplanner .ipp-calc-table thead th:first-child { width: 290px; }
#ipplanner .ipp-calc-table thead th:nth-child(3):not(:last-child) { width: 34%; }
#ipplanner .ipp-calc-table td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
#ipplanner .ipp-calc-table th[scope="row"] { vertical-align: top; white-space: normal; padding-right: 18px; }
/* The reverse DNS row sometimes carries a note: always leave room for it. */
#ipplanner .ipp-calc-table tr:not(:has(td.ipp-wide)) + tr:has(td.ipp-wide) td { height: 6.2em; }

/* Order: the "Split into" table grows and shrinks with the mask, so it goes
   last, below "About this subnet". */
#ipplanner .ipp-calc-results { display: flex; flex-direction: column; }
#ipplanner .ipp-calc-results > .ipp-about { order: 1; min-height: 17em; }
#ipplanner .ipp-calc-results > .ipp-table-wrap:last-of-type { order: 2; }
#ipplanner .ipp-calc-results > p.ipp-hint { order: 3; }

@media (max-width: 900px) {
  #ipplanner .ipp-parent > .ipp-stats:only-child { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 13em; }
  #ipplanner .ipp-calc-table thead th:first-child { width: 130px; }
}

/* Calculator: "Network bits / Host bits" and its value line up on the slash.
   Label and value are each three pieces (left, slash, right) laid out on one
   three-column grid: left pieces end at the slash, right pieces start after it. */
#ipplanner .ipp-stat.ipp-stat-split { display: grid; grid-template-columns: auto auto auto; justify-content: start; column-gap: .55em; align-content: start; }
#ipplanner .ipp-stat-split > span { display: contents; }
#ipplanner .ipp-stat-split > span > span:first-child { text-align: right; }
#ipplanner .ipp-stat-split > span > span:nth-child(2) { text-align: center; }

/* Calculator: network bits are underlined as well as coloured, so the split
   between network and host does not depend on telling two colours apart.
   (Underline, not a larger size: the digits must stay in line from row to row.)
   The "Network bits / Host bits" figure above uses the same marking and so
   serves as the key. */
#ipplanner .ipp-bits { line-height: 2; }
#ipplanner .ipp-bits .ipp-net,
#ipplanner .ipp-stat-split > span > span:first-child {
  color: var(--ipp-net); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
#ipplanner .ipp-stat-split > span > span:nth-child(3) { color: var(--ipp-host); }
#ipplanner .ipp-calc-results > .ipp-parent:first-child { margin-bottom: 14px; }